@dnb/eufemia 10.19.0 → 10.21.0

package/cjs/components/slider/SliderInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInstance.js","names":["_react","_interopRequireDefault","require","_classnames","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_Button","_FormLabel","_FormStatus","_SliderTrack","_SliderThumb","_useSliderProps","_SliderHelpers","_SubtractButton","_AddButton","_AlignmentHelper","_SliderMainTrack","_SliderSuffix","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","SliderInstance","context","React","useContext","Context","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","useSliderProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","mainParams","classnames","createSkeletonClass","createSpacingClasses","isTrue","subtractButton","createElement","SubtractButton","addButton","AddButton","skeletonDOMAttributes","text","label_direction","sr_only","show","text_id","state","no_animation","SliderMainTrack","SliderThumb","SliderTrackBefore","SliderTrackAfter","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","clamp","subtractParams","humanNumber","getFormattedNumber","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","_interopRequireDefault","require","_classnames","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_Button","_FormLabel","_FormStatus","_SliderTrack","_SliderThumb2","_useSliderProps","_SliderHelpers","_excluded","_SubtractButton","_AddButton","_AlignmentHelper","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_extends","assign","bind","arguments","hasOwnProperty","apply","SliderInstance","context","React","useContext","Context","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","useSliderProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","classnames","createSkeletonClass","createSpacingClasses","isTrue","subtractButton","createElement","SubtractButton","addButton","AddButton","skeletonDOMAttributes","text","srOnly","show","text_id","state","no_animation","SliderMainTrack","entries","map","_ref2","_ref","instance","options","Element","SliderThumb","SliderTrackBefore","SliderTrackAfter","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","clamp","subtractParams","humanNumber","getFormattedNumber","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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"}

package/cjs/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/cjs/components/slider/SliderMarker.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SliderMarker;
+var _react = _interopRequireWildcard(require("react"));
+var _componentHelper = require("../../shared/component-helper");
+var _useSliderProps = require("./hooks/useSliderProps");
+var _SliderHelpers = require("./SliderHelpers");
+var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function SliderMarker(_ref) {
+  let {
+    value,
+    text
+  } = _ref;
+  const {
+    isReverse,
+    isVertical,
+    allProps
+  } = (0, _useSliderProps.useSliderProps)();
+  const {
+    min,
+    max,
+    numberFormat
+  } = allProps;
+  const getParams = (0, _react.useCallback)(() => {
+    const markerId = `slider-marker-${(0, _componentHelper.makeUniqueId)()}`;
+    const {
+      number,
+      aria
+    } = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat || {});
+    let percent = (0, _SliderHelpers.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.default.createElement(_Tooltip.default, {
+        targetSelector: `#${markerId}`
+      }, text || number)
+    };
+    return params;
+  }, [isReverse, isVertical, max, min, numberFormat, text, value]);
+  if (!value) {
+    return null;
+  }
+  const params = getParams();
+  return _react.default.createElement("mark", _extends({
+    className: "dnb-slider__marker"
+  }, params));
+}
+//# sourceMappingURL=SliderMarker.js.map

package/cjs/components/slider/SliderMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMarker.js","names":["_react","_interopRequireWildcard","require","_componentHelper","_useSliderProps","_SliderHelpers","_Tooltip","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","SliderMarker","_ref","value","text","isReverse","isVertical","allProps","useSliderProps","min","max","numberFormat","getParams","useCallback","markerId","makeUniqueId","number","aria","getFormattedNumber","percent","clamp","params","id","tabIndex","style","children","createElement","targetSelector","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":"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"}

package/cjs/components/slider/SliderProvider.js

@@ -12,7 +12,7 @@ var _componentHelper = require("../../shared/component-helper");
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _SliderHelpers = require("./SliderHelpers");
 var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
-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"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -63,6 +63,7 @@ function SliderProvider(localProps) {
       skeleton,
       max,
       min,
+      extensions,
       disabled,
       className,
       id,

package/cjs/components/slider/SliderProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderProvider.js","names":["_react","_interopRequireDefault","require","_filterValidProps","_componentHelper","_Context","_SliderHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","React","createContext","exports","SliderProvider","localProps","context","useContext","Context","allProps","convertSnakeCaseProps","extendPropsWithContext","skeleton","getTranslation","Slider","pickFormElementProps","FormRow","vertical","formElement","_id","useState","makeUniqueId","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","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isTrue","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","closestIndex","updateValue","emitChange","event","rawValue","numberValue","roundValue","multiValues","lower","upper","getUpdatedValues","number","getFormattedNumber","dispatchCustomElementEvent","useEffect","hasChanged","some","val","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","getStatusState","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":"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"}
+{"version":3,"file":"SliderProvider.js","names":["_react","_interopRequireDefault","require","_filterValidProps","_componentHelper","_Context","_SliderHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","React","createContext","exports","SliderProvider","localProps","context","useContext","Context","allProps","convertSnakeCaseProps","extendPropsWithContext","skeleton","getTranslation","Slider","pickFormElementProps","FormRow","vertical","formElement","_id","useState","makeUniqueId","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","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isTrue","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","closestIndex","updateValue","emitChange","event","rawValue","numberValue","roundValue","multiValues","lower","upper","getUpdatedValues","number","getFormattedNumber","dispatchCustomElementEvent","useEffect","hasChanged","some","val","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","getStatusState","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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/step-indicator/StepIndicatorItem.js

@@ -10,7 +10,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _componentHelper = require("../../shared/component-helper");
-var _HeightAnimationInstance = _interopRequireDefault(require("../height-animation/HeightAnimationInstance"));
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _FormStatus = require("../form-status/FormStatus");
@@ -44,35 +44,17 @@ function StepIndicatorItem(_ref) {
   }, restOfProps);
   const context = (0, _react.useContext)(_StepIndicatorContext.default);
   const [previousStep, setPreviousStep] = (0, _react.useState)(context.activeStep);
-  const heightAnim = (0, _react.useRef)(new _HeightAnimationInstance.default({
-    animate: (context === null || context === void 0 ? void 0 : context.no_animation) !== undefined ? context.no_animation : false
-  })).current;
   const ref = (0, _react.useRef)(null);
   const thisReference = {
     context,
     props,
     onClickHandler
   };
-  (0, _react.useEffect)(() => {
-    heightAnim.setElement(ref.current);
-    return () => {
-      heightAnim.remove();
-    };
-  }, []);
   (0, _react.useEffect)(() => {
     if (previousStep !== context.activeStep) {
       setPreviousStep(context.activeStep);
     }
-  }, [context.activeStep]);
-  (0, _react.useLayoutEffect)(() => {
-    const height = heightAnim.getHeight();
-    if (previousStep !== context.activeStep && (props.currentItemNum === previousStep || props.currentItemNum === context.activeStep)) {
-      const toHeight = heightAnim.getUnknownHeight();
-      if (height !== toHeight) {
-        heightAnim.adjustTo(height, toHeight);
-      }
-    }
-  }, [previousStep, context.activeStep, heightAnim, props.currentItemNum]);
+  }, [context.activeStep, previousStep]);
   function onClickHandler(_ref2) {
     let {
       event,
@@ -221,7 +203,7 @@ function StepItemButton(_ref4) {
     icon_size: "medium",
     icon_position: "right",
     inner_ref: inner_ref
-  }, props), children);
+  }, props), _react.default.createElement(_HeightAnimation.default, null, children));
 }
 function StepItemWrapper(_ref5) {
   let {