npm - @neo4j-ndl/react - Versions diffs - 4.1.5 → 4.1.7 - Mend

@neo4j-ndl/react 4.1.5 → 4.1.7

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 (525) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n /* The spotlight header content /\n children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-header', className);\n\n return (\n <Typography\n variant=\"title-4\"\n ref={ref}\n as={as ?? 'div'}\n className={classes}\n style={style}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n /* The spotlight body content /\n children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-body', className);\n\n return (\n <Typography\n variant=\"body-medium\"\n className={classes}\n as={as ?? 'div'}\n style={style}\n ref={ref}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n React.ComponentProps<typeof StatusLabel>,\n 'color' \| 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n className,\n children,\n hasIcon,\n as,\n style,\n htmlAttributes,\n ref,\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-label', className);\n\n return (\n <StatusLabel\n fill=\"semi-filled\"\n variant=\"discovery\"\n hasIcon={hasIcon}\n ref={ref}\n as={as}\n className={classes}\n style={style}\n {...htmlAttributes}\n >\n {children}\n </StatusLabel>\n );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n /* A string that represents the URL of the image /\n src: string;\n /* A string that represents the alt text of the image /\n alt: string;\n};\n\nconst SpotlightImage = ({\n src,\n alt,\n className,\n style,\n htmlAttributes,\n ref,\n}: CommonProps<'img', SpotlightImageProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n return (\n <img\n src={src}\n alt={alt}\n ref={ref}\n className={classes}\n style={style}\n {...htmlAttributes}\n />\n );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n /* Content displayed in the icon wrapper /\n children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-icon-wrapper', className);\n const Component = as ?? 'div';\n\n return (\n <Component ref={ref} className={classes} style={style} {...htmlAttributes}>\n {children}\n </Component>\n );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' \| 'escapeKeyDown';\n\nexport type SpotlightProps = {\n /* The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to /\n target: string;\n /* The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. /\n actions?: React.ReactNode;\n /* A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour /\n beforeActions?: React.ReactNode;\n /* A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") /\n onClose?: (action: SpotlightCloseAction) => void;\n /* Callback function called when the spotlight is opened /\n onOpen?: () => void;\n /* Children should be Spotlight subcomponents */\n children?: React.ReactNode;\n} & Pick<\n React.ComponentProps<typeof Popover>,\n 'placement' \| 'initialFocus' \| 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n target,\n beforeActions,\n actions,\n initialFocus,\n onClose,\n placement,\n children,\n className,\n style,\n htmlAttributes,\n closeOnClickOutside = false,\n onOpen,\n ref,\n}: CommonProps<'div', SpotlightProps>) => {\n const [targetElement, setTargetElement] = useState<HTMLElement \| null>(null);\n const actionsRef = useRef<HTMLDivElement \| null>(null);\n\n const {\n isActiveSpotlight,\n isOpen,\n setActiveSpotlight,\n setIsOpen,\n registeredTargets,\n hasOverlay,\n } = useSpotlightContext();\n\n const onOpenChange = (isOpen: boolean, event?: Event) => {\n if (!isOpen) {\n if (event instanceof PointerEvent) {\n onClose?.('clickOutside');\n } else if (event instanceof KeyboardEvent) {\n onClose?.('escapeKeyDown');\n }\n setActiveSpotlight(null);\n setIsOpen(false);\n }\n };\n\n const spotlight = useSpotlight({\n anchorElement: targetElement,\n closeOnClickOutside,\n initialFocus,\n isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n });\n\n const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n const classes = classNames('ndl-spotlight', themeClassName, className);\n\n useEffect(() => {\n setTargetElement(registeredTargets[target]?.current);\n }, [target, registeredTargets]);\n\n useEffect(() => {\n if (isOpen && isActiveSpotlight(target)) {\n onOpen?.();\n }\n }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n const findInitialFocus = () => {\n if (spotlight.initialFocus !== undefined) {\n return spotlight.initialFocus;\n }\n if (!actionsRef.current) return undefined;\n const focusableEls = actionsRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n return focusableEls.length - 1;\n };\n\n if (!spotlight.context.open) return null;\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={spotlight.context}\n modal={true}\n initialFocus={findInitialFocus()}\n >\n <>\n {hasOverlay === true && (\n <FloatingOverlay\n className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n onPointerDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n onTouchStart={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n />\n )}\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...spotlight.floatingStyles,\n ...spotlight.transitionStyles,\n ...style,\n }}\n {...spotlight.getFloatingProps({ ...htmlAttributes })}\n >\n <div>{children}</div>\n {(Boolean(beforeActions) \|\| Boolean(actions)) && (\n <div className=\"ndl-spotlight-footer\">\n <Typography variant=\"body-medium\">{beforeActions}</Typography>\n {Boolean(actions) && (\n <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n {actions}\n </div>\n )}\n </div>\n )}\n </div>\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n Body: SpotlightBody,\n Header: SpotlightHeader,\n IconWrapper: SpotlightIconWrapper,\n Image: SpotlightImage,\n Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}
1	+ {"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n /* The spotlight header content /\n children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-header', className);\n\n return (\n <Typography\n variant=\"title-4\"\n ref={ref}\n as={as ?? 'div'}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n /* The spotlight body content /\n children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-body', className);\n\n return (\n <Typography\n variant=\"body-medium\"\n className={classes}\n as={as ?? 'div'}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n React.ComponentProps<typeof StatusLabel>,\n 'color' \| 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n className,\n children,\n hasIcon,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-label', className);\n\n return (\n <StatusLabel\n fill=\"semi-filled\"\n variant=\"discovery\"\n hasIcon={hasIcon}\n ref={ref}\n as={as}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </StatusLabel>\n );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n /* A string that represents the URL of the image /\n src: string;\n /* A string that represents the alt text of the image /\n alt: string;\n};\n\nconst SpotlightImage = ({\n src,\n alt,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'img', SpotlightImageProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n return (\n <img\n src={src}\n alt={alt}\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n />\n );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n /* Content displayed in the icon wrapper /\n children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-icon-wrapper', className);\n const Component = as ?? 'div';\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' \| 'escapeKeyDown';\n\nexport type SpotlightProps = {\n /* The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to /\n target: string;\n /* The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. /\n actions?: React.ReactNode;\n /* A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour /\n beforeActions?: React.ReactNode;\n /* A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") /\n onClose?: (action: SpotlightCloseAction) => void;\n /* Callback function called when the spotlight is opened /\n onOpen?: () => void;\n /* Children should be Spotlight subcomponents */\n children?: React.ReactNode;\n} & Pick<\n React.ComponentProps<typeof Popover>,\n 'placement' \| 'initialFocus' \| 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n target,\n beforeActions,\n actions,\n initialFocus,\n onClose,\n placement,\n children,\n className,\n style,\n htmlAttributes,\n closeOnClickOutside = false,\n onOpen,\n ref,\n ...restProps\n}: CommonProps<'div', SpotlightProps>) => {\n const [targetElement, setTargetElement] = useState<HTMLElement \| null>(null);\n const actionsRef = useRef<HTMLDivElement \| null>(null);\n\n const {\n isActiveSpotlight,\n isOpen,\n setActiveSpotlight,\n setIsOpen,\n registeredTargets,\n hasOverlay,\n } = useSpotlightContext();\n\n const onOpenChange = (isOpen: boolean, event?: Event) => {\n if (!isOpen) {\n if (event instanceof PointerEvent) {\n onClose?.('clickOutside');\n } else if (event instanceof KeyboardEvent) {\n onClose?.('escapeKeyDown');\n }\n setActiveSpotlight(null);\n setIsOpen(false);\n }\n };\n\n const spotlight = useSpotlight({\n anchorElement: targetElement,\n closeOnClickOutside,\n initialFocus,\n isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n });\n\n const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n const classes = classNames('ndl-spotlight', themeClassName, className);\n\n useEffect(() => {\n setTargetElement(registeredTargets[target]?.current);\n }, [target, registeredTargets]);\n\n useEffect(() => {\n if (isOpen && isActiveSpotlight(target)) {\n onOpen?.();\n }\n }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n const findInitialFocus = () => {\n if (spotlight.initialFocus !== undefined) {\n return spotlight.initialFocus;\n }\n if (!actionsRef.current) {\n return undefined;\n }\n const focusableEls = actionsRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n return focusableEls.length - 1;\n };\n\n if (!spotlight.context.open) {\n return null;\n }\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={spotlight.context}\n modal={true}\n initialFocus={findInitialFocus()}\n >\n <>\n {hasOverlay === true && (\n <FloatingOverlay\n className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n onPointerDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n onTouchStart={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n />\n )}\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...spotlight.floatingStyles,\n ...spotlight.transitionStyles,\n ...style,\n }}\n {...spotlight.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n <div>{children}</div>\n {(Boolean(beforeActions) \|\| Boolean(actions)) && (\n <div className=\"ndl-spotlight-footer\">\n <Typography variant=\"body-medium\">{beforeActions}</Typography>\n {Boolean(actions) && (\n <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n {actions}\n </div>\n )}\n </div>\n )}\n </div>\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n Body: SpotlightBody,\n Header: SpotlightHeader,\n IconWrapper: SpotlightIconWrapper,\n Image: SpotlightImage,\n Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}

package/lib/cjs/spotlight/SpotlightProvider.js CHANGED Viewed

@@ -92,8 +92,9 @@ const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransparent =
         return 0;
     }, [active, targets]);
     const getMaskStyle = () => {
-        if (!targetRect || isOverlayTransparent)
+        if (!targetRect || isOverlayTransparent) {
             return {};
+        }
         const { left, top, width, height } = targetRect;
         const x = Math.max(0, left);
         const y = Math.max(0, top);
@@ -126,11 +127,13 @@ const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransparent =
     /** useEffect to update the target rect, so that the mask tracks the target element */
     (0, react_2.useEffect)(() => {
         var _a;
-        if (active == null)
+        if (active === null) {
             return;
+        }
         const el = (_a = targets[active]) === null || _a === void 0 ? void 0 : _a.current;
-        if (el === null || el === undefined)
+        if (el === null || el === undefined) {
             return;
+        }
         const update = () => setTargetRect(el.getBoundingClientRect());
         update();
         const ro = new ResizeObserver(update);

package/lib/cjs/spotlight/SpotlightProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAAqE;AACrE,4DAAoC;AAEpC,iCAOe;AA8Bf,MAAM,gBAAgB,GAAG,IAAA,qBAAa,EAA8B,IAAI,CAAC,CAAC;AAEnE,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,oBAAoB,GAAG,KAAK,GACL,EAAE,EAAE;IAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAEpC,EAAE,CAAC,CAAC;IACN,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAiB,IAAI,CAAC,CAAC;IAEnE,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,EAAU,EAAE,GAAiC,EAAE,EAAE;QAChD,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAG,CAAC,CAAC;IACjD,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,CAAC,EAAU,EAAE,EAAE;QAClD,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,MAAM,UAAU,qBAAQ,IAAI,CAAE,CAAC;YAC/B,OAAO,UAAU,CAAC,EAAE,CAAC,CAAC;YACtB,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,sDAAsD;IACtD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IACE,MAAM,KAAK,IAAI;YACf,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS;YAC7B,CAAA,MAAA,OAAO,CAAC,MAAM,CAAC,0CAAE,OAAO,MAAK,IAAI,EACjC,CAAC;YACD,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;YACxC,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAC7C,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAyB;QACzC,UAAU;QACV,iBAAiB,EAAE,IAAA,mBAAW,EAC5B,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,KAAK,MAAM,EACrC,CAAC,MAAM,CAAC,CACT;QACD,MAAM;QACN,cAAc;QACd,iBAAiB,EAAE,OAAO;QAC1B,kBAAkB,EAAE,IAAA,mBAAW,EAC7B,CAAC,MAAqB,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAC5C,EAAE,CACH;QACD,SAAS,EAAE,IAAA,mBAAW,EAAC,CAAC,IAAa,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9D,gBAAgB;KACjB,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE;QACzD,8BAA8B,EAAE,CAAC,oBAAoB;QACrD,4BAA4B,EAAE,MAAM,IAAI,MAAM,KAAK,IAAI;KACxD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAExD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,cAAc,CAAC,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,gDAAgD;IAChD,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;;QACrC,IACE,MAAM,KAAK,IAAI;YACf,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS;YAC7B,CAAA,MAAA,OAAO,CAAC,MAAM,CAAC,0CAAE,OAAO,MAAK,IAAI,EACjC,CAAC;YACD,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;YACxC,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC;YAEhD,2DAA2D;YAC3D,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;YAC7C,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAC9C,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,UAAU,IAAI,oBAAoB;YAAE,OAAO,EAAE,CAAC;QAEnD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QAEhD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QAC5B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAC9B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAErE,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;QAC7B,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;QAE9B,gEAAgE;QAChE,MAAM,GAAG,GAAG;uDACuC,EAAE,aAAa,EAAE,kBAAkB,EAAE,IAAI,EAAE;;;uCAG3D,EAAE,aAAa,EAAE;uBACjC,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC;;;mCAG7C,EAAE,aAAa,EAAE;aACvC,CAAC,IAAI,EAAE,CAAC;QAEjB,MAAM,OAAO,GAAG,2BAA2B,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;QAErE,OAAO;YACL,eAAe,EAAE,QAAQ,OAAO,IAAI;YACpC,gBAAgB,EAAE,WAAW;YAC7B,cAAc,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI;YACjC,SAAS,EAAE,QAAQ,OAAO,IAAI;YAC9B,UAAU,EAAE,WAAW;YACvB,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI;SACL,CAAC;IAC3B,CAAC,CAAC;IAEF,sFAAsF;IACtF,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,MAAM,IAAI,IAAI;YAAE,OAAO;QAE3B,MAAM,EAAE,GAAG,MAAA,OAAO,CAAC,MAAM,CAAC,0CAAE,OAAO,CAAC;QACpC,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,SAAS;YAAE,OAAO;QAE5C,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC/D,MAAM,EAAE,CAAC;QAET,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QACtC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE1C,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,wBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,aAC3C,UAAU,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,IAAI,CAC1C,uBAAC,sBAAc,cACb,uBAAC,uBAAe,IACd,UAAU,EAAE,IAAI,EAChB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,YAAY,EAAE,iBACT,uBAAuB,GACnC,GACa,CAClB,EACA,QAAQ,IACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AApKW,QAAA,iBAAiB,qBAoK5B;AAEK,MAAM,mBAAmB,GAAG,GAAyB,EAAE;IAC5D,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,gBAAgB,CAAC,CAAC;IAE7C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAVW,QAAA,mBAAmB,uBAU9B","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 { FloatingOverlay, FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ntype SpotlightProviderProps = {\n /* The app/screen content to wrap /\n children: React.ReactNode;\n /* A boolean that decides if there is a gray overlay when a spotlight is open. /\n hasOverlay?: boolean;\n /* If the overlay should be transparent /\n isOverlayTransparent?: boolean;\n};\n\ntype SpotlightContextType = {\n /* A boolean that indicates if a spotlight is open /\n isOpen: boolean;\n /* A function that can be used to close or open the spotlight /\n setIsOpen: (arg: boolean) => void;\n /* A function that can be used to check if a spotlight is active. It takes a target id as an argument /\n isActiveSpotlight: (target: string) => boolean;\n /* A function that can be used to set a spotlight as active. It takes a target id as an argument, or null to clear the active spotlight /\n setActiveSpotlight: (target: string \| null) => void;\n /* A function that can be used to register a target. It takes a target id, and a ref to the target element as arguments /\n registerTarget: (id: string, ref: React.RefObject<HTMLElement>) => void;\n /* A function that can be used to unregister a target. It takes a target id as an argument /\n unregisterTarget: (id: string) => void;\n /* An object that contains all registered targets. The keys are the target ids, and the values are the refs to the target elements /\n registeredTargets: Record<string, React.RefObject<HTMLElement>>;\n /* A boolean that decides if there is a gray overlay when a spotlight is open /\n hasOverlay?: boolean;\n};\n\nconst SpotlightContext = createContext<SpotlightContextType \| null>(null);\n\nexport const SpotlightProvider = ({\n children,\n hasOverlay = true,\n isOverlayTransparent = false,\n}: SpotlightProviderProps) => {\n const [active, setActive] = useState<string \| null>(null);\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [targets, setTargets] = useState<\n Record<string, React.RefObject<HTMLElement>>\n >({});\n const [targetRect, setTargetRect] = useState<DOMRect \| null>(null);\n\n const registerTarget = useCallback(\n (id: string, ref: React.RefObject<HTMLElement>) => {\n setTargets((prev) => ({ ...prev, [id]: ref }));\n },\n [],\n );\n\n const unregisterTarget = useCallback((id: string) => {\n setTargets((prev) => {\n const newTargets = { ...prev };\n delete newTargets[id];\n return newTargets;\n });\n }, []);\n\n // Calculate target element position and size for mask\n useEffect(() => {\n if (\n active !== null &&\n targets[active] !== undefined &&\n targets[active]?.current !== null\n ) {\n const element = targets[active].current;\n const rect = element.getBoundingClientRect();\n setTargetRect(rect);\n } else {\n setTargetRect(null);\n }\n }, [active, targets]);\n\n const contextValue: SpotlightContextType = {\n hasOverlay,\n isActiveSpotlight: useCallback(\n (target: string) => target === active,\n [active],\n ),\n isOpen,\n registerTarget,\n registeredTargets: targets,\n setActiveSpotlight: useCallback(\n (target: string \| null) => setActive(target),\n [],\n ),\n setIsOpen: useCallback((open: boolean) => setIsOpen(open), []),\n unregisterTarget,\n };\n\n const overlayClasses = classNames('ndl-spotlight-overlay', {\n 'ndl-spotlight-overlay-opaque': !isOverlayTransparent,\n 'ndl-spotlight-overlay-open': isOpen && active !== null,\n });\n\n const overlayRootRef = useRef<HTMLElement \| null>(null);\n\n if (active !== null) {\n overlayRootRef.current = document.getElementById(active);\n }\n\n // Get the border radius from the target element\n const getHoleRadius = useCallback(() => {\n if (\n active !== null &&\n targets[active] !== undefined &&\n targets[active]?.current !== null\n ) {\n const element = targets[active].current;\n const computedStyle = window.getComputedStyle(element);\n const borderRadius = computedStyle.borderRadius;\n\n // Parse the border radius value (handle px, rem, em, etc.)\n const radiusValue = parseFloat(borderRadius);\n return isNaN(radiusValue) ? 0 : radiusValue;\n }\n return 0;\n }, [active, targets]);\n\n const getMaskStyle = () => {\n if (!targetRect \|\| isOverlayTransparent) return {};\n\n const { left, top, width, height } = targetRect;\n\n const x = Math.max(0, left);\n const y = Math.max(0, top);\n const w = Math.max(0, width);\n const h = Math.max(0, height);\n const r = Math.max(0, Math.min(getHoleRadius(), Math.min(w, h) / 2));\n\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // SVG mask: white = visible overlay, black = hole (transparent)\n const svg = `\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${vw}\" height=\"${vh}\" viewBox=\"0 0 ${vw} ${vh}\">\n <defs>\n <mask id=\"spotlightMask\" maskUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"${vw}\" height=\"${vh}\" fill=\"white\"/>\n <rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" rx=\"${r}\" ry=\"${r}\" fill=\"black\"/>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"${vw}\" height=\"${vh}\" fill=\"black\" mask=\"url(#spotlightMask)\"/>\n </svg>`.trim();\n\n const encoded = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;\n\n return {\n WebkitMaskImage: `url(\"${encoded}\")`,\n WebkitMaskRepeat: 'no-repeat',\n WebkitMaskSize: `${vw}px ${vh}px`,\n maskImage: `url(\"${encoded}\")`,\n maskRepeat: 'no-repeat',\n maskSize: `${vw}px ${vh}px`,\n } as React.CSSProperties;\n };\n\n /* useEffect to update the target rect, so that the mask tracks the target element */\n useEffect(() => {\n if (active == null) return;\n\n const el = targets[active]?.current;\n if (el === null \|\| el === undefined) return;\n\n const update = () => setTargetRect(el.getBoundingClientRect());\n update();\n\n const ro = new ResizeObserver(update);\n ro.observe(el);\n\n window.addEventListener('scroll', update, true);\n window.addEventListener('resize', update);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('scroll', update, true);\n window.removeEventListener('resize', update);\n };\n }, [active, targets]);\n\n return (\n <SpotlightContext.Provider value={contextValue}>\n {hasOverlay && active !== null && isOpen && (\n <FloatingPortal>\n <FloatingOverlay\n lockScroll={true}\n className={overlayClasses}\n style={getMaskStyle()}\n data-testid=\"ndl-spotlight-overlay\"\n />\n </FloatingPortal>\n )}\n {children}\n </SpotlightContext.Provider>\n );\n};\n\nexport const useSpotlightContext = (): SpotlightContextType => {\n const context = useContext(SpotlightContext);\n\n if (context === null) {\n throw new Error(\n 'Spotlight components must be wrapped in <SpotlightProvider />',\n );\n }\n\n return context;\n};\n"]}
1	+ {"version":3,"file":"SpotlightProvider.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightProvider.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 { FloatingOverlay, FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ntype SpotlightProviderProps = {\n /* The app/screen content to wrap /\n children: React.ReactNode;\n /* A boolean that decides if there is a gray overlay when a spotlight is open. /\n hasOverlay?: boolean;\n /* If the overlay should be transparent /\n isOverlayTransparent?: boolean;\n};\n\ntype SpotlightContextType = {\n /* A boolean that indicates if a spotlight is open /\n isOpen: boolean;\n /* A function that can be used to close or open the spotlight /\n setIsOpen: (arg: boolean) => void;\n /* A function that can be used to check if a spotlight is active. It takes a target id as an argument /\n isActiveSpotlight: (target: string) => boolean;\n /* A function that can be used to set a spotlight as active. It takes a target id as an argument, or null to clear the active spotlight /\n setActiveSpotlight: (target: string \| null) => void;\n /* A function that can be used to register a target. It takes a target id, and a ref to the target element as arguments /\n registerTarget: (id: string, ref: React.RefObject<HTMLElement>) => void;\n /* A function that can be used to unregister a target. It takes a target id as an argument /\n unregisterTarget: (id: string) => void;\n /* An object that contains all registered targets. The keys are the target ids, and the values are the refs to the target elements /\n registeredTargets: Record<string, React.RefObject<HTMLElement>>;\n /* A boolean that decides if there is a gray overlay when a spotlight is open /\n hasOverlay?: boolean;\n};\n\nconst SpotlightContext = createContext<SpotlightContextType \| null>(null);\n\nexport const SpotlightProvider = ({\n children,\n hasOverlay = true,\n isOverlayTransparent = false,\n}: SpotlightProviderProps) => {\n const [active, setActive] = useState<string \| null>(null);\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [targets, setTargets] = useState<\n Record<string, React.RefObject<HTMLElement>>\n >({});\n const [targetRect, setTargetRect] = useState<DOMRect \| null>(null);\n\n const registerTarget = useCallback(\n (id: string, ref: React.RefObject<HTMLElement>) => {\n setTargets((prev) => ({ ...prev, [id]: ref }));\n },\n [],\n );\n\n const unregisterTarget = useCallback((id: string) => {\n setTargets((prev) => {\n const newTargets = { ...prev };\n delete newTargets[id];\n return newTargets;\n });\n }, []);\n\n // Calculate target element position and size for mask\n useEffect(() => {\n if (\n active !== null &&\n targets[active] !== undefined &&\n targets[active]?.current !== null\n ) {\n const element = targets[active].current;\n const rect = element.getBoundingClientRect();\n setTargetRect(rect);\n } else {\n setTargetRect(null);\n }\n }, [active, targets]);\n\n const contextValue: SpotlightContextType = {\n hasOverlay,\n isActiveSpotlight: useCallback(\n (target: string) => target === active,\n [active],\n ),\n isOpen,\n registerTarget,\n registeredTargets: targets,\n setActiveSpotlight: useCallback(\n (target: string \| null) => setActive(target),\n [],\n ),\n setIsOpen: useCallback((open: boolean) => setIsOpen(open), []),\n unregisterTarget,\n };\n\n const overlayClasses = classNames('ndl-spotlight-overlay', {\n 'ndl-spotlight-overlay-opaque': !isOverlayTransparent,\n 'ndl-spotlight-overlay-open': isOpen && active !== null,\n });\n\n const overlayRootRef = useRef<HTMLElement \| null>(null);\n\n if (active !== null) {\n overlayRootRef.current = document.getElementById(active);\n }\n\n // Get the border radius from the target element\n const getHoleRadius = useCallback(() => {\n if (\n active !== null &&\n targets[active] !== undefined &&\n targets[active]?.current !== null\n ) {\n const element = targets[active].current;\n const computedStyle = window.getComputedStyle(element);\n const borderRadius = computedStyle.borderRadius;\n\n // Parse the border radius value (handle px, rem, em, etc.)\n const radiusValue = parseFloat(borderRadius);\n return isNaN(radiusValue) ? 0 : radiusValue;\n }\n return 0;\n }, [active, targets]);\n\n const getMaskStyle = () => {\n if (!targetRect \|\| isOverlayTransparent) {\n return {};\n }\n\n const { left, top, width, height } = targetRect;\n\n const x = Math.max(0, left);\n const y = Math.max(0, top);\n const w = Math.max(0, width);\n const h = Math.max(0, height);\n const r = Math.max(0, Math.min(getHoleRadius(), Math.min(w, h) / 2));\n\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // SVG mask: white = visible overlay, black = hole (transparent)\n const svg = `\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${vw}\" height=\"${vh}\" viewBox=\"0 0 ${vw} ${vh}\">\n <defs>\n <mask id=\"spotlightMask\" maskUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"${vw}\" height=\"${vh}\" fill=\"white\"/>\n <rect x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" rx=\"${r}\" ry=\"${r}\" fill=\"black\"/>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"${vw}\" height=\"${vh}\" fill=\"black\" mask=\"url(#spotlightMask)\"/>\n </svg>`.trim();\n\n const encoded = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;\n\n return {\n WebkitMaskImage: `url(\"${encoded}\")`,\n WebkitMaskRepeat: 'no-repeat',\n WebkitMaskSize: `${vw}px ${vh}px`,\n maskImage: `url(\"${encoded}\")`,\n maskRepeat: 'no-repeat',\n maskSize: `${vw}px ${vh}px`,\n } as React.CSSProperties;\n };\n\n /* useEffect to update the target rect, so that the mask tracks the target element */\n useEffect(() => {\n if (active === null) {\n return;\n }\n\n const el = targets[active]?.current;\n if (el === null \|\| el === undefined) {\n return;\n }\n\n const update = () => setTargetRect(el.getBoundingClientRect());\n update();\n\n const ro = new ResizeObserver(update);\n ro.observe(el);\n\n window.addEventListener('scroll', update, true);\n window.addEventListener('resize', update);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('scroll', update, true);\n window.removeEventListener('resize', update);\n };\n }, [active, targets]);\n\n return (\n <SpotlightContext.Provider value={contextValue}>\n {hasOverlay && active !== null && isOpen && (\n <FloatingPortal>\n <FloatingOverlay\n lockScroll={true}\n className={overlayClasses}\n style={getMaskStyle()}\n data-testid=\"ndl-spotlight-overlay\"\n />\n </FloatingPortal>\n )}\n {children}\n </SpotlightContext.Provider>\n );\n};\n\nexport const useSpotlightContext = (): SpotlightContextType => {\n const context = useContext(SpotlightContext);\n\n if (context === null) {\n throw new Error(\n 'Spotlight components must be wrapped in <SpotlightProvider />',\n );\n }\n\n return context;\n};\n"]}

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

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -64,7 +75,8 @@ const react_2 = __importStar(require("react"));
 const conditional_wrap_1 = require("../conditional-wrap");
 const SpotlightProvider_1 = require("./SpotlightProvider");
 const use_indicator_1 = require("./use-indicator");
-const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', borderRadius, shouldFitToChildren = false, children, className, htmlAttributes, style, as, ref, asChild, }) => {
+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"]);
     const Component = as !== null && as !== void 0 ? as : 'div';
     const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, setActiveSpotlight, } = (0, SpotlightProvider_1.useSpotlightContext)();
     const internalRef = react_2.default.useRef(null);
@@ -148,7 +160,7 @@ const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', ind
                     else if (e.code === 'Escape' && isActive) {
                         setActiveSpotlight(null);
                     }
-                }, tabIndex: isActive ? 0 : undefined }, (isActive && { 'aria-label': 'Open spotlight' }), htmlAttributes, { children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive, wrap: (children) => ((0, jsx_runtime_1.jsx)("div", { inert: true, "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive && isOpen, wrap: (wrapChildren) => (0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren }), children: indicator.context.open && ((0, jsx_runtime_1.jsx)("div", { className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) })) })] }));
+                }, tabIndex: isActive ? 0 : undefined }, (isActive && { 'aria-label': 'Open spotlight' }), restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive, wrap: (children) => ((0, jsx_runtime_1.jsx)("div", { inert: true, "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive && isOpen, wrap: (wrapChildren) => (0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren }), children: indicator.context.open && ((0, jsx_runtime_1.jsx)("div", { className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) })) })] }));
 };
 exports.SpotlightTarget = SpotlightTarget;
 //# sourceMappingURL=SpotlightTarget.js.map

package/lib/cjs/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 @example\n * ```tsx\n * <SpotlightTarget id=\"my-button\" asChild>\n * <FilledButton>Click me</FilledButton>\n * </SpotlightTarget>\n * ```\n \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 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}: 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 mergedRefs = useMergeRefs<HTMLElement>([\n ref as React.RefObject<HTMLElement>,\n internalRef as React.RefObject<HTMLElement>,\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?: (e: React.MouseEvent<HTMLElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n }>;\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (isActive) {\n // When spotlight is active, always prevent the child's click handler\n e.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?.(e);\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isActive && !isOpen && (e.code === 'Enter' \|\| e.code === 'Space')) {\n e.preventDefault();\n setIsOpen(true);\n return;\n }\n\n if (isActive && e.code === 'Escape') {\n e.preventDefault();\n setActiveSpotlight(null);\n return;\n }\n\n child.props?.onKeyDown?.(e);\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={(e) => {\n if (isActive) {\n e.preventDefault();\n e.stopPropagation();\n\n if (!isOpen) {\n setIsOpen(true);\n }\n }\n }}\n style={{ borderRadius, ...style }}\n onKeyDown={(e) => {\n if (\n isActive &&\n !isOpen &&\n (e.code === 'Enter' \|\| e.code === 'Space')\n ) {\n setIsOpen(true);\n e.preventDefault();\n } else if (e.code === 'Escape' && isActive) {\n setActiveSpotlight(null);\n }\n }}\n tabIndex={isActive ? 0 : undefined}\n {...(isActive && { 'aria-label': 'Open spotlight' })}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAAkE;AAClE,4DAAoC;AACpC,+CAAyC;AAGzC,0DAAsD;AACtD,2DAA0D;AAC1D,mDAIyB;AAoClB,MAAM,eAAe,GAAG,CAAC,EAesB,EAAE,EAAE;QAf1B,EAC9B,EAAE,EACF,QAAQ,GAAG,IAAI,EACf,gBAAgB,GAAG,QAAQ,EAC3B,kBAAkB,GAAG,WAAW,EAChC,YAAY,EACZ,mBAAmB,GAAG,KAAK,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,KAAK,EACL,EAAE,EACF,GAAG,EACH,OAAO,OAE6C,EADjD,SAAS,cAdkB,+KAe/B,CADa;IAEZ,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAE9B,MAAM,EACJ,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,GAAG,IAAA,uCAAmB,GAAE,CAAC;IAE1B,MAAM,WAAW,GAAG,eAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,oBAAY,EAAc;QAC3C,GAAmC;QACnC,WAA2C;KAC5C,CAAC,CAAC;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACjC,cAAc,CAAC,EAAE,EAAE,WAA2C,CAAC,CAAC;QAClE,CAAC;QACD,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE3C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,IAAA,4BAAY,EAAC;QAC7B,QAAQ;QACR,kBAAkB;QAClB,gBAAgB;QAChB,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,WAAW;KACvB,CAAC,CAAC;IAEH,IAAI,OAAO,KAAK,IAAI,IAAI,eAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACvD,MAAM,KAAK,GAAG,QAKZ,CAAC;QAEH,MAAM,OAAO,GAAG,CAAC,CAAgC,EAAE,EAAE;;YACnD,IAAI,QAAQ,EAAE,CAAC;gBACb,qEAAqE;gBACrE,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,SAAS,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC;gBACD,2DAA2D;gBAC3D,OAAO;YACT,CAAC;YAED,mEAAmE;YACnE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,OAAO,mDAAG,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,CAAmC,EAAE,EAAE;;YACxD,IAAI,QAAQ,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,EAAE,CAAC;gBACtE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChB,OAAO;YACT,CAAC;YAED,IAAI,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACpC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,SAAS,mDAAG,CAAC,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,mGAAmG;QACnG,MAAM,WAAW,mBACf,EAAE;YACF,OAAO;YACP,SAAS,EACT,GAAG,EAAE,UAAU,EACf,KAAK,kCACA,KAAK,GACL,KAAK,CAAC,KAAK,CAAC,KAAK,KAGnB,CAAC,cAAc;YAChB,CAAC,iCAAM,cAAc,KAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,IAC3D,CAAC,CAAC,EAAE,CAAC,CACR,CAAC;QAEF,OAAO,CACL,6DACG,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,WAAsC,CAAC,EAClE,uBAAC,kCAAe,IACd,UAAU,EAAE,QAAQ,IAAI,MAAM,EAC9B,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CACtB,uBAAC,sBAAc,cAAE,YAAY,GAAkB,CAChD,YAEA,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CACzB,gCACE,SAAS,EAAE,SAAS,CAAC,gBAAgB,EACrC,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EACvC,KAAK,kCAAO,SAAS,CAAC,cAAc,GAAK,SAAS,CAAC,KAAK,IACxD,CACH,GACe,IACjB,CACJ,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,sBAAsB,EACtB;QACE,sCAAsC,EAAE,mBAAmB;QAC3D,2BAA2B,EAAE,MAAM,IAAI,QAAQ;KAChD,EACD,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,oBAAU,EAC7B,4BAA4B,EAC5B;QACE,4CAA4C,EAAE,mBAAmB;KAClE,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,SAAS,kBACR,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,IAAI,QAAQ,EAAE,CAAC;wBACb,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,IAAI,CAAC,MAAM,EAAE,CAAC;4BACZ,SAAS,CAAC,IAAI,CAAC,CAAC;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC,EACD,KAAK,kBAAI,YAAY,IAAK,KAAK,GAC/B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IACE,QAAQ;wBACR,CAAC,MAAM;wBACP,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,EAC1C,CAAC;wBACD,SAAS,CAAC,IAAI,CAAC,CAAC;wBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACrB,CAAC;yBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,QAAQ,EAAE,CAAC;wBAC3C,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC;gBACH,CAAC,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAC9B,CAAC,QAAQ,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC,EAChD,SAAS,EACT,cAAc,cAElB,uBAAC,kCAAe,IACd,UAAU,EAAE,QAAQ,EACpB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAClB,gCAAK,KAAK,+BAAe,SAAS,EAAE,YAAY,YAC7C,QAAQ,GACL,CACP,YAEA,QAAQ,GACO,IACR,EACZ,uBAAC,kCAAe,IACd,UAAU,EAAE,QAAQ,IAAI,MAAM,EAC9B,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,uBAAC,sBAAc,cAAE,YAAY,GAAkB,YAEtE,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CACzB,gCACE,SAAS,EAAE,SAAS,CAAC,gBAAgB,EACrC,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EACvC,KAAK,kCAAO,SAAS,CAAC,cAAc,GAAK,SAAS,CAAC,KAAK,IACxD,CACH,GACe,IACjB,CACJ,CAAC;AACJ,CAAC,CAAC;AA1MW,QAAA,eAAe,mBA0M1B","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 @example\n * ```tsx\n * <SpotlightTarget id=\"my-button\" asChild>\n * <FilledButton>Click me</FilledButton>\n * </SpotlightTarget>\n * ```\n \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 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 mergedRefs = useMergeRefs<HTMLElement>([\n ref as React.RefObject<HTMLElement>,\n internalRef as React.RefObject<HTMLElement>,\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?: (e: React.MouseEvent<HTMLElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n }>;\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (isActive) {\n // When spotlight is active, always prevent the child's click handler\n e.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?.(e);\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isActive && !isOpen && (e.code === 'Enter' \|\| e.code === 'Space')) {\n e.preventDefault();\n setIsOpen(true);\n return;\n }\n\n if (isActive && e.code === 'Escape') {\n e.preventDefault();\n setActiveSpotlight(null);\n return;\n }\n\n child.props?.onKeyDown?.(e);\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={(e) => {\n if (isActive) {\n e.preventDefault();\n e.stopPropagation();\n\n if (!isOpen) {\n setIsOpen(true);\n }\n }\n }}\n style={{ borderRadius, ...style }}\n onKeyDown={(e) => {\n if (\n isActive &&\n !isOpen &&\n (e.code === 'Enter' \|\| e.code === 'Space')\n ) {\n setIsOpen(true);\n e.preventDefault();\n } else if (e.code === 'Escape' && isActive) {\n setActiveSpotlight(null);\n }\n }}\n tabIndex={isActive ? 0 : undefined}\n {...(isActive && { 'aria-label': 'Open spotlight' })}\n {...restProps}\n {...htmlAttributes}\n >\n <ConditionalWrap\n shouldWrap={isActive}\n wrap={(children) => (\n <div inert aria-disabled className={inertClasses}>\n {children}\n </div>\n )}\n >\n {children}\n </ConditionalWrap>\n </Component>\n <ConditionalWrap\n shouldWrap={isActive && isOpen}\n wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n >\n {indicator.context.open && (\n <div\n className={indicator.indicatorClasses}\n ref={indicator.context.refs.setFloating}\n style={{ ...indicator.floatingStyles, ...indicator.style }}\n />\n )}\n </ConditionalWrap>\n </>\n );\n};\n"]}

package/lib/cjs/spotlight/SpotlightTour.js CHANGED Viewed

@@ -95,7 +95,7 @@ const SpotlightTour = ({ spotlights, dismissButtonLabel = 'Dismiss', backButtonL
         if (beforeActions !== undefined && beforeActions !== null) {
             return beforeActions;
         }
-        return spotlights.length > 1 ? index + 1 + '/' + spotlights.length : null;
+        return spotlights.length > 1 ? `${index + 1}/${spotlights.length}` : null;
     }, [spotlights]);
     const getOnClose = (0, react_1.useCallback)((index, onClose) => {
         if (onClose) {

package/lib/cjs/spotlight/SpotlightTour.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpotlightTour.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTour.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 type React from 'react';\nimport { useCallback } from 'react';\n\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Spotlight, type SpotlightCloseAction } from './Spotlight';\nimport { useSpotlightContext } from './SpotlightProvider';\n\ntype SpotlightTourAction =\n \| SpotlightCloseAction\n \| 'dismiss'\n \| 'back'\n \| 'next'\n \| 'close'\n \| 'open';\n\ntype SpotlightTourProps = {\n /* An array of `Spotlight` component props objects. SpotlightTour overrides the following props, to simplify your implementation, if they are undefined: `actions`, `beforeActions`, `initialFocus`, `onClose`. If you want custom behaviour for a certain `Spotlight` you can set these props yourself. /\n spotlights: React.ComponentProps<typeof Spotlight>[];\n /* A string that will be the text for the dismiss button /\n dismissButtonLabel?: string;\n /* A string that will be the text for the back button /\n backButtonLabel?: string;\n /* A string that will be the text for the next button /\n nextButtonLabel?: string;\n /* A string that will be the text for the close button /\n closeButtonLabel?: string;\n /* A callback function that is called when some actions are performed inside a `Spotlight`. It receives two arguments: `target` (string identifying the `Spotlight` that the action was performed in) and `action` (string describing the action that has been performed. These actions can be \"dismiss\", \"back\", \"next\", \"close\", \"clickOutside\" or \"escapeKeyDown\") */\n onAction?: (target: string, action: SpotlightTourAction) => void;\n};\n\nexport const SpotlightTour = ({\n spotlights,\n dismissButtonLabel = 'Dismiss',\n backButtonLabel = 'Back',\n nextButtonLabel = 'Next',\n closeButtonLabel = 'Close',\n onAction,\n}: SpotlightTourProps) => {\n const { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n const next = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'next');\n setActiveSpotlight(spotlights[index + 1].target);\n },\n [onAction, spotlights, setActiveSpotlight],\n );\n\n const back = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'back');\n setActiveSpotlight(spotlights[index - 1].target);\n },\n [onAction, spotlights, setActiveSpotlight],\n );\n\n const dismiss = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'dismiss');\n setActiveSpotlight(null);\n setIsOpen(false);\n },\n [onAction, spotlights, setActiveSpotlight, setIsOpen],\n );\n\n const close = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'close');\n setActiveSpotlight(null);\n setIsOpen(false);\n },\n [onAction, spotlights, setActiveSpotlight, setIsOpen],\n );\n\n const getActions = useCallback(\n (index: number, actions: React.ReactNode): React.ReactNode => {\n if (actions !== undefined && actions !== null) {\n return actions;\n }\n\n const isFirst = index === 0;\n const isLast = index === spotlights.length - 1;\n const hasMultiple = spotlights.length > 1;\n\n const newActions: React.ReactNode[] = [];\n\n if (!isLast && hasMultiple) {\n newActions.push(\n <TextButton onClick={() => dismiss(index)}>\n {dismissButtonLabel}\n </TextButton>,\n );\n }\n\n if (!isFirst && hasMultiple) {\n newActions.push(\n <TextButton onClick={() => back(index)}>\n {backButtonLabel}\n </TextButton>,\n );\n }\n\n if (isLast) {\n newActions.push(\n <OutlinedButton onClick={() => close(index)}>\n {closeButtonLabel}\n </OutlinedButton>,\n );\n } else {\n newActions.push(\n <OutlinedButton onClick={() => next(index)}>\n {nextButtonLabel}\n </OutlinedButton>,\n );\n }\n\n return newActions;\n },\n [\n spotlights,\n dismissButtonLabel,\n dismiss,\n backButtonLabel,\n back,\n closeButtonLabel,\n close,\n nextButtonLabel,\n next,\n ],\n );\n\n const getBeforeActions: (\n index: number,\n beforeActions: React.ReactNode,\n ) => React.ReactNode = useCallback(\n (index: number, beforeActions: React.ReactNode) => {\n if (beforeActions !== undefined && beforeActions !== null) {\n return beforeActions;\n }\n\n return spotlights.length > 1 ? index + 1 + '/' + spotlights.length : null;\n },\n [spotlights],\n );\n\n const getOnClose: (\n index: number,\n onClose: ((reason: SpotlightCloseAction) => void) \| undefined,\n ) => ((reason: SpotlightCloseAction) => void) \| undefined = useCallback(\n (\n index: number,\n onClose: ((reason: SpotlightCloseAction) => void) \| undefined,\n ) => {\n if (onClose) {\n return onClose;\n }\n\n return (reason) => {\n onAction?.(spotlights[index].target, reason);\n };\n },\n [onAction, spotlights],\n );\n\n const getOnOpen: (\n index: number,\n onOpen: (() => void) \| undefined,\n ) => (() => void) \| undefined = useCallback(\n (index: number, onOpen: (() => void) \| undefined) => {\n if (onOpen) {\n return onOpen;\n }\n\n return () => {\n onAction?.(spotlights[index].target, 'open');\n };\n },\n [onAction, spotlights],\n );\n\n return (\n <>\n {spotlights.map((spotlight, index) => {\n const {\n actions,\n beforeActions,\n initialFocus,\n onClose,\n onOpen,\n ...restSpotlight\n } = spotlight;\n const newActions = getActions(index, actions);\n const newBeforeActions = getBeforeActions(index, beforeActions);\n const newOnClose = getOnClose(index, onClose);\n const newOnOpen = getOnOpen(index, onOpen);\n\n return (\n <Spotlight\n key={index}\n {...restSpotlight}\n actions={newActions}\n beforeActions={newBeforeActions}\n initialFocus={initialFocus}\n onClose={newOnClose}\n onOpen={newOnOpen}\n />\n );\n })}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"SpotlightTour.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTour.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 type React from 'react';\nimport { useCallback } from 'react';\n\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Spotlight, type SpotlightCloseAction } from './Spotlight';\nimport { useSpotlightContext } from './SpotlightProvider';\n\ntype SpotlightTourAction =\n \| SpotlightCloseAction\n \| 'dismiss'\n \| 'back'\n \| 'next'\n \| 'close'\n \| 'open';\n\ntype SpotlightTourProps = {\n /* An array of `Spotlight` component props objects. SpotlightTour overrides the following props, to simplify your implementation, if they are undefined: `actions`, `beforeActions`, `initialFocus`, `onClose`. If you want custom behaviour for a certain `Spotlight` you can set these props yourself. /\n spotlights: React.ComponentProps<typeof Spotlight>[];\n /* A string that will be the text for the dismiss button /\n dismissButtonLabel?: string;\n /* A string that will be the text for the back button /\n backButtonLabel?: string;\n /* A string that will be the text for the next button /\n nextButtonLabel?: string;\n /* A string that will be the text for the close button /\n closeButtonLabel?: string;\n /* A callback function that is called when some actions are performed inside a `Spotlight`. It receives two arguments: `target` (string identifying the `Spotlight` that the action was performed in) and `action` (string describing the action that has been performed. These actions can be \"dismiss\", \"back\", \"next\", \"close\", \"clickOutside\" or \"escapeKeyDown\") */\n onAction?: (target: string, action: SpotlightTourAction) => void;\n};\n\nexport const SpotlightTour = ({\n spotlights,\n dismissButtonLabel = 'Dismiss',\n backButtonLabel = 'Back',\n nextButtonLabel = 'Next',\n closeButtonLabel = 'Close',\n onAction,\n}: SpotlightTourProps) => {\n const { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n const next = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'next');\n setActiveSpotlight(spotlights[index + 1].target);\n },\n [onAction, spotlights, setActiveSpotlight],\n );\n\n const back = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'back');\n setActiveSpotlight(spotlights[index - 1].target);\n },\n [onAction, spotlights, setActiveSpotlight],\n );\n\n const dismiss = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'dismiss');\n setActiveSpotlight(null);\n setIsOpen(false);\n },\n [onAction, spotlights, setActiveSpotlight, setIsOpen],\n );\n\n const close = useCallback(\n (index: number) => {\n onAction?.(spotlights[index].target, 'close');\n setActiveSpotlight(null);\n setIsOpen(false);\n },\n [onAction, spotlights, setActiveSpotlight, setIsOpen],\n );\n\n const getActions = useCallback(\n (index: number, actions: React.ReactNode): React.ReactNode => {\n if (actions !== undefined && actions !== null) {\n return actions;\n }\n\n const isFirst = index === 0;\n const isLast = index === spotlights.length - 1;\n const hasMultiple = spotlights.length > 1;\n\n const newActions: React.ReactNode[] = [];\n\n if (!isLast && hasMultiple) {\n newActions.push(\n <TextButton onClick={() => dismiss(index)}>\n {dismissButtonLabel}\n </TextButton>,\n );\n }\n\n if (!isFirst && hasMultiple) {\n newActions.push(\n <TextButton onClick={() => back(index)}>\n {backButtonLabel}\n </TextButton>,\n );\n }\n\n if (isLast) {\n newActions.push(\n <OutlinedButton onClick={() => close(index)}>\n {closeButtonLabel}\n </OutlinedButton>,\n );\n } else {\n newActions.push(\n <OutlinedButton onClick={() => next(index)}>\n {nextButtonLabel}\n </OutlinedButton>,\n );\n }\n\n return newActions;\n },\n [\n spotlights,\n dismissButtonLabel,\n dismiss,\n backButtonLabel,\n back,\n closeButtonLabel,\n close,\n nextButtonLabel,\n next,\n ],\n );\n\n const getBeforeActions: (\n index: number,\n beforeActions: React.ReactNode,\n ) => React.ReactNode = useCallback(\n (index: number, beforeActions: React.ReactNode) => {\n if (beforeActions !== undefined && beforeActions !== null) {\n return beforeActions;\n }\n\n return spotlights.length > 1 ? `${index + 1}/${spotlights.length}` : null;\n },\n [spotlights],\n );\n\n const getOnClose: (\n index: number,\n onClose: ((reason: SpotlightCloseAction) => void) \| undefined,\n ) => ((reason: SpotlightCloseAction) => void) \| undefined = useCallback(\n (\n index: number,\n onClose: ((reason: SpotlightCloseAction) => void) \| undefined,\n ) => {\n if (onClose) {\n return onClose;\n }\n\n return (reason) => {\n onAction?.(spotlights[index].target, reason);\n };\n },\n [onAction, spotlights],\n );\n\n const getOnOpen: (\n index: number,\n onOpen: (() => void) \| undefined,\n ) => (() => void) \| undefined = useCallback(\n (index: number, onOpen: (() => void) \| undefined) => {\n if (onOpen) {\n return onOpen;\n }\n\n return () => {\n onAction?.(spotlights[index].target, 'open');\n };\n },\n [onAction, spotlights],\n );\n\n return (\n <>\n {spotlights.map((spotlight, index) => {\n const {\n actions,\n beforeActions,\n initialFocus,\n onClose,\n onOpen,\n ...restSpotlight\n } = spotlight;\n const newActions = getActions(index, actions);\n const newBeforeActions = getBeforeActions(index, beforeActions);\n const newOnClose = getOnClose(index, onClose);\n const newOnOpen = getOnOpen(index, onOpen);\n\n return (\n <Spotlight\n key={index}\n {...restSpotlight}\n actions={newActions}\n beforeActions={newBeforeActions}\n initialFocus={initialFocus}\n onClose={newOnClose}\n onOpen={newOnOpen}\n />\n );\n })}\n </>\n );\n};\n"]}

