@helsenorge/designsystem-react 9.4.1 → 9.4.3

package/TableHead.js

@@ -1,24 +1,29 @@
-import { jsx as p } from "react/jsx-runtime";
-import e from "react";
-import b from "classnames";
-import t from "./components/Table/styles.module.scss";
-import { M as _ } from "./Table.js";
-var c = /* @__PURE__ */ ((a) => (a.normal = "normal", a.transparent = "transparent", a.sortable = "sortable", a))(c || {});
-const u = ({ category: a = "normal", className: s, children: n, mode: r, ...m }) => {
-  const o = b(
-    t.table__head,
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+var HeaderCategory = /* @__PURE__ */ ((HeaderCategory2) => {
+  HeaderCategory2["normal"] = "normal";
+  HeaderCategory2["transparent"] = "transparent";
+  HeaderCategory2["sortable"] = "sortable";
+  return HeaderCategory2;
+})(HeaderCategory || {});
+const TableHead = ({ category = "normal", className, children, mode, ...rest }) => {
+  const tableHeadClass = classNames(
+    tableStyles["table__head"],
     {
-      [t["table__head--normal"]]: a === "normal",
-      [t["table__head--transparent"]]: a === "transparent",
-      [t["table__head--sortable"]]: a == "sortable",
-      [t["table__head--compact"]]: r == _.compact
+      [tableStyles["table__head--normal"]]: category === "normal",
+      [tableStyles["table__head--transparent"]]: category === "transparent",
+      [tableStyles["table__head--sortable"]]: category == "sortable",
+      [tableStyles["table__head--compact"]]: mode == ModeType.compact
     },
-    s
+    className
   );
-  return /* @__PURE__ */ p("thead", { className: o, ...m, children: e.Children.map(n, (l) => e.isValidElement(l) && e.cloneElement(l, { mode: r })) });
+  return /* @__PURE__ */ jsx("thead", { className: tableHeadClass, ...rest, children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })) });
 };
 export {
-  c as H,
-  u as T
+  HeaderCategory as H,
+  TableHead as T
 };
 //# sourceMappingURL=TableHead.js.map

package/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","rest","tableHeadClass","classNames","tableStyles","ModeType","jsx","React","child"],"mappings":";;;;;AAOY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAHDA,IAAAA,KAAA,CAAA,CAAA;AAiBC,MAAAC,IAA6B,CAAC,EAAE,UAAAC,IAAW,UAAuB,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,QAAW;AACtH,QAAMC,IAAiBC;AAAA,IACrBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,qBAAqB,CAAC,GAAGP,MAAa;AAAA,MACnD,CAACO,EAAY,0BAA0B,CAAC,GAAGP,MAAa;AAAA,MACxD,CAACO,EAAY,uBAAuB,CAAC,GAAGP,KAAY;AAAA,MACpD,CAACO,EAAY,sBAAsB,CAAC,GAAGJ,KAAQK,EAAS;AAAA,IAC1D;AAAA,IACAP;AAAA,EAAA;AAIA,SAAA,gBAAAQ,EAAC,WAAM,WAAWJ,GAAiB,GAAGD,GACnC,UAAAM,EAAM,SAAS,IAAIR,GAAU,CAAAS,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAR,GAAM,CAAC,EAChI,CAAA;AAEJ;"}
+{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory"],"mappings":";;;;;AAOY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AACdA,kBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBC,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAuB,WAAW,UAAU,MAAM,GAAG,WAAW;AACtH,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB;AAAA,MACE,CAAC,YAAY,qBAAqB,CAAC,GAAG,aAAa;AAAA,MACnD,CAAC,YAAY,0BAA0B,CAAC,GAAG,aAAa;AAAA,MACxD,CAAC,YAAY,uBAAuB,CAAC,GAAG,YAAY;AAAA,MACpD,CAAC,YAAY,sBAAsB,CAAC,GAAG,QAAQ,SAAS;AAAA,IAC1D;AAAA,IACA;AAAA,EACF;AAGE,SAAA,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}

package/TableHeadCell.js

