@helsenorge/designsystem-react 3.1.5 → 4.1.0

package/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties => {\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal }) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","child","HorizontalScroll"],"mappings":"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"}

package/TableBody.js

@@ -1,2 +1,2 @@
-import t from"react";const a=function({className:e,children:o}){return t.createElement("tbody",{className:e},o)},c=a;export{a as T,c as a};
+import e from"react";import m from"classnames";import r from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const c=({className:o,children:a,mode:t=n.normal})=>{const s=m(r["table-body"],o);return e.createElement("tbody",{className:s},e.Children.map(a,l=>e.cloneElement(l,{mode:t})))},i=c;export{c as T,i as a};
 //# sourceMappingURL=TableBody.js.map

package/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n}\n\nexport const TableBody = function TableBody({ className, children }: Props) {\n  return <tbody className={className}>{children}</tbody>;\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","React","TableBody$1"],"mappings":"qBASO,MAAMA,EAAY,SAAmB,CAAE,UAAAC,EAAW,SAAAC,GAAmB,CACnE,OAAAC,EAAA,cAAC,QAAM,CAAA,UAAAF,CAAA,EAAuBC,CAAS,CAChD,EAEAE,EAAeJ"}
+{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody = ({ className, children, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":"mIAgBa,MAAAA,EAAY,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,KAAAC,EAAOC,EAAS,UAAuC,CACtG,MAAMC,EAAmBC,EAAWC,EAAY,YAAY,EAAGN,CAAS,EACxE,uBACG,QAAM,CAAA,UAAWI,CACf,EAAAG,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,aAAaC,EAAoC,CAAE,KAAAN,CAAK,CAAC,CAAC,CACzG,CAEJ,EAEAO,EAAeV"}

package/TableCell.js

@@ -1,2 +1,2 @@
-import b from"react";import n from"classnames";import l from"./components/Table/styles.module.scss";var m=(e=>(e.left="left",e.center="center",e.right="right",e))(m||{});const f=function({nowrap:a=!1,textAlign:t="left",dataLabel:r,children:c,className:s}){const o=n(l.table__cell,{[l["table__cell--nowrap"]]:a},{[l["table__cell--center"]]:t==="center"},{[l["table__cell--right"]]:t==="right"},s);return b.createElement("td",{className:o,"data-label":r},c)},C=f;export{f as T,m as a,C as b};
+import _ from"react";import n from"classnames";import t from"./components/Table/styles.module.scss";import{M as a}from"./Table.js";var p=(e=>(e.left="left",e.center="center",e.right="right",e))(p||{});const f=({nowrap:e=!1,textAlign:l="left",dataLabel:r,children:c,className:o,testId:s,mode:m=a.normal})=>{const b=n(t.table__cell,{[t["table__cell--compact"]]:m===a.compact},{[t["table__cell--nowrap"]]:e},{[t["table__cell--center"]]:l==="center"},{[t["table__cell--right"]]:l==="right"},o);return _.createElement("td",{className:b,"data-label":r,"data-testid":s},c)},u=f;export{f as T,p as a,u as b};
 //# sourceMappingURL=TableCell.js.map

package/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props {\n  /** Label used for small viewport block */\n  dataLabel: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children: React.ReactNode;\n}\n\nexport const TableCell = function TableCell({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className }: Props) {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","tableCellClass","classNames","tableStyles","TableCell$1"],"mappings":"oGAMY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAmBC,MAAAC,EAAY,SAAmB,CAAE,OAAAC,EAAS,GAAO,UAAAC,EAAY,OAAgB,UAAAC,EAAW,SAAAC,EAAU,UAAAC,GAAoB,CACjI,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CAAE,CAACA,EAAY,qBAAqB,CAAC,EAAGP,CAAO,EAC/C,CAAE,CAACO,EAAY,qBAAqB,CAAC,EAAGN,IAAc,QAAS,EAC/D,CAAE,CAACM,EAAY,oBAAoB,CAAC,EAAGN,IAAc,OAAQ,EAC7DG,CAAA,EAGF,uBACG,KAAG,CAAA,UAAWC,EAAgB,aAAYH,GACxCC,CACH,CAEJ,EAEAK,EAAeT"}
+{"version":3,"file":"TableCell.js","sources":["../src/components/Table/TableCell/TableCell.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 TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props {\n  /** Label used for small viewport block */\n  dataLabel: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","testId","mode","ModeType","tableCellClass","classNames","tableStyles","React","TableCell$1"],"mappings":"mIAOY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAuBL,MAAMC,EAAY,CAAC,CACxB,OAAAC,EAAS,GACT,UAAAC,EAAY,OACZ,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CAC9B,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CAAE,CAACA,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAQ,EACnE,CAAE,CAACG,EAAY,qBAAqB,CAAC,EAAGV,CAAO,EAC/C,CAAE,CAACU,EAAY,qBAAqB,CAAC,EAAGT,IAAc,QAAS,EAC/D,CAAE,CAACS,EAAY,oBAAoB,CAAC,EAAGT,IAAc,OAAQ,EAC7DG,CAAA,EAIA,OAAAO,EAAA,cAAC,MAAG,UAAWH,EAAgB,aAAYN,EAAW,cAAaG,GAChEF,CACH,CAEJ,EAEAS,EAAeb"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import{B as i}from"./Button.js";import{Icon as b}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";const x=function({numberOfColumns:r,expanded:t,hideDetailsText:l,toggleClick:s,children:c,className:n}){const m=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},n),d=o(a.table__cell,n),p=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:m},e.createElement("td",{colSpan:r,className:d},e.createElement("div",{className:p},c,e.createElement(i,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},l,e.createElement(b,{svgIcon:_})))))},u=x;export{x as T,u as a};
+import e from"react";import o from"classnames";import{B as x}from"./Button.js";import{Icon as E}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const w=({numberOfColumns:c,expanded:t,hideDetailsText:m,toggleClick:s,children:p,className:r,mode:l=n.normal})=>{const d=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},r),i=o(a.table__cell,r,{[a["table__cell--compact"]]:l===n.compact}),b=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:d},e.createElement("td",{colSpan:c,className:i},e.createElement("div",{className:b},e.Children.map(p,_=>e.cloneElement(_,{mode:l})),e.createElement(x,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},m,e.createElement(E,{svgIcon:f})))))},u=w;export{w as T,u as a};
 //# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className);\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {children}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp","TableExpandedRow$1"],"mappings":"qOAwBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,qBAAqB,EACjC,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAGP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,+BAA+B,EAAG,CAC9E,CAACA,EAAY,yCAAyC,CAAC,EAAGP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,kBACZ,KAAG,CAAA,QAASN,EAAiB,UAAWS,GACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,GACbN,EACAO,EAAA,cAAAC,EAAA,CAAO,QAAS,aAAc,QAAST,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EAAA,EACpGC,EACDS,EAAA,cAACE,GAAK,QAASC,CAAW,CAAA,CAC5B,CACF,CACF,CACF,CAEJ,EAEAC,EAAehB"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","mode","ModeType","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","child","Button","Icon","ChevronUp","TableExpandedRow$1"],"mappings":"oQA2BO,MAAMA,EAAmB,CAAC,CAC/B,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CAC9B,MAAMC,EAAgBC,EACpBC,EAAY,qBAAqB,EACjC,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAGT,CAAS,EAC3DI,CAAA,EAEIM,EAAiBF,EAAWC,EAAY,YAAgBL,EAAW,CACvE,CAACK,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EAEKK,EAAiBH,EAAWC,EAAY,+BAA+B,EAAG,CAC9E,CAACA,EAAY,yCAAyC,CAAC,EAAGT,CAAA,CAC3D,EAGC,OAAAY,EAAA,cAAC,MAAG,UAAWL,CAAA,kBACZ,KAAG,CAAA,QAASR,EAAiB,UAAWW,CAAA,kBACtC,MAAI,CAAA,UAAWC,GACbC,EAAM,SAAS,IAAIT,EAAUU,GAASD,EAAM,aAAaC,EAAoC,CAAE,KAAAR,CAAM,CAAA,CAAC,EACtGO,EAAA,cAAAE,EAAA,CAAO,QAAS,aAAc,QAASZ,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,IACpGC,EACAW,EAAA,cAAAG,EAAA,CAAK,QAASC,CAAW,CAAA,CAC5B,CACF,CACF,CACF,CAEJ,EAEAC,EAAenB"}

package/TableExpanderCell.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import{B as i}from"./Button.js";import{Icon as p}from"./components/Icons/Icon.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";const C=function({expandableRowId:t,hideDetailsText:o,showDetailsText:l,expanded:e,className:n}){const m=c(a.table__cell,a["table__cell-expander"],n),s=e?f:b;return r.createElement("td",{className:m},r.createElement(i,{variant:"borderless","aria-expanded":e,"aria-controls":t,ariaLabel:e?o:l},r.createElement(p,{svgIcon:s})))},B=C;export{C as T,B as a};
+import a from"react";import i from"classnames";import{B as b}from"./Button.js";import{Icon as f}from"./components/Icons/Icon.js";import C from"./components/Icons/ChevronDown.js";import _ from"./components/Icons/ChevronUp.js";import o from"./components/Table/styles.module.scss";import{M as r}from"./Table.js";const E=({expandableRowId:t,hideDetailsText:l,showDetailsText:m,expanded:e,className:c,mode:n=r.normal})=>{const s=i(o.table__cell,o["table__cell-expander"],c,{[o["table__cell--compact"]]:n===r.compact}),p=e?_:C;return a.createElement("td",{className:s},a.createElement(b,{variant:"borderless","aria-expanded":e,"aria-controls":t,ariaLabel:e?l:m},a.createElement(f,{svgIcon:p})))},I=E;export{E as T,I as a};
 //# sourceMappingURL=TableExpanderCell.js.map

package/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","TableExpanderCell$1"],"mappings":"sRAuBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACF,MAAAC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,sBAAsB,EAAGH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAGlC,OAAAC,EAAA,cAAC,KAAG,CAAA,UAAWN,CACb,EAAAM,EAAA,cAACC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAExCS,EAAA,cAACE,EAAK,CAAA,QAASL,CAAM,CAAA,CAAA,CAEzB,CAEJ,EAEAM,EAAef"}
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","mode","ModeType","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","TableExpanderCell$1"],"mappings":"qTA0BO,MAAMA,EAAoB,CAAC,CAChC,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CACxB,MAAAC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,sBAAsB,EAAGL,EAAW,CAC5G,CAACK,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EACKI,EAAOP,EAAWQ,EAAYC,EAGlC,OAAAC,EAAA,cAAC,KAAG,CAAA,UAAWN,CACb,EAAAM,EAAA,cAACC,EAAA,CACC,QAAQ,aACR,gBAAeX,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAExCW,EAAA,cAACE,EAAK,CAAA,QAASL,CAAM,CAAA,CAAA,CAEzB,CAEJ,EAEAM,EAAejB"}

package/TableHead.js

@@ -1,2 +1,2 @@
-import n from"react";import o from"classnames";import e from"./components/Table/styles.module.scss";var b=(a=>(a.normal="normal",a.transparent="transparent",a.sortable="sortable",a))(b||{});const m=function({category:t,className:r,children:l}){const s=o(e.table__head,{[e["table__head--normal"]]:t==="normal",[e["table__head--transparent"]]:t==="transparent",[e["table__head--sortable"]]:t=="sortable"},r);return n.createElement("thead",{className:s},l)},c=m;export{b as H,m as T,c as a};
+import t from"react";import m from"classnames";import e from"./components/Table/styles.module.scss";import{M as b}from"./Table.js";var p=(a=>(a.normal="normal",a.transparent="transparent",a.sortable="sortable",a))(p||{});const c=({category:a,className:l,children:s,mode:r})=>{const n=m(e.table__head,{[e["table__head--normal"]]:a==="normal",[e["table__head--transparent"]]:a==="transparent",[e["table__head--sortable"]]:a=="sortable",[e["table__head--compact"]]:r==b.compact},l);return t.createElement("thead",{className:n},t.Children.map(s,o=>t.cloneElement(o,{mode:r})))},f=c;export{p as H,c as T,f as a};
 //# 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';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props {\n  /** Header category for styling */\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}\n\nexport const TableHead = function TableHead({ category, className, children }: Props) {\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    },\n    className\n  );\n\n  return <thead className={tableHeadClass}>{children}</thead>;\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","tableHeadClass","classNames","tableStyles","React","TableHead$1"],"mappings":"oGAMY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,SAAW,WAHDA,IAAAA,GAAA,CAAA,CAAA,EAeL,MAAMC,EAAY,SAAmB,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,GAAmB,CACpF,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CACE,CAACA,EAAY,qBAAqB,CAAC,EAAGL,IAAa,SACnD,CAACK,EAAY,0BAA0B,CAAC,EAAGL,IAAa,cACxD,CAACK,EAAY,uBAAuB,CAAC,EAAGL,GAAY,UACtD,EACAC,CAAA,EAGF,OAAQK,EAAA,cAAA,QAAA,CAAM,UAAWH,CAAA,EAAiBD,CAAS,CACrD,EAEAK,EAAeR"}
+{"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 {\n  /** Header category for styling */\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 = ({ category, className, children, mode }: Props): React.JSX.Element => {\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}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","tableHeadClass","classNames","tableStyles","ModeType","React","child","TableHead$1"],"mappings":"mIAOY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,SAAW,WAHDA,IAAAA,GAAA,CAAA,CAAA,EAiBL,MAAMC,EAAY,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,KAAAC,KAAqC,CAC9F,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CACE,CAACA,EAAY,qBAAqB,CAAC,EAAGN,IAAa,SACnD,CAACM,EAAY,0BAA0B,CAAC,EAAGN,IAAa,cACxD,CAACM,EAAY,uBAAuB,CAAC,EAAGN,GAAY,WACpD,CAACM,EAAY,sBAAsB,CAAC,EAAGH,GAAQI,EAAS,OAC1D,EACAN,CAAA,EAGF,uBACG,QAAM,CAAA,UAAWG,CACf,EAAAI,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,aAAaC,EAAoC,CAAE,KAAAN,CAAK,CAAC,CAAC,CACzG,CAEJ,EAEAO,EAAeX"}

