@helsenorge/designsystem-react 8.6.0 → 9.0.0-beta.1

package/Slider.js

@@ -0,0 +1,218 @@
+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);
+  };
+  return p(() => {
+    _(h);
+  }, [f, i]), [R, _];
+}, ge = oe.forwardRef((h, f) => {
+  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);
+    };
+    return document.addEventListener("pointerup", t), () => {
+      document.removeEventListener("pointerup", t);
+    };
+  }, []);
+  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;
+  };
+  p(() => {
+    const t = (e) => {
+      if (!d && B) {
+        const o = z(e.clientX);
+        u(o);
+      }
+    };
+    return document.addEventListener("pointermove", t), () => {
+      document.removeEventListener("pointermove", t);
+    };
+  }, [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) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        u(l - g), e = !0;
+        break;
+      case "PageDown":
+        u(l - W), e = !0;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        u(l + g), e = !0;
+        break;
+      case "PageUp":
+        u(l + W), e = !0;
+        break;
+      case "Home":
+        u(a), e = !0;
+        break;
+      case "End":
+        u(c), e = !0;
+        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;
+    }
+  }, 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;
+    })(),
+    prefer: "label"
+  }), T = (t, e) => ({ left: `${t / (e - 1) * 100}%` });
+  p(() => {
+    k && A && A({
+      target: {
+        name: h.name,
+        value: l
+      }
+    });
+  }, [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(
+      "input",
+      {
+        "aria-valuetext": ne(),
+        className: r["sr-only-slider"],
+        disabled: d,
+        min: a,
+        max: c,
+        onChange: A,
+        onKeyDown: Z,
+        value: l,
+        ref: Q,
+        type: "range",
+        ...q,
+        ...ae
+      }
+    ),
+    /* @__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(
+          "div",
+          {
+            ref: M,
+            className: U(r["slider__track-wrapper"], d && r["slider__track-wrapper--disabled"]),
+            onClick: ee,
+            onPointerDown: te,
+            children: [
+              /* @__PURE__ */ s("div", { className: U(r.slider__track, d && r["slider__track--disabled"]), children: ie() }),
+              /* @__PURE__ */ s(
+                "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
+                  }),
+                  style: {
+                    left: `${re}px`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        le()
+      ] }),
+      (j || P) && /* @__PURE__ */ w("span", { className: r.slider__options, children: [
+        /* @__PURE__ */ s("span", { id: I, children: j }),
+        /* @__PURE__ */ s("span", { id: x, children: P })
+      ] })
+    ] })
+  ] });
+});
+ge.displayName = "Slider";
+export {
+  ge as S
+};
+//# sourceMappingURL=Slider.js.map

package/Slider.js.map

