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

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((_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"]}
+{"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  shouldShowValues?: boolean;\n  /** Whether to display visual indicators for each step in the slider */\n  shouldShowSteps?: 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  shouldShowSteps = false,\n  shouldShowValues = 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        {shouldShowSteps && (\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          shouldShowValues={shouldShowValues}\n          inputForwardedProps={inputProps}\n        />\n        {type === 'range' && (\n          <Thumb\n            index={1}\n            state={state}\n            trackRef={trackRef as React.RefObject<HTMLDivElement>}\n            shouldShowValues={shouldShowValues}\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  shouldShowValues?: 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.shouldShowValues !== 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-custom-step-length.story.js

@@ -25,7 +25,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Slider, { minValue: 0, maxValue: 100, step: 10, value: 50, onChange: (newValue) => {
             console.info('onChange', newValue);
-        }, showSteps: true, showValues: true }));
+        }, shouldShowSteps: true, shouldShowValues: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=slider-custom-step-length.story.js.map

package/lib/cjs/slider/stories/slider-custom-step-length.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-custom-step-length.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-custom-step-length.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,SAAS,QACT,UAAU,SACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      step={10}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      showSteps\n      showValues\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-custom-step-length.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-custom-step-length.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,eAAe,QACf,gBAAgB,SAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      step={10}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      shouldShowSteps\n      shouldShowValues\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/slider/stories/slider-range.story.js

@@ -25,7 +25,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Slider, { type: "range", values: [10, 50], onChange: (newValue) => {
             console.info('onChange', newValue);
-        }, minValue: 0, maxValue: 200, step: 10, isDisabled: false, showSteps: true, showValues: true }));
+        }, minValue: 0, maxValue: 200, step: 10, isDisabled: false, shouldShowSteps: true, shouldShowValues: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=slider-range.story.js.map

package/lib/cjs/slider/stories/slider-range.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-range.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-range.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,EAAE,EACR,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,IAAI,EACf,UAAU,EAAE,IAAI,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      type=\"range\"\n      values={[10, 50]}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      minValue={0}\n      maxValue={200}\n      step={10}\n      isDisabled={false}\n      showSteps={true}\n      showValues={true}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-range.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-range.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,EAAE,EACR,UAAU,EAAE,KAAK,EACjB,eAAe,EAAE,IAAI,EACrB,gBAAgB,EAAE,IAAI,GACtB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      type=\"range\"\n      values={[10, 50]}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      minValue={0}\n      maxValue={200}\n      step={10}\n      isDisabled={false}\n      shouldShowSteps={true}\n      shouldShowValues={true}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/slider/stories/slider-show-steps.story.js

@@ -25,7 +25,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Slider, { minValue: 0, maxValue: 100, value: 50, onChange: (newValue) => {
             console.info('onChange', newValue);
-        }, showSteps: true }));
+        }, shouldShowSteps: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=slider-show-steps.story.js.map

package/lib/cjs/slider/stories/slider-show-steps.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-show-steps.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-show-steps.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      showSteps\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-show-steps.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-show-steps.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,eAAe,SACf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      shouldShowSteps\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/slider/stories/slider-show-values.story.js

@@ -25,7 +25,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Slider, { minValue: 0, maxValue: 100, value: 50, onChange: (newValue) => {
             console.info('onChange', newValue);
-        }, showValues: true }));
+        }, shouldShowValues: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=slider-show-values.story.js.map

package/lib/cjs/slider/stories/slider-show-values.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-show-values.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-show-values.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,UAAU,SACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      showValues\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-show-values.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-show-values.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,gBAAgB,SAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      minValue={0}\n      maxValue={100}\n      value={50}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      shouldShowValues\n    />\n  );\n};\n\nexport default Component;\n"]}

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