package/TableHeadCell.js

@@ -1,2 +1,2 @@
-import a from"react";import r from"classnames";import{Icon as i}from"./components/Icons/Icon.js";import{IconSize as f}from"./constants.js";import u from"./components/Icons/ArrowDown.js";import _ from"./components/Icons/ArrowUp.js";import t from"./components/Table/styles.module.scss";var h=(l=>(l.asc="asc",l.desc="desc",l))(h||{});const C=function({sortable:n,onClick:m,className:s,children:c,sortDir:e}){const o=t["table__head-cell"];if(!n)return a.createElement("th",{scope:"col",className:r(o,s)},c);const d=r(o,t["table__head-cell--sortable"],{[t["table__head-cell--sorted"]]:e},s),b=()=>e&&a.createElement("div",{className:t["table__head-cell-sort-icon-wrapper"]},a.createElement(i,{svgIcon:e=="asc"?u:_,size:f.XXSmall})),p=()=>{switch(e){case"asc":return"ascending";case"desc":return"descending"}};return a.createElement("th",{scope:"col",className:d,"aria-sort":p()},a.createElement("button",{type:"button",onClick:m,className:t["table__sort-button"],"aria-pressed":e?!!e:void 0},b(),c))},N=C;export{h as S,C as T,N as a};
+import c from"react";import r from"classnames";import{Icon as _}from"./components/Icons/Icon.js";import{IconSize as f}from"./constants.js";import u from"./components/Icons/ArrowDown.js";import h from"./components/Icons/ArrowUp.js";import a from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";var w=(t=>(t.asc="asc",t.desc="desc",t))(w||{});const C=({sortable:t,onClick:m,className:l,children:o,sortDir:e,mode:d=n.normal})=>{const s=r(a["table__head-cell"],l,{[a["table__head-cell--compact"]]:d===n.compact});if(!t)return c.createElement("th",{scope:"col",className:s},o);const p=r(s,a["table__head-cell--sortable"],{[a["table__head-cell--sorted"]]:e},l),b=()=>e&&c.createElement("div",{className:a["table__head-cell-sort-icon-wrapper"]},c.createElement(_,{svgIcon:e=="asc"?u:h,size:f.XXSmall})),i=()=>{switch(e){case"asc":return"ascending";case"desc":return"descending"}};return c.createElement("th",{scope:"col",className:p,"aria-sort":i()},c.createElement("button",{type:"button",onClick:m,className:a["table__sort-button"],"aria-pressed":e?!!e:void 0},b(),o))},H=C;export{w as S,C as T,H as a};
 //# 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 '../../Icons';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\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}\n\nexport const TableHeadCell = function TableHeadCell({ sortable, onClick, className, children, sortDir }: Props) {\n  const tableHeadCellDefaultClass = tableStyles['table__head-cell'];\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={classNames(tableHeadCellDefaultClass, className)}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): 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=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\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","tableHeadCellDefaultClass","tableStyles","React","classNames","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":"4RASY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAkBC,MAAAC,EAAgB,SAAuB,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,GAAkB,CACxG,MAAAC,EAA4BC,EAAY,kBAAkB,EAEhE,GAAI,CAACN,EAED,OAAAO,EAAA,cAAC,MAAG,MAAM,MAAM,UAAWC,EAAWH,EAA2BH,CAAS,CAAA,EACvEC,CACH,EAIJ,MAAMM,EAAkBD,EACtBH,EACAC,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGF,CAAQ,EACrDF,CAAA,EAGIQ,EAAiB,IACrBN,mBACG,MAAI,CAAA,UAAWE,EAAY,oCAAoC,CAAA,kBAC7DK,EAAK,CAAA,QAASP,GAAW,MAAoBQ,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQX,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAG,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWE,EAAiB,YAAWM,EAAiB,CAAA,EACrER,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAN,EAAkB,UAAWK,EAAY,oBAAoB,EAAG,eAAcF,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAM,EAAA,EACAP,CACH,CACF,CAEJ,EAEAa,EAAejB"}
