@dnb/eufemia 10.22.0 → 10.24.0

package/components/slider/SliderInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","_ref2","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/**\n * Web Slider Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n  SliderMainTrack,\n  SliderTrackBefore,\n  SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n  const context = React.useContext(Context)\n\n  const {\n    isReverse,\n    isVertical,\n    showButtons,\n    showStatus,\n    shouldAnimate,\n    allProps,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    labelSrOnly,\n    labelDirection,\n    status,\n    statusProps,\n    statusState,\n    statusNoAnimation,\n    globalStatus,\n    stretch,\n    skeleton,\n    disabled,\n    className,\n    extensions,\n  } = allProps\n\n  const mainParams = {\n    className: classnames(\n      'dnb-slider',\n      isVertical && 'dnb-slider--vertical',\n      disabled && 'dnb-slider__state--disabled',\n      shouldAnimate && 'dnb-slider__state--animate',\n      !showButtons && 'dnb-slider--no-buttons',\n      isTrue(stretch) && 'dnb-slider--stretch',\n      label && labelDirection && `dnb-slider__label--${labelDirection}`,\n      showStatus && 'dnb-slider__form-status',\n      status && `dnb-slider__status--${statusState}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(allProps),\n      className\n    ),\n  }\n\n  const subtractButton = showButtons ? <SubtractButton /> : null\n  const addButton = showButtons ? <AddButton /> : null\n\n  skeletonDOMAttributes(mainParams, skeleton, context)\n\n  return (\n    <span {...mainParams}>\n      {label && (\n        // do not use \"for_id\" as the ID element is not a fo\n        <FormLabel\n          id={id + '-label'}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          labelDirection={labelDirection}\n          srOnly={labelSrOnly}\n        />\n      )}\n\n      <span className=\"dnb-slider__wrapper\">\n        <AlignmentHelper />\n\n        <FormStatus\n          show={showStatus}\n          id={id + '-form-status'}\n          globalStatus={globalStatus}\n          text_id={id + '-status'} // used for \"aria-describedby\"\n          text={status}\n          state={statusState}\n          no_animation={statusNoAnimation}\n          skeleton={skeleton}\n          {...statusProps}\n        />\n\n        <span className=\"dnb-slider__inner\">\n          {showButtons && (isReverse ? addButton : subtractButton)}\n\n          <SliderMainTrack>\n            {extensions &&\n              Object.entries(extensions).map(\n                ([key, { instance, ...options }]) => {\n                  const Element = instance as React.ElementType\n                  return <Element key={key} {...options} />\n                }\n              )}\n            <SliderThumb />\n            <SliderTrackBefore />\n            <SliderTrackAfter />\n          </SliderMainTrack>\n\n          {showButtons && (isReverse ? subtractButton : addButton)}\n\n          <SliderSuffix />\n        </span>\n      </span>\n    </span>\n  )\n}\n\nfunction SliderSuffix() {\n  const { allProps } = useSliderProps()\n  const { id, suffix } = allProps\n\n  return suffix ? (\n    <Suffix\n      className=\"dnb-slider__suffix\"\n      id={id + '-suffix'} // used for \"aria-describedby\"\n      context={allProps}\n    >\n      {suffix}\n    </Suffix>\n  ) : null\n}\n\nfunction SubtractButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const {\n    step,\n    min,\n    max,\n    disabled,\n    skeleton,\n    subtractTitle,\n    numberFormat,\n  } = allProps\n\n  const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) - (step || 1), min, max))\n  }\n\n  const subtractParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    subtractParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--subtract\"\n      variant=\"secondary\"\n      icon=\"subtract\"\n      size=\"small\"\n      aria-label={subtractTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onSubtractClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...subtractParams}\n    />\n  )\n}\n\nfunction AddButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n    allProps\n\n  const onAddClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) + (step || 1), min, max))\n  }\n\n  const addParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    addParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--add\"\n      variant=\"secondary\"\n      icon=\"add\"\n      size=\"small\"\n      aria-label={addTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onAddClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...addParams}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","forId","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","_ref2","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/**\n * Web Slider Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n  SliderMainTrack,\n  SliderTrackBefore,\n  SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n  const context = React.useContext(Context)\n\n  const {\n    isReverse,\n    isVertical,\n    showButtons,\n    showStatus,\n    shouldAnimate,\n    allProps,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    labelSrOnly,\n    labelDirection,\n    status,\n    statusProps,\n    statusState,\n    statusNoAnimation,\n    globalStatus,\n    stretch,\n    skeleton,\n    disabled,\n    className,\n    extensions,\n  } = allProps\n\n  const mainParams = {\n    className: classnames(\n      'dnb-slider',\n      isVertical && 'dnb-slider--vertical',\n      disabled && 'dnb-slider__state--disabled',\n      shouldAnimate && 'dnb-slider__state--animate',\n      !showButtons && 'dnb-slider--no-buttons',\n      isTrue(stretch) && 'dnb-slider--stretch',\n      label && labelDirection && `dnb-slider__label--${labelDirection}`,\n      showStatus && 'dnb-slider__form-status',\n      status && `dnb-slider__status--${statusState}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(allProps),\n      className\n    ),\n  }\n\n  const subtractButton = showButtons ? <SubtractButton /> : null\n  const addButton = showButtons ? <AddButton /> : null\n\n  skeletonDOMAttributes(mainParams, skeleton, context)\n\n  return (\n    <span {...mainParams}>\n      {label && (\n        <FormLabel\n          forId={`${id}-thumb-0`}\n          id={id + '-label'}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          labelDirection={labelDirection}\n          srOnly={labelSrOnly}\n        />\n      )}\n\n      <span className=\"dnb-slider__wrapper\">\n        <AlignmentHelper />\n\n        <FormStatus\n          show={showStatus}\n          id={id + '-form-status'}\n          globalStatus={globalStatus}\n          text_id={id + '-status'} // used for \"aria-describedby\"\n          text={status}\n          state={statusState}\n          no_animation={statusNoAnimation}\n          skeleton={skeleton}\n          {...statusProps}\n        />\n\n        <span className=\"dnb-slider__inner\">\n          {showButtons && (isReverse ? addButton : subtractButton)}\n\n          <SliderMainTrack>\n            {extensions &&\n              Object.entries(extensions).map(\n                ([key, { instance, ...options }]) => {\n                  const Element = instance as React.ElementType\n                  return <Element key={key} {...options} />\n                }\n              )}\n            <SliderThumb />\n            <SliderTrackBefore />\n            <SliderTrackAfter />\n          </SliderMainTrack>\n\n          {showButtons && (isReverse ? subtractButton : addButton)}\n\n          <SliderSuffix />\n        </span>\n      </span>\n    </span>\n  )\n}\n\nfunction SliderSuffix() {\n  const { allProps } = useSliderProps()\n  const { id, suffix } = allProps\n\n  return suffix ? (\n    <Suffix\n      className=\"dnb-slider__suffix\"\n      id={id + '-suffix'} // used for \"aria-describedby\"\n      context={allProps}\n    >\n      {suffix}\n    </Suffix>\n  ) : null\n}\n\nfunction SubtractButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const {\n    step,\n    min,\n    max,\n    disabled,\n    skeleton,\n    subtractTitle,\n    numberFormat,\n  } = allProps\n\n  const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) - (step || 1), min, max))\n  }\n\n  const subtractParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    subtractParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--subtract\"\n      variant=\"secondary\"\n      icon=\"subtract\"\n      size=\"small\"\n      aria-label={subtractTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onSubtractClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...subtractParams}\n    />\n  )\n}\n\nfunction AddButton() {\n  const { emitChange, value, attributes, allProps } = useSliderProps()\n  const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n    allProps\n\n  const onAddClickHandler = (event: MouseEvent | TouchEvent) => {\n    emitChange(event, clamp((value as number) + (step || 1), min, max))\n  }\n\n  const addParams = {}\n\n  if (typeof attributes['aria-hidden'] !== 'undefined') {\n    addParams['aria-hidden'] = attributes['aria-hidden']\n  }\n\n  const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n  return (\n    <Button\n      className=\"dnb-slider__button dnb-slider__button--add\"\n      variant=\"secondary\"\n      icon=\"add\"\n      size=\"small\"\n      aria-label={addTitle?.replace(\n        '%s',\n        humanNumber.aria || String(value)\n      )}\n      on_click={onAddClickHandler}\n      disabled={disabled}\n      skeleton={skeleton}\n      {...addParams}\n    />\n  )\n}\n"],"mappings":"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"}

package/components/slider/SliderThumb.js

@@ -102,10 +102,11 @@ function Thumb(_ref) {
   }
   validateDOMAttributes(allProps, thumbParams);
   const elemRef = React.useRef();
-  return React.createElement(React.Fragment, null, React.createElement("span", {
+  return React.createElement("span", {
     className: "dnb-slider__thumb",
     style: style
   }, React.createElement("input", _extends({
+    id: `${id}-thumb-${currentIndex}`,
     type: "range",
     className: "dnb-slider__button-helper",
     min: min,
@@ -124,6 +125,7 @@ function Thumb(_ref) {
     "aria-orientation": isVertical ? 'vertical' : 'horizontal',
     "data-index": currentIndex
   }, helperParams)), React.createElement(Button, _extends({
+    id: `${id}-button-${currentIndex}`,
     element: "span",
     type: "",
     variant: "secondary",
@@ -136,6 +138,6 @@ function Thumb(_ref) {
     active: Boolean(showTooltip || alwaysShowTooltip),
     showDelay: 1,
     hideDelay: 300
-  }, number || value, shouldAnimate)));
+  }, number || value, shouldAnimate));
 }
 //# sourceMappingURL=SliderThumb.js.map

package/components/slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","names":["React","combineDescribedBy","combineLabelledBy","validateDOMAttributes","warn","Button","Tooltip","useSliderEvents","useSliderProps","clamp","getFormattedNumber","SliderThumb","values","createElement","Fragment","map","value","i","Thumb","key","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","style","zIndex","number","aria","showTooltip","setShowTooltip","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","helperParams","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","useRef","className","_extends","type","onChange","onMouseDown","onMouseUp","undefined","element","variant","innerRef","targetElement","active","Boolean","showDelay","hideDelay"],"sources":["../../../../src/components/slider/SliderThumb.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  combineDescribedBy,\n  combineLabelledBy,\n  validateDOMAttributes,\n  warn,\n} from '../../shared/component-helper'\nimport Button from '../button/Button'\nimport Tooltip from '../tooltip/Tooltip'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderThumb() {\n  const { values } = useSliderProps()\n\n  return (\n    <>\n      {values.map((value, i) => {\n        return <Thumb key={i} value={value} currentIndex={i} />\n      })}\n    </>\n  )\n}\n\ntype ThumbProps = {\n  value: number\n  currentIndex: number\n}\n\nfunction Thumb({ value, currentIndex }: ThumbProps) {\n  const {\n    thumbIndex,\n    isVertical,\n    isReverse,\n    showStatus,\n    attributes,\n    allProps,\n    shouldAnimate,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    min,\n    max,\n    step,\n    skeleton,\n    disabled,\n    suffix,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n  } = allProps\n\n  const index = thumbIndex.current\n  let percent = clamp(((value - min) * 100) / (max - min))\n\n  if (isReverse) {\n    percent = 100 - percent\n  }\n\n  const style = {\n    zIndex: index === currentIndex ? 4 : 3,\n    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n  } as React.CSSProperties\n\n  const { number, aria } = getFormattedNumber(value, numberFormat)\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const onMouseEnterHandler = () => {\n    setShowTooltip(true)\n  }\n  const onMouseLeaveHandler = () => {\n    setShowTooltip(false)\n    try {\n      elemRef.current.dispatchEvent(new Event('mouseleave'))\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n  } = useSliderEvents()\n\n  const helperParams: Record<string, unknown> = {}\n\n  if (label) {\n    helperParams['aria-labelledby'] = combineLabelledBy(\n      helperParams,\n      label ? id + '-label' : null\n    )\n  }\n\n  if (showStatus || suffix) {\n    helperParams['aria-describedby'] = combineDescribedBy(\n      helperParams,\n      showStatus ? id + '-status' : null,\n      suffix ? id + '-suffix' : null\n    )\n  }\n\n  const thumbParams = attributes as Record<string, unknown>\n\n  if (tooltip) {\n    thumbParams.onMouseEnter = onMouseEnterHandler\n    thumbParams.onMouseLeave = onMouseLeaveHandler\n    thumbParams.onTouchStart = onMouseEnterHandler\n    thumbParams.onTouchEnd = onMouseLeaveHandler\n    helperParams.onBlur = onMouseLeaveHandler\n    helperParams.onFocus = (event) => {\n      onHelperFocusHandler(event)\n      onMouseEnterHandler()\n      try {\n        elemRef.current.dispatchEvent(new Event('mouseenter'))\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n  validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes\n\n  const elemRef = React.useRef<HTMLElement>()\n\n  return (\n    <>\n      <span className=\"dnb-slider__thumb\" style={style}>\n        <input\n          type=\"range\"\n          className=\"dnb-slider__button-helper\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={onHelperChangeHandler}\n          onFocus={onHelperFocusHandler}\n          onMouseDown={onThumbMouseDownHandler}\n          onMouseUp={onThumbMouseUpHandler}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-valuetext={aria ? aria : undefined}\n          aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n          data-index={currentIndex}\n          {...helperParams}\n        />\n\n        <Button\n          element=\"span\"\n          type=\"\" // avoid getting type=\"button\"\n          variant=\"secondary\"\n          disabled={disabled}\n          skeleton={skeleton}\n          innerRef={elemRef}\n          {...thumbParams}\n        />\n\n        {tooltip && (\n          <Tooltip\n            key={`group-${currentIndex}`}\n            targetElement={elemRef}\n            active={Boolean(showTooltip || alwaysShowTooltip)}\n            showDelay={1}\n            hideDelay={300}\n          >\n            {number || value}\n            {\n              shouldAnimate /* Use \"shouldAnimate\" only in order to update the position after the thumb animation */\n            }\n          </Tooltip>\n        )}\n      </span>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderThumb.js","names":["React","combineDescribedBy","combineLabelledBy","validateDOMAttributes","warn","Button","Tooltip","useSliderEvents","useSliderProps","clamp","getFormattedNumber","SliderThumb","values","createElement","Fragment","map","value","i","Thumb","key","currentIndex","_ref","thumbIndex","isVertical","isReverse","showStatus","attributes","allProps","shouldAnimate","id","label","min","max","step","skeleton","disabled","suffix","numberFormat","tooltip","alwaysShowTooltip","index","current","percent","style","zIndex","number","aria","showTooltip","setShowTooltip","useState","onMouseEnterHandler","onMouseLeaveHandler","elemRef","dispatchEvent","Event","e","onThumbMouseDownHandler","onThumbMouseUpHandler","onHelperChangeHandler","onHelperFocusHandler","helperParams","thumbParams","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onBlur","onFocus","event","useRef","className","_extends","type","onChange","onMouseDown","onMouseUp","undefined","element","variant","innerRef","targetElement","active","Boolean","showDelay","hideDelay"],"sources":["../../../../src/components/slider/SliderThumb.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  combineDescribedBy,\n  combineLabelledBy,\n  validateDOMAttributes,\n  warn,\n} from '../../shared/component-helper'\nimport Button from '../button/Button'\nimport Tooltip from '../tooltip/Tooltip'\nimport { useSliderEvents } from './hooks/useSliderEvents'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderThumb() {\n  const { values } = useSliderProps()\n\n  return (\n    <>\n      {values.map((value, i) => {\n        return <Thumb key={i} value={value} currentIndex={i} />\n      })}\n    </>\n  )\n}\n\ntype ThumbProps = {\n  value: number\n  currentIndex: number\n}\n\nfunction Thumb({ value, currentIndex }: ThumbProps) {\n  const {\n    thumbIndex,\n    isVertical,\n    isReverse,\n    showStatus,\n    attributes,\n    allProps,\n    shouldAnimate,\n  } = useSliderProps()\n\n  const {\n    id,\n    label,\n    min,\n    max,\n    step,\n    skeleton,\n    disabled,\n    suffix,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n  } = allProps\n\n  const index = thumbIndex.current\n  let percent = clamp(((value - min) * 100) / (max - min))\n\n  if (isReverse) {\n    percent = 100 - percent\n  }\n\n  const style = {\n    zIndex: index === currentIndex ? 4 : 3,\n    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n  } as React.CSSProperties\n\n  const { number, aria } = getFormattedNumber(value, numberFormat)\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const onMouseEnterHandler = () => {\n    setShowTooltip(true)\n  }\n  const onMouseLeaveHandler = () => {\n    setShowTooltip(false)\n    try {\n      elemRef.current.dispatchEvent(new Event('mouseleave'))\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const {\n    onThumbMouseDownHandler,\n    onThumbMouseUpHandler,\n    onHelperChangeHandler,\n    onHelperFocusHandler,\n  } = useSliderEvents()\n\n  const helperParams: Record<string, unknown> = {}\n\n  if (label) {\n    helperParams['aria-labelledby'] = combineLabelledBy(\n      helperParams,\n      label ? id + '-label' : null\n    )\n  }\n\n  if (showStatus || suffix) {\n    helperParams['aria-describedby'] = combineDescribedBy(\n      helperParams,\n      showStatus ? id + '-status' : null,\n      suffix ? id + '-suffix' : null\n    )\n  }\n\n  const thumbParams = attributes as Record<string, unknown>\n\n  if (tooltip) {\n    thumbParams.onMouseEnter = onMouseEnterHandler\n    thumbParams.onMouseLeave = onMouseLeaveHandler\n    thumbParams.onTouchStart = onMouseEnterHandler\n    thumbParams.onTouchEnd = onMouseLeaveHandler\n    helperParams.onBlur = onMouseLeaveHandler\n    helperParams.onFocus = (event) => {\n      onHelperFocusHandler(event)\n      onMouseEnterHandler()\n      try {\n        elemRef.current.dispatchEvent(new Event('mouseenter'))\n      } catch (e) {\n        warn(e)\n      }\n    }\n  }\n  validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes\n\n  const elemRef = React.useRef<HTMLElement>()\n\n  return (\n    <span className=\"dnb-slider__thumb\" style={style}>\n      <input\n        id={`${id}-thumb-${currentIndex}`}\n        type=\"range\"\n        className=\"dnb-slider__button-helper\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={disabled}\n        onChange={onHelperChangeHandler}\n        onFocus={onHelperFocusHandler}\n        onMouseDown={onThumbMouseDownHandler}\n        onMouseUp={onThumbMouseUpHandler}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-valuetext={aria ? aria : undefined}\n        aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n        data-index={currentIndex}\n        {...helperParams}\n      />\n\n      <Button\n        id={`${id}-button-${currentIndex}`}\n        element=\"span\"\n        type=\"\" // avoid getting type=\"button\"\n        variant=\"secondary\"\n        disabled={disabled}\n        skeleton={skeleton}\n        innerRef={elemRef}\n        {...thumbParams}\n      />\n\n      {tooltip && (\n        <Tooltip\n          key={`group-${currentIndex}`}\n          targetElement={elemRef}\n          active={Boolean(showTooltip || alwaysShowTooltip)}\n          showDelay={1}\n          hideDelay={300}\n        >\n          {number || value}\n          {\n            shouldAnimate /* Use \"shouldAnimate\" only in order to update the position after the thumb animation */\n          }\n        </Tooltip>\n      )}\n    </span>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,kBAAkB,EAClBC,iBAAiB,EACjBC,qBAAqB,EACrBC,IAAI,QACC,+BAA+B;AACtC,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,KAAK,EAAEC,kBAAkB,QAAQ,iBAAiB;AAE3D,OAAO,SAASC,WAAWA,CAAA,EAAG;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,cAAc,CAAC,CAAC;EAEnC,OACER,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACGF,MAAM,CAACG,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,KAAK;IACxB,OAAOjB,KAAA,CAAAa,aAAA,CAACK,KAAK;MAACC,GAAG,EAAEF,CAAE;MAACD,KAAK,EAAEA,KAAM;MAACI,YAAY,EAAEH;IAAE,CAAE,CAAC;EACzD,CAAC,CACD,CAAC;AAEP;AAOA,SAASC,KAAKA,CAAAG,IAAA,EAAsC;EAAA,IAArC;IAAEL,KAAK;IAAEI;EAAyB,CAAC,GAAAC,IAAA;EAChD,MAAM;IACJC,UAAU;IACVC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC;EACF,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAEpB,MAAM;IACJqB,EAAE;IACFC,KAAK;IACLC,GAAG;IACHC,GAAG;IACHC,IAAI;IACJC,QAAQ;IACRC,QAAQ;IACRC,MAAM;IACNC,YAAY;IACZC,OAAO;IACPC;EACF,CAAC,GAAGZ,QAAQ;EAEZ,MAAMa,KAAK,GAAGlB,UAAU,CAACmB,OAAO;EAChC,IAAIC,OAAO,GAAGjC,KAAK,CAAE,CAACO,KAAK,GAAGe,GAAG,IAAI,GAAG,IAAKC,GAAG,GAAGD,GAAG,CAAC,CAAC;EAExD,IAAIP,SAAS,EAAE;IACbkB,OAAO,GAAG,GAAG,GAAGA,OAAO;EACzB;EAEA,MAAMC,KAAK,GAAG;IACZC,MAAM,EAAEJ,KAAK,KAAKpB,YAAY,GAAG,CAAC,GAAG,CAAC;IACtC,CAAE,GAAEG,UAAU,GAAG,KAAK,GAAG,MAAO,EAAC,GAAI,GAAEmB,OAAQ;EACjD,CAAwB;EAExB,MAAM;IAAEG,MAAM;IAAEC;EAAK,CAAC,GAAGpC,kBAAkB,CAACM,KAAK,EAAEqB,YAAY,CAAC;EAEhE,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGhD,KAAK,CAACiD,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;IAChCF,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC;EACD,MAAMG,mBAAmB,GAAGA,CAAA,KAAM;IAChCH,cAAc,CAAC,KAAK,CAAC;IACrB,IAAI;MACFI,OAAO,CAACX,OAAO,CAACY,aAAa,CAAC,IAAIC,KAAK,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC,CAAC,OAAOC,CAAC,EAAE;MACVnD,IAAI,CAACmD,CAAC,CAAC;IACT;EACF,CAAC;EAED,MAAM;IACJC,uBAAuB;IACvBC,qBAAqB;IACrBC,qBAAqB;IACrBC;EACF,CAAC,GAAGpD,eAAe,CAAC,CAAC;EAErB,MAAMqD,YAAqC,GAAG,CAAC,CAAC;EAEhD,IAAI9B,KAAK,EAAE;IACT8B,YAAY,CAAC,iBAAiB,CAAC,GAAG1D,iBAAiB,CACjD0D,YAAY,EACZ9B,KAAK,GAAGD,EAAE,GAAG,QAAQ,GAAG,IAC1B,CAAC;EACH;EAEA,IAAIJ,UAAU,IAAIW,MAAM,EAAE;IACxBwB,YAAY,CAAC,kBAAkB,CAAC,GAAG3D,kBAAkB,CACnD2D,YAAY,EACZnC,UAAU,GAAGI,EAAE,GAAG,SAAS,GAAG,IAAI,EAClCO,MAAM,GAAGP,EAAE,GAAG,SAAS,GAAG,IAC5B,CAAC;EACH;EAEA,MAAMgC,WAAW,GAAGnC,UAAqC;EAEzD,IAAIY,OAAO,EAAE;IACXuB,WAAW,CAACC,YAAY,GAAGZ,mBAAmB;IAC9CW,WAAW,CAACE,YAAY,GAAGZ,mBAAmB;IAC9CU,WAAW,CAACG,YAAY,GAAGd,mBAAmB;IAC9CW,WAAW,CAACI,UAAU,GAAGd,mBAAmB;IAC5CS,YAAY,CAACM,MAAM,GAAGf,mBAAmB;IACzCS,YAAY,CAACO,OAAO,GAAIC,KAAK,IAAK;MAChCT,oBAAoB,CAACS,KAAK,CAAC;MAC3BlB,mBAAmB,CAAC,CAAC;MACrB,IAAI;QACFE,OAAO,CAACX,OAAO,CAACY,aAAa,CAAC,IAAIC,KAAK,CAAC,YAAY,CAAC,CAAC;MACxD,CAAC,CAAC,OAAOC,CAAC,EAAE;QACVnD,IAAI,CAACmD,CAAC,CAAC;MACT;IACF,CAAC;EACH;EACApD,qBAAqB,CAACwB,QAAQ,EAAEkC,WAAW,CAAC;EAE5C,MAAMT,OAAO,GAAGpD,KAAK,CAACqE,MAAM,CAAc,CAAC;EAE3C,OACErE,KAAA,CAAAa,aAAA;IAAMyD,SAAS,EAAC,mBAAmB;IAAC3B,KAAK,EAAEA;EAAM,GAC/C3C,KAAA,CAAAa,aAAA,UAAA0D,QAAA;IACE1C,EAAE,EAAG,GAAEA,EAAG,UAAST,YAAa,EAAE;IAClCoD,IAAI,EAAC,OAAO;IACZF,SAAS,EAAC,2BAA2B;IACrCvC,GAAG,EAAEA,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTC,IAAI,EAAEA,IAAK;IACXjB,KAAK,EAAEA,KAAM;IACbmB,QAAQ,EAAEA,QAAS;IACnBsC,QAAQ,EAAEf,qBAAsB;IAChCS,OAAO,EAAER,oBAAqB;IAC9Be,WAAW,EAAElB,uBAAwB;IACrCmB,SAAS,EAAElB,qBAAsB;IACjC,iBAAe1B,GAAI;IACnB,iBAAeC,GAAI;IACnB,iBAAehB,KAAM;IACrB,kBAAgB8B,IAAI,GAAGA,IAAI,GAAG8B,SAAU;IACxC,oBAAkBrD,UAAU,GAAG,UAAU,GAAG,YAAa;IACzD,cAAYH;EAAa,GACrBwC,YAAY,CACjB,CAAC,EAEF5D,KAAA,CAAAa,aAAA,CAACR,MAAM,EAAAkE,QAAA;IACL1C,EAAE,EAAG,GAAEA,EAAG,WAAUT,YAAa,EAAE;IACnCyD,OAAO,EAAC,MAAM;IACdL,IAAI,EAAC,EAAE;IACPM,OAAO,EAAC,WAAW;IACnB3C,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA,QAAS;IACnB6C,QAAQ,EAAE3B;EAAQ,GACdS,WAAW,CAChB,CAAC,EAEDvB,OAAO,IACNtC,KAAA,CAAAa,aAAA,CAACP,OAAO;IACNa,GAAG,EAAG,SAAQC,YAAa,EAAE;IAC7B4D,aAAa,EAAE5B,OAAQ;IACvB6B,MAAM,EAAEC,OAAO,CAACnC,WAAW,IAAIR,iBAAiB,CAAE;IAClD4C,SAAS,EAAE,CAAE;IACbC,SAAS,EAAE;EAAI,GAEdvC,MAAM,IAAI7B,KAAK,EAEdY,aAEK,CAEP,CAAC;AAEX"}

package/components/step-indicator/StepIndicator.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -5,12 +7,13 @@ var _div;
 const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
-import { makeUniqueId, warn } from '../../shared/component-helper';
+import React, { useEffect } from 'react';
+import { warn } from '../../shared/component-helper';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import { StepIndicatorProvider } from './StepIndicatorContext';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+import useId from '../../shared/helpers/useId';
 function StepIndicator(_ref) {
   let {
       data = stepIndicatorDefaultProps.data,
@@ -27,10 +30,12 @@ function StepIndicator(_ref) {
     hide_numbers,
     no_animation
   }, restOfProps);
-  const sidebarId = props.sidebar_id || makeUniqueId();
-  if (!props.sidebar_id && props.mode) {
-    warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
-  }
+  const sidebarId = useId(props.sidebar_id);
+  useEffect(() => {
+    if (!props.sidebar_id && props.mode) {
+      warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
+    }
+  }, [props.mode, props.sidebar_id]);
   return React.createElement(StepIndicatorProvider, _extends({}, props, {
     sidebar_id: sidebarId
   }), _div || (_div = React.createElement("div", {

package/components/step-indicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","names":["React","makeUniqueId","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","mode","createElement","_extends","_div","className","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\n\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = props.sidebar_id || makeUniqueId()\n\n  if (!props.sidebar_id && props.mode) {\n    warn(\n      'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n    )\n  }\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,+BAA+B;AAClE,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAmHhE,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGH,yBAAyB,CAACG,IAAI;MACrCC,QAAQ,GAAGJ,yBAAyB,CAACI,QAAQ;MAC7CC,YAAY,GAAGL,yBAAyB,CAACK,YAAY;MACrDC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGF,KAAK,CAACG,UAAU,IAAInB,YAAY,CAAC,CAAC;EAEpD,IAAI,CAACgB,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACI,IAAI,EAAE;IACnCnB,IAAI,CACF,+FACF,CAAC;EACH;EAEA,OACEF,KAAA,CAAAsB,aAAA,CAACjB,qBAAqB,EAAAkB,QAAA,KAAKN,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAK,IAAA,KAAAA,IAAA,GACtDxB,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzCzB,KAAA,CAAAsB,aAAA,CAAClB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAG,aAAa,CAACmB,OAAO,GAAGvB,oBAAoB;AAE5CI,aAAa,CAACoB,qBAAqB,GAAG,IAAI;AAE1C,eAAepB,aAAa"}
+{"version":3,"file":"StepIndicator.js","names":["React","useEffect","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","useId","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","mode","createElement","_extends","_div","className","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useEffect } from 'react'\n\nimport { warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport useId from '../../shared/helpers/useId'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = useId(props.sidebar_id)\n\n  useEffect(() => {\n    if (!props.sidebar_id && props.mode) {\n      warn(\n        'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n      )\n    }\n  }, [props.mode, props.sidebar_id])\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;AAKA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,IAAI,QAAQ,+BAA+B;AACpD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,OAAOC,KAAK,MAAM,4BAA4B;AAmH9C,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGJ,yBAAyB,CAACI,IAAI;MACrCC,QAAQ,GAAGL,yBAAyB,CAACK,QAAQ;MAC7CC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO,YAAY;MACrDC,YAAY,GAAGR,yBAAyB,CAACQ;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGb,KAAK,CAACW,KAAK,CAACG,UAAU,CAAC;EAEzCpB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACI,IAAI,EAAE;MACnCpB,IAAI,CACF,+FACF,CAAC;IACH;EACF,CAAC,EAAE,CAACgB,KAAK,CAACI,IAAI,EAAEJ,KAAK,CAACG,UAAU,CAAC,CAAC;EAElC,OACErB,KAAA,CAAAuB,aAAA,CAAClB,qBAAqB,EAAAmB,QAAA,KAAKN,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAK,IAAA,KAAAA,IAAA,GACtDzB,KAAA,CAAAuB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzC1B,KAAA,CAAAuB,aAAA,CAACnB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAI,aAAa,CAACmB,OAAO,GAAGxB,oBAAoB;AAE5CK,aAAa,CAACoB,qBAAqB,GAAG,IAAI;AAE1C,eAAepB,aAAa"}

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -55,7 +55,7 @@ html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__i
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
   align-self: flex-start;
   margin-top: 1rem;
-  margin-right: 0.75rem;
+  margin-right: 0.25rem;
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
   font-weight: var(--font-weight-basis);

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.min.css

@@ -1 +1 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.75rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}

package/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -74,7 +74,7 @@
     .dnb-button__icon {
       align-self: flex-start;
       margin-top: 1rem;
-      margin-right: 0.75rem;
+      margin-right: 0.25rem;
     }
 
     .dnb-step-indicator__item-content {

package/components/table/TableScrollView.d.ts

@@ -8,4 +8,8 @@ export type TableScrollViewProps = {
     children: React.ReactElement<HTMLTableElement>;
 };
 export type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps & ScrollViewAllProps;
-export default function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableScrollView {
+    var _supportsSpacingProps: boolean;
+}
+export default TableScrollView;

package/components/table/TableScrollView.js

@@ -15,4 +15,5 @@ export default function TableScrollView(props) {
     interactive: "auto"
   }, rest), children);
 }
+TableScrollView._supportsSpacingProps = true;
 //# sourceMappingURL=TableScrollView.js.map

package/components/table/TableScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB"}
+{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive","_supportsSpacingProps"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n\nTableScrollView._supportsSpacingProps = true\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB;AAEAH,eAAe,CAACU,qBAAqB,GAAG,IAAI"}

package/components/table/TableTr.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TableTdProps } from './TableTd';
 import TableAccordionTr from './TableAccordionTr';
 export type TableTrProps = {
     /**
@@ -47,7 +46,7 @@ export type TableTrProps = {
     /**
      * The content of the component.
      */
-    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
+    children: React.ReactNode;
 };
 declare function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Tr {

package/components/table/TableTr.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","TableAccordionTr","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","isLast","useHandleTrVariant","accordionTr","createElement","_extends","role","_ref","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableTdProps } from './TableTd'\nimport { TableContext } from './TableContext'\nimport TableAccordionTr from './TableAccordionTr'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableTdProps>\n    | Array<React.ReactElement<TableTdProps>>\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant, isLast } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionTr\n"],"mappings":"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"}
+{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","TableAccordionTr","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","isLast","useHandleTrVariant","accordionTr","createElement","_extends","role","_ref","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableContext } from './TableContext'\nimport TableAccordionTr from './TableAccordionTr'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant, isLast } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionTr\n"],"mappings":"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"}

package/components/table/style/dnb-table.css

@@ -103,6 +103,10 @@
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
 }
+.dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
   color: var(--color-sea-green);
 }
@@ -133,7 +137,7 @@ html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-tab
   line-height: inherit;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
-  right: 1rem;
+  right: 0;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
   align-self: flex-end;
@@ -245,6 +249,9 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
   padding-right: 0.5rem;
 }
+.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
   padding-right: 0;
 }
@@ -299,6 +306,12 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   display: flex;
   align-items: flex-end;
 }
+.dnb-table__th, .dnb-table thead th {
+  background-color: var(--table-th-background-color);
+}
+.dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
+  --table-th-background-color: initial;
+}
 
 /*
 * Table component