package/lib/cjs/spotlight/stories/spotlight.stories.js CHANGED Viewed

@@ -28,7 +28,7 @@ exports.OnTabs = exports.FixedPositioning = exports.TargetInDialog = exports.InS
 const jsx_runtime_1 = require("react/jsx-runtime");
 const chromatic_1 = __importDefault(require("chromatic"));
 const index_1 = require("../../index");
-const _1 = require("./");
+const _1 = require(".");
 const componentMeta = {
     component: index_1.Spotlight,
     decorators: [

package/lib/cjs/spotlight/stories/spotlight.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spotlight.stories.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight.stories.tsx"],"names":[],"mappings":";;;;;;;AAqBA,0DAAoC;AAEpC,uCAA2D;AAC3D,~~yBAmBY~~;~~AAOZ~~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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 { type Meta, type StoryObj } from '@storybook/react-vite';\nimport isChromatic from 'chromatic';\n\nimport { Spotlight, SpotlightProvider } from '../../index';\nimport {\n SpotlightFixedPositioning,\n SpotlightFixedPositioningSrc,\n SpotlightInDialog,\n SpotlightInDialogSrc,\n SpotlightInSideNav,\n SpotlightInSideNavSrc,\n SpotlightOnTabs,\n SpotlightOnTabsSrc,\n SpotlightTour,\n SpotlightTourSrc,\n SpotlightWithIcon,\n SpotlightWithIconSrc,\n SpotlightWithImage,\n SpotlightWithImageSrc,\n SpotlightWithLabel,\n SpotlightWithLabelSrc,\n SpotlightWithPointer,\n SpotlightWithPointerSrc,\n} from './';\n\ntype ComponentProps = React.ComponentProps<typeof Spotlight> & {\n isChromatic: boolean;\n hasPulse?: boolean;\n};\n\nconst componentMeta: Meta<ComponentProps> = {\n component: Spotlight,\n decorators: [\n (StoryFn) => (\n <SpotlightProvider hasOverlay>\n <StoryFn />\n </SpotlightProvider>\n ),\n ],\n id: 'components-spotlight',\n parameters: {\n controls: { disable: true },\n },\n tags: ['docsPage'],\n title: 'Components/Spotlight',\n} satisfies Meta;\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const WithLabel: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithLabelSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithLabel,\n};\n\nexport const WithIcon: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithIconSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithIcon,\n};\n\nexport const WithImage: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithImageSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithImage,\n};\n\nexport const WithPointerIndicator: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithPointerSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithPointer,\n};\n\nexport const Tour: Story = {\n args: {},\n parameters: {\n docs: {\n source: {\n code: SpotlightTourSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightTour,\n};\n\nexport const InSideNav: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightInSideNavSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightInSideNav,\n};\n\nexport const TargetInDialog: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightInDialogSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightInDialog,\n};\n\nexport const FixedPositioning: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightFixedPositioningSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightFixedPositioning,\n};\n\nexport const OnTabs: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightOnTabsSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightOnTabs,\n};\n"]}
1	+ {"version":3,"file":"spotlight.stories.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight.stories.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 { type Meta, type StoryObj } from '@storybook/react-vite';\nimport isChromatic from 'chromatic';\n\nimport { Spotlight, SpotlightProvider } from '../../index';\nimport {\n SpotlightFixedPositioning,\n SpotlightFixedPositioningSrc,\n SpotlightInDialog,\n SpotlightInDialogSrc,\n SpotlightInSideNav,\n SpotlightInSideNavSrc,\n SpotlightOnTabs,\n SpotlightOnTabsSrc,\n SpotlightTour,\n SpotlightTourSrc,\n SpotlightWithIcon,\n SpotlightWithIconSrc,\n SpotlightWithImage,\n SpotlightWithImageSrc,\n SpotlightWithLabel,\n SpotlightWithLabelSrc,\n SpotlightWithPointer,\n SpotlightWithPointerSrc,\n} from '.';\n\ntype ComponentProps = React.ComponentProps<typeof Spotlight> & {\n isChromatic: boolean;\n hasPulse?: boolean;\n};\n\nconst componentMeta: Meta<ComponentProps> = {\n component: Spotlight,\n decorators: [\n (StoryFn) => (\n <SpotlightProvider hasOverlay>\n <StoryFn />\n </SpotlightProvider>\n ),\n ],\n id: 'components-spotlight',\n parameters: {\n controls: { disable: true },\n },\n tags: ['docsPage'],\n title: 'Components/Spotlight',\n} satisfies Meta;\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const WithLabel: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithLabelSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithLabel,\n};\n\nexport const WithIcon: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithIconSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithIcon,\n};\n\nexport const WithImage: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithImageSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithImage,\n};\n\nexport const WithPointerIndicator: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightWithPointerSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightWithPointer,\n};\n\nexport const Tour: Story = {\n args: {},\n parameters: {\n docs: {\n source: {\n code: SpotlightTourSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightTour,\n};\n\nexport const InSideNav: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightInSideNavSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightInSideNav,\n};\n\nexport const TargetInDialog: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightInDialogSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightInDialog,\n};\n\nexport const FixedPositioning: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightFixedPositioningSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightFixedPositioning,\n};\n\nexport const OnTabs: Story = {\n args: {\n isChromatic: isChromatic(),\n },\n parameters: {\n docs: {\n source: {\n code: SpotlightOnTabsSrc,\n language: 'tsx',\n type: 'code',\n },\n },\n },\n render: SpotlightOnTabs,\n};\n"]}