@@ -0,0 +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>, '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":";;;;;;;;;;;;AAeA,MAAMA,KAAqB,CAACC,GAAiBC,GAAaC,MAAmD;AAC3G,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAO,GAEpCM,IAAe,CAACC,MAA2B;AAC/C,IAAIA,IAAWL,IACbE,EAASF,CAAG,IACHK,IAAWN,IACpBG,EAASH,CAAG,IAEZG,EAASG,CAAQ;AAAA,EACnB;AAGF,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAaN,CAAO;AAAA,EAAA,GACnB,CAACC,GAAKC,CAAG,CAAC,GAEN,CAACC,GAAOG,CAAY;AAC7B,GA0CaG,KAASC,GAAM,WAAW,CAACC,GAAoBC,MAAqC;AACzF,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAWH,IAAQA,EAAM,SAAS,IAAI;AAAA,IACtC,UAAAI,IAAW;AAAA,IACX,QAAAC;AAAA,IACA,OAAAzB;AAAA,IACA,GAAG0B;AAAA,EACD,IAAAlB,GAEE,CAACmB,GAAUC,CAAW,IAAI1B,EAAS,EAAK,GACxC,CAAC2B,GAAeC,CAAgB,IAAI5B,EAAS,OAAOF,IAAU,MAAcwB,IAAW,EAAI,GAC3F,CAACO,GAAYC,CAAa,IAAIpC;AAAA,IAClC,OAAOI,IAAU,OAAeuB,IAAWD,KAAY,IAAIA,IAAWtB;AAAA,IACtEsB;AAAA,IACAC;AAAA,EAAA,GAGIU,IAAgBC,EAAQpB,CAAW,GACnCqB,IAAUD,KACVE,IAAcF,KACdG,IAAeH,KACfI,IAAWC,GAAuB,IAAI,GACtC,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,GAAmCC,GAAmBlC,CAAG,IAAIA,IAAM,IAAI,GAClGmC,IAAaC,GAAU,CAACpC,GAAK+B,CAAS,CAAC,GAEvC,EAAE,OAAOM,MAAeC,GAAQT,CAAQ,KAAK,EAAE,OAAO,KACtDU,IAAYzB,IAAW,IACvB0B,IAAU,CAAC,CAACpC,KAAa,CAAC,CAACD;AAEjC,EAAAP,EAAU,MAAM;AACd,UAAM6C,IAAkB,MAAY;AAClC,MAAAtB,EAAY,EAAK;AAAA,IAAA;AAGV,oBAAA,iBAAiB,aAAasB,CAAe,GAE/C,MAAY;AACR,eAAA,oBAAoB,aAAaA,CAAe;AAAA,IAAA;AAAA,EAE7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAgC,CAACC,MAAmC;;AACxE,UAAMC,MAAgBC,IAAAhB,EAAS,YAAT,gBAAAgB,EAAkB,wBAAwB,MAAK,GAG/DC,KAAsBH,IAAiBC,KAAiBP,GACxDU,IAAajC,IAAWD;AAE1BtB,QAAAA,IAAQuD,IAAqBC,IAAalC;AAG9CtB,WAAAA,IADkB,KAAK,MAAMA,IAAQqB,CAAI,IACrBA,GACpBrB,IAAQ,KAAK,IAAIsB,GAAU,KAAK,IAAIC,GAAUvB,CAAK,CAAC,GAE7CA;AAAAA,EAAA;AAGT,EAAAK,EAAU,MAAM;AACR,UAAAoD,IAAoB,CAAC,MAA0B;AAC/C,UAAA,CAACvC,KAAYS,GAAU;AACnB,cAAAvB,IAAW+C,EAA8B,EAAE,OAAO;AACxD,QAAAnB,EAAc5B,CAAQ;AAAA,MACxB;AAAA,IAAA;AAGO,oBAAA,iBAAiB,eAAeqD,CAAiB,GAEnD,MAAY;AACR,eAAA,oBAAoB,eAAeA,CAAiB;AAAA,IAAA;AAAA,EAC/D,GACC,CAAC9B,CAAQ,CAAC,GAEbtB,EAAU,MAAM;AACd,IAAIL,MAAU+B,KAAc,OAAO/B,IAAU,QAC5B0D,KACf1B,EAAchC,CAAK;AAAA,EACrB,GACC,CAACA,CAAK,CAAC,GAEVK,EAAU,MAAM;AACd,IAAI,OAAOL,IAAU,OAAewB,MAAaK,KAC/CC,EAAiBN,CAAQ;AAAA,EAC3B,GACC,CAACA,CAAQ,CAAC;AAEb,QAAMkC,IAAiB,MAAY;AACjC,IAAI7B,MAAkB,MACpBC,EAAiB,EAAI;AAAA,EACvB,GAGI6B,IAA4D,CAAKC,MAAA;AACrE,QAAI1C,EAAU;AAEd,QAAI2C,IAAO;AAEX,YAAQD,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACH,QAAA5B,EAAcD,IAAaV,CAAI,GACxBwC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAA7B,EAAcD,IAAaiB,CAAS,GAC7Ba,IAAA;AACP;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAA7B,EAAcD,IAAaV,CAAI,GACxBwC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAA7B,EAAcD,IAAaiB,CAAS,GAC7Ba,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAA7B,EAAcV,CAAQ,GACfuC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAA7B,EAAcT,CAAQ,GACfsC,IAAA;AACP;AAAA,IAGJ;AAEA,IAAIA,MACaH,KACfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB;AAAA,EACpB,GAGIE,KAA4D,CAAKF,MAAA;;AACrE,QAAI1C,EAAU;AAER,UAAAd,IAAW+C,EAA8BS,EAAE,OAAO;AACxD,IAAA5B,EAAc5B,CAAQ,IACtBkD,IAAAd,EAAU,YAAV,QAAAc,EAAmB;AAAA,EAAM,GAGrBS,KAA+D,CAAKH,MAAA;;AACxE,IAAI1C,MAEJU,EAAY,EAAI,GACD8B,KAEfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB,IAElBN,IAAAd,EAAU,YAAV,QAAAc,EAAmB;AAAA,EAAM,GAGrBU,KAAazC,MAAaD,IAAYwB,KAAcvB,IAAWD,MAAcS,IAAaT,KAAY,GAEtG2C,KAAmB,MAA0B;AACjD,UAAMC,IAAY9C,IAAQ,KAAK,OAAOW,IAAaT,KAAYD,CAAI,IAAI;AAEvE,QAAID,KAAS8C,MAAc,QAAQA,KAAa,KAAKA,IAAY9C,EAAM,QAAQ;AACvEC,YAAAA,IAAOD,EAAM8C,CAAS,GACtBC,IAAY9C,EAAK,cACjB+C,IAAQ,OAAO/C,EAAK,QAAU,MAAcA,EAAK,MAAM,aAAa;AAE1E,aAAO8C,KAAaC,IAAQ,GAAGD,CAAS,IAAIC,CAAK,KAAKD,KAAaC;AAAA,IACrE;AAAA,EAEO,GAkBHC,KAAsBC,GAAuB;AAAA,IACjD,OAAO3D;AAAA,IACP,KAjByB,MAA0B;AAC/C,UAAAD,KAASM,KAAaC;AACxB,eAAO,CAACkB,GAASC,GAAaC,CAAY,EAAE,KAAK,GAAG;AAEtD,UAAI3B,KAASM;AACX,eAAO,CAACmB,GAASC,CAAW,EAAE,KAAK,GAAG;AAExC,UAAI1B,KAASO;AACX,eAAO,CAACkB,GAASE,CAAY,EAAE,KAAK,GAAG;AAEzC,UAAI3B;AACK,eAAAyB;AAAA,IACT,GAKuB;AAAA,IACvB,QAAQ;AAAA,EAAA,CACT,GAEKoC,IAAsB,CAACC,GAAeC,OACnC,EAAE,MAAM,GAAID,KAASC,IAAc,KAAM,GAAG;AAGrD,EAAApE,EAAU,MAAM;AACd,IAAIwB,KAAiBV,KACVA,EAAA;AAAA,MACP,QAAQ;AAAA,QACN,MAAMX,EAAM;AAAA,QACZ,OAAOuB;AAAA,MACT;AAAA,IAAA,CACiD;AAAA,EACrD,GACC,CAACA,GAAYF,CAAa,CAAC;AAE9B,QAAM6C,KAAgB,MAElB,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,GAC7C,UAAOxD,KAAA,gBAAAA,EAAA,IAAI,CAACC,GAAMmD,MAEfnD,EAAK,gBACH,gBAAAsD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MAEb,WAAWC,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAOpD,EAAM,MAAM;AAAA,MAE7C,UAAAC,EAAK;AAAA,IAAA;AAAA,IAJD,UAAUmD;AAAA,EAAA,GASzB,CAAA,GAIEK,KAAc,MACXzD,KAAA,gBAAAA,EAAO,IAAI,CAAC0D,GAAON,MAChB,gBAAAG,EAAA,OAAA,EAAyB,WAAWC,EAAO,qBAAwB,OAAOL,EAAoBC,GAAOpD,EAAM,MAAM,EAAA,GAAxG,SAASoD,CAAkG,IAI1HO,KAAmB,MAErB,gBAAAJ,EAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,GAC7C,UAAOxD,KAAA,gBAAAA,EAAA,IAAI,CAACC,GAAMmD,MAEf,OAAOnD,EAAK,QAAU,OACpB,gBAAAsD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MAEb,WAAWC,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAOpD,EAAM,MAAM;AAAA,MAE7C,UAAAC,EAAK;AAAA,IAAA;AAAA,IAJD,UAAUmD;AAAA,EAAA,GASzB,CAAA;AAIJ,2BACGQ,IAAa,EAAA,WAAWjE,GAAuB,WAAAF,GAAsB,aAAaoB,GACjF,UAAA;AAAA,IAAA,gBAAA0C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBV,GAAiB;AAAA,QACjC,WAAWW,EAAO,gBAAgB;AAAA,QAClC,UAAA1D;AAAA,QACA,KAAKI;AAAA,QACL,KAAKC;AAAA,QACL,UAAAJ;AAAA,QACA,WAAWwC;AAAA,QACX,OAAO5B;AAAA,QACP,KAAKa;AAAA,QACL,MAAK;AAAA,QACJ,GAAGlB;AAAA,QACH,GAAG2C;AAAA,MAAA;AAAA,IACN;AAAA,IACA,gBAAAY,EAAC,SAAI,WAAWL,EAAO,QAAQ,eAAanD,GAAQ,oBAAkByD,GAAY,QAC/E,UAAA;AAAA,MAAAxE,KACE,gBAAAiE,EAAAQ,IAAA,EAAM,WAAWP,EAAO,eAAkB,YAAY,MAAM,QAAQ,GAAG,YAAY,UAAU,IAAIzC,GAC/F,UACHzB,GAAA;AAAA,MAED,gBAAAuE,EAAA,OAAA,EAAI,WAAWL,EAAO,2BAA2B,GAC/C,UAAA;AAAA,QAAcF,GAAA;AAAA,QAGf,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK3C;AAAA,YACL,WAAW8C,EAAWR,EAAO,uBAAuB,GAAG1D,KAAY0D,EAAO,iCAAiC,CAAC;AAAA,YAC5G,SAASd;AAAA,YACT,eAAeC;AAAA,YAEf,UAAA;AAAA,cAAC,gBAAAY,EAAA,OAAA,EAAI,WAAWS,EAAWR,EAAO,eAAe1D,KAAY0D,EAAO,yBAAyB,CAAC,GAAI,UAAAC,GAAc,EAAA,CAAA;AAAA,cAChH,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWS,EAAWR,EAAO,gBAAgB;AAAA,oBAC3C,CAACA,EAAO,0BAA0B,CAAC,GAAG1D;AAAA,oBACtC,CAAC0D,EAAO,0BAA0B,CAAC,GAAG/C;AAAA,oBACtC,CAAC+C,EAAO,yBAAyB,CAAC,GAAG3B;AAAA,oBACrC,CAAC2B,EAAO,yBAAyB,CAAC,GAAG,CAAC1D,KAAYuB;AAAA,kBAAA,CACnD;AAAA,kBACD,OAAO;AAAA,oBACL,MAAM,GAAGuB,EAAU;AAAA,kBACrB;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACCe,GAAiB;AAAA,MAAA,GACpB;AAAA,OACE/D,KAAaC,MACb,gBAAAgE,EAAC,QAAK,EAAA,WAAWL,EAAO,iBACtB,UAAA;AAAA,QAAC,gBAAAD,EAAA,QAAA,EAAK,IAAIvC,GAAc,UAAUpB,GAAA;AAAA,QACjC,gBAAA2D,EAAA,QAAA,EAAK,IAAItC,GAAe,UAAWpB,GAAA;AAAA,MAAA,GACtC;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;AAEDX,GAAO,cAAc;"}