+{"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 '../../Icons';\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 {\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 = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\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=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\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","tableHeadCellDefaultClass","classNames","tableStyles","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","React","TableHeadCell$1"],"mappings":"2TAUY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAoBC,MAAAC,EAAgB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,KAAAC,EAAOC,EAAS,UAAuC,CACtI,MAAMC,EAA4BC,EAAWC,EAAY,kBAAkB,EAAGP,EAAW,CACvF,CAACO,EAAY,2BAA2B,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC/D,EAED,GAAI,CAACN,EACH,uBACG,KAAG,CAAA,MAAM,MAAM,UAAWO,GACxBJ,CACH,EAIJ,MAAMO,EAAkBF,EACtBD,EACAE,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGL,CAAQ,EACrDF,CAAA,EAGIS,EAAiB,IACrBP,mBACG,MAAI,CAAA,UAAWK,EAAY,oCAAoC,CAAA,kBAC7DG,EAAK,CAAA,QAASR,GAAW,MAAoBS,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQZ,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAa,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWP,EAAiB,YAAWM,EAAiB,CAAA,EACrEC,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAhB,EAAkB,UAAWQ,EAAY,oBAAoB,EAAG,eAAcL,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAO,EAAA,EACAR,CACH,CACF,CAEJ,EAEAe,EAAenB"}

