@neo4j-ndl/react 4.20.0 → 4.21.0

package/lib/cjs/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useCallback, useEffect } from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useSlider,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\nimport { type SliderState, useSliderState } from 'react-stately';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { Tooltip } from '../tooltip';\n\ntype SliderPropsBase = {\n  /** Input props of the underlying input element */\n  inputProps?: HtmlAttributes<'input'>;\n  /** Determines the step size that will be added or removed from the current value when moving the slider button */\n  step?: number;\n  /** Whether the slider is disabled */\n  isDisabled?: boolean;\n  /** The minimum value possible to choose */\n  minValue?: number;\n  /** The maximum value possible to choose */\n  maxValue?: number;\n  /** Whether to display a tooltip with the current value when the slider is being dragged */\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showValues?: boolean;\n  /** Whether to display visual indicators for each step in the slider */\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showSteps?: boolean;\n};\n\ntype SingleSlider = SliderPropsBase & {\n  /** Type of the slider */\n  type?: 'single';\n  /** Current value of the single slider. **Only required when the type is 'single'**. */\n  value: number;\n  /** Callback function triggered when the slider value(s) changes. The function parameter varies depending on the slider type, for single slider, it is a number and for range slider, it is an array of two numbers. */\n  onChange: (value: number) => void;\n};\n\ntype RangeSlider = SliderPropsBase & {\n  /** Type of the slider */\n  type: 'range';\n  /** Current values of the range slider as an array of two numbers `[min, max]`. **Only required when the type is 'range'**.*/\n  values: [number, number];\n  /** Callback function triggered when the slider value(s) changes. The function parameter varies depending on the slider type, for single slider, it is a number and for range slider, it is an array of two numbers. */\n  onChange: (value: [number, number]) => void;\n};\n\n/**\n * @remarks\n * The `type` prop is used to determine the type of the slider. It can be `single` or `range`. The `value` prop is required when the `type` is `single` and `values` is required when the `type` is `range`. It also affects the `onChange` prop type.\n */\ntype SliderProps = SingleSlider | RangeSlider;\n\nexport const Slider = <T extends React.ElementType = 'div'>({\n  as,\n  inputProps = {},\n  className,\n  style,\n  minValue = 0,\n  maxValue = 100,\n  isDisabled = false,\n  showSteps = false,\n  showValues = false,\n  step = 1,\n  type = 'single',\n  onChange,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SliderProps>) => {\n  const trackRef = React.useRef<HTMLDivElement | null>(null);\n\n  const castedValue =\n    type === 'range'\n      ? (restProps as RangeSlider).values\n      : (restProps as SingleSlider).value;\n\n  const castedOnChange =\n    type === 'range'\n      ? (onChange as RangeSlider['onChange'])\n      : (onChange as SingleSlider['onChange']);\n\n  const state = useSliderState<typeof castedValue>({\n    defaultValue: castedValue,\n    isDisabled,\n    maxValue,\n    minValue,\n    numberFormatter: new Intl.NumberFormat('en-US'),\n    // oxlint-disable-next-line no-explicit-any\n    onChange: castedOnChange as any,\n    step,\n  });\n\n  const { setThumbValue } = state;\n\n  const { groupProps, trackProps } = useSlider(\n    { 'aria-label': 'slider' },\n    state,\n    trackRef,\n  );\n\n  const updatesSliderValue = useCallback(\n    (newValue: number | [number, number]) => {\n      if (type === 'single' && typeof newValue === 'number') {\n        setThumbValue(0, newValue);\n      } else if (type === 'range' && Array.isArray(newValue)) {\n        setThumbValue(0, newValue[0]);\n        setThumbValue(1, newValue[1]);\n      }\n    },\n    [type, setThumbValue],\n  );\n\n  useEffect(() => {\n    updatesSliderValue(castedValue);\n    // Needed to make the slider work with controlled values\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [castedValue]);\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classNames('ndl-slider', className)}\n      style={style}\n      role=\"presentation\"\n      ref={ref}\n      {...groupProps}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* The track element holds the visible track line, the filled track line and the thumb. */}\n      <div\n        {...trackProps}\n        ref={trackRef as React.RefObject<HTMLDivElement>}\n        className={classNames('ndl-track', {\n          'ndl-is-disabled': state.isDisabled,\n        })}\n      >\n        {/* Circular marks, acting as indicators for the steps */}\n        {showSteps && (\n          <TrackMarks state={state} min={minValue} max={maxValue} />\n        )}\n        <FilledTrack state={state} />\n        <Thumb\n          index={0}\n          state={state}\n          trackRef={trackRef as React.RefObject<HTMLDivElement>}\n          showValues={showValues}\n          inputForwardedProps={inputProps}\n        />\n        {type === 'range' && (\n          <Thumb\n            index={1}\n            state={state}\n            trackRef={trackRef as React.RefObject<HTMLDivElement>}\n            showValues={showValues}\n            inputForwardedProps={inputProps}\n          />\n        )}\n      </div>\n    </Component>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nfunction FilledTrack({ state }: { state: SliderState }) {\n  let width: number;\n  let left: number;\n  if (state.values.length === 1) {\n    width = state.getValuePercent(state.values[0]) * 100;\n    left = 0;\n  } else {\n    width =\n      state.getValuePercent(state.values[1]) * 100 -\n      state.getValuePercent(state.values[0]) * 100;\n    left = state.getValuePercent(state.values[0]) * 100;\n  }\n\n  return (\n    <div\n      className=\"ndl-filled-track\"\n      style={{\n        left: `${left}%`,\n        width: `${width}%`,\n      }}\n    />\n  );\n}\n\nfunction TrackMarks({\n  state,\n  max,\n  min,\n}: {\n  state: SliderState;\n  max: number;\n  min: number;\n}) {\n  const markNo = Math.round((max - min) / state.step);\n\n  return (\n    <div role=\"presentation\" className=\"ndl-track-marks\">\n      {Array.from({ length: markNo - 1 }).map((_, index) => {\n        const percent = (index / markNo) * 100;\n\n        let isFilled;\n        if (state.values.length === 1) {\n          isFilled = state.getValuePercent(state.values[0]) * 100 > percent;\n        } else {\n          isFilled =\n            state.getValuePercent(state.values[0]) * 100 < percent &&\n            state.getValuePercent(state.values[1]) * 100 > percent;\n        }\n\n        return (\n          <div\n            key={`track-mark-${index}`}\n            className={classNames('ndl-track-mark', {\n              'ndl-on-active-track': isFilled,\n            })}\n            style={{\n              left: `${((index + 1) / markNo) * 100}%`,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction Thumb(props: {\n  index: number;\n  state: SliderState;\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showValues?: boolean;\n  trackRef: React.RefObject<HTMLDivElement>;\n  inputForwardedProps: HtmlAttributes<'input'>;\n}) {\n  const { state, trackRef, index, inputForwardedProps } = props;\n  const inputRef = React.useRef(null);\n  const { thumbProps, inputProps, isDragging } = useSliderThumb(\n    {\n      index,\n      inputRef,\n      name: 'slider-thumb',\n      trackRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  /**\n   * Solve issue with:\n   * Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.\n   * Receiving NaN for other attributes also, like `max`. Waiting for a fix in react-aria.\n   * @see https://github.com/adobe/react-spectrum/issues/5859\n   * @see https://github.com/adobe/react-spectrum/pull/5861\n   */\n  const mergedProps = mergeProps(\n    inputProps,\n    focusProps,\n    // Omitting aria-valuetext double announcements, unless explicitly provided\n    { 'aria-valuetext': '' },\n    inputForwardedProps,\n  );\n  const value =\n    mergedProps.value !== undefined || mergedProps.value === 0\n      ? mergedProps.value\n      : '';\n\n  return (\n    <Tooltip\n      isDisabled={props.showValues !== true}\n      isOpen={isDragging || undefined}\n      placement=\"top\"\n      type=\"simple\"\n    >\n      <Tooltip.Trigger hasButtonWrapper>\n        <div\n          {...thumbProps}\n          className={classNames('ndl-thumb', {\n            'ndl-focus': isFocusVisible,\n            'ndl-is-dragging': isDragging,\n          })}\n        >\n          <VisuallyHidden>\n            <input ref={inputRef} {...mergedProps} />\n          </VisuallyHidden>\n        </div>\n      </Tooltip.Trigger>\n      <Tooltip.Content>{value}</Tooltip.Content>\n    </Tooltip>\n  );\n}\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useCallback, useEffect } from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useSlider,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\nimport { type SliderState, useSliderState } from 'react-stately';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { Tooltip } from '../tooltip';\n\ntype SliderPropsBase = {\n  /** Input props of the underlying input element */\n  inputProps?: HtmlAttributes<'input'>;\n  /** Determines the step size that will be added or removed from the current value when moving the slider button */\n  step?: number;\n  /** Whether the slider is disabled */\n  isDisabled?: boolean;\n  /** The minimum value possible to choose */\n  minValue?: number;\n  /** The maximum value possible to choose */\n  maxValue?: number;\n  /** Whether to display a tooltip with the current value when the slider is being dragged */\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showValues?: boolean;\n  /** Whether to display visual indicators for each step in the slider */\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showSteps?: boolean;\n};\n\ntype SingleSlider = SliderPropsBase & {\n  /** Type of the slider */\n  type?: 'single';\n  /** Current value of the single slider. **Only required when the type is 'single'**. */\n  value: number;\n  /** Callback function triggered when the slider value(s) changes. The function parameter varies depending on the slider type, for single slider, it is a number and for range slider, it is an array of two numbers. */\n  onChange: (value: number) => void;\n};\n\ntype RangeSlider = SliderPropsBase & {\n  /** Type of the slider */\n  type: 'range';\n  /** Current values of the range slider as an array of two numbers `[min, max]`. **Only required when the type is 'range'**.*/\n  values: [number, number];\n  /** Callback function triggered when the slider value(s) changes. The function parameter varies depending on the slider type, for single slider, it is a number and for range slider, it is an array of two numbers. */\n  onChange: (value: [number, number]) => void;\n};\n\n/**\n * @remarks\n * The `type` prop is used to determine the type of the slider. It can be `single` or `range`. The `value` prop is required when the `type` is `single` and `values` is required when the `type` is `range`. It also affects the `onChange` prop type.\n */\ntype SliderProps = SingleSlider | RangeSlider;\n\nexport const Slider = <T extends React.ElementType = 'div'>({\n  as,\n  inputProps = {},\n  className,\n  style,\n  minValue = 0,\n  maxValue = 100,\n  isDisabled = false,\n  showSteps = false,\n  showValues = false,\n  step = 1,\n  type = 'single',\n  onChange,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, SliderProps>) => {\n  const trackRef = React.useRef<HTMLDivElement | null>(null);\n\n  const castedValue =\n    type === 'range'\n      ? (restProps as RangeSlider).values\n      : (restProps as SingleSlider).value;\n\n  const castedOnChange =\n    type === 'range'\n      ? (onChange as RangeSlider['onChange'])\n      : (onChange as SingleSlider['onChange']);\n\n  const state = useSliderState<typeof castedValue>({\n    defaultValue: castedValue,\n    isDisabled,\n    maxValue,\n    minValue,\n    numberFormatter: new Intl.NumberFormat('en-US'),\n    // oxlint-disable-next-line no-explicit-any\n    onChange: castedOnChange as any,\n    step,\n  });\n\n  const { setThumbValue } = state;\n\n  const { groupProps, trackProps } = useSlider(\n    { 'aria-label': 'slider' },\n    state,\n    trackRef,\n  );\n\n  const updatesSliderValue = useCallback(\n    (newValue: number | [number, number]) => {\n      if (type === 'single' && typeof newValue === 'number') {\n        setThumbValue(0, newValue);\n      } else if (type === 'range' && Array.isArray(newValue)) {\n        setThumbValue(0, newValue[0]);\n        setThumbValue(1, newValue[1]);\n      }\n    },\n    [type, setThumbValue],\n  );\n\n  useEffect(() => {\n    updatesSliderValue(castedValue);\n    // Needed to make the slider work with controlled values\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [castedValue]);\n\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classNames('ndl-slider', className)}\n      style={style}\n      role=\"presentation\"\n      ref={ref}\n      {...groupProps}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* The track element holds the visible track line, the filled track line and the thumb. */}\n      <div\n        {...trackProps}\n        ref={trackRef as React.RefObject<HTMLDivElement>}\n        className={classNames('ndl-track', {\n          'ndl-is-disabled': state.isDisabled,\n        })}\n      >\n        {/* Circular marks, acting as indicators for the steps */}\n        {showSteps && (\n          <TrackMarks state={state} min={minValue} max={maxValue} />\n        )}\n        <FilledTrack state={state} />\n        <Thumb\n          index={0}\n          state={state}\n          trackRef={trackRef as React.RefObject<HTMLDivElement>}\n          showValues={showValues}\n          inputForwardedProps={inputProps}\n        />\n        {type === 'range' && (\n          <Thumb\n            index={1}\n            state={state}\n            trackRef={trackRef as React.RefObject<HTMLDivElement>}\n            showValues={showValues}\n            inputForwardedProps={inputProps}\n          />\n        )}\n      </div>\n    </Component>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nfunction FilledTrack({ state }: { state: SliderState }) {\n  let width: number;\n  let left: number;\n  if (state.values.length === 1) {\n    width = state.getValuePercent(state.values[0]) * 100;\n    left = 0;\n  } else {\n    width =\n      state.getValuePercent(state.values[1]) * 100 -\n      state.getValuePercent(state.values[0]) * 100;\n    left = state.getValuePercent(state.values[0]) * 100;\n  }\n\n  return (\n    <div\n      className=\"ndl-filled-track\"\n      style={{\n        left: `${left}%`,\n        width: `${width}%`,\n      }}\n    />\n  );\n}\n\nfunction TrackMarks({\n  state,\n  max,\n  min,\n}: {\n  state: SliderState;\n  max: number;\n  min: number;\n}) {\n  const markNo = Math.round((max - min) / state.step);\n\n  return (\n    <div role=\"presentation\" className=\"ndl-track-marks\">\n      {Array.from({ length: markNo - 1 }).map((_unused, index) => {\n        const percent = (index / markNo) * 100;\n\n        let isFilled;\n        if (state.values.length === 1) {\n          isFilled = state.getValuePercent(state.values[0]) * 100 > percent;\n        } else {\n          isFilled =\n            state.getValuePercent(state.values[0]) * 100 < percent &&\n            state.getValuePercent(state.values[1]) * 100 > percent;\n        }\n\n        return (\n          <div\n            key={`track-mark-${index}`}\n            className={classNames('ndl-track-mark', {\n              'ndl-on-active-track': isFilled,\n            })}\n            style={{\n              left: `${((index + 1) / markNo) * 100}%`,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction Thumb(props: {\n  index: number;\n  state: SliderState;\n  // TODO v5: decide if this naming is okay, or change it\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showValues?: boolean;\n  trackRef: React.RefObject<HTMLDivElement>;\n  inputForwardedProps: HtmlAttributes<'input'>;\n}) {\n  const { state, trackRef, index, inputForwardedProps } = props;\n  const inputRef = React.useRef(null);\n  const { thumbProps, inputProps, isDragging } = useSliderThumb(\n    {\n      index,\n      inputRef,\n      name: 'slider-thumb',\n      trackRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  /**\n   * Solve issue with:\n   * Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.\n   * Receiving NaN for other attributes also, like `max`. Waiting for a fix in react-aria.\n   * @see https://github.com/adobe/react-spectrum/issues/5859\n   * @see https://github.com/adobe/react-spectrum/pull/5861\n   */\n  const mergedProps = mergeProps(\n    inputProps,\n    focusProps,\n    // Omitting aria-valuetext double announcements, unless explicitly provided\n    { 'aria-valuetext': '' },\n    inputForwardedProps,\n  );\n  const value =\n    mergedProps.value !== undefined || mergedProps.value === 0\n      ? mergedProps.value\n      : '';\n\n  return (\n    <Tooltip\n      isDisabled={props.showValues !== true}\n      isOpen={isDragging || undefined}\n      placement=\"top\"\n      type=\"simple\"\n    >\n      <Tooltip.Trigger hasButtonWrapper>\n        <div\n          {...thumbProps}\n          className={classNames('ndl-thumb', {\n            'ndl-focus': isFocusVisible,\n            'ndl-is-dragging': isDragging,\n          })}\n        >\n          <VisuallyHidden>\n            <input ref={inputRef} {...mergedProps} />\n          </VisuallyHidden>\n        </div>\n      </Tooltip.Trigger>\n      <Tooltip.Content>{value}</Tooltip.Content>\n    </Tooltip>\n  );\n}\n"]}

package/lib/cjs/slider/stories/slider-single-controlled.story.js

@@ -52,8 +52,8 @@ const Component = () => {
     const [inputValue, setInputValue] = (0, react_2.useState)(String(INITIAL_VALUE));
     const { error, isValid } = getValidationError(inputValue);
     const hasError = !isValid;
-    const handleInputChange = (0, react_2.useCallback)((e) => {
-        const newInputValue = e.target.value;
+    const handleInputChange = (0, react_2.useCallback)((event) => {
+        const newInputValue = event.target.value;
         setInputValue(newInputValue);
         if (isValid) {
             setValue(Number(newInputValue));

package/lib/cjs/slider/stories/slider-single-controlled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-single-controlled.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-single-controlled.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Slider, TextInput } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\n\nconst MIN_VALUE = 0;\nconst MAX_VALUE = 100;\nconst STEP = 5;\nconst INITIAL_VALUE = 50;\n\nconst getValidationError = (\n  input: string,\n): { error: string; isValid: false } | { error: undefined; isValid: true } => {\n  const trimmed = input.trim();\n\n  if (!trimmed) {\n    return { error: 'Value is required', isValid: false };\n  }\n\n  const numValue = Number(trimmed);\n  if (isNaN(numValue)) {\n    return { error: 'Please enter a valid number', isValid: false };\n  }\n\n  if (!Number.isInteger(numValue)) {\n    return { error: 'Please enter a whole number', isValid: false };\n  }\n\n  if (numValue < MIN_VALUE) {\n    return { error: `Value must be at least ${MIN_VALUE}`, isValid: false };\n  }\n\n  if (numValue > MAX_VALUE) {\n    return { error: `Value must be at most ${MAX_VALUE}`, isValid: false };\n  }\n\n  return { error: undefined, isValid: true };\n};\n\nconst Component = () => {\n  const [value, setValue] = useState(INITIAL_VALUE);\n  const [inputValue, setInputValue] = useState(String(INITIAL_VALUE));\n  const { error, isValid } = getValidationError(inputValue);\n  const hasError = !isValid;\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = e.target.value;\n      setInputValue(newInputValue);\n\n      if (isValid) {\n        setValue(Number(newInputValue));\n      }\n    },\n    [setInputValue, setValue, isValid],\n  );\n\n  const handleSliderChange = useCallback(\n    (newValue: number) => {\n      setValue(newValue);\n      setInputValue(String(newValue));\n    },\n    [setInputValue, setValue],\n  );\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <TextInput\n        label=\"Slider value\"\n        helpText={`Enter a value between ${MIN_VALUE} and ${MAX_VALUE}`}\n        isRequired\n        errorText={error}\n        htmlAttributes={{\n          max: MAX_VALUE,\n          min: MIN_VALUE,\n          step: STEP,\n          type: 'number',\n        }}\n        value={inputValue}\n        onChange={handleInputChange}\n      />\n\n      <Slider\n        type=\"single\"\n        value={value}\n        onChange={handleSliderChange}\n        minValue={MIN_VALUE}\n        maxValue={MAX_VALUE}\n        step={STEP}\n        showSteps\n        showValues\n        isDisabled={hasError}\n        inputProps={{\n          'aria-valuetext': `${value} out of ${MAX_VALUE}`,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-single-controlled.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-single-controlled.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Slider, TextInput } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\n\nconst MIN_VALUE = 0;\nconst MAX_VALUE = 100;\nconst STEP = 5;\nconst INITIAL_VALUE = 50;\n\nconst getValidationError = (\n  input: string,\n): { error: string; isValid: false } | { error: undefined; isValid: true } => {\n  const trimmed = input.trim();\n\n  if (!trimmed) {\n    return { error: 'Value is required', isValid: false };\n  }\n\n  const numValue = Number(trimmed);\n  if (isNaN(numValue)) {\n    return { error: 'Please enter a valid number', isValid: false };\n  }\n\n  if (!Number.isInteger(numValue)) {\n    return { error: 'Please enter a whole number', isValid: false };\n  }\n\n  if (numValue < MIN_VALUE) {\n    return { error: `Value must be at least ${MIN_VALUE}`, isValid: false };\n  }\n\n  if (numValue > MAX_VALUE) {\n    return { error: `Value must be at most ${MAX_VALUE}`, isValid: false };\n  }\n\n  return { error: undefined, isValid: true };\n};\n\nconst Component = () => {\n  const [value, setValue] = useState(INITIAL_VALUE);\n  const [inputValue, setInputValue] = useState(String(INITIAL_VALUE));\n  const { error, isValid } = getValidationError(inputValue);\n  const hasError = !isValid;\n\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = event.target.value;\n      setInputValue(newInputValue);\n\n      if (isValid) {\n        setValue(Number(newInputValue));\n      }\n    },\n    [setInputValue, setValue, isValid],\n  );\n\n  const handleSliderChange = useCallback(\n    (newValue: number) => {\n      setValue(newValue);\n      setInputValue(String(newValue));\n    },\n    [setInputValue, setValue],\n  );\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <TextInput\n        label=\"Slider value\"\n        helpText={`Enter a value between ${MIN_VALUE} and ${MAX_VALUE}`}\n        isRequired\n        errorText={error}\n        htmlAttributes={{\n          max: MAX_VALUE,\n          min: MIN_VALUE,\n          step: STEP,\n          type: 'number',\n        }}\n        value={inputValue}\n        onChange={handleInputChange}\n      />\n\n      <Slider\n        type=\"single\"\n        value={value}\n        onChange={handleSliderChange}\n        minValue={MIN_VALUE}\n        maxValue={MAX_VALUE}\n        step={STEP}\n        showSteps\n        showValues\n        isDisabled={hasError}\n        inputProps={{\n          'aria-valuetext': `${value} out of ${MAX_VALUE}`,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/Spotlight.js

@@ -206,12 +206,12 @@ const SpotlightComponent = (_a) => {
                     headerId,
                     setDescriptionId,
                     setHeaderId,
-                }, children: [hasOverlay === true && ((0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-spotlight-overlay ndl-spotlight-overlay-top", onPointerDown: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                        }, onTouchStart: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
+                }, children: [hasOverlay === true && ((0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-spotlight-overlay ndl-spotlight-overlay-top", onPointerDown: (event) => {
+                            event.stopPropagation();
+                            event.preventDefault();
+                        }, onTouchStart: (event) => {
+                            event.stopPropagation();
+                            event.preventDefault();
                         } })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: mergedRef, className: classes, style: Object.assign(Object.assign(Object.assign({}, spotlight.floatingStyles), spotlight.transitionStyles), style) }, spotlight.getFloatingProps(Object.assign(Object.assign({}, htmlAttributes), { 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-modal': 'true' })), restProps, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }), (Boolean(beforeActions) || Boolean(actions)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-spotlight-footer", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: beforeActions }), Boolean(actions) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-spotlight-actions", ref: actionsRef, children: actions }))] }))] }))] }) }) }));
 };
 SpotlightComponent.displayName = 'Spotlight';

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

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

package/lib/cjs/spotlight/SpotlightProvider.js

@@ -96,11 +96,11 @@ const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransparent =
             return {};
         }
         const { left, top, width, height } = targetRect;
-        const x = Math.max(0, left);
-        const y = Math.max(0, top);
-        const w = Math.max(0, width);
-        const h = Math.max(0, height);
-        const r = Math.max(0, Math.min(getHoleRadius(), Math.min(w, h) / 2));
+        const xPos = Math.max(0, left);
+        const yPos = Math.max(0, top);
+        const holeWidth = Math.max(0, width);
+        const holeHeight = Math.max(0, height);
+        const radius = Math.max(0, Math.min(getHoleRadius(), Math.min(holeWidth, holeHeight) / 2));
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         // SVG mask: white = visible overlay, black = hole (transparent)
@@ -109,7 +109,7 @@ const SpotlightProvider = ({ children, hasOverlay = true, isOverlayTransparent =
         <defs>
           <mask id="spotlightMask" maskUnits="userSpaceOnUse">
             <rect x="0" y="0" width="${vw}" height="${vh}" fill="white"/>
-            <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${r}" ry="${r}" fill="black"/>
+            <rect x="${xPos}" y="${yPos}" width="${holeWidth}" height="${holeHeight}" rx="${radius}" ry="${radius}" fill="black"/>
           </mask>
         </defs>
         <rect x="0" y="0" width="${vw}" height="${vh}" fill="black" mask="url(#spotlightMask)"/>

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

@@ -1 +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"]}
+{"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 xPos = Math.max(0, left);\n    const yPos = Math.max(0, top);\n    const holeWidth = Math.max(0, width);\n    const holeHeight = Math.max(0, height);\n    const radius = Math.max(\n      0,\n      Math.min(getHoleRadius(), Math.min(holeWidth, holeHeight) / 2),\n    );\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=\"${xPos}\" y=\"${yPos}\" width=\"${holeWidth}\" height=\"${holeHeight}\" rx=\"${radius}\" ry=\"${radius}\" 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

@@ -104,11 +104,11 @@ const SpotlightTarget = (_a) => {
     });
     if (asChild === true && react_2.default.isValidElement(children)) {
         const child = children;
-        const onClick = (e) => {
+        const onClick = (event) => {
             var _a, _b;
             if (isActive) {
                 // When spotlight is active, always prevent the child's click handler
-                e.preventDefault();
+                event.preventDefault();
                 if (!isOpen) {
                     setIsOpen(true);
                 }
@@ -116,21 +116,23 @@ const SpotlightTarget = (_a) => {
                 return;
             }
             // Only call the child's click handler when spotlight is not active
-            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
-        const onKeyDown = (e) => {
+        const onKeyDown = (event) => {
             var _a, _b;
-            if (isActive && !isOpen && (e.code === 'Enter' || e.code === 'Space')) {
-                e.preventDefault();
+            if (isActive &&
+                !isOpen &&
+                (event.code === 'Enter' || event.code === 'Space')) {
+                event.preventDefault();
                 setIsOpen(true);
                 return;
             }
-            if (isActive && e.code === 'Escape') {
-                e.preventDefault();
+            if (isActive && event.code === 'Escape') {
+                event.preventDefault();
                 setActiveSpotlight(null);
                 return;
             }
-            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
         // IMPORTANT: do NOT force role/tabIndex here; preserves Composite semantics for the SideNavigation
         const mergedProps = Object.assign({ id,
@@ -146,22 +148,22 @@ const SpotlightTarget = (_a) => {
     const inertClasses = (0, classnames_1.default)('ndl-spotlight-target-inert', {
         'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,
     }, className);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (event) => {
                     if (isActive) {
-                        e.preventDefault();
-                        e.stopPropagation();
+                        event.preventDefault();
+                        event.stopPropagation();
                         if (!isOpen) {
                             setIsOpen(true);
                         }
                     }
-                }, style: Object.assign({ borderRadius }, style), onKeyDown: (e) => {
+                }, style: Object.assign({ borderRadius }, style), onKeyDown: (event) => {
                     if (isActive &&
                         !isOpen &&
-                        (e.code === 'Enter' || e.code === 'Space')) {
+                        (event.code === 'Enter' || event.code === 'Space')) {
                         setIsOpen(true);
-                        e.preventDefault();
+                        event.preventDefault();
                     }
-                    else if (e.code === 'Escape' && isActive) {
+                    else if (event.code === 'Escape' && isActive) {
                         setActiveSpotlight(null);
                     }
                 }, 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) })) })] }));

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

@@ -1 +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;AAsClB,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,QAAQ,GACZ,OAAO,IAAI,eAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACvC,CAAC,CACG,QAGD,CAAC,GAAG;QACP,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,UAAU,GAAG,IAAA,oBAAY,EAAc;QAC3C,GAAmC;QACnC,WAA2C;QAC3C,QAA8C;KAC/C,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;AAnNW,QAAA,eAAe,mBAmN1B","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  // TODO v5: decide if this naming is okay, don't see how to follow the rule without a name that is tooo long\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  asChild?: boolean;\n};\n\nexport const SpotlightTarget = ({\n  id,\n  hasPulse = true,\n  indicatorVariant = 'border',\n  indicatorPlacement = 'top-right',\n  borderRadius,\n  shouldFitToChildren = false,\n  children,\n  className,\n  htmlAttributes,\n  style,\n  as,\n  ref,\n  asChild,\n  ...restProps\n}: PolymorphicCommonProps<'div', SpotlightTargetProps>) => {\n  const Component = as ?? 'div';\n\n  const {\n    isActiveSpotlight,\n    isOpen,\n    setIsOpen,\n    registerTarget,\n    unregisterTarget,\n    setActiveSpotlight,\n  } = useSpotlightContext();\n\n  const internalRef = React.useRef<HTMLElement>(null);\n  const childRef =\n    asChild && React.isValidElement(children)\n      ? (\n          children as React.ReactElement<unknown> & {\n            ref?: React.Ref<HTMLElement>;\n          }\n        ).ref\n      : undefined;\n  const mergedRefs = useMergeRefs<HTMLElement>([\n    ref as React.RefObject<HTMLElement>,\n    internalRef as React.RefObject<HTMLElement>,\n    childRef as React.Ref<HTMLElement> | undefined,\n  ]);\n  useEffect(() => {\n    if (internalRef.current !== null) {\n      registerTarget(id, internalRef as React.RefObject<HTMLElement>);\n    }\n    return () => unregisterTarget(id);\n  }, [id, registerTarget, unregisterTarget]);\n\n  const isActive = isActiveSpotlight(id);\n  const indicator = useIndicator({\n    hasPulse,\n    indicatorPlacement,\n    indicatorVariant,\n    isOpen: isActive,\n    targetRef: internalRef,\n  });\n\n  if (asChild === true && React.isValidElement(children)) {\n    const child = children as React.ReactElement<{\n      className?: string;\n      style?: React.CSSProperties;\n      onClick?: (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"]}
+{"version":3,"file":"SpotlightTarget.js","sourceRoot":"","sources":["../../../src/spotlight/SpotlightTarget.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { FloatingPortal, useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useSpotlightContext } from './SpotlightProvider';\nimport {\n  type IndicatorPlacement,\n  type IndicatorVariant,\n  useIndicator,\n} from './use-indicator';\n\ntype SpotlightTargetProps = {\n  /** The id of the wrapper. This should match a `target` prop in a `Spotlight`, to indicate that this is where it should be rendered when open */\n  id: string;\n  /** A boolean that controls if the pulse animation should be used or not */\n  hasPulse?: boolean;\n  /** A string that controls the style of the indicator. It can be either \"point\" or \"border\" */\n  indicatorVariant?: IndicatorVariant;\n  /** A string that controls the placement of the indicator. A combination of \"middle\", \"top\", \"right\", \"bottom\" and \"left\" separated by a dash, e.g. \"top-right\" */\n  indicatorPlacement?: IndicatorPlacement;\n  /** An inline style CSS property to control the border radius of the wrapper */\n  borderRadius?: React.CSSProperties['borderRadius'];\n  /** The content to wrap */\n  children?: React.ReactNode;\n  /** Fit the target size to the children. */\n  shouldFitToChildren?: boolean;\n  /**\n   * When true, merges the spotlight target props directly with the child element instead of wrapping it in a div.\n   *\n   * This is useful for applying spotlight functionality to existing interactive elements (buttons, links, etc.)\n   * while preserving their original behavior, styling, and accessibility attributes.\n   *\n   * @remarks\n   * - **Warning:** Only use with interactive elements that can receive focus and handle click events.\n   * - **Warning:** The child element's `id` will be overridden with the target's `id`.\n   *\n   * @example\n   * ```tsx\n   * <SpotlightTarget id=\"my-button\" asChild>\n   *   <FilledButton>Click me</FilledButton>\n   * </SpotlightTarget>\n   * ```\n   */\n  // TODO v5: decide if this naming is okay, don't see how to follow the rule without a name that is tooo long\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  asChild?: boolean;\n};\n\nexport const SpotlightTarget = ({\n  id,\n  hasPulse = true,\n  indicatorVariant = 'border',\n  indicatorPlacement = 'top-right',\n  borderRadius,\n  shouldFitToChildren = false,\n  children,\n  className,\n  htmlAttributes,\n  style,\n  as,\n  ref,\n  asChild,\n  ...restProps\n}: PolymorphicCommonProps<'div', SpotlightTargetProps>) => {\n  const Component = as ?? 'div';\n\n  const {\n    isActiveSpotlight,\n    isOpen,\n    setIsOpen,\n    registerTarget,\n    unregisterTarget,\n    setActiveSpotlight,\n  } = useSpotlightContext();\n\n  const internalRef = React.useRef<HTMLElement>(null);\n  const childRef =\n    asChild && React.isValidElement(children)\n      ? (\n          children as React.ReactElement<unknown> & {\n            ref?: React.Ref<HTMLElement>;\n          }\n        ).ref\n      : undefined;\n  const mergedRefs = useMergeRefs<HTMLElement>([\n    ref as React.RefObject<HTMLElement>,\n    internalRef as React.RefObject<HTMLElement>,\n    childRef as React.Ref<HTMLElement> | undefined,\n  ]);\n  useEffect(() => {\n    if (internalRef.current !== null) {\n      registerTarget(id, internalRef as React.RefObject<HTMLElement>);\n    }\n    return () => unregisterTarget(id);\n  }, [id, registerTarget, unregisterTarget]);\n\n  const isActive = isActiveSpotlight(id);\n  const indicator = useIndicator({\n    hasPulse,\n    indicatorPlacement,\n    indicatorVariant,\n    isOpen: isActive,\n    targetRef: internalRef,\n  });\n\n  if (asChild === true && React.isValidElement(children)) {\n    const child = children as React.ReactElement<{\n      className?: string;\n      style?: React.CSSProperties;\n      onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n    }>;\n\n    const onClick = (event: React.MouseEvent<HTMLElement>) => {\n      if (isActive) {\n        // When spotlight is active, always prevent the child's click handler\n        event.preventDefault();\n\n        if (!isOpen) {\n          setIsOpen(true);\n        }\n        // Don't call child.props?.onClick when spotlight is active\n        return;\n      }\n\n      // Only call the child's click handler when spotlight is not active\n      child.props?.onClick?.(event);\n    };\n\n    const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n      if (\n        isActive &&\n        !isOpen &&\n        (event.code === 'Enter' || event.code === 'Space')\n      ) {\n        event.preventDefault();\n        setIsOpen(true);\n        return;\n      }\n\n      if (isActive && event.code === 'Escape') {\n        event.preventDefault();\n        setActiveSpotlight(null);\n        return;\n      }\n\n      child.props?.onKeyDown?.(event);\n    };\n\n    // IMPORTANT: do NOT force role/tabIndex here; preserves Composite semantics for the SideNavigation\n    const mergedProps = {\n      id,\n      onClick,\n      onKeyDown,\n      ref: mergedRefs,\n      style: {\n        ...style,\n        ...child.props.style,\n      },\n      // Avoid overriding the child's own role/tabIndex with any passed htmlAttributes\n      ...(htmlAttributes\n        ? { ...htmlAttributes, role: undefined, tabIndex: undefined }\n        : {}),\n    };\n\n    return (\n      <>\n        {React.cloneElement(child, mergedProps as Record<string, unknown>)}\n        <ConditionalWrap\n          shouldWrap={isActive && isOpen}\n          wrap={(wrapChildren) => (\n            <FloatingPortal>{wrapChildren}</FloatingPortal>\n          )}\n        >\n          {indicator.context.open && (\n            <div\n              className={indicator.indicatorClasses}\n              ref={indicator.context.refs.setFloating}\n              style={{ ...indicator.floatingStyles, ...indicator.style }}\n            />\n          )}\n        </ConditionalWrap>\n      </>\n    );\n  }\n\n  const classes = classNames(\n    'ndl-spotlight-target',\n    {\n      'ndl-spotlight-target-fit-to-children': shouldFitToChildren,\n      'ndl-spotlight-target-open': isOpen && isActive,\n    },\n    className,\n  );\n\n  const inertClasses = classNames(\n    'ndl-spotlight-target-inert',\n    {\n      'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,\n    },\n    className,\n  );\n\n  return (\n    <>\n      <Component\n        role={isActive ? 'button' : undefined}\n        id={id}\n        ref={mergedRefs}\n        className={classes}\n        onClick={(event) => {\n          if (isActive) {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (!isOpen) {\n              setIsOpen(true);\n            }\n          }\n        }}\n        style={{ borderRadius, ...style }}\n        onKeyDown={(event) => {\n          if (\n            isActive &&\n            !isOpen &&\n            (event.code === 'Enter' || event.code === 'Space')\n          ) {\n            setIsOpen(true);\n            event.preventDefault();\n          } else if (event.code === 'Escape' && isActive) {\n            setActiveSpotlight(null);\n          }\n        }}\n        tabIndex={isActive ? 0 : undefined}\n        {...(isActive && { 'aria-label': 'Open spotlight' })}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        <ConditionalWrap\n          shouldWrap={isActive}\n          wrap={(children) => (\n            <div inert aria-disabled className={inertClasses}>\n              {children}\n            </div>\n          )}\n        >\n          {children}\n        </ConditionalWrap>\n      </Component>\n      <ConditionalWrap\n        shouldWrap={isActive && isOpen}\n        wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n      >\n        {indicator.context.open && (\n          <div\n            className={indicator.indicatorClasses}\n            ref={indicator.context.refs.setFloating}\n            style={{ ...indicator.floatingStyles, ...indicator.style }}\n          />\n        )}\n      </ConditionalWrap>\n    </>\n  );\n};\n"]}

package/lib/cjs/status-indicator/StatusIndicator.js

@@ -41,6 +41,7 @@ const statusConfig = {
     danger: {
         element: 'path',
         props: {
+            // oxlint-disable-next-line id-length
             d: 'M0.188426 4.45553C0.067771 4.33472 0 4.17097 0 4.00024C0 3.8295 0.067771 3.66575 0.188426 3.54494L3.54489 0.188838C3.6046 0.128979 3.67554 0.0814871 3.75363 0.0490833C3.83173 0.0166795 3.91545 0 4 0C4.08455 0 4.16827 0.0166795 4.24637 0.0490833C4.32446 0.0814871 4.3954 0.128979 4.45511 0.188838L7.81157 3.54494C7.93223 3.66575 8 3.8295 8 4.00024C8 4.17097 7.93223 4.33472 7.81157 4.45553L4.45511 7.81163C4.33437 7.93226 4.17068 8.00003 4 8.00003C3.82932 8.00003 3.66563 7.93226 3.54489 7.81163L0.188426 4.45553Z',
             fill: 'var(--theme-color-danger-bg-status)',
         },
@@ -51,7 +52,7 @@ const statusConfig = {
             cx: '4',
             cy: '4',
             fill: 'var(--theme-color-primary-bg-status)',
-            r: '4',
+            r: '4', // oxlint-disable-line id-length
         },
     },
     success: {
@@ -60,7 +61,7 @@ const statusConfig = {
             cx: '4',
             cy: '4',
             fill: 'var(--theme-color-success-bg-status)',
-            r: '4',
+            r: '4', // oxlint-disable-line id-length
         },
     },
     unknown: {
@@ -75,6 +76,7 @@ const statusConfig = {
     warning: {
         element: 'path',
         props: {
+            // oxlint-disable-next-line id-length
             d: 'M4.57641 0.35903C4.52349 0.251301 4.44144 0.160559 4.33957 0.0970988C4.23769 0.0336384 4.12007 0 4.00005 0C3.88002 0 3.7624 0.0336384 3.66053 0.0970988C3.55865 0.160559 3.4766 0.251301 3.42368 0.35903L0.0554707 7.22061C0.0149262 7.30309 -0.00393024 7.39454 0.000681349 7.48633C0.00529294 7.57812 0.0332205 7.66722 0.0818275 7.74522C0.130434 7.82322 0.198117 7.88754 0.278487 7.93212C0.358856 7.9767 0.44926 8.00006 0.541165 8H7.45893C7.55083 8.00006 7.64124 7.9767 7.7216 7.93212C7.80197 7.88754 7.86966 7.82322 7.91826 7.74522C7.96687 7.66722 7.9948 7.57812 7.99941 7.48633C8.00402 7.39454 7.98517 7.30309 7.94462 7.22061L4.57641 0.35903Z',
             fill: 'var(--theme-color-warning-bg-status)',
         },

package/lib/cjs/status-indicator/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sourceRoot":"","sources":["../../../src/status-indicator/StatusIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAUpC,MAAM,YAAY,GAAG;IACnB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,CAAC,EAAE,kgBAAkgB;YACrgB,IAAI,EAAE,qCAAqC;SAC5C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE;YACL,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,sCAAsC;YAC5C,CAAC,EAAE,GAAG;SACP;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE;YACL,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,sCAAsC;YAC5C,CAAC,EAAE,GAAG;SACP;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,IAAI,EAAE,sCAAsC;YAC5C,MAAM,EAAE,GAAG;YACX,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,GAAG;SACX;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,CAAC,EAAE,ioBAAioB;YACpoB,IAAI,EAAE,sCAAsC;SAC7C;KACF;CACO,CAAC;AAEJ,MAAM,eAAe,GAAG,CAAC,EAOW,EAAE,EAAE;QAPf,EAC9B,SAAS,EACT,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,GAAG,OAEsC,EADtC,SAAS,cANkB,0DAO/B,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,MAAM,CAAC,OAA4C,CAAC;IAEpE,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAElB,uBAAC,OAAO,oBAAK,MAAM,CAAC,KAAK,EAAI,IACzB,CACP,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,eAAe,mBA6B1B;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps } from '../_common/types';\n\ntype StatusIndicatorProps = {\n  /** Type of the status indicator. */\n  variant?: 'unknown' | 'success' | 'info' | 'warning' | 'danger';\n};\n\nconst statusConfig = {\n  danger: {\n    element: 'path',\n    props: {\n      d: 'M0.188426 4.45553C0.067771 4.33472 0 4.17097 0 4.00024C0 3.8295 0.067771 3.66575 0.188426 3.54494L3.54489 0.188838C3.6046 0.128979 3.67554 0.0814871 3.75363 0.0490833C3.83173 0.0166795 3.91545 0 4 0C4.08455 0 4.16827 0.0166795 4.24637 0.0490833C4.32446 0.0814871 4.3954 0.128979 4.45511 0.188838L7.81157 3.54494C7.93223 3.66575 8 3.8295 8 4.00024C8 4.17097 7.93223 4.33472 7.81157 4.45553L4.45511 7.81163C4.33437 7.93226 4.17068 8.00003 4 8.00003C3.82932 8.00003 3.66563 7.93226 3.54489 7.81163L0.188426 4.45553Z',\n      fill: 'var(--theme-color-danger-bg-status)',\n    },\n  },\n  info: {\n    element: 'circle',\n    props: {\n      cx: '4',\n      cy: '4',\n      fill: 'var(--theme-color-primary-bg-status)',\n      r: '4',\n    },\n  },\n  success: {\n    element: 'circle',\n    props: {\n      cx: '4',\n      cy: '4',\n      fill: 'var(--theme-color-success-bg-status)',\n      r: '4',\n    },\n  },\n  unknown: {\n    element: 'rect',\n    props: {\n      fill: 'var(--theme-color-neutral-bg-status)',\n      height: '8',\n      rx: '1',\n      width: '8',\n    },\n  },\n  warning: {\n    element: 'path',\n    props: {\n      d: 'M4.57641 0.35903C4.52349 0.251301 4.44144 0.160559 4.33957 0.0970988C4.23769 0.0336384 4.12007 0 4.00005 0C3.88002 0 3.7624 0.0336384 3.66053 0.0970988C3.55865 0.160559 3.4766 0.251301 3.42368 0.35903L0.0554707 7.22061C0.0149262 7.30309 -0.00393024 7.39454 0.000681349 7.48633C0.00529294 7.57812 0.0332205 7.66722 0.0818275 7.74522C0.130434 7.82322 0.198117 7.88754 0.278487 7.93212C0.358856 7.9767 0.44926 8.00006 0.541165 8H7.45893C7.55083 8.00006 7.64124 7.9767 7.7216 7.93212C7.80197 7.88754 7.86966 7.82322 7.91826 7.74522C7.96687 7.66722 7.9948 7.57812 7.99941 7.48633C8.00402 7.39454 7.98517 7.30309 7.94462 7.22061L4.57641 0.35903Z',\n      fill: 'var(--theme-color-warning-bg-status)',\n    },\n  },\n} as const;\n\nexport const StatusIndicator = ({\n  className,\n  style,\n  variant = 'unknown',\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'svg', StatusIndicatorProps>) => {\n  const classes = classNames('ndl-status-indicator', className);\n  const config = statusConfig[variant];\n  const Element = config.element as keyof React.JSX.IntrinsicElements;\n\n  return (\n    <svg\n      ref={ref}\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Element {...config.props} />\n    </svg>\n  );\n};\n\nStatusIndicator.displayName = 'StatusIndicator';\n"]}
+{"version":3,"file":"StatusIndicator.js","sourceRoot":"","sources":["../../../src/status-indicator/StatusIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAUpC,MAAM,YAAY,GAAG;IACnB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,qCAAqC;YACrC,CAAC,EAAE,kgBAAkgB;YACrgB,IAAI,EAAE,qCAAqC;SAC5C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE;YACL,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,sCAAsC;YAC5C,CAAC,EAAE,GAAG,EAAE,gCAAgC;SACzC;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE;YACL,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,sCAAsC;YAC5C,CAAC,EAAE,GAAG,EAAE,gCAAgC;SACzC;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,IAAI,EAAE,sCAAsC;YAC5C,MAAM,EAAE,GAAG;YACX,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,GAAG;SACX;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,KAAK,EAAE;YACL,qCAAqC;YACrC,CAAC,EAAE,ioBAAioB;YACpoB,IAAI,EAAE,sCAAsC;SAC7C;KACF;CACO,CAAC;AAEJ,MAAM,eAAe,GAAG,CAAC,EAOW,EAAE,EAAE;QAPf,EAC9B,SAAS,EACT,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,GAAG,OAEsC,EADtC,SAAS,cANkB,0DAO/B,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,MAAM,CAAC,OAA4C,CAAC;IAEpE,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAElB,uBAAC,OAAO,oBAAK,MAAM,CAAC,KAAK,EAAI,IACzB,CACP,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,eAAe,mBA6B1B;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps } from '../_common/types';\n\ntype StatusIndicatorProps = {\n  /** Type of the status indicator. */\n  variant?: 'unknown' | 'success' | 'info' | 'warning' | 'danger';\n};\n\nconst statusConfig = {\n  danger: {\n    element: 'path',\n    props: {\n      // oxlint-disable-next-line id-length\n      d: 'M0.188426 4.45553C0.067771 4.33472 0 4.17097 0 4.00024C0 3.8295 0.067771 3.66575 0.188426 3.54494L3.54489 0.188838C3.6046 0.128979 3.67554 0.0814871 3.75363 0.0490833C3.83173 0.0166795 3.91545 0 4 0C4.08455 0 4.16827 0.0166795 4.24637 0.0490833C4.32446 0.0814871 4.3954 0.128979 4.45511 0.188838L7.81157 3.54494C7.93223 3.66575 8 3.8295 8 4.00024C8 4.17097 7.93223 4.33472 7.81157 4.45553L4.45511 7.81163C4.33437 7.93226 4.17068 8.00003 4 8.00003C3.82932 8.00003 3.66563 7.93226 3.54489 7.81163L0.188426 4.45553Z',\n      fill: 'var(--theme-color-danger-bg-status)',\n    },\n  },\n  info: {\n    element: 'circle',\n    props: {\n      cx: '4',\n      cy: '4',\n      fill: 'var(--theme-color-primary-bg-status)',\n      r: '4', // oxlint-disable-line id-length\n    },\n  },\n  success: {\n    element: 'circle',\n    props: {\n      cx: '4',\n      cy: '4',\n      fill: 'var(--theme-color-success-bg-status)',\n      r: '4', // oxlint-disable-line id-length\n    },\n  },\n  unknown: {\n    element: 'rect',\n    props: {\n      fill: 'var(--theme-color-neutral-bg-status)',\n      height: '8',\n      rx: '1',\n      width: '8',\n    },\n  },\n  warning: {\n    element: 'path',\n    props: {\n      // oxlint-disable-next-line id-length\n      d: 'M4.57641 0.35903C4.52349 0.251301 4.44144 0.160559 4.33957 0.0970988C4.23769 0.0336384 4.12007 0 4.00005 0C3.88002 0 3.7624 0.0336384 3.66053 0.0970988C3.55865 0.160559 3.4766 0.251301 3.42368 0.35903L0.0554707 7.22061C0.0149262 7.30309 -0.00393024 7.39454 0.000681349 7.48633C0.00529294 7.57812 0.0332205 7.66722 0.0818275 7.74522C0.130434 7.82322 0.198117 7.88754 0.278487 7.93212C0.358856 7.9767 0.44926 8.00006 0.541165 8H7.45893C7.55083 8.00006 7.64124 7.9767 7.7216 7.93212C7.80197 7.88754 7.86966 7.82322 7.91826 7.74522C7.96687 7.66722 7.9948 7.57812 7.99941 7.48633C8.00402 7.39454 7.98517 7.30309 7.94462 7.22061L4.57641 0.35903Z',\n      fill: 'var(--theme-color-warning-bg-status)',\n    },\n  },\n} as const;\n\nexport const StatusIndicator = ({\n  className,\n  style,\n  variant = 'unknown',\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'svg', StatusIndicatorProps>) => {\n  const classes = classNames('ndl-status-indicator', className);\n  const config = statusConfig[variant];\n  const Element = config.element as keyof React.JSX.IntrinsicElements;\n\n  return (\n    <svg\n      ref={ref}\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Element {...config.props} />\n    </svg>\n  );\n};\n\nStatusIndicator.displayName = 'StatusIndicator';\n"]}

package/lib/cjs/tabs/Tabs.js

@@ -168,10 +168,10 @@ const TabsComponent = (_a) => {
         const focusedElement = document.activeElement;
         // Find the currently focused tab
         let currentIndex = -1;
-        for (let i = 0; i < tabIds.length; i++) {
-            const tabRef = tabRefs.current.get(tabIds[i]);
+        for (let index = 0; index < tabIds.length; index++) {
+            const tabRef = tabRefs.current.get(tabIds[index]);
             if ((tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === focusedElement) {
-                currentIndex = i;
+                currentIndex = index;
                 break;
             }
         }