@@ -63,12 +63,12 @@ const Component = () => {
         setValue(newValue);
         setInputValue(String(newValue));
     }, [setInputValue, setValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Slider value", helpText: `Enter a value between ${MIN_VALUE} and ${MAX_VALUE}`, isRequired: true, errorText: error, htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Slider value", helpText: `Enter a value between ${MIN_VALUE} and ${MAX_VALUE}`, isRequired: true, errorText: error, htmlAttributes: {
                     max: MAX_VALUE,
                     min: MIN_VALUE,
                     step: STEP,
                     type: 'number',
-                }, value: inputValue, onChange: handleInputChange }), (0, jsx_runtime_1.jsx)(react_1.Slider, { type: "single", value: value, onChange: handleSliderChange, minValue: MIN_VALUE, maxValue: MAX_VALUE, step: STEP, showSteps: true, showValues: true, isDisabled: hasError, inputProps: {
+                }, value: inputValue, onChange: handleInputChange }), (0, jsx_runtime_1.jsx)(react_1.Slider, { type: "single", value: value, onChange: handleSliderChange, minValue: MIN_VALUE, maxValue: MAX_VALUE, step: STEP, shouldShowSteps: true, shouldShowValues: true, isDisabled: hasError, inputProps: {
                     'aria-valuetext': `${value} out of ${MAX_VALUE}`,
                 } })] }));
 };

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    (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"]}
+{"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=\"flex flex-col 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        shouldShowSteps\n        shouldShowValues\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/slider/stories/slider-single.story.js

@@ -25,7 +25,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.Slider, { type: "single", value: 100, onChange: (newValue) => {
             console.info('onChange', newValue);
-        }, minValue: 0, maxValue: 200, isDisabled: false, step: 10, showSteps: true, showValues: true, inputProps: { 'aria-valuetext': 'percent' } }));
+        }, minValue: 0, maxValue: 200, isDisabled: false, step: 10, shouldShowSteps: true, shouldShowValues: true, inputProps: { 'aria-valuetext': 'percent' } }));
 };
 exports.default = Component;
 //# sourceMappingURL=slider-single.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-single.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-single.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,KAAK,EACjB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,IAAI,EACf,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAC3C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      type=\"single\"\n      value={100}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      minValue={0}\n      maxValue={200}\n      isDisabled={false}\n      step={10}\n      showSteps={true}\n      showValues={true}\n      inputProps={{ 'aria-valuetext': 'percent' }}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"slider-single.story.js","sourceRoot":"","sources":["../../../../src/slider/stories/slider-single.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,cAAM,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,KAAK,EACjB,IAAI,EAAE,EAAE,EACR,eAAe,EAAE,IAAI,EACrB,gBAAgB,EAAE,IAAI,EACtB,UAAU,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAC3C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Slider } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Slider\n      type=\"single\"\n      value={100}\n      onChange={(newValue) => {\n        console.info('onChange', newValue);\n      }}\n      minValue={0}\n      maxValue={200}\n      isDisabled={false}\n      step={10}\n      shouldShowSteps={true}\n      shouldShowValues={true}\n      inputProps={{ 'aria-valuetext': 'percent' }}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/Spotlight.js

@@ -122,7 +122,7 @@ SpotlightLabel.displayName = 'Spotlight.Label';
 const SpotlightImage = (_a) => {
     var { src, alt, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["src", "alt", "className", "style", "htmlAttributes", "ref"]);
     (0, SpotlightProvider_1.useSpotlightContext)();
-    const classes = (0, classnames_1.default)('ndl-spotlight-image n-body-medium', className);
+    const classes = (0, classnames_1.default)('ndl-spotlight-image ndl-typography-body-medium', className);
     return ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, ref: ref, className: classes, style: style }, restProps, htmlAttributes)));
 };
 SpotlightImage.displayName = 'Spotlight.Image';
