@helsenorge/designsystem-react 9.4.1 → 9.4.3

package/Slider.js

@@ -1,218 +1,305 @@
-import { jsxs as w, jsx as s } from "react/jsx-runtime";
-import oe, { useState as V, useRef as de, useEffect as p } from "react";
-import U from "classnames";
-import { AnalyticsId as ce } from "./constants.js";
-import { usePseudoClasses as ue } from "./hooks/usePseudoClasses.js";
-import { useSize as me } from "./hooks/useSize.js";
-import { useUuid as C } from "./hooks/useUuid.js";
-import { getAriaLabelAttributes as fe } from "./utils/accessibility.js";
-import { isMutableRefObject as pe, mergeRefs as he } from "./utils/refs.js";
-import { E as ve } from "./ErrorWrapper.js";
-import { T as _e } from "./Title.js";
-import r from "./components/Slider/styles.module.scss";
-const be = (h, f, i) => {
-  const [R, v] = V(h), _ = (b) => {
-    b > i ? v(i) : b < f ? v(f) : v(b);
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useSize } from "./hooks/useSize.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/Slider/styles.module.scss";
+const useSafeNumberValue = (initial, min, max) => {
+  const [value, setValue] = useState(initial);
+  const setSafeValue = (newValue) => {
+    if (newValue > max) {
+      setValue(max);
+    } else if (newValue < min) {
+      setValue(min);
+    } else {
+      setValue(newValue);
+    }
   };
-  return p(() => {
-    _(h);
-  }, [f, i]), [R, _];
-}, ge = oe.forwardRef((h, f) => {
+  useEffect(() => {
+    setSafeValue(initial);
+  }, [min, max]);
+  return [value, setSafeValue];
+};
+const Slider = React.forwardRef((props, ref) => {
   const {
-    title: i,
-    ariaLabel: R,
-    error: v,
-    errorText: _,
-    errorTextId: b,
-    errorWrapperClassName: F,
-    labelLeft: j,
-    labelRight: P,
-    disabled: d = !1,
-    onChange: A,
-    steps: n,
-    step: g = 1,
-    minValue: a = 0,
-    maxValue: c = n ? n.length - 1 : 100,
-    selected: L = !0,
-    testId: H,
-    value: m,
-    ...q
-  } = h, [B, X] = V(!1), [k, $] = V(typeof m > "u" ? L : !0), [l, u] = be(
-    typeof m > "u" ? (c - a) / 2 + a : m,
-    a,
-    c
-  ), G = C(b), y = C(), I = C(), x = C(), M = de(null), { refObject: E, isFocused: J } = ue(pe(f) ? f : null), Q = he([f, E]), { width: O } = me(M) || { width: 0 }, W = c / 10, Y = !!_ || !!v;
-  p(() => {
-    const t = () => {
-      X(!1);
+    title,
+    ariaLabel,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    labelLeft,
+    labelRight,
+    disabled = false,
+    onChange,
+    steps,
+    step = 1,
+    minValue = 0,
+    maxValue = steps ? steps.length - 1 : 100,
+    selected = true,
+    testId,
+    value,
+    ...rest
+  } = props;
+  const [isMoving, setIsMoving] = useState(false);
+  const [selectedState, setSelectedState] = useState(typeof value === "undefined" ? selected : true);
+  const [valueState, setValueState] = useSafeNumberValue(
+    typeof value === "undefined" ? (maxValue - minValue) / 2 + minValue : value,
+    minValue,
+    maxValue
+  );
+  const errorTextUuid = useUuid(errorTextId);
+  const titleId = useUuid();
+  const labelLeftId = useUuid();
+  const labelRightId = useUuid();
+  const trackRef = useRef(null);
+  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const mergedRefs = mergeRefs([ref, refObject]);
+  const { width: trackWidth } = useSize(trackRef) || { width: 0 };
+  const largeStep = maxValue / 10;
+  const invalid = !!errorText || !!error;
+  useEffect(() => {
+    const handlePointerUp = () => {
+      setIsMoving(false);
     };
-    return document.addEventListener("pointerup", t), () => {
-      document.removeEventListener("pointerup", t);
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.removeEventListener("pointerup", handlePointerUp);
     };
   }, []);
-  const z = (t) => {
-    var K;
-    const e = ((K = M.current) == null ? void 0 : K.getBoundingClientRect().x) ?? 0, o = (t - e) / O, S = c - a;
-    let N = o * S + a;
-    return N = Math.round(N / g) * g, N = Math.max(a, Math.min(c, N)), N;
+  const getValueBasedOnMarkerPosition = (markerPosition) => {
+    var _a;
+    const trackPosition = ((_a = trackRef.current) == null ? void 0 : _a.getBoundingClientRect().x) ?? 0;
+    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;
+    const valueRange = maxValue - minValue;
+    let value2 = normalizedPosition * valueRange + minValue;
+    const stepCount = Math.round(value2 / step);
+    value2 = stepCount * step;
+    value2 = Math.max(minValue, Math.min(maxValue, value2));
+    return value2;
   };
-  p(() => {
-    const t = (e) => {
-      if (!d && B) {
-        const o = z(e.clientX);
-        u(o);
+  useEffect(() => {
+    const handlePointerMove = (e) => {
+      if (!disabled && isMoving) {
+        const newValue = getValueBasedOnMarkerPosition(e.clientX);
+        setValueState(newValue);
       }
     };
-    return document.addEventListener("pointermove", t), () => {
-      document.removeEventListener("pointermove", t);
+    document.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
     };
-  }, [B]), p(() => {
-    m !== l && typeof m < "u" && (D(), u(m));
-  }, [m]), p(() => {
-    typeof m > "u" && L !== k && $(L);
-  }, [L]);
-  const D = () => {
-    k === !1 && $(!0);
-  }, Z = (t) => {
-    if (d) return;
-    let e = !1;
-    switch (t.key) {
+  }, [isMoving]);
+  useEffect(() => {
+    if (value !== valueState && typeof value !== "undefined") {
+      handleSelected();
+      setValueState(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (typeof value === "undefined" && selected !== selectedState) {
+      setSelectedState(selected);
+    }
+  }, [selected]);
+  const handleSelected = () => {
+    if (selectedState === false) {
+      setSelectedState(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    let flag = false;
+    switch (e.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        u(l - g), e = !0;
+        setValueState(valueState - step);
+        flag = true;
         break;
       case "PageDown":
-        u(l - W), e = !0;
+        setValueState(valueState - largeStep);
+        flag = true;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        u(l + g), e = !0;
+        setValueState(valueState + step);
+        flag = true;
         break;
       case "PageUp":
-        u(l + W), e = !0;
+        setValueState(valueState + largeStep);
+        flag = true;
         break;
       case "Home":
-        u(a), e = !0;
+        setValueState(minValue);
+        flag = true;
         break;
       case "End":
-        u(c), e = !0;
+        setValueState(maxValue);
+        flag = true;
         break;
     }
-    e && (D(), t.preventDefault(), t.stopPropagation());
-  }, ee = (t) => {
-    var o;
-    if (d) return;
-    const e = z(t.clientX);
-    u(e), (o = E.current) == null || o.focus();
-  }, te = (t) => {
-    var e;
-    d || (X(!0), D(), t.preventDefault(), t.stopPropagation(), (e = E.current) == null || e.focus());
-  }, re = c !== a ? O / (c - a) * (l - a) : 0, ne = () => {
-    const t = n ? Math.round((l - a) / g) : null;
-    if (n && t !== null && t >= 0 && t < n.length) {
-      const e = n[t], o = e.emojiUniCode, S = typeof e.label < "u" ? e.label.toString() : void 0;
-      return o && S ? `${o} ${S}` : o || S;
+    if (flag) {
+      handleSelected();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const handleTrackClick = (e) => {
+    var _a;
+    if (disabled) return;
+    const newValue = getValueBasedOnMarkerPosition(e.clientX);
+    setValueState(newValue);
+    (_a = refObject.current) == null ? void 0 : _a.focus();
+  };
+  const handlePointerDown = (e) => {
+    var _a;
+    if (disabled) return;
+    setIsMoving(true);
+    handleSelected();
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = refObject.current) == null ? void 0 : _a.focus();
+  };
+  const markerXPos = maxValue !== minValue ? trackWidth / (maxValue - minValue) * (valueState - minValue) : 0;
+  const getAriaValueText = () => {
+    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;
+    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {
+      const step2 = steps[stepIndex];
+      const emojiCode = step2.emojiUniCode;
+      const label = typeof step2.label !== "undefined" ? step2.label.toString() : void 0;
+      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;
+    }
+    return void 0;
+  };
+  const getAriaLabeledById = () => {
+    if (title && labelLeft && labelRight) {
+      return [titleId, labelLeftId, labelRightId].join(" ");
+    }
+    if (title && labelLeft) {
+      return [titleId, labelLeftId].join(" ");
+    }
+    if (title && labelRight) {
+      return [titleId, labelRightId].join(" ");
     }
-  }, ae = fe({
-    label: R,
-    id: (() => {
-      if (i && j && P)
-        return [y, I, x].join(" ");
-      if (i && j)
-        return [y, I].join(" ");
-      if (i && P)
-        return [y, x].join(" ");
-      if (i)
-        return y;
-    })(),
+    if (title) {
+      return titleId;
+    }
+  };
+  const ariaLabelAttributes = getAriaLabelAttributes({
+    label: ariaLabel,
+    id: getAriaLabeledById(),
     prefer: "label"
-  }), T = (t, e) => ({ left: `${t / (e - 1) * 100}%` });
-  p(() => {
-    k && A && A({
-      target: {
-        name: h.name,
-        value: l
-      }
+  });
+  const getXPositionStyling = (index, stepsLength) => {
+    return { left: `${index / (stepsLength - 1) * 100}%` };
+  };
+  useEffect(() => {
+    if (selectedState && onChange) {
+      onChange({
+        target: {
+          name: props.name,
+          value: valueState
+        }
+      });
+    }
+  }, [valueState, selectedState]);
+  const renderEmojies = () => {
+    return /* @__PURE__ */ jsx("div", { className: styles["slider__emoji-container"], children: steps == null ? void 0 : steps.map((step2, index) => {
+      return step2.emojiUniCode && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: styles["slider__emoji"],
+          style: getXPositionStyling(index, steps.length),
+          children: step2.emojiUniCode
+        },
+        "emoji" + index
+      );
+    }) });
+  };
+  const renderSteps = () => {
+    return steps == null ? void 0 : steps.map((_step, index) => {
+      return /* @__PURE__ */ jsx("div", { className: styles["slider__track__step"], style: getXPositionStyling(index, steps.length) }, "step" + index);
     });
-  }, [l, k]);
-  const se = () => /* @__PURE__ */ s("div", { className: r["slider__emoji-container"], children: n == null ? void 0 : n.map((t, e) => t.emojiUniCode && /* @__PURE__ */ s(
-    "div",
-    {
-      "aria-hidden": !0,
-      className: r.slider__emoji,
-      style: T(e, n.length),
-      children: t.emojiUniCode
-    },
-    "emoji" + e
-  )) }), ie = () => n == null ? void 0 : n.map((t, e) => /* @__PURE__ */ s("div", { className: r.slider__track__step, style: T(e, n.length) }, "step" + e)), le = () => /* @__PURE__ */ s("div", { className: r["slider__value-container"], children: n == null ? void 0 : n.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ s(
-    "div",
-    {
-      "aria-hidden": !0,
-      className: r.slider__value,
-      style: T(e, n.length),
-      children: t.label
-    },
-    "label" + e
-  )) });
-  return /* @__PURE__ */ w(ve, { className: F, errorText: _, errorTextId: G, children: [
-    /* @__PURE__ */ s(
+  };
+  const renderStepLabels = () => {
+    return /* @__PURE__ */ jsx("div", { className: styles["slider__value-container"], children: steps == null ? void 0 : steps.map((step2, index) => {
+      return typeof step2.label !== "undefined" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: styles["slider__value"],
+          style: getXPositionStyling(index, steps.length),
+          children: step2.label
+        },
+        "label" + index
+      );
+    }) });
+  };
+  return /* @__PURE__ */ jsxs(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: [
+    /* @__PURE__ */ jsx(
       "input",
       {
-        "aria-valuetext": ne(),
-        className: r["sr-only-slider"],
-        disabled: d,
-        min: a,
-        max: c,
-        onChange: A,
-        onKeyDown: Z,
-        value: l,
-        ref: Q,
+        "aria-valuetext": getAriaValueText(),
+        className: styles["sr-only-slider"],
+        disabled,
+        min: minValue,
+        max: maxValue,
+        onChange,
+        onKeyDown: handleKeyDown,
+        value: valueState,
+        ref: mergedRefs,
         type: "range",
-        ...q,
-        ...ae
+        ...rest,
+        ...ariaLabelAttributes
       }
     ),
-    /* @__PURE__ */ w("div", { className: r.slider, "data-testid": H, "data-analyticsid": ce.Slider, children: [
-      i && /* @__PURE__ */ s(_e, { className: r.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: y, children: i }),
-      /* @__PURE__ */ w("div", { className: r["slider__content-container"], children: [
-        se(),
-        /* @__PURE__ */ w(
+    /* @__PURE__ */ jsxs("div", { className: styles.slider, "data-testid": testId, "data-analyticsid": AnalyticsId.Slider, children: [
+      title && /* @__PURE__ */ jsx(Title, { className: styles["slider__title"], htmlMarkup: "h3", margin: 0, appearance: "title3", id: titleId, children: title }),
+      /* @__PURE__ */ jsxs("div", { className: styles["slider__content-container"], children: [
+        renderEmojies(),
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: M,
-            className: U(r["slider__track-wrapper"], d && r["slider__track-wrapper--disabled"]),
-            onClick: ee,
-            onPointerDown: te,
+            ref: trackRef,
+            className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+            onClick: handleTrackClick,
+            onPointerDown: handlePointerDown,
             children: [
-              /* @__PURE__ */ s("div", { className: U(r.slider__track, d && r["slider__track--disabled"]), children: ie() }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ jsx("div", { className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]), children: renderSteps() }),
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: U(r.slider__marker, {
-                    [r["slider__marker--disabled"]]: d,
-                    [r["slider__marker--selected"]]: k,
-                    [r["slider__marker--invalid"]]: Y,
-                    [r["slider__marker--focused"]]: !d && J
+                  className: classNames(styles.slider__marker, {
+                    [styles["slider__marker--disabled"]]: disabled,
+                    [styles["slider__marker--selected"]]: selectedState,
+                    [styles["slider__marker--invalid"]]: invalid,
+                    [styles["slider__marker--focused"]]: !disabled && isFocused
                   }),
                   style: {
-                    left: `${re}px`
+                    left: `${markerXPos}px`
                   }
                 }
               )
             ]
           }
         ),
-        le()
+        renderStepLabels()
       ] }),
-      (j || P) && /* @__PURE__ */ w("span", { className: r.slider__options, children: [
-        /* @__PURE__ */ s("span", { id: I, children: j }),
-        /* @__PURE__ */ s("span", { id: x, children: P })
+      (labelLeft || labelRight) && /* @__PURE__ */ jsxs("span", { className: styles.slider__options, children: [
+        /* @__PURE__ */ jsx("span", { id: labelLeftId, children: labelLeft }),
+        /* @__PURE__ */ jsx("span", { id: labelRightId, children: labelRight })
       ] })
     ] })
   ] });
 });
-ge.displayName = "Slider";
+Slider.displayName = "Slider";
 export {
-  ge as S
+  Slider as S
 };
 //# sourceMappingURL=Slider.js.map

package/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","React","props","ref","title","ariaLabel","error","errorText","errorTextId","errorWrapperClassName","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","rest","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","errorTextUuid","useUuid","titleId","labelLeftId","labelRightId","trackRef","useRef","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","trackWidth","useSize","largeStep","invalid","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","jsx","styles","renderSteps","_step","renderStepLabels","ErrorWrapper","jsxs","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["value","step"],"mappings":"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"}

package/Spacer.js

@@ -1,31 +1,32 @@
-import { jsx as l } from "react/jsx-runtime";
-import t from "react";
-import o from "classnames";
-import { AnalyticsId as m } from "./constants.js";
-import s from "./components/Spacer/styles.module.scss";
-const N = t.forwardRef(function(r, e) {
-  const { size: a = "s", className: c, testId: p } = r, x = o(
-    s.spacer,
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import spacerStyles from "./components/Spacer/styles.module.scss";
+const Spacer = React.forwardRef(function SpacerForwardedRef(props, ref) {
+  const { size = "s", className, testId } = props;
+  const spacerClasses = classNames(
+    spacerStyles.spacer,
     {
-      [s["spacer--4xs"]]: a === "4xs",
-      [s["spacer--3xs"]]: a === "3xs",
-      [s["spacer--2xs"]]: a === "2xs",
-      [s["spacer--xs"]]: a === "xs",
-      [s["spacer--s"]]: a === "s",
-      [s["spacer--m"]]: a === "m",
-      [s["spacer--l"]]: a === "l",
-      [s["spacer--xl"]]: a === "xl",
-      [s["spacer--2xl"]]: a === "2xl",
-      [s["spacer--3xl"]]: a === "3xl",
-      [s["spacer--4xl"]]: a === "4xl",
-      [s["spacer--5xl"]]: a === "5xl",
-      [s["spacer--6xl"]]: a === "6xl"
+      [spacerStyles["spacer--4xs"]]: size === "4xs",
+      [spacerStyles["spacer--3xs"]]: size === "3xs",
+      [spacerStyles["spacer--2xs"]]: size === "2xs",
+      [spacerStyles["spacer--xs"]]: size === "xs",
+      [spacerStyles["spacer--s"]]: size === "s",
+      [spacerStyles["spacer--m"]]: size === "m",
+      [spacerStyles["spacer--l"]]: size === "l",
+      [spacerStyles["spacer--xl"]]: size === "xl",
+      [spacerStyles["spacer--2xl"]]: size === "2xl",
+      [spacerStyles["spacer--3xl"]]: size === "3xl",
+      [spacerStyles["spacer--4xl"]]: size === "4xl",
+      [spacerStyles["spacer--5xl"]]: size === "5xl",
+      [spacerStyles["spacer--6xl"]]: size === "6xl"
     },
-    c
+    className
   );
-  return /* @__PURE__ */ l("span", { className: x, ref: e, "data-testid": p, "data-analyticsid": m.Spacer });
+  return /* @__PURE__ */ jsx("span", { className: spacerClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.Spacer });
 });
 export {
-  N as S
+  Spacer as S
 };
 //# sourceMappingURL=Spacer.js.map