package/StatusDot.js

@@ -1,33 +1,33 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
 import l from "classnames";
 import "./theme/grid.js";
 import "./hooks/useBreakpoint.js";
 import "react";
-import { FormMode as i, AnalyticsId as w, IconSize as v } from "./constants.js";
+import { FormOnColor as i, AnalyticsId as w, IconSize as v } from "./constants.js";
 import { getColor as m } from "./theme/currys/color.js";
 import { I as a } from "./Icon.js";
-import C from "./components/Icons/Attachment.js";
-import N from "./components/Icons/Change.js";
-import b from "./components/Icons/Group.js";
-import x from "./components/Icons/NoAccess.js";
+import N from "./components/Icons/Attachment.js";
+import b from "./components/Icons/Change.js";
+import x from "./components/Icons/Group.js";
+import y from "./components/Icons/NoAccess.js";
 import n from "./components/StatusDot/styles.module.scss";
-var c = ((o) => (o[o.onwhite = i.onwhite] = "onwhite", o[o.ondark = i.ondark] = "ondark", o))(c || {}), y = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(y || {});
-const A = ({ mode: o, variant: s }) => {
-  const r = { color: o === c.ondark ? m("white") : m("black"), size: v.XXSmall, mode: o };
-  return s === "recurring" ? /* @__PURE__ */ e(a, { ...r, svgIcon: N }) : s === "group" ? /* @__PURE__ */ e(a, { ...r, svgIcon: b }) : s === "noaccess" ? /* @__PURE__ */ e(a, { ...r, svgIcon: x, color: m("cherry", 600) }) : s === "attachment" ? /* @__PURE__ */ e(a, { ...r, svgIcon: C }) : null;
+var c = ((o) => (o[o.onwhite = i.onwhite] = "onwhite", o[o.ondark = i.ondark] = "ondark", o))(c || {}), C = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(C || {});
+const A = ({ onColor: o, variant: e }) => {
+  const r = { color: o === c.ondark ? m("white") : m("black"), size: v.XXSmall, onColor: o };
+  return e === "recurring" ? /* @__PURE__ */ s(a, { ...r, svgIcon: b }) : e === "group" ? /* @__PURE__ */ s(a, { ...r, svgIcon: x }) : e === "noaccess" ? /* @__PURE__ */ s(a, { ...r, svgIcon: y, color: m("cherry", 600) }) : e === "attachment" ? /* @__PURE__ */ s(a, { ...r, svgIcon: N }) : null;
 }, L = (o) => {
-  const { id: s, mode: t = c.onwhite, variant: r = "info", text: d, className: p, testId: f } = o, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
+  const { id: e, onColor: t = c.onwhite, variant: r = "info", text: d, className: p, testId: f } = o, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
     ...u ? {} : { [n[`statusdot__dot--${r}`]]: !0 },
     [n["statusdot__dot--on-dark"]]: t === c.ondark
   }), k = l(t === c.ondark && n["statusdot__label--on-dark"]);