package/lib/cjs/spotlight/use-indicator.js CHANGED Viewed

@@ -65,8 +65,9 @@ const calcOffset = (variant, placement, rects) => {
     };
 };
 const getComputedBorderRadius = (element) => {
-    if (!element)
+    if (!element) {
         return undefined;
+    }
     // First check if there's an inline style
     if (element.style.borderRadius) {
         return element.style.borderRadius;

package/lib/cjs/spotlight/use-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.tsx"],"names":[],"mappings":";;;;;~~AAwHA~~,oCA8CC;~~AAtKD~~;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAK4B;AAC5B,4DAAoC;AACpC,iCAAgC;AA8BhC,MAAM,aAAa,GAA2B;IAC5C,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,UAAU,GAAG,CACjB,OAAyB,EACzB,SAA6B,EAC7B,KAAmB,EACnB,EAAE;IACF,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,4DAA4D;QAC5D,OAAO;YACL,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;SAClE,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrE;;;SAGK;IAEL,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,iBAAiB,KAAK,QAAQ,EAAE,CAAC;QACnC,kFAAkF;QAClF,QAAQ,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;IACxC,CAAC;SAAM,IAAI,iBAAiB,KAAK,QAAQ,EAAE,CAAC;QAC1C,gDAAgD;QAChD,QAAQ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,CAAC;SAAM,IAAI,iBAAiB,KAAK,KAAK,EAAE,CAAC;QACvC,+EAA+E;QAC/E,QAAQ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,OAAO;QACL,SAAS,EACP,aAAa,CAAC,kBAAkB,CAAC;YACjC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC;QAC1D,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAC9B,OAAuC,EACnB,EAAE;IACtB,IAAI,CAAC,OAAO;~~QAAE~~,OAAO,SAAS,CAAC;~~IAE/B~~,yCAAyC;IACzC,IAAI,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;QAC/B,OAAO,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC;IACpC,CAAC;IAED,oEAAoE;IACpE,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC;IAEhD,sDAAsD;IACtD,OAAO,YAAY,IAAI,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;AAC3E,CAAC,CAAC;AAEF,SAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,gBAAgB,GAAG,QAAQ,EAC3B,kBAAkB,GAAG,WAAW,EAChC,SAAS,EACT,QAAQ,GAAG,IAAI,GACE;IACjB,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC;QACvB,QAAQ,EAAE;YACR,SAAS,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO;SAC9B;QACD,UAAU,EAAE;YACV,IAAA,cAAM,EAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACnB,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,KAAK,CAAC,CACxD;SACF;QACD,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,QAAQ;QACnB,oBAAoB,EAAE,kBAAU;KACjC,CAAC,CAAC;IAEH,OAAO,IAAA,eAAO,EACZ,GAAG,EAAE;;QAAC,OAAA,iCACD,IAAI,KACP,gBAAgB,EAAE,IAAA,oBAAU,EAAC,gCAAgC,EAAE;gBAC7D,uCAAuC,EAAE,gBAAgB,KAAK,QAAQ;gBACtE,sCAAsC,EAAE,gBAAgB,KAAK,OAAO;gBACpE,4BAA4B,EAAE,QAAQ;aACvC,CAAC,EACF,KAAK,EAAE;gBACL,YAAY,EACV,gBAAgB,KAAK,QAAQ;oBAC3B,CAAC,CAAC,uBAAuB,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC;oBAC7C,CAAC,CAAC,KAAK;gBACX,MAAM,EACJ,gBAAgB,KAAK,QAAQ;oBAC3B,CAAC,CAAC,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,YAAY,mCAAI,CAAC,IAAI;oBAC9C,CAAC,CAAC,KAAK;gBACX,KAAK,EACH,gBAAgB,KAAK,QAAQ;oBAC3B,CAAC,CAAC,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,WAAW,mCAAI,CAAC,IAAI;oBAC7C,CAAC,CAAC,KAAK;aACZ,IACD,CAAA;KAAA,EACF,CAAC,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAC9C,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 type ElementRects,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useMemo } from 'react';\n\nexport type IndicatorVariant = 'border' \| 'point';\n\ninterface IndicatorOptions {\n isOpen: boolean;\n indicatorVariant?: IndicatorVariant;\n indicatorPlacement?: IndicatorPlacement;\n targetRef: React.RefObject<HTMLElement \| undefined \| null>;\n hasPulse?: boolean;\n hasAnchorPortal?: boolean;\n}\n\ninterface UseIndicatorReturn extends ReturnType<typeof useFloating> {\n style: React.CSSProperties;\n indicatorClasses?: string;\n hasAnchorPortal?: boolean;\n}\n\nexport type IndicatorPlacement =\n \| 'top-left'\n \| 'top-middle'\n \| 'top-right'\n \| 'bottom-left'\n \| 'bottom-middle'\n \| 'bottom-right'\n \| 'middle-left'\n \| 'middle-middle'\n \| 'middle-right';\n\nconst crossAxisMult: Record<string, number> = {\n left: -1,\n middle: 0,\n right: 1,\n};\n\nconst calcOffset = (\n variant: IndicatorVariant,\n placement: IndicatorPlacement,\n rects: ElementRects,\n) => {\n if (variant === 'border') {\n // Border variant is always centered around the middle point\n return {\n crossAxis: 0,\n mainAxis: -rects.reference.height / 2 - rects.floating.height / 2,\n };\n }\n\n const [mainAxisPlacement, crossAxisPlacement] = placement.split('-');\n /* Note for future reference:\n * Main axis (vertical) is zero at the bottom border of the target.\n * Cross axis (horizontal) is zero at the middle of the target\n * /\n\n let mainAxis = 0;\n if (mainAxisPlacement === 'bottom') {\n // put the indicator one height of the point above the bottom border of the target\n mainAxis = -2 rects.floating.height;\n } else if (mainAxisPlacement === 'middle') {\n // put the indicator in the middle of the target\n mainAxis = -rects.reference.height / 2 - rects.floating.height / 2;\n } else if (mainAxisPlacement === 'top') {\n // put the indicator one height of the point below the top border of the target\n mainAxis = -rects.reference.height + rects.floating.height;\n }\n\n return {\n crossAxis:\n crossAxisMult[crossAxisPlacement] \n (rects.reference.width / 2 - rects.floating.width 1.5),\n mainAxis,\n };\n};\n\nconst getComputedBorderRadius = (\n element: HTMLElement \| null \| undefined,\n): string \| undefined => {\n if (!element) return undefined;\n\n // First check if there's an inline style\n if (element.style.borderRadius) {\n return element.style.borderRadius;\n }\n\n // If no inline style, get the computed style (includes CSS classes)\n const computedStyle = window.getComputedStyle(element);\n const borderRadius = computedStyle.borderRadius;\n\n // Return undefined if border-radius is '0px' or empty\n return borderRadius && borderRadius !== '0px' ? borderRadius : undefined;\n};\n\nexport function useIndicator({\n isOpen,\n indicatorVariant = 'border',\n indicatorPlacement = 'top-right',\n targetRef,\n hasPulse = true,\n}: IndicatorOptions): UseIndicatorReturn {\n const data = useFloating({\n elements: {\n reference: targetRef?.current,\n },\n middleware: [\n offset(({ rects }) =>\n calcOffset(indicatorVariant, indicatorPlacement, rects),\n ),\n ],\n open: isOpen,\n placement: 'bottom',\n whileElementsMounted: autoUpdate,\n });\n\n return useMemo(\n () => ({\n ...data,\n indicatorClasses: classNames('ndl-spotlight-target-indicator', {\n 'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',\n 'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',\n 'ndl-spotlight-target-pulse': hasPulse,\n }),\n style: {\n borderRadius:\n indicatorVariant === 'border'\n ? getComputedBorderRadius(targetRef?.current)\n : '50%',\n height:\n indicatorVariant === 'border'\n ? `${targetRef?.current?.clientHeight ?? 0}px`\n : '8px',\n width:\n indicatorVariant === 'border'\n ? `${targetRef?.current?.clientWidth ?? 0}px`\n : '8px',\n },\n }),\n [data, indicatorVariant, targetRef, hasPulse],\n );\n}\n"]}
1	+ {"version":3,"file":"use-indicator.js","sourceRoot":"","sources":["../../../src/spotlight/use-indicator.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 type ElementRects,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useMemo } from 'react';\n\nexport type IndicatorVariant = 'border' \| 'point';\n\ninterface IndicatorOptions {\n isOpen: boolean;\n indicatorVariant?: IndicatorVariant;\n indicatorPlacement?: IndicatorPlacement;\n targetRef: React.RefObject<HTMLElement \| undefined \| null>;\n hasPulse?: boolean;\n hasAnchorPortal?: boolean;\n}\n\ninterface UseIndicatorReturn extends ReturnType<typeof useFloating> {\n style: React.CSSProperties;\n indicatorClasses?: string;\n hasAnchorPortal?: boolean;\n}\n\nexport type IndicatorPlacement =\n \| 'top-left'\n \| 'top-middle'\n \| 'top-right'\n \| 'bottom-left'\n \| 'bottom-middle'\n \| 'bottom-right'\n \| 'middle-left'\n \| 'middle-middle'\n \| 'middle-right';\n\nconst crossAxisMult: Record<string, number> = {\n left: -1,\n middle: 0,\n right: 1,\n};\n\nconst calcOffset = (\n variant: IndicatorVariant,\n placement: IndicatorPlacement,\n rects: ElementRects,\n) => {\n if (variant === 'border') {\n // Border variant is always centered around the middle point\n return {\n crossAxis: 0,\n mainAxis: -rects.reference.height / 2 - rects.floating.height / 2,\n };\n }\n\n const [mainAxisPlacement, crossAxisPlacement] = placement.split('-');\n /* Note for future reference:\n * Main axis (vertical) is zero at the bottom border of the target.\n * Cross axis (horizontal) is zero at the middle of the target\n * /\n\n let mainAxis = 0;\n if (mainAxisPlacement === 'bottom') {\n // put the indicator one height of the point above the bottom border of the target\n mainAxis = -2 rects.floating.height;\n } else if (mainAxisPlacement === 'middle') {\n // put the indicator in the middle of the target\n mainAxis = -rects.reference.height / 2 - rects.floating.height / 2;\n } else if (mainAxisPlacement === 'top') {\n // put the indicator one height of the point below the top border of the target\n mainAxis = -rects.reference.height + rects.floating.height;\n }\n\n return {\n crossAxis:\n crossAxisMult[crossAxisPlacement] \n (rects.reference.width / 2 - rects.floating.width 1.5),\n mainAxis,\n };\n};\n\nconst getComputedBorderRadius = (\n element: HTMLElement \| null \| undefined,\n): string \| undefined => {\n if (!element) {\n return undefined;\n }\n\n // First check if there's an inline style\n if (element.style.borderRadius) {\n return element.style.borderRadius;\n }\n\n // If no inline style, get the computed style (includes CSS classes)\n const computedStyle = window.getComputedStyle(element);\n const borderRadius = computedStyle.borderRadius;\n\n // Return undefined if border-radius is '0px' or empty\n return borderRadius && borderRadius !== '0px' ? borderRadius : undefined;\n};\n\nexport function useIndicator({\n isOpen,\n indicatorVariant = 'border',\n indicatorPlacement = 'top-right',\n targetRef,\n hasPulse = true,\n}: IndicatorOptions): UseIndicatorReturn {\n const data = useFloating({\n elements: {\n reference: targetRef?.current,\n },\n middleware: [\n offset(({ rects }) =>\n calcOffset(indicatorVariant, indicatorPlacement, rects),\n ),\n ],\n open: isOpen,\n placement: 'bottom',\n whileElementsMounted: autoUpdate,\n });\n\n return useMemo(\n () => ({\n ...data,\n indicatorClasses: classNames('ndl-spotlight-target-indicator', {\n 'ndl-spotlight-target-indicator-border': indicatorVariant === 'border',\n 'ndl-spotlight-target-indicator-point': indicatorVariant === 'point',\n 'ndl-spotlight-target-pulse': hasPulse,\n }),\n style: {\n borderRadius:\n indicatorVariant === 'border'\n ? getComputedBorderRadius(targetRef?.current)\n : '50%',\n height:\n indicatorVariant === 'border'\n ? `${targetRef?.current?.clientHeight ?? 0}px`\n : '8px',\n width:\n indicatorVariant === 'border'\n ? `${targetRef?.current?.clientWidth ?? 0}px`\n : '8px',\n },\n }),\n [data, indicatorVariant, targetRef, hasPulse],\n );\n}\n"]}

package/lib/cjs/status-label/StatusLabel.js CHANGED Viewed

@@ -121,7 +121,7 @@ const StatusLabel = (_a) => {
         'ndl-small': size === 'small',
     });
     const Component = as !== null && as !== void 0 ? as : 'span';
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ role: "status", className: classes, style: style, ref: ref }, htmlAttributes, restProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-status-label-content", children: [icon, (0, jsx_runtime_1.jsx)("span", {
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ role: "status", className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-status-label-content", children: [icon, (0, jsx_runtime_1.jsx)("span", {
                     // To enable native tooltip on hover if the children is a string
                     title: typeof children === 'string' ? children : 'status label', className: "ndl-status-label-text", children: children })] }) })));
 };