package/TableRow.js

@@ -1,2 +1,2 @@
-import l from"react";import n from"classnames";import t from"./components/Table/styles.module.scss";import{B as p}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronDown.js";import w from"./components/Icons/ChevronUp.js";const E=({expanded:e,onClick:o,hideDetailsText:m,showDetailsText:r})=>{const a=n(t.table__cell,t["table__expander-cell-mobile"],{[t["table__expander-cell-mobile--expanded"]]:e});return l.createElement("td",{className:a},l.createElement(p,{"aria-expanded":e,variant:"borderless",onClick:o},l.createElement(_,{svgIcon:e?w:f})," ",e?m:r))},C=E,T=({rowKey:e,hideDetailsText:o,showDetailsText:m,expandable:r,expanded:a,onClick:s,className:c,children:b})=>{const i=n(t["table-row"],{[t["table__row--expandable"]]:r,[t["table__row--expanded"]]:a},c);return l.createElement("tr",{className:i,onClick:s,key:e},b,r&&l.createElement(C,{expanded:a,onClick:s,hideDetailsText:o,showDetailsText:m}))},y=T;export{T,y as a};
+import e from"react";import b from"classnames";import l from"./components/Table/styles.module.scss";import{M as c}from"./Table.js";import{B as E}from"./Button.js";import{Icon as w}from"./components/Icons/Icon.js";import C from"./components/Icons/ChevronDown.js";import T from"./components/Icons/ChevronUp.js";const d=({expanded:t,onClick:m,hideDetailsText:n,showDetailsText:a,mode:o=c.normal})=>{const r=b(l.table__cell,l["table__expander-cell-mobile"],{[l["table__expander-cell-mobile--expanded"]]:t,[l["table__cell--compact"]]:o===c.compact});return e.createElement("td",{className:r},e.createElement(E,{"aria-expanded":t,variant:"borderless",onClick:m},e.createElement(w,{svgIcon:t?T:C})," ",t?n:a))},v=d,x=({rowKey:t,hideDetailsText:m,showDetailsText:n,expandable:a,expanded:o,onClick:r,className:p,children:i,mode:s=c.normal})=>{const _=b(l["table-row"],{[l["table__row--expandable"]]:a,[l["table__row--expanded"]]:o},p);return e.createElement("tr",{className:_,onClick:r,key:t},e.Children.map(i,f=>e.cloneElement(f,{mode:s})),a&&e.createElement(v,{expanded:o,onClick:r,hideDetailsText:m,showDetailsText:n,mode:s}))},$=x;export{x as T,$ as a};
 //# 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 '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({ expanded, onClick, hideDetailsText, showDetailsText }) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\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 TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\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}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {children}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","cellClass","classNames","tableStyles","React","Button","Icon","ChevronUp","ChevronDown","TableExpanderCellMobile$1","TableRow","rowKey","expandable","className","children","tableRowClass","TableRow$1"],"mappings":"sRAaA,MAAMA,EAAkE,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,KAAsB,CACnI,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,6BAA6B,EAAG,CAChG,CAACA,EAAY,uCAAuC,CAAC,EAAGN,CAAA,CACzD,EAGC,OAAAO,EAAA,cAAC,MAAG,UAAWH,CAAA,kBACZI,EAAO,CAAA,gBAAeR,EAAU,QAAQ,aAAa,QAAAC,CAAA,kBACnDQ,EAAK,CAAA,QAAST,EAAWU,EAAYC,CAAa,CAAA,EAAE,IAAEX,EAAWE,EAAkBC,CACtF,CACF,CAEJ,EAEAS,EAAeb,ECDFc,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAZ,EACA,gBAAAC,EACA,WAAAY,EACA,SAAAf,EACA,QAAAC,EACA,UAAAe,EACA,SAAAC,CACF,IAAM,CACJ,MAAMC,EAAgBb,EACpBC,EAAY,WAAW,EACvB,CACE,CAACA,EAAY,wBAAwB,CAAC,EAAGS,EACzC,CAACT,EAAY,sBAAsB,CAAC,EAAGN,CACzC,EACAgB,CAAA,EAIA,OAAAT,EAAA,cAAC,MAAG,UAAWW,EAAe,QAAAjB,EAAkB,IAAKa,CAAA,EAClDG,EACAF,GACCR,EAAA,cAACR,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAAA,CAGN,CAEJ,EAEAgB,EAAeN"}
