@dnb/eufemia 10.20.0 → 10.21.0

package/components/slider/SliderInstance.js

@@ -1,7 +1,9 @@
 "use client";
 
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _SubtractButton, _AddButton, _AlignmentHelper, _SliderMainTrack, _SliderSuffix;
+const _excluded = ["instance"];
+var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
 import React from 'react';
 import classnames from 'classnames';
 import { isTrue } from '../../shared/component-helper';
@@ -40,7 +42,8 @@ export function SliderInstance() {
     stretch,
     skeleton,
     disabled,
-    className
+    className,
+    extensions
   } = allProps;
   const mainParams = {
     className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
@@ -53,8 +56,8 @@ export function SliderInstance() {
     text: label,
     disabled: disabled,
     skeleton: skeleton,
-    label_direction: labelDirection,
-    sr_only: labelSrOnly
+    labelDirection: labelDirection,
+    srOnly: labelSrOnly
   }), React.createElement("span", {
     className: "dnb-slider__wrapper"
   }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
@@ -68,7 +71,17 @@ export function SliderInstance() {
     skeleton: skeleton
   }, statusProps)), React.createElement("span", {
     className: "dnb-slider__inner"
-  }, showButtons && (isReverse ? addButton : subtractButton), _SliderMainTrack || (_SliderMainTrack = React.createElement(SliderMainTrack, null, React.createElement(SliderThumb, null), React.createElement(SliderTrackBefore, null), React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
+  }, showButtons && (isReverse ? addButton : subtractButton), React.createElement(SliderMainTrack, null, extensions && Object.entries(extensions).map(_ref2 => {
+    let [key, _ref] = _ref2;
+    let {
+        instance
+      } = _ref,
+      options = _objectWithoutProperties(_ref, _excluded);
+    const Element = instance;
+    return React.createElement(Element, _extends({
+      key: key
+    }, options));
+  }), _SliderThumb || (_SliderThumb = React.createElement(SliderThumb, null)), _SliderTrackBefore || (_SliderTrackBefore = React.createElement(SliderTrackBefore, null)), _SliderTrackAfter || (_SliderTrackAfter = React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
 }
 function SliderSuffix() {
   const {

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","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","label_direction","sr_only","_AlignmentHelper","_extends","show","text_id","state","no_animation","_SliderMainTrack","_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  } = 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          label_direction={labelDirection}\n          sr_only={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            <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","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":";;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,+BAA+B;AACtD,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AAEnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,MAAM,MAAM,6BAA6B;AAChD,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,UAAU,MAAM,2BAA2B;AAElD,SACEC,eAAe,EACfC,iBAAiB,EACjBC,gBAAgB,QACX,eAAe;AACtB,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,KAAK,EAAEC,kBAAkB,QAAQ,iBAAiB;AAE3D,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAMC,OAAO,GAAGpB,KAAK,CAACqB,UAAU,CAACd,OAAO,CAAC;EAEzC,MAAM;IACJe,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,UAAU;IACVC,aAAa;IACbC;EACF,CAAC,GAAGX,cAAc,CAAC,CAAC;EAEpB,MAAM;IACJY,EAAE;IACFC,KAAK;IACLC,WAAW;IACXC,cAAc;IACdC,MAAM;IACNC,WAAW;IACXC,WAAW;IACXC,iBAAiB;IACjBC,YAAY;IACZC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,SAAS;IACTC;EACF,CAAC,GAAGd,QAAQ;EAEZ,MAAMe,UAAU,GAAG;IACjBF,SAAS,EAAEvC,UAAU,kCAWnBI,mBAAmB,CAAC,IAAI,EAAEiC,QAAQ,CAAC,EACnClC,oBAAoB,CAACuB,QAAQ,CAAC,EAC9Ba,SAAS,EAXTjB,UAAU,IAAI,sBAAsB,EACpCgB,QAAQ,IAAI,6BAA6B,EACzCb,aAAa,IAAI,4BAA4B,EAC7C,CAACF,WAAW,IAAI,wBAAwB,EACxCtB,MAAM,CAACmC,OAAO,CAAC,IAAI,qBAAqB,EACxCR,KAAK,IAAIE,cAAc,IAAK,sBAAqBA,cAAe,EAAC,EACjEN,UAAU,IAAI,yBAAyB,EACvCO,MAAM,IAAK,uBAAsBE,WAAY,EAK/C;EACF,CAAC;EAED,MAAMS,cAAc,GAAGnB,WAAW,GAAAoB,eAAA,KAAAA,eAAA,GAAG5C,KAAA,CAAA6C,aAAA,CAACC,cAAc,MAAE,CAAC,IAAG,IAAI;EAC9D,MAAMC,SAAS,GAAGvB,WAAW,GAAAwB,UAAA,KAAAA,UAAA,GAAGhD,KAAA,CAAA6C,aAAA,CAACI,SAAS,MAAE,CAAC,IAAG,IAAI;EAEpD3C,qBAAqB,CAACoC,UAAU,EAAEJ,QAAQ,EAAElB,OAAO,CAAC;EAEpD,OACEpB,KAAA,CAAA6C,aAAA,SAAUH,UAAU,EACjBb,KAAK,IAEJ7B,KAAA,CAAA6C,aAAA,CAACnC,SAAS;IACRkB,EAAE,EAAEA,EAAE,GAAG,QAAS;IAClBsB,IAAI,EAAErB,KAAM;IACZU,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA,QAAS;IACnBP,cAAc,EAAEA,cAAe;IAC/BoB,MAAM,EAAErB;EAAY,CACrB,CACF,EAED9B,KAAA,CAAA6C,aAAA;IAAML,SAAS,EAAC;EAAqB,GAAAY,gBAAA,KAAAA,gBAAA,GACnCpD,KAAA,CAAA6C,aAAA,CAAC1C,eAAe,MAAE,CAAC,GAEnBH,KAAA,CAAA6C,aAAA,CAAClC,UAAU,EAAA0C,QAAA;IACTC,IAAI,EAAE7B,UAAW;IACjBG,EAAE,EAAEA,EAAE,GAAG,cAAe;IACxBQ,YAAY,EAAEA,YAAa;IAC3BmB,OAAO,EAAE3B,EAAE,GAAG,SAAU;IACxBsB,IAAI,EAAElB,MAAO;IACbwB,KAAK,EAAEtB,WAAY;IACnBuB,YAAY,EAAEtB,iBAAkB;IAChCG,QAAQ,EAAEA;EAAS,GACfL,WAAW,CAChB,CAAC,EAEFjC,KAAA,CAAA6C,aAAA;IAAML,SAAS,EAAC;EAAmB,GAChChB,WAAW,KAAKF,SAAS,GAAGyB,SAAS,GAAGJ,cAAc,CAAC,EAExD3C,KAAA,CAAA6C,aAAA,CAACjC,eAAe,QACb6B,UAAU,IACTiB,MAAM,CAACC,OAAO,CAAClB,UAAU,CAAC,CAACmB,GAAG,CAC5BC,KAAA,IAAqC;IAAA,IAApC,CAACC,GAAG,EAAAC,IAAA,CAA2B,GAAAF,KAAA;IAAA,IAAzB;QAAEG;MAAqB,CAAC,GAAAD,IAAA;MAATE,OAAO,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;IAC3B,MAAMC,OAAO,GAAGJ,QAA6B;IAC7C,OAAOhE,KAAA,CAAA6C,aAAA,CAACuB,OAAO,EAAAf,QAAA;MAACS,GAAG,EAAEA;IAAI,GAAKG,OAAO,CAAG,CAAC;EAC3C,CACF,CAAC,EAAAI,YAAA,KAAAA,YAAA,GACHrE,KAAA,CAAA6C,aAAA,CAAC9B,WAAW,MAAE,CAAC,GAAAuD,kBAAA,KAAAA,kBAAA,GACftE,KAAA,CAAA6C,aAAA,CAAChC,iBAAiB,MAAE,CAAC,GAAA0D,iBAAA,KAAAA,iBAAA,GACrBvE,KAAA,CAAA6C,aAAA,CAAC/B,gBAAgB,MAAE,CAAC,CACL,CAAC,EAEjBU,WAAW,KAAKF,SAAS,GAAGqB,cAAc,GAAGI,SAAS,CAAC,EAAAyB,aAAA,KAAAA,aAAA,GAExDxE,KAAA,CAAA6C,aAAA,CAAC4B,YAAY,MAAE,CAAC,CACZ,CACF,CACF,CAAC;AAEX;AAEA,SAASA,YAAYA,CAAA,EAAG;EACtB,MAAM;IAAE9C;EAAS,CAAC,GAAGX,cAAc,CAAC,CAAC;EACrC,MAAM;IAAEY,EAAE;IAAE8C;EAAO,CAAC,GAAG/C,QAAQ;EAE/B,OAAO+C,MAAM,GACX1E,KAAA,CAAA6C,aAAA,CAACrC,MAAM;IACLgC,SAAS,EAAC,oBAAoB;IAC9BZ,EAAE,EAAEA,EAAE,GAAG,SAAU;IACnBR,OAAO,EAAEO;EAAS,GAEjB+C,MACK,CAAC,GACP,IAAI;AACV;AAEA,SAAS5B,cAAcA,CAAA,EAAG;EACxB,MAAM;IAAE6B,UAAU;IAAEC,KAAK;IAAEC,UAAU;IAAElD;EAAS,CAAC,GAAGX,cAAc,CAAC,CAAC;EACpE,MAAM;IACJ8D,IAAI;IACJC,GAAG;IACHC,GAAG;IACHzC,QAAQ;IACRD,QAAQ;IACR2C,aAAa;IACbC;EACF,CAAC,GAAGvD,QAAQ;EAEZ,MAAMwD,sBAAsB,GAAIC,KAA8B,IAAK;IACjET,UAAU,CAACS,KAAK,EAAEnE,KAAK,CAAE2D,KAAK,IAAeE,IAAI,IAAI,CAAC,CAAC,EAAEC,GAAG,EAAEC,GAAG,CAAC,CAAC;EACrE,CAAC;EAED,MAAMK,cAAc,GAAG,CAAC,CAAC;EAEzB,IAAI,OAAOR,UAAU,CAAC,aAAa,CAAC,KAAK,WAAW,EAAE;IACpDQ,cAAc,CAAC,aAAa,CAAC,GAAGR,UAAU,CAAC,aAAa,CAAC;EAC3D;EAEA,MAAMS,WAAW,GAAGpE,kBAAkB,CAAC0D,KAAK,EAAYM,YAAY,CAAC;EAErE,OACElF,KAAA,CAAA6C,aAAA,CAACpC,MAAM,EAAA4C,QAAA;IACLb,SAAS,EAAC,iDAAiD;IAC3D+C,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,UAAU;IACfC,IAAI,EAAC,OAAO;IACZ,cAAYR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,OAAO,CAChC,IAAI,EACJJ,WAAW,CAACK,IAAI,IAAIC,MAAM,CAAChB,KAAK,CAClC,CAAE;IACFiB,QAAQ,EAAEV,sBAAuB;IACjC5C,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA;EAAS,GACf+C,cAAc,CACnB,CAAC;AAEN;AAEA,SAASpC,SAASA,CAAA,EAAG;EACnB,MAAM;IAAE0B,UAAU;IAAEC,KAAK;IAAEC,UAAU;IAAElD;EAAS,CAAC,GAAGX,cAAc,CAAC,CAAC;EACpE,MAAM;IAAE8D,IAAI;IAAEC,GAAG;IAAEC,GAAG;IAAEzC,QAAQ;IAAED,QAAQ;IAAEwD,QAAQ;IAAEZ;EAAa,CAAC,GAClEvD,QAAQ;EAEV,MAAMoE,iBAAiB,GAAIX,KAA8B,IAAK;IAC5DT,UAAU,CAACS,KAAK,EAAEnE,KAAK,CAAE2D,KAAK,IAAeE,IAAI,IAAI,CAAC,CAAC,EAAEC,GAAG,EAAEC,GAAG,CAAC,CAAC;EACrE,CAAC;EAED,MAAMgB,SAAS,GAAG,CAAC,CAAC;EAEpB,IAAI,OAAOnB,UAAU,CAAC,aAAa,CAAC,KAAK,WAAW,EAAE;IACpDmB,SAAS,CAAC,aAAa,CAAC,GAAGnB,UAAU,CAAC,aAAa,CAAC;EACtD;EAEA,MAAMS,WAAW,GAAGpE,kBAAkB,CAAC0D,KAAK,EAAYM,YAAY,CAAC;EAErE,OACElF,KAAA,CAAA6C,aAAA,CAACpC,MAAM,EAAA4C,QAAA;IACLb,SAAS,EAAC,4CAA4C;IACtD+C,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,KAAK;IACVC,IAAI,EAAC,OAAO;IACZ,cAAYK,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEJ,OAAO,CAC3B,IAAI,EACJJ,WAAW,CAACK,IAAI,IAAIC,MAAM,CAAChB,KAAK,CAClC,CAAE;IACFiB,QAAQ,EAAEE,iBAAkB;IAC5BxD,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA;EAAS,GACf0D,SAAS,CACd,CAAC;AAEN"}

package/components/slider/SliderMarker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type SliderMarkerProps = {
+    value: number;
+    text: React.ReactNode;
+};
+export default function SliderMarker({ value, text }: SliderMarkerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/slider/SliderMarker.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback } from 'react';
+import { makeUniqueId } from '../../shared/component-helper';
+import { useSliderProps } from './hooks/useSliderProps';
+import { clamp, getFormattedNumber } from './SliderHelpers';
+import Tooltip from '../tooltip/Tooltip';
+export default function SliderMarker(_ref) {
+  let {
+    value,
+    text
+  } = _ref;
+  const {
+    isReverse,
+    isVertical,
+    allProps
+  } = useSliderProps();
+  const {
+    min,
+    max,
+    numberFormat
+  } = allProps;
+  const getParams = useCallback(() => {
+    const markerId = `slider-marker-${makeUniqueId()}`;
+    const {
+      number,
+      aria
+    } = getFormattedNumber(value, numberFormat || {});
+    let percent = clamp((value - min) * 100 / (max - min));
+    if (isReverse) {
+      percent = 100 - percent;
+    }
+    const params = {
+      id: markerId,
+      'aria-label': aria,
+      tabIndex: 0,
+      style: {
+        [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
+      },
+      children: React.createElement(Tooltip, {
+        targetSelector: `#${markerId}`
+      }, text || number)
+    };
+    return params;
+  }, [isReverse, isVertical, max, min, numberFormat, text, value]);
+  if (!value) {
+    return null;
+  }
+  const params = getParams();
+  return React.createElement("mark", _extends({
+    className: "dnb-slider__marker"
+  }, params));
+}
+//# sourceMappingURL=SliderMarker.js.map

package/components/slider/SliderMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMarker.js","names":["React","useCallback","makeUniqueId","useSliderProps","clamp","getFormattedNumber","Tooltip","SliderMarker","_ref","value","text","isReverse","isVertical","allProps","min","max","numberFormat","getParams","markerId","number","aria","percent","params","id","tabIndex","style","children","createElement","targetSelector","_extends","className"],"sources":["../../../../src/components/slider/SliderMarker.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { makeUniqueId } from '../../shared/component-helper'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\nimport Tooltip from '../tooltip/Tooltip'\n\ntype SliderMarkerProps = {\n  value: number\n  text: React.ReactNode\n}\n\nexport default function SliderMarker({ value, text }: SliderMarkerProps) {\n  const { isReverse, isVertical, allProps } = useSliderProps()\n  const { min, max, numberFormat } = allProps\n\n  const getParams = useCallback(() => {\n    const markerId = `slider-marker-${makeUniqueId()}`\n    const { number, aria } = getFormattedNumber(value, numberFormat || {})\n\n    let percent = clamp(((value - min) * 100) / (max - min))\n    if (isReverse) {\n      percent = 100 - percent\n    }\n\n    const params = {\n      id: markerId,\n      'aria-label': aria,\n      tabIndex: 0,\n      style: {\n        [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n      },\n      children: (\n        <Tooltip targetSelector={`#${markerId}`}>{text || number}</Tooltip>\n      ),\n    }\n\n    return params\n  }, [isReverse, isVertical, max, min, numberFormat, text, value])\n\n  if (!value) {\n    return null\n  }\n\n  const params = getParams()\n\n  return <mark className=\"dnb-slider__marker\" {...params} />\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,KAAK,EAAEC,kBAAkB,QAAQ,iBAAiB;AAC3D,OAAOC,OAAO,MAAM,oBAAoB;AAOxC,eAAe,SAASC,YAAYA,CAAAC,IAAA,EAAqC;EAAA,IAApC;IAAEC,KAAK;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EACrE,MAAM;IAAEG,SAAS;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAGV,cAAc,CAAC,CAAC;EAC5D,MAAM;IAAEW,GAAG;IAAEC,GAAG;IAAEC;EAAa,CAAC,GAAGH,QAAQ;EAE3C,MAAMI,SAAS,GAAGhB,WAAW,CAAC,MAAM;IAClC,MAAMiB,QAAQ,GAAI,iBAAgBhB,YAAY,CAAC,CAAE,EAAC;IAClD,MAAM;MAAEiB,MAAM;MAAEC;IAAK,CAAC,GAAGf,kBAAkB,CAACI,KAAK,EAAEO,YAAY,IAAI,CAAC,CAAC,CAAC;IAEtE,IAAIK,OAAO,GAAGjB,KAAK,CAAE,CAACK,KAAK,GAAGK,GAAG,IAAI,GAAG,IAAKC,GAAG,GAAGD,GAAG,CAAC,CAAC;IACxD,IAAIH,SAAS,EAAE;MACbU,OAAO,GAAG,GAAG,GAAGA,OAAO;IACzB;IAEA,MAAMC,MAAM,GAAG;MACbC,EAAE,EAAEL,QAAQ;MACZ,YAAY,EAAEE,IAAI;MAClBI,QAAQ,EAAE,CAAC;MACXC,KAAK,EAAE;QACL,CAAE,GAAEb,UAAU,GAAG,KAAK,GAAG,MAAO,EAAC,GAAI,GAAES,OAAQ;MACjD,CAAC;MACDK,QAAQ,EACN1B,KAAA,CAAA2B,aAAA,CAACrB,OAAO;QAACsB,cAAc,EAAG,IAAGV,QAAS;MAAE,GAAER,IAAI,IAAIS,MAAgB;IAEtE,CAAC;IAED,OAAOG,MAAM;EACf,CAAC,EAAE,CAACX,SAAS,EAAEC,UAAU,EAAEG,GAAG,EAAED,GAAG,EAAEE,YAAY,EAAEN,IAAI,EAAED,KAAK,CAAC,CAAC;EAEhE,IAAI,CAACA,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,MAAMa,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,OAAOjB,KAAA,CAAA2B,aAAA,SAAAE,QAAA;IAAMC,SAAS,EAAC;EAAoB,GAAKR,MAAM,CAAG,CAAC;AAC5D"}

package/components/slider/SliderProvider.js

@@ -1,7 +1,7 @@
 "use client";
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
+const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "extensions", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
 import React from 'react';
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import { isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState, extendPropsWithContext } from '../../shared/component-helper';
@@ -54,6 +54,7 @@ export function SliderProvider(localProps) {
       skeleton,
       max,
       min,
+      extensions,
       disabled,
       className,
       id,

package/components/slider/SliderProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  isTrue,\n  makeUniqueId,\n  dispatchCustomElementEvent,\n  getStatusState,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n  closestIndex,\n  getFormattedNumber,\n  getUpdatedValues,\n  roundValue,\n} from './SliderHelpers'\n\nimport type {\n  ValueTypes,\n  onChangeEventProps,\n  SliderAllProps,\n  SliderContextTypes,\n  ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n  statusState: 'error',\n  addTitle: '+',\n  subtractTitle: '−',\n  min: 0,\n  max: 100,\n  value: -1,\n  multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n  const context = React.useContext(Context)\n  const allProps = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      { skeleton: context?.skeleton },\n      context?.getTranslation(localProps).Slider,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(\n        context?.FormRow,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      pickFormElementProps(\n        context?.formElement,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      context?.Slider\n    )\n  )\n\n  const [_id] = React.useState(makeUniqueId)\n  if (!allProps.id) {\n    allProps.id = _id\n  }\n\n  const {\n    step,\n    label, // eslint-disable-line\n    labelDirection, // eslint-disable-line\n    labelSrOnly, // eslint-disable-line\n    status, // eslint-disable-line\n    statusState, // eslint-disable-line\n    statusProps, // eslint-disable-line\n    statusNoAnimation, // eslint-disable-line\n    globalStatus, // eslint-disable-line\n    stretch, // eslint-disable-line\n    suffix, // eslint-disable-line\n    thumbTitle: title, // eslint-disable-line\n    subtractTitle, // eslint-disable-line\n    addTitle, // eslint-disable-line\n    hideButtons, // eslint-disable-line\n    multiThumbBehavior,\n    numberFormat,\n    tooltip, // eslint-disable-line\n    alwaysShowTooltip, // eslint-disable-line\n    skeleton,\n    max, // eslint-disable-line\n    min, // eslint-disable-line\n    disabled,\n    className, // eslint-disable-line\n    id, // eslint-disable-line\n    onChange,\n    onDragStart, // eslint-disable-line\n    onDragEnd, // eslint-disable-line\n    vertical: _vertical,\n    reverse: _reverse,\n    value: _value,\n    children: _children, // eslint-disable-line\n\n    ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n  } = allProps\n\n  const [value, setValue] = React.useState<ValueTypes>(_value)\n  const [externValue, updateExternValue] =\n    React.useState<ValueTypes>(_value)\n  const realtimeValue = React.useRef<ValueTypes>(_value)\n  const [thumbState, setThumbState] =\n    React.useState<ThumbStateEnums>('initial')\n  const thumbIndex = React.useRef<number>(-1)\n  const [shouldAnimate, updateAnimateState] =\n    React.useState<boolean>(false)\n  const [isVertical] = React.useState(isTrue(_vertical))\n  const [isReverse] = React.useState(\n    isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n  )\n  const isMulti = Array.isArray(value)\n  const setThumbIndex = (index: number) => {\n    if (!isNaN(index)) {\n      thumbIndex.current = index\n    }\n  }\n\n  const getAndUpdateCurrentIndex = (currentValue: number) => {\n    let currentIndex = null\n\n    if (thumbIndex.current > -1) {\n      currentIndex = thumbIndex.current\n    } else {\n      currentIndex = closestIndex(currentValue, value as Array<number>)\n      setThumbIndex(currentIndex)\n    }\n\n    return currentIndex\n  }\n\n  const updateValue = (value: ValueTypes) => {\n    setValue(value)\n    realtimeValue.current = value\n  }\n\n  const emitChange = (\n    event: MouseEvent | TouchEvent,\n    rawValue: number\n  ) => {\n    if (disabled || isTrue(skeleton)) {\n      return\n    }\n\n    let numberValue = roundValue(rawValue, step)\n    let multiValues: ValueTypes = numberValue\n\n    if (numberValue >= min) {\n      if (isMulti) {\n        const currentIndex = getAndUpdateCurrentIndex(numberValue)\n        const lower = realtimeValue.current[currentIndex - 1]\n        const upper = realtimeValue.current[currentIndex + 1]\n\n        if (multiThumbBehavior === 'omit') {\n          if (numberValue < lower) {\n            numberValue = lower\n          }\n          if (numberValue > upper) {\n            numberValue = upper\n          }\n        }\n\n        multiValues = getUpdatedValues(\n          multiThumbBehavior === 'push'\n            ? (realtimeValue.current as Array<number>)\n            : value,\n          currentIndex,\n          numberValue\n        )\n\n        if (multiThumbBehavior === 'push') {\n          if (typeof lower !== 'undefined' && numberValue < lower) {\n            multiValues[currentIndex - 1] = numberValue\n          }\n          if (typeof upper !== 'undefined' && numberValue >= upper) {\n            multiValues[currentIndex + 1] = numberValue\n          }\n        }\n\n        if (numberValue === realtimeValue.current[currentIndex]) {\n          return // stop here\n        }\n      } else if (numberValue === realtimeValue.current) {\n        return // stop here\n      }\n\n      if (typeof onChange === 'function') {\n        const obj: onChangeEventProps = {\n          value: multiValues,\n          rawValue,\n          event,\n          number: null,\n        }\n\n        if (numberFormat) {\n          obj.number = getFormattedNumber(numberValue, numberFormat).number\n        }\n\n        dispatchCustomElementEvent(allProps, 'onChange', obj)\n      }\n\n      updateValue(multiValues)\n    }\n  }\n\n  React.useEffect(() => {\n    if (isMulti) {\n      const hasChanged = (_value as Array<number>).some((val, i) => {\n        return val !== externValue[i]\n      })\n\n      if (hasChanged) {\n        updateValue(_value)\n        updateExternValue(_value)\n      }\n    } else if (_value !== externValue) {\n      updateValue(_value)\n      updateExternValue(_value)\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_value, isMulti])\n\n  const trackRef = React.useRef<HTMLElement>()\n\n  const animationTimeout = React.useRef<NodeJS.Timeout>()\n  const setShouldAnimate = (state: boolean) => {\n    updateAnimateState(state)\n    clearTimeout(animationTimeout.current)\n    if (state) {\n      animationTimeout.current = setTimeout(\n        () => updateAnimateState(false),\n        250\n      )\n    }\n  }\n\n  const showStatus = getStatusState(status)\n  const showButtons = !isMulti && !isTrue(hideButtons)\n  const values = (isMulti ? value : [value]) as Array<number>\n\n  return (\n    <SliderContext.Provider\n      value={{\n        isMulti,\n        isReverse,\n        isVertical,\n        shouldAnimate,\n        value,\n        values,\n        setValue,\n        attributes,\n        showStatus,\n        showButtons,\n        thumbState,\n        setThumbState,\n        thumbIndex,\n        setThumbIndex,\n        emitChange,\n        allProps,\n        trackRef,\n        setShouldAnimate,\n        animationTimeout,\n      }}\n    >\n      {localProps.children}\n    </SliderContext.Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SACEC,MAAM,EACNC,YAAY,EACZC,0BAA0B,EAC1BC,cAAc,EACdC,sBAAsB,QACjB,+BAA+B;AAEtC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,YAAY,EACZC,kBAAkB,EAClBC,gBAAgB,EAChBC,UAAU,QACL,iBAAiB;AASxB,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,MAAMC,YAAY,GAAG;EACnBC,WAAW,EAAE,OAAO;EACpBC,QAAQ,EAAE,GAAG;EACbC,aAAa,EAAE,GAAG;EAClBC,GAAG,EAAE,CAAC;EACNC,GAAG,EAAE,GAAG;EACRC,KAAK,EAAE,CAAC,CAAC;EACTC,kBAAkB,EAAE;AACtB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGrB,KAAK,CAACsB,aAAa,CAAqB,IAAI,CAAC;AAE1E,OAAO,SAASC,cAAcA,CAACC,UAA0B,EAAE;EACzD,MAAMC,OAAO,GAAGzB,KAAK,CAAC0B,UAAU,CAACnB,OAAO,CAAC;EACzC,MAAMoB,QAAQ,GAAGf,qBAAqB,CACpCN,sBAAsB,CACpBkB,UAAU,EACVX,YAAY,EACZ;IAAEe,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,cAAc,CAACL,UAAU,CAAC,CAACM,MAAM,EAE1C7B,oBAAoB,CAClBwB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,OAAO,EAKhB;IACEC,QAAQ,EAAE;EACZ,CACF,CAAC,EACD/B,oBAAoB,CAClBwB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEQ,WAAW,EAKpB;IACED,QAAQ,EAAE;EACZ,CACF,CAAC,EACDP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MACX,CACF,CAAC;EAED,MAAM,CAACI,GAAG,CAAC,GAAGlC,KAAK,CAACmC,QAAQ,CAAChC,YAAY,CAAC;EAC1C,IAAI,CAACwB,QAAQ,CAACS,EAAE,EAAE;IAChBT,QAAQ,CAACS,EAAE,GAAGF,GAAG;EACnB;EAEA,MAAM;MACJG,IAAI;MACJC,KAAK;MACLC,cAAc;MACdC,WAAW;MACXC,MAAM;MACN3B,WAAW;MACX4B,WAAW;MACXC,iBAAiB;MACjBC,YAAY;MACZC,OAAO;MACPC,MAAM;MACNC,UAAU,EAAEC,KAAK;MACjBhC,aAAa;MACbD,QAAQ;MACRkC,WAAW;MACX7B,kBAAkB;MAClB8B,YAAY;MACZC,OAAO;MACPC,iBAAiB;MACjBxB,QAAQ;MACRV,GAAG;MACHD,GAAG;MACHoC,QAAQ;MACRC,SAAS;MACTlB,EAAE;MACFmB,QAAQ;MACRC,WAAW;MACXC,SAAS;MACTzB,QAAQ,EAAE0B,SAAS;MACnBC,OAAO,EAAEC,QAAQ;MACjBzC,KAAK,EAAE0C,MAAM;MACbC,QAAQ,EAAEC;IAGZ,CAAC,GAAGpC,QAAQ;IADPqC,UAAU,GAAAC,wBAAA,CACXtC,QAAQ,EAAAuC,SAAA;EAEZ,MAAM,CAAC/C,KAAK,EAAEgD,QAAQ,CAAC,GAAGnE,KAAK,CAACmC,QAAQ,CAAa0B,MAAM,CAAC;EAC5D,MAAM,CAACO,WAAW,EAAEC,iBAAiB,CAAC,GACpCrE,KAAK,CAACmC,QAAQ,CAAa0B,MAAM,CAAC;EACpC,MAAMS,aAAa,GAAGtE,KAAK,CAACuE,MAAM,CAAaV,MAAM,CAAC;EACtD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAC/BzE,KAAK,CAACmC,QAAQ,CAAkB,SAAS,CAAC;EAC5C,MAAMuC,UAAU,GAAG1E,KAAK,CAACuE,MAAM,CAAS,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACI,aAAa,EAAEC,kBAAkB,CAAC,GACvC5E,KAAK,CAACmC,QAAQ,CAAU,KAAK,CAAC;EAChC,MAAM,CAAC0C,UAAU,CAAC,GAAG7E,KAAK,CAACmC,QAAQ,CAACjC,MAAM,CAACwD,SAAS,CAAC,CAAC;EACtD,MAAM,CAACoB,SAAS,CAAC,GAAG9E,KAAK,CAACmC,QAAQ,CAChC0C,UAAU,GAAG,CAAC3E,MAAM,CAAC0D,QAAQ,CAAC,GAAG1D,MAAM,CAAC0D,QAAQ,CAClD,CAAC;EACD,MAAMmB,OAAO,GAAGC,KAAK,CAACC,OAAO,CAAC9D,KAAK,CAAC;EACpC,MAAM+D,aAAa,GAAIC,KAAa,IAAK;IACvC,IAAI,CAACC,KAAK,CAACD,KAAK,CAAC,EAAE;MACjBT,UAAU,CAACW,OAAO,GAAGF,KAAK;IAC5B;EACF,CAAC;EAED,MAAMG,wBAAwB,GAAIC,YAAoB,IAAK;IACzD,IAAIC,YAAY,GAAG,IAAI;IAEvB,IAAId,UAAU,CAACW,OAAO,GAAG,CAAC,CAAC,EAAE;MAC3BG,YAAY,GAAGd,UAAU,CAACW,OAAO;IACnC,CAAC,MAAM;MACLG,YAAY,GAAGhF,YAAY,CAAC+E,YAAY,EAAEpE,KAAsB,CAAC;MACjE+D,aAAa,CAACM,YAAY,CAAC;IAC7B;IAEA,OAAOA,YAAY;EACrB,CAAC;EAED,MAAMC,WAAW,GAAItE,KAAiB,IAAK;IACzCgD,QAAQ,CAAChD,KAAK,CAAC;IACfmD,aAAa,CAACe,OAAO,GAAGlE,KAAK;EAC/B,CAAC;EAED,MAAMuE,UAAU,GAAGA,CACjBC,KAA8B,EAC9BC,QAAgB,KACb;IACH,IAAIvC,QAAQ,IAAInD,MAAM,CAAC0B,QAAQ,CAAC,EAAE;MAChC;IACF;IAEA,IAAIiE,WAAW,GAAGlF,UAAU,CAACiF,QAAQ,EAAEvD,IAAI,CAAC;IAC5C,IAAIyD,WAAuB,GAAGD,WAAW;IAEzC,IAAIA,WAAW,IAAI5E,GAAG,EAAE;MACtB,IAAI8D,OAAO,EAAE;QACX,MAAMS,YAAY,GAAGF,wBAAwB,CAACO,WAAW,CAAC;QAC1D,MAAME,KAAK,GAAGzB,aAAa,CAACe,OAAO,CAACG,YAAY,GAAG,CAAC,CAAC;QACrD,MAAMQ,KAAK,GAAG1B,aAAa,CAACe,OAAO,CAACG,YAAY,GAAG,CAAC,CAAC;QAErD,IAAIpE,kBAAkB,KAAK,MAAM,EAAE;UACjC,IAAIyE,WAAW,GAAGE,KAAK,EAAE;YACvBF,WAAW,GAAGE,KAAK;UACrB;UACA,IAAIF,WAAW,GAAGG,KAAK,EAAE;YACvBH,WAAW,GAAGG,KAAK;UACrB;QACF;QAEAF,WAAW,GAAGpF,gBAAgB,CAC5BU,kBAAkB,KAAK,MAAM,GACxBkD,aAAa,CAACe,OAAO,GACtBlE,KAAK,EACTqE,YAAY,EACZK,WACF,CAAC;QAED,IAAIzE,kBAAkB,KAAK,MAAM,EAAE;UACjC,IAAI,OAAO2E,KAAK,KAAK,WAAW,IAAIF,WAAW,GAAGE,KAAK,EAAE;YACvDD,WAAW,CAACN,YAAY,GAAG,CAAC,CAAC,GAAGK,WAAW;UAC7C;UACA,IAAI,OAAOG,KAAK,KAAK,WAAW,IAAIH,WAAW,IAAIG,KAAK,EAAE;YACxDF,WAAW,CAACN,YAAY,GAAG,CAAC,CAAC,GAAGK,WAAW;UAC7C;QACF;QAEA,IAAIA,WAAW,KAAKvB,aAAa,CAACe,OAAO,CAACG,YAAY,CAAC,EAAE;UACvD;QACF;MACF,CAAC,MAAM,IAAIK,WAAW,KAAKvB,aAAa,CAACe,OAAO,EAAE;QAChD;MACF;MAEA,IAAI,OAAO9B,QAAQ,KAAK,UAAU,EAAE;QAClC,MAAM0C,GAAuB,GAAG;UAC9B9E,KAAK,EAAE2E,WAAW;UAClBF,QAAQ;UACRD,KAAK;UACLO,MAAM,EAAE;QACV,CAAC;QAED,IAAIhD,YAAY,EAAE;UAChB+C,GAAG,CAACC,MAAM,GAAGzF,kBAAkB,CAACoF,WAAW,EAAE3C,YAAY,CAAC,CAACgD,MAAM;QACnE;QAEA9F,0BAA0B,CAACuB,QAAQ,EAAE,UAAU,EAAEsE,GAAG,CAAC;MACvD;MAEAR,WAAW,CAACK,WAAW,CAAC;IAC1B;EACF,CAAC;EAED9F,KAAK,CAACmG,SAAS,CAAC,MAAM;IACpB,IAAIpB,OAAO,EAAE;MACX,MAAMqB,UAAU,GAAIvC,MAAM,CAAmBwC,IAAI,CAAC,CAACC,GAAG,EAAEC,CAAC,KAAK;QAC5D,OAAOD,GAAG,KAAKlC,WAAW,CAACmC,CAAC,CAAC;MAC/B,CAAC,CAAC;MAEF,IAAIH,UAAU,EAAE;QACdX,WAAW,CAAC5B,MAAM,CAAC;QACnBQ,iBAAiB,CAACR,MAAM,CAAC;MAC3B;IACF,CAAC,MAAM,IAAIA,MAAM,KAAKO,WAAW,EAAE;MACjCqB,WAAW,CAAC5B,MAAM,CAAC;MACnBQ,iBAAiB,CAACR,MAAM,CAAC;IAC3B;EAGF,CAAC,EAAE,CAACA,MAAM,EAAEkB,OAAO,CAAC,CAAC;EAErB,MAAMyB,QAAQ,GAAGxG,KAAK,CAACuE,MAAM,CAAc,CAAC;EAE5C,MAAMkC,gBAAgB,GAAGzG,KAAK,CAACuE,MAAM,CAAiB,CAAC;EACvD,MAAMmC,gBAAgB,GAAIC,KAAc,IAAK;IAC3C/B,kBAAkB,CAAC+B,KAAK,CAAC;IACzBC,YAAY,CAACH,gBAAgB,CAACpB,OAAO,CAAC;IACtC,IAAIsB,KAAK,EAAE;MACTF,gBAAgB,CAACpB,OAAO,GAAGwB,UAAU,CACnC,MAAMjC,kBAAkB,CAAC,KAAK,CAAC,EAC/B,GACF,CAAC;IACH;EACF,CAAC;EAED,MAAMkC,UAAU,GAAGzG,cAAc,CAACoC,MAAM,CAAC;EACzC,MAAMsE,WAAW,GAAG,CAAChC,OAAO,IAAI,CAAC7E,MAAM,CAAC+C,WAAW,CAAC;EACpD,MAAM+D,MAAM,GAAIjC,OAAO,GAAG5D,KAAK,GAAG,CAACA,KAAK,CAAmB;EAE3D,OACEnB,KAAA,CAAAiH,aAAA,CAAC5F,aAAa,CAAC6F,QAAQ;IACrB/F,KAAK,EAAE;MACL4D,OAAO;MACPD,SAAS;MACTD,UAAU;MACVF,aAAa;MACbxD,KAAK;MACL6F,MAAM;MACN7C,QAAQ;MACRH,UAAU;MACV8C,UAAU;MACVC,WAAW;MACXvC,UAAU;MACVC,aAAa;MACbC,UAAU;MACVQ,aAAa;MACbQ,UAAU;MACV/D,QAAQ;MACR6E,QAAQ;MACRE,gBAAgB;MAChBD;IACF;EAAE,GAEDjF,UAAU,CAACsC,QACU,CAAC;AAE7B"}
+{"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","extensions","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  isTrue,\n  makeUniqueId,\n  dispatchCustomElementEvent,\n  getStatusState,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n  closestIndex,\n  getFormattedNumber,\n  getUpdatedValues,\n  roundValue,\n} from './SliderHelpers'\n\nimport type {\n  ValueTypes,\n  onChangeEventProps,\n  SliderAllProps,\n  SliderContextTypes,\n  ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n  statusState: 'error',\n  addTitle: '+',\n  subtractTitle: '−',\n  min: 0,\n  max: 100,\n  value: -1,\n  multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n  const context = React.useContext(Context)\n  const allProps = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      { skeleton: context?.skeleton },\n      context?.getTranslation(localProps).Slider,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(\n        context?.FormRow,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      pickFormElementProps(\n        context?.formElement,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      context?.Slider\n    )\n  )\n\n  const [_id] = React.useState(makeUniqueId)\n  if (!allProps.id) {\n    allProps.id = _id\n  }\n\n  const {\n    step,\n    label, // eslint-disable-line\n    labelDirection, // eslint-disable-line\n    labelSrOnly, // eslint-disable-line\n    status, // eslint-disable-line\n    statusState, // eslint-disable-line\n    statusProps, // eslint-disable-line\n    statusNoAnimation, // eslint-disable-line\n    globalStatus, // eslint-disable-line\n    stretch, // eslint-disable-line\n    suffix, // eslint-disable-line\n    thumbTitle: title, // eslint-disable-line\n    subtractTitle, // eslint-disable-line\n    addTitle, // eslint-disable-line\n    hideButtons, // eslint-disable-line\n    multiThumbBehavior,\n    numberFormat,\n    tooltip, // eslint-disable-line\n    alwaysShowTooltip, // eslint-disable-line\n    skeleton,\n    max, // eslint-disable-line\n    min, // eslint-disable-line\n    extensions, // eslint-disable-line\n    disabled,\n    className, // eslint-disable-line\n    id, // eslint-disable-line\n    onChange,\n    onDragStart, // eslint-disable-line\n    onDragEnd, // eslint-disable-line\n    vertical: _vertical,\n    reverse: _reverse,\n    value: _value,\n    children: _children, // eslint-disable-line\n\n    ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n  } = allProps\n\n  const [value, setValue] = React.useState<ValueTypes>(_value)\n  const [externValue, updateExternValue] =\n    React.useState<ValueTypes>(_value)\n  const realtimeValue = React.useRef<ValueTypes>(_value)\n  const [thumbState, setThumbState] =\n    React.useState<ThumbStateEnums>('initial')\n  const thumbIndex = React.useRef<number>(-1)\n  const [shouldAnimate, updateAnimateState] =\n    React.useState<boolean>(false)\n  const [isVertical] = React.useState(isTrue(_vertical))\n  const [isReverse] = React.useState(\n    isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n  )\n  const isMulti = Array.isArray(value)\n  const setThumbIndex = (index: number) => {\n    if (!isNaN(index)) {\n      thumbIndex.current = index\n    }\n  }\n\n  const getAndUpdateCurrentIndex = (currentValue: number) => {\n    let currentIndex = null\n\n    if (thumbIndex.current > -1) {\n      currentIndex = thumbIndex.current\n    } else {\n      currentIndex = closestIndex(currentValue, value as Array<number>)\n      setThumbIndex(currentIndex)\n    }\n\n    return currentIndex\n  }\n\n  const updateValue = (value: ValueTypes) => {\n    setValue(value)\n    realtimeValue.current = value\n  }\n\n  const emitChange = (\n    event: MouseEvent | TouchEvent,\n    rawValue: number\n  ) => {\n    if (disabled || isTrue(skeleton)) {\n      return\n    }\n\n    let numberValue = roundValue(rawValue, step)\n    let multiValues: ValueTypes = numberValue\n\n    if (numberValue >= min) {\n      if (isMulti) {\n        const currentIndex = getAndUpdateCurrentIndex(numberValue)\n        const lower = realtimeValue.current[currentIndex - 1]\n        const upper = realtimeValue.current[currentIndex + 1]\n\n        if (multiThumbBehavior === 'omit') {\n          if (numberValue < lower) {\n            numberValue = lower\n          }\n          if (numberValue > upper) {\n            numberValue = upper\n          }\n        }\n\n        multiValues = getUpdatedValues(\n          multiThumbBehavior === 'push'\n            ? (realtimeValue.current as Array<number>)\n            : value,\n          currentIndex,\n          numberValue\n        )\n\n        if (multiThumbBehavior === 'push') {\n          if (typeof lower !== 'undefined' && numberValue < lower) {\n            multiValues[currentIndex - 1] = numberValue\n          }\n          if (typeof upper !== 'undefined' && numberValue >= upper) {\n            multiValues[currentIndex + 1] = numberValue\n          }\n        }\n\n        if (numberValue === realtimeValue.current[currentIndex]) {\n          return // stop here\n        }\n      } else if (numberValue === realtimeValue.current) {\n        return // stop here\n      }\n\n      if (typeof onChange === 'function') {\n        const obj: onChangeEventProps = {\n          value: multiValues,\n          rawValue,\n          event,\n          number: null,\n        }\n\n        if (numberFormat) {\n          obj.number = getFormattedNumber(numberValue, numberFormat).number\n        }\n\n        dispatchCustomElementEvent(allProps, 'onChange', obj)\n      }\n\n      updateValue(multiValues)\n    }\n  }\n\n  React.useEffect(() => {\n    if (isMulti) {\n      const hasChanged = (_value as Array<number>).some((val, i) => {\n        return val !== externValue[i]\n      })\n\n      if (hasChanged) {\n        updateValue(_value)\n        updateExternValue(_value)\n      }\n    } else if (_value !== externValue) {\n      updateValue(_value)\n      updateExternValue(_value)\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_value, isMulti])\n\n  const trackRef = React.useRef<HTMLElement>()\n\n  const animationTimeout = React.useRef<NodeJS.Timeout>()\n  const setShouldAnimate = (state: boolean) => {\n    updateAnimateState(state)\n    clearTimeout(animationTimeout.current)\n    if (state) {\n      animationTimeout.current = setTimeout(\n        () => updateAnimateState(false),\n        250\n      )\n    }\n  }\n\n  const showStatus = getStatusState(status)\n  const showButtons = !isMulti && !isTrue(hideButtons)\n  const values = (isMulti ? value : [value]) as Array<number>\n\n  return (\n    <SliderContext.Provider\n      value={{\n        isMulti,\n        isReverse,\n        isVertical,\n        shouldAnimate,\n        value,\n        values,\n        setValue,\n        attributes,\n        showStatus,\n        showButtons,\n        thumbState,\n        setThumbState,\n        thumbIndex,\n        setThumbIndex,\n        emitChange,\n        allProps,\n        trackRef,\n        setShouldAnimate,\n        animationTimeout,\n      }}\n    >\n      {localProps.children}\n    </SliderContext.Provider>\n  )\n}\n"],"mappings":"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"}

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

@@ -14,6 +14,9 @@
   --slider-line-after: gray;
   --slider-line-before--disabled: dimgray;
   --slider-line-after--disabled: lightgray;
+  --slider-marker: var(--slider-line-before);
+  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
+  --slider-marker-width: 0.125rem;
   -webkit-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
@@ -53,6 +56,44 @@
   padding-left: 0;
   padding-top: 0.5rem;
 }
+.dnb-slider__marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  margin: auto;
+  width: var(--slider-marker-width);
+  height: var(--slider-marker-height);
+  background-color: var(--slider-marker);
+}
+.dnb-slider__marker:focus {
+  outline: none;
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-slider__marker:focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-slider__marker::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: scale(10, 1);
+}
+.dnb-slider--vertical .dnb-slider__marker {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  height: var(--slider-marker-width);
+  width: var(--slider-marker-height);
+}
+.dnb-slider--vertical .dnb-slider__marker::before {
+  transform: scale(1, 10);
+}
 .dnb-slider__track {
   touch-action: none;
   position: relative;
@@ -119,7 +160,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   display: flex;
   justify-content: center;
   transform: translate3d(-50%, 0, 0);
@@ -207,7 +248,7 @@ html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~
     margin-bottom: 0.5rem;
   }
 }
-.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
+.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__marker, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
   background-color: var(--skeleton-color);
 }
 .dnb-slider.dnb-skeleton .dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__track::after, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after {

package/components/slider/style/dnb-slider.min.css

@@ -1 +1 @@
-.dnb-slider{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem;--slider-line-before:#000;--slider-line-after:gray;--slider-line-before--disabled:dimgray;--slider-line-after--disabled:#d3d3d3;-webkit-touch-callout:none;display:flex;font-size:var(--font-size-small);line-height:var(--slider-thumb-size);-webkit-user-select:none;user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{display:inline-flex;flex:1;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{align-items:center;height:100%;width:auto}.dnb-slider__inner{display:inline-flex;height:var(--slider-thumb-size)}.dnb-slider__suffix{align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__track{cursor:pointer;flex:1;margin:0 calc(var(--slider-space)*1.5);min-width:2rem;position:relative;touch-action:none}.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--no-buttons .dnb-slider__track{margin:0 calc(var(--slider-space))}.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)) 0}.dnb-slider--vertical .dnb-slider__inner{flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:var(--slider-thumb-size)}.dnb-slider__line{background-color:var(--slider-line-before);border-radius:var(--slider-track-height);height:var(--slider-track-height);left:0;margin:0 calc(0px - var(--slider-space));position:absolute;top:50%;transform:translate3d(0,-50%,0)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:var(--slider-line-after);right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;margin:calc(0px - var(--slider-space)) 0;top:0;transform:translate3d(-50%,0,0);width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__line__before{bottom:0;top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__thumb{box-shadow:var(--shadow-default)}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:flex;justify-content:center;left:0;position:absolute;top:0;transform:translate3d(-50%,0,0);z-index:3}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:var(--slider-thumb-size);width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:var(--slider-button-size);line-height:var(--slider-button-size);transform:translateY(.25rem);width:var(--slider-button-size);z-index:2}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{transform:translateX(.25rem)}.dnb-slider__state--disabled .dnb-slider__line,.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled .dnb-slider__track{cursor:not-allowed}.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition:left .25s var(--easing-default),top .25s var(--easing-default),bottom .25s var(--easing-default),right .25s var(--easing-default),box-shadow .25s var(--easing-default)}html[data-visual-test] .dnb-slider__line,html[data-visual-test] .dnb-slider__thumb{transition:none!important}.dnb-slider__button-helper{opacity:0;pointer-events:none;transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider>.dnb-form-label{align-self:flex-start;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:var(--skeleton-color)}
+.dnb-slider{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem;--slider-line-before:#000;--slider-line-after:gray;--slider-line-before--disabled:dimgray;--slider-line-after--disabled:#d3d3d3;--slider-marker:var(--slider-line-before);--slider-marker-height:calc(var(--slider-thumb-size)*0.75);--slider-marker-width:0.125rem;-webkit-touch-callout:none;display:flex;font-size:var(--font-size-small);line-height:var(--slider-thumb-size);-webkit-user-select:none;user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{display:inline-flex;flex:1;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{align-items:center;height:100%;width:auto}.dnb-slider__inner{display:inline-flex;height:var(--slider-thumb-size)}.dnb-slider__suffix{align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__marker{background-color:var(--slider-marker);bottom:0;height:var(--slider-marker-height);margin:auto;position:absolute;top:0;width:var(--slider-marker-width);z-index:3}.dnb-slider__marker:focus{outline:none}html[data-whatinput=keyboard] .dnb-slider__marker:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider__marker:before{content:"";height:100%;position:absolute;transform:scaleX(10);width:100%}.dnb-slider--vertical .dnb-slider__marker{bottom:auto;height:var(--slider-marker-width);left:0;right:0;top:auto;width:var(--slider-marker-height)}.dnb-slider--vertical .dnb-slider__marker:before{transform:scaleY(10)}.dnb-slider__track{cursor:pointer;flex:1;margin:0 calc(var(--slider-space)*1.5);min-width:2rem;position:relative;touch-action:none}.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--no-buttons .dnb-slider__track{margin:0 calc(var(--slider-space))}.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)) 0}.dnb-slider--vertical .dnb-slider__inner{flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:var(--slider-thumb-size)}.dnb-slider__line{background-color:var(--slider-line-before);border-radius:var(--slider-track-height);height:var(--slider-track-height);left:0;margin:0 calc(0px - var(--slider-space));position:absolute;top:50%;transform:translate3d(0,-50%,0)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:var(--slider-line-after);right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;margin:calc(0px - var(--slider-space)) 0;top:0;transform:translate3d(-50%,0,0);width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__line__before{bottom:0;top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__thumb{box-shadow:var(--shadow-default)}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:flex;justify-content:center;left:0;position:absolute;top:0;transform:translate3d(-50%,0,0);z-index:4}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:var(--slider-thumb-size);width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:var(--slider-button-size);line-height:var(--slider-button-size);transform:translateY(.25rem);width:var(--slider-button-size);z-index:2}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{transform:translateX(.25rem)}.dnb-slider__state--disabled .dnb-slider__line,.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled .dnb-slider__track{cursor:not-allowed}.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition:left .25s var(--easing-default),top .25s var(--easing-default),bottom .25s var(--easing-default),right .25s var(--easing-default),box-shadow .25s var(--easing-default)}html[data-visual-test] .dnb-slider__line,html[data-visual-test] .dnb-slider__thumb{transition:none!important}.dnb-slider__button-helper{opacity:0;pointer-events:none;transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider>.dnb-form-label{align-self:flex-start;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__marker,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:var(--skeleton-color)}

package/components/slider/style/dnb-slider.scss

@@ -14,6 +14,9 @@
   --slider-line-after: gray;
   --slider-line-before--disabled: dimgray;
   --slider-line-after--disabled: lightgray;
+  --slider-marker: var(--slider-line-before);
+  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
+  --slider-marker-width: 0.125rem;
 
   user-select: none; // Safari / Touch fix
   -webkit-touch-callout: none; // Safari / Touch fix
@@ -68,6 +71,45 @@
     padding-top: 0.5rem;
   }
 
+  &__marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    margin: auto;
+    width: var(--slider-marker-width);
+    height: var(--slider-marker-height);
+    background-color: var(--slider-marker);
+
+    &:focus {
+      outline: none; // we show a Tooltip instead
+      @include focusRing();
+    }
+
+    // Larger bounding area
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform: scale(10, 1);
+    }
+  }
+
+  &--vertical &__marker {
+    top: auto;
+    right: 0;
+    bottom: auto;
+    left: 0;
+
+    height: var(--slider-marker-width);
+    width: var(--slider-marker-height);
+
+    &::before {
+      transform: scale(1, 10);
+    }
+  }
+
   &__track {
     // make sure we do not alow page scroll on touch devices
     touch-action: none;
@@ -165,7 +207,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 3;
+    z-index: 4;
 
     display: flex;
     justify-content: center;
@@ -283,6 +325,7 @@
   }
 
   &.dnb-skeleton &__line,
+  &.dnb-skeleton &__marker,
   &.dnb-skeleton &__state--disabled &__line {
     background-color: var(--skeleton-color);
   }

package/components/slider/style/themes/dnb-slider-theme-sbanken.css

@@ -7,4 +7,7 @@
   --slider-line-after: var(--sb-color-gray-light);
   --slider-line-before--disabled: var(--sb-color-gray);
   --slider-line-after--disabled: var(--sb-color-gray-light);
+}
+.dnb-slider__marker :hover {
+  background-color: var(--sb-color-violet);
 }

package/components/slider/style/themes/dnb-slider-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-slider{--slider-line-before:var(--sb-color-purple-alternative);--slider-line-after:var(--sb-color-gray-light);--slider-line-before--disabled:var(--sb-color-gray);--slider-line-after--disabled:var(--sb-color-gray-light)}
+.dnb-slider{--slider-line-before:var(--sb-color-purple-alternative);--slider-line-after:var(--sb-color-gray-light);--slider-line-before--disabled:var(--sb-color-gray);--slider-line-after--disabled:var(--sb-color-gray-light)}.dnb-slider__marker :hover{background-color:var(--sb-color-violet)}

package/components/slider/style/themes/dnb-slider-theme-sbanken.scss

@@ -8,4 +8,8 @@
   --slider-line-after: var(--sb-color-gray-light);
   --slider-line-before--disabled: var(--sb-color-gray);
   --slider-line-after--disabled: var(--sb-color-gray-light);
+
+  &__marker :hover {
+    background-color: var(--sb-color-violet);
+  }
 }

package/components/slider/style/themes/dnb-slider-theme-ui.css

@@ -7,4 +7,7 @@
   --slider-line-after: var(--color-mint-green-50);
   --slider-line-before--disabled: var(--color-sea-green-30);
   --slider-line-after--disabled: var(--color-mint-green-25);
+}
+.dnb-slider__marker:hover, .dnb-slider__marker:focus-within {
+  background-color: var(--color-emerald-green);
 }

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

@@ -1 +1 @@
-.dnb-slider{--slider-line-before:var(--color-sea-green);--slider-line-after:var(--color-mint-green-50);--slider-line-before--disabled:var(--color-sea-green-30);--slider-line-after--disabled:var(--color-mint-green-25)}
+.dnb-slider{--slider-line-before:var(--color-sea-green);--slider-line-after:var(--color-mint-green-50);--slider-line-before--disabled:var(--color-sea-green-30);--slider-line-after--disabled:var(--color-mint-green-25)}.dnb-slider__marker:focus-within,.dnb-slider__marker:hover{background-color:var(--color-emerald-green)}

package/components/slider/style/themes/dnb-slider-theme-ui.scss

@@ -8,4 +8,9 @@
   --slider-line-after: var(--color-mint-green-50);
   --slider-line-before--disabled: var(--color-sea-green-30);
   --slider-line-after--disabled: var(--color-mint-green-25);
+
+  &__marker:hover,
+  &__marker:focus-within {
+    background-color: var(--color-emerald-green);
+  }
 }