package/lib/cjs/status-label/StatusLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusLabel.js","sourceRoot":"","sources":["../../../src/status-label/StatusLabel.tsx"],"names":[],"mappings":"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~~cAAc~~,~~EACd~~,~~SAAS~~,~~cAEb~~,iCAAK,SAAS,EAAC,0BAA0B,aACtC,IAAI,EACL;oBACE,gEAAgE;oBAChE,KAAK,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,EAC/D,SAAS,EAAC,uBAAuB,YAEhC,QAAQ,GACJ,IACH,IACI,CACb,CAAC;AACJ,CAAC,CAAC;AAjHW,QAAA,WAAW,eAiHtB","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CircleIcon, RhombusIcon, SquareIcon, TriangleIcon } from '../icons';\n\n/\n \n \n Types\n \n \n /\n\ntype EventTypeStatusLabelProps = {\n /* Additional Classnames /\n className?: string;\n\n /* The content displayed inside the status label /\n children: React.ReactNode;\n\n /* Color of the status label that indicates its purpose. /\n variant?: (typeof StatusLabelVariants)[number];\n\n /* Fill type of status label, determines the background and border styles. /\n fill?: (typeof StatusLabelFill)[number];\n\n /* Whether the status label have an icon /\n hasIcon?: boolean;\n\n /* Size of the status label */\n size?: 'small' \| 'large';\n};\n\nconst StatusLabelVariants = [\n 'info',\n 'success',\n 'warning',\n 'danger',\n 'default',\n 'discovery',\n] as const;\n\nconst StatusLabelFill = ['filled', 'outlined', 'semi-filled', 'clean'] as const;\n\nexport const StatusLabel = <T extends React.ElementType = 'span'>({\n as,\n variant = 'default',\n children,\n className,\n style,\n fill = 'filled',\n hasIcon = false,\n htmlAttributes,\n size = 'large',\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, EventTypeStatusLabelProps>) => {\n let baseClasses: string;\n let icon: React.ReactNode \| null;\n\n // Clean Status label without icon is not allowed\n if (!hasIcon && fill === 'clean') {\n console.error('Clean StatusLabel has to have an icon');\n }\n\n // All colors map to the light-theme palette except the info\n const mappedColor = variant === 'info' ? 'primary' : variant;\n\n if (hasIcon) {\n const isFilled = fill === 'filled';\n if (mappedColor === 'default') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-neutral-bg-status)';\n icon = <SquareIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'primary') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-primary-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'success') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-success-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'danger') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-danger-bg-status)';\n icon = <RhombusIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'warning') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-warning-bg-status)';\n icon = <TriangleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'discovery') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-discovery-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n }\n }\n\n if (mappedColor === 'default') {\n baseClasses = classNames({\n [`n-bg-neutral-bg-default n-text-neutral-text-weak n-border-neutral-border-strong`]:\n fill === 'semi-filled',\n [`n-bg-neutral-bg-strongest n-text-neutral-text-inverse`]:\n fill === 'filled',\n [`n-text-neutral-text-weak n-border-neutral-border-strong`]:\n fill === 'outlined',\n [`n-text-neutral-text-weaker`]: fill === 'clean',\n });\n } else {\n baseClasses = classNames({\n [`n-bg-${mappedColor}-bg-strong n-text-neutral-text-inverse`]:\n fill === 'filled',\n [`n-text-${mappedColor}-text n-border-${mappedColor}-border-strong`]:\n fill === 'outlined',\n [`n-bg-${mappedColor}-bg-weak n-text-${mappedColor}-text n-border-${mappedColor}-border-weak`]:\n fill === 'semi-filled',\n [`n-text-neutral-text-default`]: fill === 'clean',\n });\n }\n\n const classes = classNames('ndl-status-label', baseClasses, className, {\n 'ndl-clean': fill === 'clean',\n 'ndl-filled': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-outlined': fill === 'outlined',\n 'ndl-semi-filled': fill === 'semi-filled',\n 'ndl-small': size === 'small',\n });\n\n const Component: React.ElementType = as ?? 'span';\n\n return (\n <Component\n role=\"status\"\n className={classes}\n style={style}\n ref={ref}\n {...~~htmlAttributes~~}\n {...~~restProps~~}\n >\n <div className=\"ndl-status-label-content\">\n {icon}\n <span\n // To enable native tooltip on hover if the children is a string\n title={typeof children === 'string' ? children : 'status label'}\n className=\"ndl-status-label-text\"\n >\n {children}\n </span>\n </div>\n </Component>\n );\n};\n"]}
1	+ {"version":3,"file":"StatusLabel.js","sourceRoot":"","sources":["../../../src/status-label/StatusLabel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CircleIcon, RhombusIcon, SquareIcon, TriangleIcon } from '../icons';\n\n/\n \n \n Types\n \n \n /\n\ntype EventTypeStatusLabelProps = {\n /* Additional Classnames /\n className?: string;\n\n /* The content displayed inside the status label /\n children: React.ReactNode;\n\n /* Color of the status label that indicates its purpose. /\n variant?: (typeof StatusLabelVariants)[number];\n\n /* Fill type of status label, determines the background and border styles. /\n fill?: (typeof StatusLabelFill)[number];\n\n /* Whether the status label have an icon /\n hasIcon?: boolean;\n\n /* Size of the status label */\n size?: 'small' \| 'large';\n};\n\nconst StatusLabelVariants = [\n 'info',\n 'success',\n 'warning',\n 'danger',\n 'default',\n 'discovery',\n] as const;\n\nconst StatusLabelFill = ['filled', 'outlined', 'semi-filled', 'clean'] as const;\n\nexport const StatusLabel = <T extends React.ElementType = 'span'>({\n as,\n variant = 'default',\n children,\n className,\n style,\n fill = 'filled',\n hasIcon = false,\n htmlAttributes,\n size = 'large',\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, EventTypeStatusLabelProps>) => {\n let baseClasses: string;\n let icon: React.ReactNode \| null;\n\n // Clean Status label without icon is not allowed\n if (!hasIcon && fill === 'clean') {\n console.error('Clean StatusLabel has to have an icon');\n }\n\n // All colors map to the light-theme palette except the info\n const mappedColor = variant === 'info' ? 'primary' : variant;\n\n if (hasIcon) {\n const isFilled = fill === 'filled';\n if (mappedColor === 'default') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-neutral-bg-status)';\n icon = <SquareIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'primary') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-primary-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'success') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-success-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'danger') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-danger-bg-status)';\n icon = <RhombusIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'warning') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-warning-bg-status)';\n icon = <TriangleIcon htmlAttributes={{ color: fillColor }} />;\n } else if (mappedColor === 'discovery') {\n const fillColor = isFilled\n ? 'currentColor'\n : 'var(--theme-color-discovery-bg-status)';\n icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n }\n }\n\n if (mappedColor === 'default') {\n baseClasses = classNames({\n [`n-bg-neutral-bg-default n-text-neutral-text-weak n-border-neutral-border-strong`]:\n fill === 'semi-filled',\n [`n-bg-neutral-bg-strongest n-text-neutral-text-inverse`]:\n fill === 'filled',\n [`n-text-neutral-text-weak n-border-neutral-border-strong`]:\n fill === 'outlined',\n [`n-text-neutral-text-weaker`]: fill === 'clean',\n });\n } else {\n baseClasses = classNames({\n [`n-bg-${mappedColor}-bg-strong n-text-neutral-text-inverse`]:\n fill === 'filled',\n [`n-text-${mappedColor}-text n-border-${mappedColor}-border-strong`]:\n fill === 'outlined',\n [`n-bg-${mappedColor}-bg-weak n-text-${mappedColor}-text n-border-${mappedColor}-border-weak`]:\n fill === 'semi-filled',\n [`n-text-neutral-text-default`]: fill === 'clean',\n });\n }\n\n const classes = classNames('ndl-status-label', baseClasses, className, {\n 'ndl-clean': fill === 'clean',\n 'ndl-filled': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-outlined': fill === 'outlined',\n 'ndl-semi-filled': fill === 'semi-filled',\n 'ndl-small': size === 'small',\n });\n\n const Component: React.ElementType = as ?? 'span';\n\n return (\n <Component\n role=\"status\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-status-label-content\">\n {icon}\n <span\n // To enable native tooltip on hover if the children is a string\n title={typeof children === 'string' ? children : 'status label'}\n className=\"ndl-status-label-text\"\n >\n {children}\n </span>\n </div>\n </Component>\n );\n};\n"]}

package/lib/cjs/switch/Switch.js CHANGED Viewed

@@ -66,8 +66,9 @@ const Switch = (_a) => {
     }, [isIndeterminate]);
     /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */
     const labelContent = (0, react_2.useMemo)(() => {
-        if (Boolean(label) === false)
+        if (Boolean(label) === false) {
             return null;
+        }
         if (typeof label === 'string') {
             return ((0, jsx_runtime_1.jsx)("span", { title: label, className: "ndl-switch-label-text", children: label }));
         }

package/lib/cjs/switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,8CAAkD;AAClD,4DAAoC;AACpC,iCAAmD;AAGnD,oFAA8E;AAC9E,4CAAwD;AAkCjD,MAAM,MAAM,GAAG,CAAC,EAiBa,EAAE,EAAE;;QAjBjB,EACrB,SAAS,EACT,gBAAgB,EAChB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE+B,EAD/B,SAAS,cAhBS,qMAiBtB,CADa;IAEZ,MAAM,WAAW,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,IAAA,oBAAY,EAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAA,kDAAsB,EAAC;QAChE,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE;QAC1D,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;KACrB,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wGAAwG;IACxG,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK;~~YAAE~~,OAAO,IAAI,CAAC;~~QAE1C~~,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,CACL,iCAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,uBAAuB,YAClD,KAAK,GACD,CACR,CAAC;QACJ,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7D,IAAA,4BAAoB,EAClB,6GAA6G,CAC9G,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,mCAAO,SAAS,EAAE,oBAAoB,aACnC,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,gDACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,aAAa,IACpB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC;~~AAtFW~~,QAAA,MAAM,~~UAsFjB~~","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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\n\ntype SwitchProps = {\n /* Whether the switch is checked /\n isChecked?: boolean;\n /* Checks the input by default in uncontrolled mode /\n isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n /* Whether the switch is indeterminate /\n isIndeterminate?: boolean;\n /* Whether the switch is disabled /\n isDisabled?: boolean;\n /* Whether the switch & label should take the full available width of its container /\n isFluid?: boolean;\n /* The value of the switch /\n value?: HtmlAttributes<'input'>['value']; // should this be required?\n /* Whether the label should be displayed before the switch /\n hasLeadingLabel?: boolean;\n /* The callback function triggered when the switch value changes /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /* The callback function triggered when the switch is clicked /\n onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n \| {\n /* The aria label of the switch. Required if the label is not a string. /\n ariaLabel: string;\n /* The label of the switch. If not a string, supply an aria label for screen reader support. /\n label?: undefined;\n }\n \| {\n ariaLabel?: string;\n label: React.ReactNode;\n }\n);\n\nexport const Switch = ({\n isChecked,\n isDefaultChecked,\n isIndeterminate = false,\n isFluid = false,\n isDisabled = false,\n hasLeadingLabel,\n ariaLabel,\n onChange,\n onClick,\n value,\n label,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'input', SwitchProps>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs([internalRef, ref]);\n\n const [isCheckedState, internalOnChange] = useSemiControlledInput({\n inputType: 'switch',\n isControlled: isChecked !== undefined,\n onChange,\n state: isChecked ?? isDefaultChecked ?? false,\n });\n\n const labelWrappingClasses = classNames('ndl-switch-label', {\n 'ndl-disabled': isDisabled,\n 'ndl-fluid': isFluid,\n });\n\n const switchClasses = classNames('ndl-switch', className, {\n 'ndl-disabled': isDisabled,\n });\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = isIndeterminate;\n }\n }, [isIndeterminate]);\n\n /* TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */\n const labelContent = useMemo(() => {\n if (Boolean(label) === false) return null;\n\n if (typeof label === 'string') {\n return (\n <span title={label} className=\"ndl-switch-label-text\">\n {label}\n </span>\n );\n }\n return label;\n }, [label]);\n\n useEffect(() => {\n if (Boolean(label) === false && Boolean(ariaLabel) === false) {\n needleWarningMessage(\n 'Switch needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n }, [ariaLabel, label]);\n\n return (\n <label className={labelWrappingClasses}>\n {hasLeadingLabel === true && labelContent}\n <input\n ref={mergedRefs}\n type=\"checkbox\"\n role=\"switch\"\n aria-label={ariaLabel}\n disabled={isDisabled}\n checked={isCheckedState}\n onClick={onClick}\n onChange={internalOnChange}\n value={value}\n style={style}\n className={switchClasses}\n {...restProps}\n {...htmlAttributes}\n />\n {Boolean(hasLeadingLabel) === false && labelContent}\n </label>\n );\n};\n"]}
1	+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.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 { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\n\ntype SwitchProps = {\n /* Whether the switch is checked /\n isChecked?: boolean;\n /* Checks the input by default in uncontrolled mode /\n isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n /* Whether the switch is indeterminate /\n isIndeterminate?: boolean;\n /* Whether the switch is disabled /\n isDisabled?: boolean;\n /* Whether the switch & label should take the full available width of its container /\n isFluid?: boolean;\n /* The value of the switch /\n value?: HtmlAttributes<'input'>['value']; // should this be required?\n /* Whether the label should be displayed before the switch /\n hasLeadingLabel?: boolean;\n /* The callback function triggered when the switch value changes /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /* The callback function triggered when the switch is clicked /\n onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n \| {\n /* The aria label of the switch. Required if the label is not a string. /\n ariaLabel: string;\n /* The label of the switch. If not a string, supply an aria label for screen reader support. /\n label?: undefined;\n }\n \| {\n ariaLabel?: string;\n label: React.ReactNode;\n }\n);\n\nexport const Switch = ({\n isChecked,\n isDefaultChecked,\n isIndeterminate = false,\n isFluid = false,\n isDisabled = false,\n hasLeadingLabel,\n ariaLabel,\n onChange,\n onClick,\n value,\n label,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'input', SwitchProps>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs([internalRef, ref]);\n\n const [isCheckedState, internalOnChange] = useSemiControlledInput({\n inputType: 'switch',\n isControlled: isChecked !== undefined,\n onChange,\n state: isChecked ?? isDefaultChecked ?? false,\n });\n\n const labelWrappingClasses = classNames('ndl-switch-label', {\n 'ndl-disabled': isDisabled,\n 'ndl-fluid': isFluid,\n });\n\n const switchClasses = classNames('ndl-switch', className, {\n 'ndl-disabled': isDisabled,\n });\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = isIndeterminate;\n }\n }, [isIndeterminate]);\n\n /* TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */\n const labelContent = useMemo(() => {\n if (Boolean(label) === false) {\n return null;\n }\n\n if (typeof label === 'string') {\n return (\n <span title={label} className=\"ndl-switch-label-text\">\n {label}\n </span>\n );\n }\n return label;\n }, [label]);\n\n useEffect(() => {\n if (Boolean(label) === false && Boolean(ariaLabel) === false) {\n needleWarningMessage(\n 'Switch needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n }, [ariaLabel, label]);\n\n return (\n <label className={labelWrappingClasses}>\n {hasLeadingLabel === true && labelContent}\n <input\n ref={mergedRefs}\n type=\"checkbox\"\n role=\"switch\"\n aria-label={ariaLabel}\n disabled={isDisabled}\n checked={isCheckedState}\n onClick={onClick}\n onChange={internalOnChange}\n value={value}\n style={style}\n className={switchClasses}\n {...restProps}\n {...htmlAttributes}\n />\n {Boolean(hasLeadingLabel) === false && labelContent}\n </label>\n );\n};\n"]}

package/lib/cjs/switch/stories/switch.stories.js CHANGED Viewed

@@ -24,7 +24,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Full = exports.Disabled = exports.HasLeadingLabel = exports.NoLabel = exports.Controlled = exports.Indeterminate = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../index");
-const _1 = require("./");
+const _1 = require(".");
 const componentMeta = {
     title: 'Components/Switch',
     id: 'components-switch',