+{"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 '../../Icons';\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 {\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}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { 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","React","Button","Icon","ChevronUp","ChevronDown","TableExpanderCellMobile$1","TableRow","rowKey","expandable","className","children","tableRowClass","child","TableRow$1"],"mappings":"qTAcA,MAAMA,EAAkE,CAAC,CACvE,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,6BAA6B,EAAG,CAChG,CAACA,EAAY,uCAAuC,CAAC,EAAGR,EACxD,CAACQ,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EAGC,OAAAI,EAAA,cAAC,MAAG,UAAWH,CAAA,kBACZI,EAAO,CAAA,gBAAeV,EAAU,QAAQ,aAAa,QAAAC,CAAA,kBACnDU,EAAK,CAAA,QAASX,EAAWY,EAAYC,CAAa,CAAA,EAAE,IAAEb,EAAWE,EAAkBC,CACtF,CACF,CAEJ,EAEAW,EAAef,ECNFgB,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAd,EACA,gBAAAC,EACA,WAAAc,EACA,SAAAjB,EACA,QAAAC,EACA,UAAAiB,EACA,SAAAC,EACA,KAAAf,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMe,EAAgBb,EACpBC,EAAY,WAAW,EACvB,CACE,CAACA,EAAY,wBAAwB,CAAC,EAAGS,EACzC,CAACT,EAAY,sBAAsB,CAAC,EAAGR,CACzC,EACAkB,CAAA,EAIA,OAAAT,EAAA,cAAC,MAAG,UAAWW,EAAe,QAAAnB,EAAkB,IAAKe,CAAA,EAClDP,EAAM,SAAS,IAAIU,EAAmBE,GAAAZ,EAAM,aAAaY,EAAoC,CAAE,KAAAjB,EAAM,CAAC,EACtGa,GACCR,EAAA,cAACV,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,CAAA,CAAA,CAGN,CAEJ,EAEAkB,EAAeP"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import a,{useState as A,useRef as ee,useEffect as te}from"react";import d from"classnames";import{FormMode as h,AnalyticsId as ae,AVERAGE_CHARACTER_WIDTH_PX as re}from"./constants.js";import{a as ne}from"./uuid.js";import{E as oe}from"./ErrorWrapper.js";import{M as se}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const le=o=>{const p="2rem",n="16px",m="4px";return`calc(${o*re}px + ${p} + ${n} + ${m})`},M=a.forwardRef((o,p)=>{const{maxCharacters:n,maxText:m,width:u,testId:$,defaultValue:f,marginBottom:k,transparent:B,mode:s,label:w,textareaId:b=ne(),minRows:E=3,maxRows:l=10,grow:g,errorText:C,afterLabelChildren:_,belowLabelChildren:T,autoFocus:L,disabled:F,name:S,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:v,...G}=o,[O,R]=A(E),[W,P]=A(f||""),c=ee(null),y=e=>{const i=e.rows;e.rows=E;const r=Math.floor((e.scrollHeight-16)/28);r===i&&(e.rows=r),r>=l&&(e.rows=l,e.scrollTop=e.scrollHeight),r<l?R(r):R(l)},H=s===h.ondark,X=s===h.onblueberry,j=!!n&&W.toString().length>n,N=s===h.oninvalid||!!C||j,J=d(t.textarea,{[t["textarea--gutterBottom"]]:k}),K=d(t["textarea__label-wrapper"],{[t["textarea__label-wrapper--on-dark"]]:H}),Q=d(t["content-wrapper"],{[t["content-wrapper--transparent"]]:B,[t["content-wrapper--on-blueberry"]]:X,[t["content-wrapper--on-dark"]]:H,[t["content-wrapper--invalid"]]:N,[t["content-wrapper--disabled"]]:o.disabled}),U=d(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:o.disabled});te(()=>{var e,x,i;if(g&&((e=c.current)!=null&&e.children)&&((x=c.current)!=null&&x.children[0])){const r=(i=c.current)==null?void 0:i.children[0];y(r)}},[]);const Y=e=>{g&&y(e.target),P(e.target.value)},Z=e=>{v&&v(e),Y(e)},I=u?le(u):void 0;return a.createElement(oe,{errorText:C},a.createElement("div",{"data-testid":$,"data-analyticsid":ae.Textarea,className:J},w&&a.createElement("div",{className:K},a.createElement("label",{htmlFor:b},w),_&&a.createElement("div",{className:t["textarea__after-label-children"]},_)),T&&a.createElement("div",null,T),a.createElement("div",{className:Q,ref:c,style:{maxWidth:I}},a.createElement("textarea",{rows:O,defaultValue:f,id:b,className:U,ref:p,"aria-invalid":!!N,autoFocus:L,disabled:F,name:S,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:Z,...G})),n&&a.createElement(se,{maxCharacters:n,length:W.toString().length,maxText:m,mode:s,maxWidth:I})))});M.displayName="Textarea";const ue=M;export{ue as T};
+import o,{useState as _,useRef as U,useEffect as Y}from"react";import u from"classnames";import{FormMode as d,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{a as te}from"./uuid.js";import{E as re}from"./ErrorWrapper.js";import{a as ae}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=a=>{const m="2rem",n="16px",p="4px";return`calc(${a*ee}px + ${m} + ${n} + ${p})`},I=o.forwardRef((a,m)=>{const{maxCharacters:n,maxText:p,width:h,testId:A,defaultValue:f,marginBottom:M,transparent:N,mode:s=d.onwhite,label:$,textareaId:w=te(),minRows:b=3,maxRows:c=10,grow:g,errorText:C,autoFocus:B,disabled:E,name:k,autoComplete:L,placeholder:S,readOnly:D,required:F,onChange:T,...V}=a,[q,y]=_(b),[R,z]=_(f||""),i=U(null),v=e=>{const l=e.rows;e.rows=b;const r=Math.floor((e.scrollHeight-16)/28);r===l&&(e.rows=r),r>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),r<c?y(r):y(c)},G=s===d.ondark,O=s===d.onblueberry,P=!!n&&R.toString().length>n,W=s===d.oninvalid||!!C||P,X=u(t.textarea,{[t["textarea--gutterBottom"]]:M}),j=u(t["content-wrapper"],{[t["content-wrapper--transparent"]]:N,[t["content-wrapper--on-blueberry"]]:O,[t["content-wrapper--on-dark"]]:G,[t["content-wrapper--invalid"]]:W,[t["content-wrapper--disabled"]]:a.disabled}),J=u(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:a.disabled});Y(()=>{var e,x,l;if(g&&((e=i.current)!=null&&e.children)&&((x=i.current)!=null&&x.children[0])){const r=(l=i.current)==null?void 0:l.children[0];v(r)}},[]);const K=e=>{g&&v(e.target),z(e.target.value)},Q=e=>{T&&T(e),K(e)},H=h?oe(h):void 0;return o.createElement(re,{errorText:C},o.createElement("div",{"data-testid":A,"data-analyticsid":Z.Textarea,className:X},ae($,w,s,E),o.createElement("div",{className:j,ref:i,style:{maxWidth:H}},o.createElement("textarea",{rows:q,defaultValue:f,id:w,className:J,ref:m,"aria-describedby":a["aria-describedby"]??void 0,"aria-invalid":!!W,autoFocus:B,disabled:E,name:k,autoComplete:L,placeholder:S,readOnly:D,required:F,onChange:Q,...V})),n&&o.createElement(ne,{maxCharacters:n,length:R.toString().length,maxText:p,mode:s,maxWidth:H})))});I.displayName="Textarea";const ue=I;export{ue 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 { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | '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?: string;\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  /** Error text to show above the component */\n  errorText?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\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\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 || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__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>) => {\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}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\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-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\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","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","FormMode","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","MaxCharacters","Textarea$1"],"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, FormMode } from '../../constants';\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\ninterface 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  /** Error text to show above the component */\n  errorText?: 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    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\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\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 || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__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}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\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={props['aria-describedby'] ?? undefined}\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}\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","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/components/AnchorLink/styles.module.scss

@@ -9,7 +9,7 @@ $focus-width: 0.15rem;
 @mixin anchorlink-hover {
   cursor: pointer;
   color: $blueberry700;
-  background-color: $blueberry50;
+  background-color: $blueberry60010;
   border-bottom-color: $blueberry600;
 }