@@ -1,44 +1,52 @@
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import m from "classnames";
-import { I as _ } from "./Icon.js";
-import { IconSize as h } from "./constants.js";
-import S from "./components/Icons/ArrowDown.js";
-import g from "./components/Icons/ArrowUp.js";
-import s from "./components/Table/styles.module.scss";
-import { M as d } from "./Table.js";
-var w = /* @__PURE__ */ ((e) => (e.asc = "asc", e.desc = "desc", e))(w || {});
-const A = ({
-  sortable: e,
-  onClick: i,
-  className: c,
-  children: o,
-  sortDir: a,
-  mode: p = d.normal,
-  scope: l = "col",
-  ...n
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import ArrowDown from "./components/Icons/ArrowDown.js";
+import ArrowUp from "./components/Icons/ArrowUp.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+var SortDirection = /* @__PURE__ */ ((SortDirection2) => {
+  SortDirection2["asc"] = "asc";
+  SortDirection2["desc"] = "desc";
+  return SortDirection2;
+})(SortDirection || {});
+const TableHeadCell = ({
+  sortable,
+  onClick,
+  className,
+  children,
+  sortDir,
+  mode = ModeType.normal,
+  scope = "col",
+  ...rest
 }) => {
-  const r = m(s["table__head-cell"], c, {
-    [s["table__head-cell--compact"]]: p === d.compact
+  const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, {
+    [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact
   });
-  if (!e && !o)
-    return /* @__PURE__ */ t("td", { className: r });
-  if (!e)
-    return /* @__PURE__ */ t("th", { scope: l, className: r, ...n, children: o });
-  const b = m(r, s["table__head-cell--sortable"], c), f = () => a && /* @__PURE__ */ t("div", { className: s["table__head-cell-sort-icon-wrapper"], children: /* @__PURE__ */ t(_, { svgIcon: a == "asc" ? S : g, size: h.XXSmall }) });
-  return /* @__PURE__ */ t("th", { scope: l, className: b, "aria-sort": (() => {
-    switch (a) {
+  if (!sortable && !children) {
+    return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
+  }
+  if (!sortable) {
+    return /* @__PURE__ */ jsx("th", { scope, className: tableHeadCellDefaultClass, ...rest, children });
+  }
+  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
+  const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", { className: tableStyles["table__head-cell-sort-icon-wrapper"], children: /* @__PURE__ */ jsx(Icon, { svgIcon: sortDir == "asc" ? ArrowDown : ArrowUp, size: IconSize.XXSmall }) });
+  const getSortDirection = () => {
+    switch (sortDir) {
       case "asc":
         return "ascending";
       case "desc":
         return "descending";
     }
-  })(), ...n, children: /* @__PURE__ */ u("button", { type: "button", onClick: i, className: s["table__sort-button"], "aria-pressed": a ? !!a : void 0, children: [
-    f(),
-    o
+  };
+  return /* @__PURE__ */ jsx("th", { scope, className: sortableClasses, "aria-sort": getSortDirection(), ...rest, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick, className: tableStyles["table__sort-button"], "aria-pressed": sortDir ? !!sortDir : void 0, children: [
+    renderSortIcon(),
+    children
   ] }) });
 };
 export {
-  w as S,
-  A as T
+  SortDirection as S,
+  TableHeadCell as T
 };
 //# sourceMappingURL=TableHeadCell.js.map

package/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","scope","rest","tableHeadCellDefaultClass","classNames","tableStyles","jsx","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","jsxs"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAiC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGT,GAAW;AAAA,IACvF,CAACS,EAAY,2BAA2B,CAAC,GAAGN,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAA,gBAAAS,EAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACT;AACH,6BACG,MAAG,EAAA,OAAAO,GAAc,WAAWE,GAA4B,GAAGD,GACzD,UAAAL,EACH,CAAA;AAIJ,QAAMU,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGT,CAAS,GAE5GY,IAAiB,MACrBV,uBACG,OAAI,EAAA,WAAWO,EAAY,oCAAoC,GAC9D,4BAACI,GAAK,EAAA,SAASX,KAAW,QAAoBY,IAAYC,GAAS,MAAMC,EAAS,SAAS,EAC7F,CAAA;AAaF,SAAA,gBAAAN,EAAC,MAAG,EAAA,OAAAL,GAAc,WAAWM,GAAiB,cAVvB,MAAyC;AAChE,YAAQT,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA,GAI0E,GAAI,GAAGI,GAC/E,UAAC,gBAAAW,EAAA,UAAA,EAAO,MAAK,UAAS,SAAAlB,GAAkB,WAAWU,EAAY,oBAAoB,GAAG,gBAAcP,IAAU,CAAC,CAACA,IAAU,QACvH,UAAA;AAAA,IAAeU,EAAA;AAAA,IACfX;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection"],"mappings":";;;;;;;;AAUY,IAAA,kCAAAA,mBAAL;AACLA,iBAAA,KAAM,IAAA;AACNA,iBAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAoBL,MAAM,gBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,4BAA4B,WAAW,YAAY,kBAAkB,GAAG,WAAW;AAAA,IACvF,CAAC,YAAY,2BAA2B,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAAC,YAAY,CAAC,UAAU;AACnB,WAAA,oBAAC,MAAG,EAAA,WAAW,0BAA2B,CAAA;AAAA,EAAA;AAGnD,MAAI,CAAC,UAAU;AACb,+BACG,MAAG,EAAA,OAAc,WAAW,2BAA4B,GAAG,MACzD,UACH;AAAA,EAAA;AAIJ,QAAM,kBAAkB,WAAW,2BAA2B,YAAY,4BAA4B,GAAG,SAAS;AAElH,QAAM,iBAAiB,MACrB,+BACG,OAAI,EAAA,WAAW,YAAY,oCAAoC,GAC9D,8BAAC,MAAK,EAAA,SAAS,WAAW,QAAoB,YAAY,SAAS,MAAM,SAAS,QAAS,CAAA,GAC7F;AAGJ,QAAM,mBAAmB,MAAyC;AAChE,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IAAA;AAAA,EAEb;AAGE,SAAA,oBAAC,MAAG,EAAA,OAAc,WAAW,iBAAiB,aAAW,iBAAiB,GAAI,GAAG,MAC/E,UAAC,qBAAA,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,YAAY,oBAAoB,GAAG,gBAAc,UAAU,CAAC,CAAC,UAAU,QACvH,UAAA;AAAA,IAAe,eAAA;AAAA,IACf;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;"}

package/TableRow.js

@@ -1,62 +1,63 @@
-import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import s from "react";
-import _ from "classnames";
-import o from "./components/Table/styles.module.scss";
-import { M as c } from "./Table.js";
-import { B as x } from "./Button.js";
-import { I as C } from "./Icon.js";
-import v from "./components/Icons/ChevronDown.js";
-import T from "./components/Icons/ChevronUp.js";
-const u = ({
-  expanded: e,
-  onClick: a,
-  hideDetailsText: t,
-  showDetailsText: r,
-  mode: m = c.normal
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+const TableExpanderCellMobile = ({
+  expanded,
+  onClick,
+  hideDetailsText,
+  showDetailsText,
+  mode = ModeType.normal
 }) => {
-  const l = _(o.table__cell, o["table__expander-cell-mobile"], {
-    [o["table__expander-cell-mobile--expanded"]]: e,
-    [o["table__cell--compact"]]: m === c.compact
+  const cellClass = classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+    [tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
+    [tableStyles["table__cell--compact"]]: mode === ModeType.compact
   });
-  return /* @__PURE__ */ n("td", { className: l, children: /* @__PURE__ */ b(x, { "aria-expanded": e, variant: "borderless", onClick: a, children: [
-    /* @__PURE__ */ n(C, { svgIcon: e ? T : v }),
+  return /* @__PURE__ */ jsx("td", { className: cellClass, children: /* @__PURE__ */ jsxs(Button, { "aria-expanded": expanded, variant: "borderless", onClick, children: [
+    /* @__PURE__ */ jsx(Icon, { svgIcon: expanded ? ChevronUp : ChevronDown }),
     " ",
-    e ? t : r
+    expanded ? hideDetailsText : showDetailsText
   ] }) });
-}, D = ({
-  rowKey: e,
-  hideDetailsText: a,
-  showDetailsText: t,
-  expandable: r,
-  expanded: m,
-  onClick: l,
-  className: f,
-  children: d,
-  mode: i = c.normal,
-  ...h
+};
+const TableRow = ({
+  rowKey,
+  hideDetailsText,
+  showDetailsText,
+  expandable,
+  expanded,
+  onClick,
+  className,
+  children,
+  mode = ModeType.normal,
+  ...rest
 }) => {
-  const w = _(
-    o["table-row"],
+  const tableRowClass = classNames(
+    tableStyles["table-row"],
     {
-      [o["table__row--expandable"]]: r
+      [tableStyles["table__row--expandable"]]: expandable
     },
-    f
+    className
   );
-  return /* @__PURE__ */ b("tr", { className: w, onClick: l, ...h, children: [
-    s.Children.map(d, (p) => s.isValidElement(p) && s.cloneElement(p, { mode: i })),
-    r && /* @__PURE__ */ n(
-      u,
+  return /* @__PURE__ */ jsxs("tr", { className: tableRowClass, onClick, ...rest, children: [
+    React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })),
+    expandable && /* @__PURE__ */ jsx(
+      TableExpanderCellMobile,
       {
-        expanded: m,
-        onClick: l,
-        hideDetailsText: a,
-        showDetailsText: t,
-        mode: i
+        expanded,
+        onClick,
+        hideDetailsText,
+        showDetailsText,
+        mode
       }
     )
-  ] }, e);
+  ] }, rowKey);
 };
 export {
-  D as T
+  TableRow as T
 };
 //# sourceMappingURL=TableRow.js.map

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","mode","ModeType","cellClass","classNames","tableStyles","jsx","jsxs","Button","Icon","ChevronUp","ChevronDown","TableRow","rowKey","expandable","className","children","rest","tableRowClass","React","child"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAkE,CAAC;AAAA,EACvE,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAM;AACJ,QAAMC,IAAYC,EAAWC,EAAY,aAAaA,EAAY,6BAA6B,GAAG;AAAA,IAChG,CAACA,EAAY,uCAAuC,CAAC,GAAGR;AAAA,IACxD,CAACQ,EAAY,sBAAsB,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,gBAAAI,EAAC,MAAG,EAAA,WAAWH,GACb,UAAA,gBAAAI,EAACC,KAAO,iBAAeX,GAAU,SAAQ,cAAa,SAAAC,GACpD,UAAA;AAAA,IAAA,gBAAAQ,EAACG,GAAK,EAAA,SAASZ,IAAWa,IAAYC,GAAa;AAAA,IAAE;AAAA,IAAEd,IAAWE,IAAkBC;AAAA,EAAA,EACtF,CAAA,EACF,CAAA;AAEJ,GCJaY,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAd;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAc;AAAA,EACA,UAAAjB;AAAA,EACA,SAAAC;AAAA,EACA,WAAAiB;AAAA,EACA,UAAAC;AAAA,EACA,MAAAf,IAAOC,EAAS;AAAA,EAChB,GAAGe;AACL,MAAM;AACJ,QAAMC,IAAgBd;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGS;AAAA,IAC3C;AAAA,IACAC;AAAA,EAAA;AAGF,2BACG,MAAG,EAAA,WAAWG,GAAe,SAAApB,GAAgC,GAAGmB,GAC9D,UAAA;AAAA,IAAAE,EAAM,SAAS,IAAIH,GAAU,CAAAI,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAnB,EAAM,CAAA,CAAC;AAAA,IAC7Ha,KACC,gBAAAR;AAAA,MAACV;AAAA,MAAA;AAAA,QACC,UAAAC;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,MAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAAA,GATiDY,CAWrD;AAEJ;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAM;AACJ,QAAM,YAAY,WAAW,YAAY,aAAa,YAAY,6BAA6B,GAAG;AAAA,IAChG,CAAC,YAAY,uCAAuC,CAAC,GAAG;AAAA,IACxD,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,oBAAC,MAAG,EAAA,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAK,EAAA,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EACF,CAAA;AAEJ;ACJO,MAAM,WAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB;AAAA,IACpB,YAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAAC,YAAY,wBAAwB,CAAC,GAAG;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,8BACG,MAAG,EAAA,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC;AAAA,IAC7H,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,GATiD,MAWrD;AAEJ;"}

package/Textarea.js

@@ -1,111 +1,148 @@
-import { jsx as m, jsxs as re } from "react/jsx-runtime";
-import te, { useState as A, useRef as ae, useEffect as B } from "react";
-import h from "classnames";
-import { FormOnColor as u, 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 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, f) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { FormOnColor, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { a as renderLabel } from "./Label.js";
+import { M as MaxCharacters } from "./MaxCharacters.js";
+import styles from "./components/Textarea/styles.module.scss";
+const getTextareaMaxWidth = (characters) => {
+  const paddingWidth = "2rem";
+  const scrollbarWidth = "16px";
+  const borderWidth = "4px";
+  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;
+};
+const Textarea = React.forwardRef((props, ref) => {
   const {
-    maxCharacters: o,
-    maxText: b,
-    width: g,
-    testId: M,
-    defaultValue: s,
-    marginBottom: $,
-    transparent: k,
-    onColor: n = u.onwhite,
-    label: D,
-    textareaId: C = ce(),
-    minRows: w = 3,
-    maxRows: c = 10,
-    grow: T,
-    error: L,
-    errorText: W,
-    errorTextId: S,
-    errorWrapperClassName: j,
-    autoFocus: F,
-    disabled: O,
-    name: U,
-    autoComplete: y = "off",
-    placeholder: V,
-    readOnly: q,
-    required: z,
-    onChange: R,
-    value: i,
-    ...G
-  } = a, [P, v] = A(w), [E, p] = A(i || s || ""), d = ae(null), H = ie(S);
-  B(() => {
-    p(s || "");
-  }, [s]);
-  const I = (e) => {
-    const l = e.rows;
-    e.rows = w;
-    const t = Math.floor((e.scrollHeight - 16) / 28);
-    t === l && (e.rows = t), t >= c && (e.rows = c, e.scrollTop = e.scrollHeight), t < c ? v(t) : v(c);
-  }, X = n === u.ondark, J = n === u.onblueberry, K = !!o && E.toString().length > o, N = n === u.oninvalid || !!W || !!L || K, Q = h(r.textarea, {
-    [r["textarea--gutterBottom"]]: $
-  }), Y = h(r["input-container"], {
-    [r["input-container--transparent"]]: k,
-    [r["input-container--on-blueberry"]]: J,
-    [r["input-container--on-dark"]]: X,
-    [r["input-container--invalid"]]: N,
-    [r["input-container--disabled"]]: a.disabled
-  }), Z = h(r["input-container__input"], {
-    [r["input-container__input--disabled"]]: a.disabled
+    maxCharacters,
+    maxText,
+    width,
+    testId,
+    defaultValue,
+    marginBottom: gutterBottom,
+    transparent,
+    onColor = FormOnColor.onwhite,
+    label,
+    textareaId = uuid(),
+    minRows = 3,
+    maxRows = 10,
+    grow,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    autoFocus,
+    disabled,
+    name,
+    autoComplete = "off",
+    placeholder,
+    readOnly,
+    required,
+    onChange,
+    value,
+    ...rest
+  } = props;
+  const [rows, setRows] = useState(minRows);
+  const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
+  const referanse = useRef(null);
+  const errorTextUuid = useUuid(errorTextId);
+  useEffect(() => {
+    setTextareaInput(defaultValue || "");
+  }, [defaultValue]);
+  const resizeHeight = (target) => {
+    const textareaLineHeight = 28;
+    const previousRows = target.rows;
+    target.rows = minRows;
+    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight);
+    if (currentRows === previousRows) {
+      target.rows = currentRows;
+    }
+    if (currentRows >= maxRows) {
+      target.rows = maxRows;
+      target.scrollTop = target.scrollHeight;
+    }
+    if (currentRows < maxRows) {
+      setRows(currentRows);
+    } else {
+      setRows(maxRows);
+    }
+  };
+  const onDark = onColor === FormOnColor.ondark;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;
+  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
+  const textareaWrapperClass = classNames(styles.textarea, {
+    [styles["textarea--gutterBottom"]]: gutterBottom
   });
-  B(() => {
-    var e, x, l;
-    if (i && p(i), T && ((e = d.current) != null && e.children) && ((x = d.current) != null && x.children[0])) {
-      const t = (l = d.current) == null ? void 0 : l.children[0];
-      I(t);
+  const contentWrapperClass = classNames(styles["input-container"], {
+    [styles["input-container--transparent"]]: transparent,
+    [styles["input-container--on-blueberry"]]: onBlueberry,
+    [styles["input-container--on-dark"]]: onDark,
+    [styles["input-container--invalid"]]: onError,
+    [styles["input-container--disabled"]]: props.disabled
+  });
+  const textareaClass = classNames(styles["input-container__input"], {
+    [styles[`input-container__input--disabled`]]: props.disabled
+  });
+  useEffect(() => {
+    var _a, _b, _c;
+    value && setTextareaInput(value);
+    if (grow && ((_a = referanse.current) == null ? void 0 : _a.children) && ((_b = referanse.current) == null ? void 0 : _b.children[0])) {
+      const textarea = (_c = referanse.current) == null ? void 0 : _c.children[0];
+      resizeHeight(textarea);
+    }
+  }, [value]);
+  const onChangeHandler = (e) => {
+    setTextareaInput(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+    if (grow) {
+      resizeHeight(e.target);
     }
-  }, [i]);
-  const ee = (e) => {
-    p(e.target.value), R && R(e), T && I(e.target);
-  }, _ = g ? ue(g) : void 0;
-  return /* @__PURE__ */ m(de, { className: j, errorText: W, errorTextId: H, children: /* @__PURE__ */ re("div", { "data-testid": M, "data-analyticsid": oe.Textarea, className: Q, children: [
-    le(D, C, n),
-    /* @__PURE__ */ m("div", { className: Y, ref: d, style: { maxWidth: _ }, children: /* @__PURE__ */ m(
+  };
+  const maxWidth = width ? getTextareaMaxWidth(width) : void 0;
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Textarea, className: textareaWrapperClass, children: [
+    renderLabel(label, textareaId, onColor),
+    /* @__PURE__ */ jsx("div", { className: contentWrapperClass, ref: referanse, style: { maxWidth }, children: /* @__PURE__ */ jsx(
       "textarea",
       {
-        ...G,
-        rows: P,
-        defaultValue: s,
-        id: C,
-        className: Z,
-        ref: f,
-        "aria-describedby": se(a, H),
-        "aria-invalid": !!N,
-        autoFocus: F,
-        disabled: O,
-        name: U,
-        autoComplete: y || void 0,
-        placeholder: V,
-        readOnly: q,
-        required: z,
-        onChange: ee,
-        value: i
+        ...rest,
+        rows,
+        defaultValue,
+        id: textareaId,
+        className: textareaClass,
+        ref,
+        "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+        "aria-invalid": !!onError,
+        autoFocus,
+        disabled,
+        name,
+        autoComplete: autoComplete ? autoComplete : void 0,
+        placeholder,
+        readOnly,
+        required,
+        onChange: onChangeHandler,
+        value
       }
     ) }),
-    o && /* @__PURE__ */ m(
-      me,
+    maxCharacters && /* @__PURE__ */ jsx(
+      MaxCharacters,
       {
-        maxCharacters: o,
-        length: E.toString().length,
-        maxText: b,
-        onColor: n,
-        maxWidth: _
+        maxCharacters,
+        length: textareaInput.toString().length,
+        maxText,
+        onColor,
+        maxWidth
       }
     )
   ] }) });
 });
-pe.displayName = "Textarea";
+Textarea.displayName = "Textarea";
 export {
-  pe as T
+  Textarea 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, 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      | 'value'\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    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || 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    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\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            {...rest}\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            value={value}\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","value","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","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":";;;;;;;;;;;AA8DA,MAAMA,KAAsB,CAACC,MAKpB,QAAQA,IAAaC,EAA0B,2BAGlDC,KAAWC,GAAM,WAAW,CAACC,GAAsBC,MAAwC;AACzF,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAcC;AAAA,IACd,aAAAC;AAAA,IACA,SAAAC,IAAUC,EAAY;AAAA,IACtB,OAAAC;AAAA,IACA,YAAAC,IAAaC,GAAK;AAAA,IAClB,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAA9B,GAEE,CAAC+B,GAAMC,CAAO,IAAIC,EAASnB,CAAO,GAClC,CAACoB,GAAeC,CAAgB,IAAIF,EAASJ,KAASvB,KAAgB,EAAE,GACxE8B,IAAYC,GAAuB,IAAI,GACvCC,IAAgBC,GAAQpB,CAAW;AAEzC,EAAAqB,EAAU,MAAM;AACd,IAAAL,EAAiB7B,KAAgB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAY,CAAC;AAEX,QAAAmC,IAAe,CAACC,MAAsC;AAG1D,UAAMC,IAAeD,EAAO;AAC5B,IAAAA,EAAO,OAAO5B;AAEd,UAAM8B,IAAc,KAAK,OAAOF,EAAO,eAAe,MAAM,EAAkB;AAE9E,IAAIE,MAAgBD,MAClBD,EAAO,OAAOE,IAGZA,KAAe7B,MACjB2B,EAAO,OAAO3B,GACd2B,EAAO,YAAYA,EAAO,eAGxBE,IAAc7B,IAChBiB,EAAQY,CAAW,IAEnBZ,EAAQjB,CAAO;AAAA,EACjB,GAGI8B,IAASpC,MAAYC,EAAY,QACjCoC,IAAcrC,MAAYC,EAAY,aACtCqC,IAAwB,CAAC,CAAC7C,KAAiBgC,EAAc,WAAW,SAAShC,GAC7E8C,IAAUvC,MAAYC,EAAY,aAAa,CAAC,CAACQ,KAAa,CAAC,CAACD,KAAS8B,GAEzEE,IAAuBC,EAAGC,EAAO,UAAU;AAAA,IAC/C,CAACA,EAAO,wBAAwB,CAAC,GAAG5C;AAAA,EAAA,CACrC,GAEK6C,IAAsBF,EAAGC,EAAO,iBAAiB,GAAG;AAAA,IACxD,CAACA,EAAO,8BAA8B,CAAC,GAAG3C;AAAA,IAC1C,CAAC2C,EAAO,+BAA+B,CAAC,GAAGL;AAAA,IAC3C,CAACK,EAAO,0BAA0B,CAAC,GAAGN;AAAA,IACtC,CAACM,EAAO,0BAA0B,CAAC,GAAGH;AAAA,IACtC,CAACG,EAAO,2BAA2B,CAAC,GAAGnD,EAAM;AAAA,EAAA,CAC9C,GAEKqD,IAAgBH,EAAGC,EAAO,wBAAwB,GAAG;AAAA,IACzD,CAACA,EAAO,kCAAkC,CAAC,GAAGnD,EAAM;AAAA,EAAA,CACrD;AAED,EAAAwC,EAAU,MAAM;;AAGV,QAFJX,KAASM,EAAiBN,CAAK,GAE3Bb,OAAQsC,IAAAlB,EAAU,YAAV,QAAAkB,EAAmB,eAAYC,IAAAnB,EAAU,YAAV,QAAAmB,EAAmB,SAAS,KAAI;AACzE,YAAMC,KAAWC,IAAArB,EAAU,YAAV,gBAAAqB,EAAmB,SAAS;AAC7C,MAAAhB,EAAae,CAAQ;AAAA,IACvB;AAAA,EAAA,GACC,CAAC3B,CAAK,CAAC;AAEJ,QAAA6B,KAAkB,CAAC,MAAoD;AAC1D,IAAAvB,EAAA,EAAE,OAAO,KAAK,GAE3BP,KACFA,EAAS,CAAC,GAGRZ,KACFyB,EAAa,EAAE,MAAM;AAAA,EACvB,GAGIkB,IAAWvD,IAAQT,GAAoBS,CAAK,IAAI;AAEtD,SACG,gBAAAwD,EAAAC,IAAA,EAAa,WAAWzC,GAAuB,WAAAF,GAAsB,aAAaoB,GACjF,UAAC,gBAAAwB,GAAA,OAAA,EAAI,eAAazD,GAAQ,oBAAkB0D,GAAY,UAAU,WAAWd,GAC1E,UAAA;AAAA,IAAYe,GAAArD,GAAOC,GAAYH,CAAsB;AAAA,IACtD,gBAAAmD,EAAC,SAAI,WAAWR,GAAqB,KAAKhB,GAAW,OAAO,EAAE,UAAAuB,EAC5D,GAAA,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG9B;AAAA,QACJ,MAAAC;AAAA,QACA,cAAAzB;AAAA,QACA,IAAIM;AAAA,QACJ,WAAWyC;AAAA,QACX,KAAApD;AAAA,QACA,oBAAkBgE,GAAmBjE,GAAOsC,CAAa;AAAA,QACzD,gBAAc,CAAC,CAACU;AAAA,QAEhB,WAAA3B;AAAA,QACA,UAAAC;AAAA,QACA,MAAAC;AAAA,QACA,cAAcC,KAA8B;AAAA,QAC5C,aAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAU+B;AAAA,QACV,OAAA7B;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACC3B,KACC,gBAAA0D;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,eAAAhE;AAAA,QACA,QAAQgC,EAAc,SAAA,EAAW;AAAA,QACjC,SAAA/B;AAAA,QACA,SAAAM;AAAA,QACA,UAAAkD;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;AAED7D,GAAS,cAAc;"}
+{"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      | 'value'\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    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || 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    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\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            {...rest}\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            value={value}\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":["cn"],"mappings":"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"}