-  return /* @__PURE__ */ _("span", { id: s, className: h, "data-testid": f, "data-analyticsid": w.StatusDot, children: [
-    /* @__PURE__ */ e("span", { className: I, children: /* @__PURE__ */ e(A, { mode: t, variant: r }) }),
-    /* @__PURE__ */ e("span", { className: k, children: d })
+  return /* @__PURE__ */ _("span", { id: e, className: h, "data-testid": f, "data-analyticsid": w.StatusDot, children: [
+    /* @__PURE__ */ s("span", { className: I, children: /* @__PURE__ */ s(A, { onColor: t, variant: r }) }),
+    /* @__PURE__ */ s("span", { className: k, children: d })
   ] });
 };
 export {
   L as S,
   c as a,
-  y as b
+  C as b
 };
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = FormMode.onwhite,\n  ondark = FormMode.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  mode?: keyof typeof StatusDotModes;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ mode, variant }) => {\n  const color = mode === StatusDotModes.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, mode };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: mode === StatusDotModes.ondark,\n  });\n  const labelClasses = classNames(mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon mode={mode} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","FormMode","StatusDotVariant","StatusDotIcon","mode","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAS,OAAnB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAS,MAAlB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,MAAAC,GAAM,SAAAC,QAAc;AAEzE,QAAMC,IAAY,EAAE,OADNF,MAASJ,EAAe,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GACxD,MAAMC,EAAS,SAAS,MAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAb,IAAOJ,EAAe,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAElGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAASJ,EAAe;AAAA,EAAA,CAC9D,GACK2B,IAAeH,EAAWpB,MAASJ,EAAe,UAAUyB,EAAO,2BAA2B,CAAC;AAGnG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAA,gBAAApB,EAAC,UAAK,WAAWiB,GACf,4BAACvB,GAAc,EAAA,MAAAC,GAAY,SAAAC,GAAkB,EAC/C,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, onColor };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","FormOnColor","StatusDotVariant","StatusDotIcon","onColor","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAY,OAAtB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAY,MAArB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc;AAE5E,QAAMC,IAAY,EAAE,OADNF,MAAYJ,EAAiB,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GAC7D,MAAMC,EAAS,SAAS,SAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,SAAAb,IAAUJ,EAAiB,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAEvGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAAYJ,EAAiB;AAAA,EAAA,CACnE,GACK2B,IAAeH,EAAWpB,MAAYJ,EAAiB,UAAUyB,EAAO,2BAA2B,CAAC;AAGxG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAA,gBAAApB,EAAC,UAAK,WAAWiB,GACf,4BAACvB,GAAc,EAAA,SAAAC,GAAkB,SAAAC,GAAkB,EACrD,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}

