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

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":";;;;;;;;;;;AAkBA,MAAMA,IAA0B,CAASC,MAChC,gBAAAC,EAAAC,GAAA,EAAG,UAAMF,EAAA,YAAY,KAAK,CAAA,GCI7BG,IAAkC,CAASH,MAAA;AACzC,QAAAI,IAAaJ,EAAM,UAAUA,EAAM,aACnC,EAAE,OAAAK,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,UAC5CS,IAAc,MAAY;AAChB,IAAAH,KAAAA,EAAWN,EAAM,KAAK,GAC9BA,EAAA,eAAeA,EAAM,KAAK,GAChCU,EAAYV,EAAM,KAAK;AAAA,EAAA,GAEnBW,IAAmBC,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBb,EAAM,KAAK,EAAE,GAAG;AAAA,IACpG,CAACa,EAAO,yBAAyB,CAAC,GAAGT;AAAA,IACrC,CAACS,EAAO,sBAAsB,CAAC,GAAGb,EAAM,SAAS;AAAA,EAAA,CAClD,GAEKc,IAAad,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQA,EAAM,KAAK,GAEvEU,IAAc,CAACK,MAAwB;;AAC3C,UAAMD,IAAad,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQe,CAAK;AACvED,KAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,EAAW,GAG1FE,IAAUC,EAAsB,IAAI,GACpCC,IAAYC,EAAaH,CAAO;AAEtC,SAAAI,EAAU,MAAM;AACd,IAAIhB,KAAcc,KAChBR,EAAYV,EAAM,KAAK;AAAA,EACzB,GACC,CAACI,KAAcc,CAAS,CAAC,GAGzB,gBAAAjB,EAAA,MAAA,EAAG,MAAK,gBAAe,KAAKe,GAC3B,UAAA,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAeG;AAAA,MACf,SAASK;AAAA,MACT,WAAWE;AAAA,MACX,eAAaH;AAAA,MACb,KAAKM;AAAA,MAEL,UAAC,gBAAAO,EAAA,QAAA,EAAK,WAAWR,EAAO,+BAA+B,GACpD,UAAA;AAAA,QACEN,MAAA,OAAOA,KAAS,WACf,gBAAAN;AAAA,UAACqB;AAAA,UAAA;AAAA,YACC,UAAUf;AAAA,YACV,MAAMgB,EAAS;AAAA,YACf,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG/D,gBAAAvB,EAACwB,GAAK,EAAA,SAASlB,GAAM,MAAMgB,EAAS,QAAQ,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ,aAAiB,CAAA;AAAA,QAE/GnB;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GC3DMqB,IAAkC,CAAS1B,MAAA;AACzC,QAAA,EAAE,aAAA2B,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAA/B,GAE9EgC,IAAUf,EAAyB,IAAI,GAEvCgB,IAAUhB,EAAOiB,EAAM,SAAS,IAAIL,GAAU,MAAMK,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAP,GAAgBK,GAASD,GAAS,EAAI;AAE/C,QAAAI,IAAiBxB,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAakB,CAAI,EAAE,CAAC;AAEjF,2BACG,MAAG,EAAA,WAAWK,GAAgB,KAAKJ,GAAS,MAAK,WAAU,oBAAiB,cAC1E,YAAM,SAAS,IAAIH,GAAU,CAACQ,GAAOtB,MAChCuB,EAAsBD,GAAOtC,CAAG,IAEhC,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAA8B;AAAA,MAEA,OAAAlB;AAAA,MACA,aAAAY;AAAA,MACA,gBAAAC;AAAA,MACA,UAAUS,EAAM;AAAA,MAChB,OAAAP;AAAA,IAAA;AAAA,IALKO,EAAM,MAAM;AAAA,EAAA,IAShB,IACR,EACH,CAAA;AAEJ;"}
+{"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;"}

package/Textarea.js