package/components/slider/types.d.ts

@@ -14,6 +14,10 @@ export type onChangeEventProps = {
     number?: formatReturnType | null;
     event?: Event;
 };
+export type SliderExtensions = Record<string, {
+    instance: React.ElementType;
+    [key: string]: unknown;
+}>;
 export type SliderProps = IncludeSnakeCase<{
     /** prepends the Form Label component. If no ID is provided, a random ID is created. */
     label?: React.ReactNode;
@@ -46,6 +50,8 @@ export type SliderProps = IncludeSnakeCase<{
     value?: ValueTypes;
     /** the steps the slider takes on changing the value. Defaults to `null`. */
     step?: number;
+    /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */
+    extensions: SliderExtensions;
     /** show the slider vertically. Defaults to `false`. */
     vertical?: boolean;
     /** show the slider reversed. Defaults to `false`. */

package/components/slider/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */\n  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderExtensions = Record<\n  string,\n  { instance: React.ElementType; [key: string]: unknown }\n>\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */\n  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */\n  extensions: SliderExtensions\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}

package/components/table/TableAccordion.js

@@ -118,8 +118,9 @@ export function useTableAccordion(_ref) {
     setHadClick(false);
   }
   function toggleOpenTr(event) {
+    let allowInteractiveElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     const target = event.target;
-    if (document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' && !hasSelectedText()) {
+    if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !hasSelectedText()) {
       setOpen(!trIsOpen);
       setHadClick(true);
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -141,7 +142,7 @@ export function TableAccordionToggleButton() {
     tabIndex: -1,
     "aria-label": allProps === null || allProps === void 0 ? void 0 : allProps.accordionToggleButtonSR,
     "aria-expanded": Boolean(trContext === null || trContext === void 0 ? void 0 : trContext.trIsOpen),
-    on_click: trContext === null || trContext === void 0 ? void 0 : trContext.toggleOpenTr
+    on_click: event => trContext === null || trContext === void 0 ? void 0 : trContext.toggleOpenTr(event, true)
   }));
 }
 function TableThAccordionIcon() {