package/TabList.js

@@ -1,68 +1,103 @@
-import { jsx as n, Fragment as k, jsxs as y } from "react/jsx-runtime";
-import h, { useRef as _, useEffect as z } from "react";
-import C from "classnames";
-import { useIsVisible as L } from "./hooks/useIsVisible.js";
-import { palette as m } from "./theme/palette.js";
-import { I as N } from "./Icon.js";
+import { jsx as o, Fragment as S, jsxs as R } from "react/jsx-runtime";
+import C, { useRef as v, useEffect as w } from "react";
+import d from "classnames";
+import { useIsVisible as y } from "./hooks/useIsVisible.js";
+import { palette as k } from "./theme/palette.js";
+import { I as z } from "./Icon.js";
 import { IconSize as x } from "./constants.js";
-import { L as g } from "./LazyIcon.js";
-import i from "./components/Tabs/TabList/styles.module.scss";
-import { useRovingFocus as S } from "./hooks/useRovingFocus.js";
-import { isComponent as v } from "./utils/component.js";
-const V = (t) => /* @__PURE__ */ n(k, { children: t.children ?? null }), j = (t) => {
-  const e = t.index === t.selectedTab, { title: o, onTabClick: l, icon: s, testId: f } = t.tabProps, r = () => {
-    l && l(t.index), t.onTabListClick(t.index), a(t.index);
-  }, c = C(i["tab-list__tab"], i[`tab-list__tab--${t.color}`], {
-    [i["tab-list__tab--selected"]]: e,
-    [i["tab-list__tab--first"]]: t.index == 0
-  }), u = t.tabRefs.current && t.tabRefs.current[t.index], a = (I) => {
-    var T;
-    const d = t.tabRefs.current && t.tabRefs.current[I];
-    (T = d == null ? void 0 : d.current) == null || T.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-  }, b = _(null), R = L(b);
-  return z(() => {
-    e && R && a(t.index);
-  }, [e && R]), /* @__PURE__ */ n("li", { role: "presentation", ref: b, children: /* @__PURE__ */ n(
+import { L } from "./LazyIcon.js";
+import n from "./components/Tabs/TabList/styles.module.scss";
+import { useRovingFocus as V } from "./hooks/useRovingFocus.js";
+import { isComponent as $ } from "./utils/component.js";
+const F = (t) => /* @__PURE__ */ o(S, { children: t.children ?? null }), B = (t) => {
+  const e = t.index === t.selectedTab, { title: u, onTabClick: s, icon: a, testId: l } = t.tabProps, m = () => {
+    s && s(t.index), t.onTabListClick(t.index), c(t.index);
+  }, r = d(n["tab-list__tab"], n[`tab-list__tab--${t.color}`], {
+    [n["tab-list__tab--selected"]]: e,
+    [n["tab-list__tab--not-selected"]]: !e
+  }), g = t.tabRefs.current && t.tabRefs.current[t.index], c = (T) => {
+    var _;
+    const i = t.tabRefs.current && t.tabRefs.current[T];
+    (_ = i == null ? void 0 : i.current) == null || _.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+  }, f = v(null), h = y(f);
+  return w(() => {
+    e && h && c(t.index);
+  }, [e && h]), /* @__PURE__ */ o("li", { role: "presentation", ref: f, children: /* @__PURE__ */ o(
     "button",
     {
       role: "tab",
       "aria-selected": e,
-      onClick: r,
-      className: c,
-      "data-testid": f,
-      ref: u,
-      children: /* @__PURE__ */ y("span", { className: i["tab-list__tab__title-and-icon"], children: [
-        s && (typeof s == "string" ? /* @__PURE__ */ n(
-          g,
+      onClick: m,
+      className: r,
+      "data-testid": l,
+      ref: g,
+      style: {
+        borderBottom: e ? `2px solid var(--color-base-background-${t.color})` : "1px solid var(--color-action-border-onlight-focus)"
+      },
+      children: /* @__PURE__ */ R("span", { className: n["tab-list__tab__title-and-icon"], children: [
+        a && (typeof a == "string" ? /* @__PURE__ */ o(
+          L,
           {
-            iconName: s,
+            iconName: a,
             size: x.XSmall,
-            color: e ? m.black : m.blueberry500
+            color: e ? k.black : k.blueberry500
           }
-        ) : /* @__PURE__ */ n(N, { svgIcon: s, size: x.XSmall, color: e ? m.black : m.blueberry500 })),
-        o
+        ) : /* @__PURE__ */ o(z, { svgIcon: a, size: x.XSmall, color: e ? k.black : k.blueberry500 })),
+        u
       ] })
     }
   ) });
-}, H = (t) => {
-  const { selectedTab: e, onTabListClick: o, children: l, color: s = "white", type: f = "normal" } = t, r = _(null), c = _(h.Children.map(l, () => h.createRef()));
-  S(o, c, r, !0);
-  const u = C(i["tab-list"], i[`tab-list--${f}`]);
-  return /* @__PURE__ */ n("ul", { className: u, ref: r, role: "tablist", "aria-orientation": "horizontal", children: h.Children.map(l, (a, b) => v(a, V) ? /* @__PURE__ */ n(
-    j,
-    {
-      tabRefs: c,
-      index: b,
-      selectedTab: e,
-      onTabListClick: o,
-      tabProps: a.props,
-      color: s
-    },
-    a.props.title
-  ) : null) });
+}, K = (t) => {
+  const { selectedTab: e, onTabListClick: u, children: s, color: a, onColor: l } = t, m = v(null), r = v(C.Children.map(s, () => C.createRef()) || []);
+  V(u, r, m, !0);
+  const g = d(n["tab-list"], n[`tab-list--${l}`]), c = (b) => {
+    switch (b) {
+      case "onwhite":
+        return "var(--color-base-background-white)";
+      case "onblueberry":
+        return "var(--color-base-background-blueberry)";
+      case "onneutral":
+        return "var(--color-base-background-neutral)";
+    }
+  }, f = r.current && r.current[0], h = r.current && r.current[r.current.length - 1], T = y(f), i = y(h), _ = () => !T && e !== 0, I = () => !i && e !== r.current.length - 1;
+  return /* @__PURE__ */ R("div", { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: d(n["tab-list__fade-start"]),
+        style: {
+          display: _() ? "block" : "none",
+          backgroundColor: `${c(l)}`
+        }
+      }
+    ),
+    /* @__PURE__ */ o("ul", { className: g, ref: m, role: "tablist", "aria-orientation": "horizontal", children: C.Children.map(s, (b, N) => $(b, F) ? /* @__PURE__ */ o(
+      B,
+      {
+        tabRefs: r,
+        index: N,
+        selectedTab: e,
+        onTabListClick: u,
+        tabProps: b.props,
+        color: a
+      },
+      b.props.title
+    ) : null) }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: d(n["tab-list__fade-end"]),
+        style: {
+          display: I() ? "block" : "none",
+          backgroundColor: `${c(l)}`
+        }
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: d(n["tab-list__border"]) })
+  ] });
 };
 export {
-  H as T,
-  V as a
+  K as T,
+  F as a
 };
 //# sourceMappingURL=TabList.js.map

package/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--first']]: props.index == 0,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n  const isVisible = useIsVisible(itemRef);\n\n  useEffect(() => {\n    if (isSelected && isVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected && isVisible]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent<TabProps>(child, Tab)) {\n          return (\n            <TabItem\n              tabRefs={tabRefs}\n              key={child.props.title}\n              index={index}\n              selectedTab={selectedTab}\n              onTabListClick={onTabListClick}\n              tabProps={child.props}\n              color={color}\n            />\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["Tab","props","jsx","Fragment","TabItem","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","classNames","styles","currentRef","index","itemRef","useRef","isVisible","useIsVisible","useEffect","jsxs","LazyIcon","IconSize","palette","Icon","TabList","selectedTab","onTabListClick","children","color","type","listRef","tabRefs","React","useRovingFocus","tablistClasses","child","isComponent"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n  const isVisible = useIsVisible(itemRef);\n\n  useEffect(() => {\n    if (isSelected && isVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected && isVisible]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible && selectedTab !== 0;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;\n  };\n\n  return (\n    <div>\n      <div\n        className={classNames(styles['tab-list__fade-start'])}\n        style={{\n          display: shouldShowFadeStart() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      <div\n        className={classNames(styles['tab-list__fade-end'])}\n        style={{\n          display: shouldShowFadeEnd() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["Tab","props","jsx","Fragment","TabItem","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","classNames","styles","currentRef","index","itemRef","useRef","isVisible","useIsVisible","useEffect","jsxs","LazyIcon","IconSize","palette","Icon","TabList","selectedTab","onTabListClick","children","color","onColor","listRef","tabRefs","React","useRovingFocus","tablistClasses","getBackgroundColor","firstTab","lastTab","firstTabVisible","lastTabVisible","shouldShowFadeStart","shouldShowFadeEnd","child","isComponent"],"mappings":"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"}

package/TabPanel.js

@@ -1,15 +1,15 @@
 import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { forwardRef as d } from "react";
 import l from "classnames";
 import a from "./components/Tabs/TabPanel/styles.module.scss";
-const h = y((n, r) => {
-  const { children: o, animate: t, color: i = "white", type: m = "normal", isFirst: p = !1, translateX: e, style: c } = n, f = l(a["tab-panel"], a[`tab-panel--${i}`], a[`tab-panel--${m}`], {
-    [a["tab-panel--first"]]: p
-  }), b = l({
+const h = d((r, n) => {
+  const { children: o, animate: t, color: i = "white", isFirst: m = !1, translateX: e, style: c } = r, f = l(a["tab-panel"], a[`tab-panel--${i}`], {
+    [a["tab-panel--first"]]: m
+  }), p = l({
     [a["tab-panel--animate-left"]]: t === "left",
     [a["tab-panel--animate-right"]]: t === "right"
-  }), d = e != 0 ? { transform: `translateX(${e}px)` } : {};
-  return /* @__PURE__ */ s("div", { ref: r, className: f, style: c, children: /* @__PURE__ */ s("div", { className: b, style: d, children: o }) });
+  }), b = e != 0 ? { transform: `translateX(${e}px)` } : {};
+  return /* @__PURE__ */ s("div", { ref: n, className: f, style: c, children: /* @__PURE__ */ s("div", { className: p, style: b, children: o }) });
 });
 h.displayName = "TabPanel";
 export {

package/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', type = 'normal', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","type","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","jsx"],"mappings":";;;;AAkBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAA,IAAUR,GAC9FS,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcP,CAAK,EAAE,GAAGO,EAAO,cAAcN,CAAI,EAAE,GAAG;AAAA,IACnH,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IACjD,CAACQ,EAAO,0BAA0B,CAAC,GAAGR,MAAY;AAAA,EAAA,CACnD,GACKU,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACG,gBAAAO,EAAA,OAAA,EAAI,KAAAb,GAAU,WAAWQ,GAAiB,OAAAD,GACzC,UAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,GACpC,UAAAX,GACH,EACF,CAAA;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}
+{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","jsx"],"mappings":";;;;AAiBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAU,IAAAP,GAC7EQ,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcN,CAAK,EAAE,GAAG;AAAA,IACrF,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGP,MAAY;AAAA,IACjD,CAACO,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,EAAA,CACnD,GACKS,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACG,gBAAAO,EAAA,OAAA,EAAI,KAAAZ,GAAU,WAAWO,GAAiB,OAAAD,GACzC,UAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,GACpC,UAAAV,GACH,EACF,CAAA;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}