@@ -1,110 +1,111 @@
-import { jsx as l, jsxs as ee } from "react/jsx-runtime";
-import te, { useState as A, useRef as re, useEffect as B } from "react";
+import { jsx as l, jsxs as re } from "react/jsx-runtime";
+import te, { useState as _, useRef as ae, useEffect as A } from "react";
 import p from "classnames";
-import { FormMode as m, AnalyticsId as ae, AVERAGE_CHARACTER_WIDTH_PX as oe } from "./constants.js";
-import { useUuid as ne } from "./hooks/useUuid.js";
-import { getAriaDescribedBy as ie } from "./utils/accessibility.js";
-import { u as se } from "./uuid.js";
+import { FormOnColor as m, AnalyticsId as oe, AVERAGE_CHARACTER_WIDTH_PX as ne } from "./constants.js";
+import { useUuid as ie } from "./hooks/useUuid.js";
+import { getAriaDescribedBy as se } from "./utils/accessibility.js";
+import { u as ce } from "./uuid.js";
 import { E as de } from "./ErrorWrapper.js";
-import { a as ce } from "./Label.js";
-import { M as le } from "./MaxCharacters.js";
-import t from "./components/Textarea/styles.module.scss";
-const me = (a) => `calc(${a * oe}px + 2rem + 16px + 4px)`, ue = te.forwardRef((a, h) => {
+import { a as le } from "./Label.js";
+import { M as me } from "./MaxCharacters.js";
+import r from "./components/Textarea/styles.module.scss";
+const ue = (a) => `calc(${a * ne}px + 2rem + 16px + 4px)`, pe = te.forwardRef((a, h) => {
   const {
     maxCharacters: o,
     maxText: x,
     width: f,
-    testId: M,
+    testId: B,
     defaultValue: i,
-    marginBottom: N,
+    marginBottom: M,
     transparent: $,
-    mode: n = m.onwhite,
+    onColor: n = m.onwhite,
     label: k,
-    textareaId: b = se(),
+    textareaId: b = ce(),
     minRows: g = 3,
     maxRows: s = 10,
-    grow: w,
+    grow: C,
     error: D,
-    errorText: C,
+    errorText: w,
     errorTextId: L,
-    autoFocus: S,
-    disabled: j,
-    name: F,
+    errorWrapperClassName: S,
+    autoFocus: j,
+    disabled: F,
+    name: O,
     autoComplete: T = "off",
     placeholder: U,
     readOnly: V,
     required: q,
     onChange: W,
     ...z
-  } = a, [G, y] = A(g), [R, v] = A(i || ""), d = re(null), E = ne(L);
-  B(() => {
+  } = a, [G, y] = _(g), [R, v] = _(i || ""), c = ae(null), E = ie(L);
+  A(() => {
     v(i || "");
   }, [i]);
   const H = (e) => {
-    const c = e.rows;
+    const d = e.rows;
     e.rows = g;
-    const r = Math.floor((e.scrollHeight - 16) / 28);
-    r === c && (e.rows = r), r >= s && (e.rows = s, e.scrollTop = e.scrollHeight), r < s ? y(r) : y(s);
-  }, O = n === m.ondark, P = n === m.onblueberry, X = !!o && R.toString().length > o, I = n === m.oninvalid || !!C || !!D || X, J = p(t.textarea, {
-    [t["textarea--gutterBottom"]]: N
-  }), K = p(t["input-container"], {
-    [t["input-container--transparent"]]: $,
-    [t["input-container--on-blueberry"]]: P,
-    [t["input-container--on-dark"]]: O,
-    [t["input-container--invalid"]]: I,
-    [t["input-container--disabled"]]: a.disabled
-  }), Q = p(t["input-container__input"], {
-    [t["input-container__input--disabled"]]: a.disabled
+    const t = Math.floor((e.scrollHeight - 16) / 28);
+    t === d && (e.rows = t), t >= s && (e.rows = s, e.scrollTop = e.scrollHeight), t < s ? y(t) : y(s);
+  }, P = n === m.ondark, X = n === m.onblueberry, J = !!o && R.toString().length > o, I = n === m.oninvalid || !!w || !!D || J, K = p(r.textarea, {
+    [r["textarea--gutterBottom"]]: M
+  }), Q = p(r["input-container"], {
+    [r["input-container--transparent"]]: $,
+    [r["input-container--on-blueberry"]]: X,
+    [r["input-container--on-dark"]]: P,
+    [r["input-container--invalid"]]: I,
+    [r["input-container--disabled"]]: a.disabled
+  }), Y = p(r["input-container__input"], {
+    [r["input-container__input--disabled"]]: a.disabled
   });
-  B(() => {
-    var e, u, c;
-    if (w && ((e = d.current) != null && e.children) && ((u = d.current) != null && u.children[0])) {
-      const r = (c = d.current) == null ? void 0 : c.children[0];
-      H(r);
+  A(() => {
+    var e, u, d;
+    if (C && ((e = c.current) != null && e.children) && ((u = c.current) != null && u.children[0])) {
+      const t = (d = c.current) == null ? void 0 : d.children[0];
+      H(t);
     }
   }, []);
-  const Y = (e) => {
-    w && H(e.target), v(e.target.value);
-  }, Z = (e) => {
-    W && W(e), Y(e);
-  }, _ = f ? me(f) : void 0;
-  return /* @__PURE__ */ l(de, { errorText: C, errorTextId: E, children: /* @__PURE__ */ ee("div", { "data-testid": M, "data-analyticsid": ae.Textarea, className: J, children: [
-    ce(k, b, n),
-    /* @__PURE__ */ l("div", { className: K, ref: d, style: { maxWidth: _ }, children: /* @__PURE__ */ l(
+  const Z = (e) => {
+    C && H(e.target), v(e.target.value);
+  }, ee = (e) => {
+    W && W(e), Z(e);
+  }, N = f ? ue(f) : void 0;
+  return /* @__PURE__ */ l(de, { className: S, errorText: w, errorTextId: E, children: /* @__PURE__ */ re("div", { "data-testid": B, "data-analyticsid": oe.Textarea, className: K, children: [
+    le(k, b, n),
+    /* @__PURE__ */ l("div", { className: Q, ref: c, style: { maxWidth: N }, children: /* @__PURE__ */ l(
       "textarea",
       {
         rows: G,
         defaultValue: i,
         id: b,
-        className: Q,
+        className: Y,
         ref: h,
-        "aria-describedby": ie(a, E),
+        "aria-describedby": se(a, E),
         "aria-invalid": !!I,
-        autoFocus: S,
-        disabled: j,
-        name: F,
+        autoFocus: j,
+        disabled: F,
+        name: O,
         autoComplete: T || void 0,
         placeholder: U,
         readOnly: V,
         required: q,
-        onChange: Z,
+        onChange: ee,
         ...z
       }
     ) }),
     o && /* @__PURE__ */ l(
-      le,
+      me,
       {
         maxCharacters: o,
         length: R.toString().length,
         maxText: x,
-        mode: n,
-        maxWidth: _
+        onColor: n,
+        maxWidth: N
       }
     )
   ] }) });
 });
-ue.displayName = "Textarea";
+pe.displayName = "Textarea";
 export {
-  ue as T
+  pe as T
 };
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\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}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\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}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","onColor","FormOnColor","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","errorWrapperClassName","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/Trigger.js

@@ -5,60 +5,60 @@ import { g as Z, I as T } from "./Icon.js";
 import { IconSize as d, AnalyticsId as f } from "./constants.js";
 import { useHover as A } from "./hooks/useHover.js";
 import { getColor as h } from "./theme/currys/color.js";
-import { getAriaLabelAttributes as C } from "./utils/accessibility.js";
-import { mergeRefs as N } from "./utils/refs.js";
-import l from "./components/Trigger/styles.module.scss";
-const R = ({ size: o, isHovered: e }) => Z({ size: o, isHovered: e, normal: /* @__PURE__ */ t("path", { d: "M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z" }), normalHover: /* @__PURE__ */ t("path", { d: "M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z" }), xSmall: /* @__PURE__ */ t("path", { d: "M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678" }), xSmallHover: /* @__PURE__ */ t("path", { d: "M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z" }) }), $ = {
-  help: R
+import { getAriaLabelAttributes as N } from "./utils/accessibility.js";
+import { mergeRefs as R } from "./utils/refs.js";
+import c from "./components/Trigger/styles.module.scss";
+const $ = ({ size: e, isHovered: o }) => Z({ size: e, isHovered: o, normal: /* @__PURE__ */ t("path", { d: "M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z" }), normalHover: /* @__PURE__ */ t("path", { d: "M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z" }), xSmall: /* @__PURE__ */ t("path", { d: "M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678" }), xSmallHover: /* @__PURE__ */ t("path", { d: "M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z" }) }), k = {
+  help: $
   //info: InfoSignStroke, // @todo Support variant='info' in later version
-}, k = {
+}, w = {
   medium: d.XSmall,
   large: d.Small
-}, w = (o, e, a) => {
-  if (o === "ondark")
+}, z = (e, o, a) => {
+  if (e === "ondark")
     return "white";
   const r = a ? 800 : 600;
-  if (e === "help")
+  if (o === "help")
     return h("plum", r);
-  if (e === "info")
+  if (o === "info")
     return h("blueberry", r);
-}, z = v.forwardRef(
+}, j = v.forwardRef(
   ({
-    ariaLabel: o,
-    ariaLabelledById: e,
+    ariaLabel: e,
+    ariaLabelledById: o,
     variant: a = "help",
-    mode: r = "onlight",
+    onColor: r = "onlight",
     size: i = "medium",
-    selected: c = !1,
+    selected: l = !1,
     isHovered: n,
     htmlMarkup: u = "button",
     className: b,
-    testId: s,
+    testId: m,
     ...S
   }, x) => {
-    const { isHovered: m, hoverRef: y } = A(), g = M(
-      l.trigger,
-      r === "onlight" && l[`trigger--${a}`],
-      // variants look the same when mode=ondark
-      r === "ondark" && l[`trigger--${r}`],
-      l[`trigger--${i}`],
-      n && l["trigger--hovered"],
-      c && l["trigger--selected"],
+    const { isHovered: s, hoverRef: y } = A(), g = M(
+      c.trigger,
+      r === "onlight" && c[`trigger--${a}`],
+      // variants look the same when onColor=ondark
+      r === "ondark" && c[`trigger--${r}`],
+      c[`trigger--${i}`],
+      n && c["trigger--hovered"],
+      l && c["trigger--selected"],
       b
-    ), H = w(r, a, n || m || c), p = /* @__PURE__ */ t(T, { svgIcon: $[a], size: k[i], color: H, isHovered: n || m });
+    ), H = z(r, a, n || s || l), p = /* @__PURE__ */ t(T, { svgIcon: k[a], size: w[i], color: H, isHovered: n || s });
     if (u === "span")
-      return /* @__PURE__ */ t("span", { "data-testid": s, "data-analyticsid": f.Trigger, className: g, children: p });
-    const I = C({ label: o, id: e });
+      return /* @__PURE__ */ t("span", { "data-testid": m, "data-analyticsid": f.Trigger, className: g, children: p });
+    const I = N({ label: e, id: o });
     return /* @__PURE__ */ t(
       "button",
       {
-        "aria-label": o,
+        "aria-label": e,
         type: "button",
-        "data-testid": s,
+        "data-testid": m,
         "data-analyticsid": f.Trigger,
         className: g,
-        ref: N([x, y]),
-        "aria-expanded": c,
+        ref: R([x, y]),
+        "aria-expanded": l,
         ...I,
         ...S,
         children: p
@@ -66,8 +66,8 @@ const R = ({ size: o, isHovered: e }) => Z({ size: o, isHovered: e, normal: /* @
     );
   }
 );
-z.displayName = "Trigger";
+j.displayName = "Trigger";
 export {
-  z as T
+  j as T
 };
 //# sourceMappingURL=Trigger.js.map