@@ -136,7 +136,7 @@ const SpotlightIconWrapper = (_a) => {
 SpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';
 const SpotlightComponent = (_a) => {
     var _b, _c;
-    var { target, beforeActions, actions, initialFocus, onClose, placement, children, className, style, htmlAttributes, closeOnClickOutside = false, onOpen, ref } = _a, restProps = __rest(_a, ["target", "beforeActions", "actions", "initialFocus", "onClose", "placement", "children", "className", "style", "htmlAttributes", "closeOnClickOutside", "onOpen", "ref"]);
+    var { target, beforeActions, actions, initialFocus, onClose, placement, children, className, style, htmlAttributes, shouldCloseOnClickOutside = false, onOpen, ref } = _a, restProps = __rest(_a, ["target", "beforeActions", "actions", "initialFocus", "onClose", "placement", "children", "className", "style", "htmlAttributes", "shouldCloseOnClickOutside", "onOpen", "ref"]);
     const generatedHeaderId = (0, react_2.useId)();
     const generatedDescriptionId = (0, react_2.useId)();
     const [targetElement, setTargetElement] = (0, react_2.useState)(null);
@@ -170,11 +170,11 @@ const SpotlightComponent = (_a) => {
     };
     const spotlight = (0, use_spotlight_1.useSpotlight)({
         anchorElement: targetElement,
-        closeOnClickOutside,
         initialFocus,
         isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,
         onOpenChange,
         placement: placement ? popover_1.placementTranslation[placement] : undefined,
+        shouldCloseOnClickOutside,
     });
     const mergedRef = (0, react_1.useMergeRefs)([spotlight.refs.setFloating, ref]);
     const { themeClassName } = (0, theme_1.useNeedleTheme)();

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

@@ -1 +1 @@
-{"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAK4B;AAC5B,4DAAoC;AACpC,+CAOe;AAMf,wCAAgE;AAChE,kDAA8C;AAC9C,oCAA0C;AAC1C,8CAA2C;AAC3C,2DAA0D;AAU1D,MAAM,wBAAwB,GAC5B,IAAA,qBAAa,EAAsC,IAAI,CAAC,CAAC;AAE3D,MAAM,oBAAoB,GAAG,GAAiC,EAAE;IAC9D,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,wBAAwB,CAAC,CAAC;IACjD,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,2DAA2D,CAC5D,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AACF,mDAA+C;AAO/C,MAAM,eAAe,GAAG,CAAsC,EAQZ,EAAE,EAAE;QARQ,EAC5D,QAAQ,EACR,SAAS,EACT,EAAE,EACF,KAAK,EACL,cAAc,EACd,GAAG,OAE6C,EAD7C,SAAS,cAPgD,iEAQ7D,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzD,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,uBAAC,uBAAU,kBACT,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,IACb,SAAS,IACb,cAAc,kCAAO,cAAc,KAAE,EAAE,EAAE,QAAQ,eAEhD,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAOjD,MAAM,aAAa,GAAG,CAAsC,EAQZ,EAAE,EAAE;QARQ,EAC1D,QAAQ,EACR,SAAS,EACT,EAAE,EACF,KAAK,EACL,cAAc,EACd,GAAG,OAE2C,EAD3C,SAAS,cAP8C,iEAQ3D,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACnE,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL,uBAAC,uBAAU,kBACT,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,aAAa,IACjB,SAAS,IACb,cAAc,kCAAO,cAAc,KAAE,EAAE,EAAE,aAAa,eAErD,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAO7C,MAAM,cAAc,GAAG,CAAsC,EASZ,EAAE,EAAE;QATQ,EAC3D,SAAS,EACT,QAAQ,EACR,OAAO,EACP,EAAE,EACF,KAAK,EACL,cAAc,EACd,GAAG,OAE4C,EAD5C,SAAS,cAR+C,4EAS5D,CADa;IAEZ,IAAA,uCAAmB,GAAE,CAAC;IACtB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACL,uBAAC,0BAAW,kBACV,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,QAAQ,IACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAS/C,MAAM,cAAc,GAAG,CAAC,EAQkB,EAAE,EAAE;QARtB,EACtB,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAEqC,EADrC,SAAS,cAPU,6DAQvB,CADa;IAEZ,IAAA,uCAAmB,GAAE,CAAC;IACtB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mCAAmC,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,EAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAO/C,MAAM,oBAAoB,GAAG,CAAsC,EAQZ,EAAE,EAAE;QARQ,EACjE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,KAAK,EACL,cAAc,EACd,GAAG,OAEkD,EADlD,SAAS,cAPqD,iEAQlE,CADa;IAEZ,IAAA,uCAAmB,GAAE,CAAC;IACtB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC;IACpE,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAE9B,OAAO,CACL,uBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAsB3D,MAAM,kBAAkB,GAAG,CAAC,EAeS,EAAE,EAAE;;QAfb,EAC1B,MAAM,EACN,aAAa,EACb,OAAO,EACP,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,mBAAmB,GAAG,KAAK,EAC3B,MAAM,EACN,GAAG,OAEgC,EADhC,SAAS,cAdc,0KAe3B,CADa;IAEZ,MAAM,iBAAiB,GAAG,IAAA,aAAK,GAAE,CAAC;IAClC,MAAM,sBAAsB,GAAG,IAAA,aAAK,GAAE,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAqB,IAAI,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,EACJ,UAAU,EACV,iBAAiB,EACjB,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,GACV,GAAG,IAAA,uCAAmB,GAAE,CAAC;IAE1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EACtC,iBAAiB,CAClB,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAChD,sBAAsB,CACvB,CAAC;IAEF,qCAAqC;IACrC,MAAM,cAAc,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,aAAa,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACvD,OAAO,aAAa,CAAC,IAAI,CACvB,CAAC,KAAK,EAAE,EAAE,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CACzE,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,kCAAkC;IAClC,MAAM,SAAS,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,YAAY,CAAC,CAAC;IACjD,MAAM,cAAc,GAClB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,iBAAiB,CAAC,mCACnC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,kBAAkB,CAAC,mCAAI,aAAa,CAAC;IAE9E,IAAI,SAAS,KAAK,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;QAC/C,OAAO,CAAC,IAAI,CACV,2FAA2F,CAC5F,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,KAAa,EAAE,EAAE;QACtD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,KAAK,YAAY,YAAY,EAAE,CAAC;gBAClC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,cAAc,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,KAAK,YAAY,aAAa,EAAE,CAAC;gBAC1C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,eAAe,CAAC,CAAC;YAC7B,CAAC;YACD,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,4BAAY,EAAC;QAC7B,aAAa,EAAE,aAAa;QAC5B,mBAAmB;QACnB,YAAY;QACZ,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,aAAa;QAC9D,YAAY;QACZ,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,8BAAoB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;KACnE,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAElE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IAEvE,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,gBAAgB,CAAC,MAAA,iBAAiB,CAAC,MAAM,CAAC,0CAAE,OAAO,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEhC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,iBAAiB,CAAC,MAAM,CAAC,EAAE,CAAC;YACxC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,SAAS,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACzC,OAAO,SAAS,CAAC,YAAY,CAAC;QAChC,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CACtD,0EAA0E,CAC3E,CAAC;QACF,OAAO,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,sBAAc,cACb,uBAAC,4BAAoB,IACnB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,gBAAgB,EAAE,YAEhC,wBAAC,wBAAwB,CAAC,QAAQ,IAChC,KAAK,EAAE;oBACL,aAAa;oBACb,QAAQ;oBACR,gBAAgB;oBAChB,WAAW;iBACZ,aAEA,UAAU,KAAK,IAAI,IAAI,CACtB,uBAAC,uBAAe,IACd,SAAS,EAAC,iDAAiD,EAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACvB,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,CAAC,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;4BACtB,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,CAAC,GACD,CACH,EACD,+CACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,OAAO,EAClB,KAAK,gDACA,SAAS,CAAC,cAAc,GACxB,SAAS,CAAC,gBAAgB,GAC1B,KAAK,KAEN,SAAS,CAAC,gBAAgB,iCACzB,cAAc,KACjB,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,MAAM,IACpB,EACE,SAAS,eAEb,0CAAM,QAAQ,GAAO,EACpB,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAC/C,iCAAK,SAAS,EAAC,sBAAsB,aACnC,uBAAC,uBAAU,IAAC,OAAO,EAAC,aAAa,YAAE,aAAa,GAAc,EAC7D,OAAO,CAAC,OAAO,CAAC,IAAI,CACnB,gCAAK,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,UAAU,YACnD,OAAO,GACJ,CACP,IACG,CACP,KACG,IAC4B,GACf,GACR,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC;AAE7C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IAClD,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,eAAe;IACvB,WAAW,EAAE,oBAAoB;IACjC,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,cAAc;CACtB,CAAC,CAAC;AAEM,8BAAS","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"]}
+{"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(\n    'ndl-spotlight-image ndl-typography-body-medium',\n    className,\n  );\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' | 'shouldCloseOnClickOutside'\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  shouldCloseOnClickOutside = 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    initialFocus,\n    isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n    onOpenChange,\n    placement: placement ? placementTranslation[placement] : undefined,\n    shouldCloseOnClickOutside,\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/SpotlightTarget.js

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,qCAAqC,YAClD,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64 n-h-[100px]\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div className=\"n-left-[auto] n-top-[110px] n-fixed\">\n        <SpotlightTarget\n          id={targetId}\n          hasPulse={!props.isChromatic}\n          asChild\n          indicatorVariant=\"border\"\n          indicatorPlacement=\"middle-middle\"\n        >\n          <FilledButton onClick={() => alert('Target button clicked')}>\n            Target\n          </FilledButton>\n        </SpotlightTarget>\n      </div>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,4CAA4C,aACzD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,+BAA+B,YAC5C,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,mBAAmB,QACnB,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64 h-[100px]\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div className=\"left-[auto] top-[110px] fixed\">\n        <SpotlightTarget\n          id={targetId}\n          hasPulse={!props.isChromatic}\n          shouldRenderAsChild\n          indicatorVariant=\"border\"\n          indicatorPlacement=\"middle-middle\"\n        >\n          <FilledButton onClick={() => alert('Target button clicked')}>\n            Target\n          </FilledButton>\n        </SpotlightTarget>\n      </div>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

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

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

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