npm - @helsenorge/designsystem-react - Versions diffs - 13.0.0-workspaces-beta.2 → 13.0.0-workspaces-beta.3 - Mend

@helsenorge/designsystem-react 13.0.0-workspaces-beta.2 → 13.0.0-workspaces-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/lib/CHANGELOG.md +2 -0
package/lib/FormFieldTag.js.map +1 -1
package/lib/Table.js +3 -3
package/lib/Table.js.map +1 -1
package/lib/TableBody.js +2 -2
package/lib/TableBody.js.map +1 -1
package/lib/TableCell.js +2 -2
package/lib/TableCell.js.map +1 -1
package/lib/TableExpandedRow.js +4 -4
package/lib/TableExpandedRow.js.map +1 -1
package/lib/TableExpanderCell.js +2 -2
package/lib/TableExpanderCell.js.map +1 -1
package/lib/TableHead.js +6 -6
package/lib/TableHead.js.map +1 -1
package/lib/TableHeadCell.js +5 -5
package/lib/TableHeadCell.js.map +1 -1
package/lib/TableRow.js +5 -5
package/lib/TableRow.js.map +1 -1
package/lib/components/FormFieldTag/FormFieldTag.d.ts +1 -1
package/package.json +16 -10

package/lib/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,5 @@
+## 13.0.0-workspaces-beta.2 (2025-11-11)
 ## 13.0.0-workspaces-beta.1 (2025-11-10)
 ## 13.0.0-workspaces-beta.0 (2025-11-10)

package/lib/FormFieldTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n \"allRequired\": \"Alle felt må fylles ut\",\n \"requiredField\": \"Må fylles ut\",\n \"optional\": \"Valgfritt\",\n \"allOptional\": \"Alle felt er valgfrie\",\n \"requiredRadiobuttonList\": \"Velg én\",\n \"requiredCheckboxList\": \"Velg én eller flere\",\n \"requiredSingleCheckbox\": \"Må velges\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n switch (language) {\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n \| 'all-required'\n \| 'required-field'\n \| 'optional'\n \| 'all-optional'\n \| 'required-radiobutton-list'\n \| 'required-checkbox-list'\n \| 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n /** Id that is placed on the component /\n id?: string;\n /* What level is the required tag, sets the styling and the text. /\n level: FormFieldTagLevel;\n /* Texts if overriding SOT /\n resources?: HNDesignsystemFormFieldTag;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n const { id, level, resources, testId } = props;\n const isOptional = level === 'optional' \|\| level === 'all-optional';\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemFormFieldTag = {\n ...defaultResources,\n ...resources,\n };\n\n const textMap = {\n 'all-required': mergedResources.allRequired,\n 'required-field': mergedResources.requiredField,\n optional: mergedResources.optional,\n 'all-optional': mergedResources.allOptional,\n 'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n 'required-checkbox-list': mergedResources.requiredCheckboxList,\n 'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n };\n\n return (\n <span\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.FormFieldTag}\n className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n >\n {textMap[level]}\n </span>\n );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;ACIA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACuBb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC3DX,IAAA,yBD+De"}
1	+ {"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n \"allRequired\": \"Alle felt må fylles ut\",\n \"requiredField\": \"Må fylles ut\",\n \"optional\": \"Valgfritt\",\n \"allOptional\": \"Alle felt er valgfrie\",\n \"requiredRadiobuttonList\": \"Velg én\",\n \"requiredCheckboxList\": \"Velg én eller flere\",\n \"requiredSingleCheckbox\": \"Må velges\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n switch (language) {\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n \| 'all-required'\n \| 'required-field'\n \| 'optional'\n \| 'all-optional'\n \| 'required-radiobutton-list'\n \| 'required-checkbox-list'\n \| 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n /** Id that is placed on the component /\n id?: string;\n /* What level is the required tag, sets the styling and the text. /\n level: FormFieldTagLevel;\n /* Texts if overriding SOT /\n resources?: Partial<HNDesignsystemFormFieldTag>;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n const { id, level, resources, testId } = props;\n const isOptional = level === 'optional' \|\| level === 'all-optional';\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemFormFieldTag = {\n ...defaultResources,\n ...resources,\n };\n\n const textMap = {\n 'all-required': mergedResources.allRequired,\n 'required-field': mergedResources.requiredField,\n optional: mergedResources.optional,\n 'all-optional': mergedResources.allOptional,\n 'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n 'required-checkbox-list': mergedResources.requiredCheckboxList,\n 'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n };\n\n return (\n <span\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.FormFieldTag}\n className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n >\n {textMap[level]}\n </span>\n );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;ACIA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACuBb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC3DX,IAAA,yBD+De"}

package/lib/Table.js CHANGED Viewed

@@ -8,9 +8,9 @@ import { t as isTouchDevice } from "./device.js";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
-var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
 var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
 var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
 var getConfigForBreakpoint = (config, breakpoint) => {
@@ -100,7 +100,7 @@ const Table = ({ id, testId, className, children, breakpointConfig = defaultConf
 	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
 	const breakpointClass = getBreakpointClass(currentConfig);
 	const table = /* @__PURE__ */ jsx("table", {
-		className: classNames(styles.table, breakpointClass, className),
+		className: classNames(tableStyles.table, breakpointClass, className),
 		id,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Table,

package/lib/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","names":["defaultConfig: BreakpointConfig[]","simpleConfig: BreakpointConfig[]","Table: React.FC<Props>"],"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 =>\n config.variant === 'centeredoverflow' \|\| config.variant === 'block' ? 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 \| undefined => {\n if (parentWidth >= tableWidth) {\n return;\n }\n\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 { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\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 extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\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 /* Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! /\n scrollAriaLabel?: string;\n /* Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n scrollAriaLabelledById?: string;\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> = ({\n id,\n testId,\n className,\n children,\n breakpointConfig = defaultConfig,\n mode = ModeType.normal,\n scrollAriaLabel,\n scrollAriaLabelledById,\n ...rest\n}) => {\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 tableIsVisible = useIsVisible(tableRef, 0);\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, breakpoint]);\n\n useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n useEffect(() => {\n if (tableWidth === 0 && tableIsVisible) {\n setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n }\n }, [tableWidth, tableIsVisible]);\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\n className={tableClass}\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Table}\n ref={tableRef}\n style={tableStyle}\n {...rest}\n >\n {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n </table>\n );\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n return (\n <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n {table}\n </HorizontalScroll>\n );\n }\n\n return table;\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,OAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;AAQlI,IAAM,+BAA+B,GAAqB,MACxD,WAAW,EAAE,cAAc,WAAW,EAAE;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;AACtI,KAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,SAAO,KAAK,4BAA4B;AAExC,SAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;YAC1D,UAAU,4BAA4B,QAAQ,WAAW,CAClE,QAAO;;AAWX,MAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;AAE7C,KAAI,CAAC,iBACH;AAGF,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,QAAO;;AAQT,MAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;AAQ/D,MAAa,iCAAiC,aAAqB,eAAwD;AACzH,KAAI,eAAe,WACjB;AAKF,QAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAFhB,EAE2C,KAAK;;ACrIjF,IAAY,yBAAA,yBAAA,0BAAL;AAEL,0BAAA,UAAA;AAEA,0BAAA,sBAAA;AAEA,0BAAA,sBAAA;AAEA,0BAAA,WAAA;;;AAEF,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,aAAA;AACA,YAAA,YAAA;;;AA8BF,MAAaA,gBAAoC,CAC/C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF;AAED,MAAaC,eAAmC,CAC9C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,EACD;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF;AAED,MAAaC,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,uBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,UAA4B;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,WAAW;CACjE,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,iBAAiB,aAAa,UAAU,EAAE;CAChD,MAAM,aAAa,eAAe;AAElC,iBAAgB;AACd,mBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,YAAY,CAAC;IACxF;EAAC;EAAkB;EAAY;EAAY;EAAY,CAAC;AAE3D,iBAAgB;AACd,MACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,iBAElD,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;AAErE,MAAI,eAAe,YAAY,uBAAuB,iBACpD,gBAAe,SAAS,SAAS,eAAe,uBAAuB,CAAC,SAAS,EAAE;IAEpF,CAAC,eAAe,WAAW,CAAC;AAE/B,sBAAqB,eAAe,OAAO,WAAW,EAAE,CAAC,SAAS,EAAE,IAAI;AAExE,iBAAgB;AACd,MAAI,eAAe,KAAK,eACtB,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;IAEpE,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,WAAW,GAAG,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,cAAc;CAGzD,MAAM,QACJ,oBAAC,SAAA;EACC,WAJe,WAAW,OAAO,OAAO,iBAAiB,UAAU;EAK/D;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAI;YAEH,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;CAGV,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;EAAwB,CAAC;AAE1G,KAAI,eAAe,YAAY,uBAAuB,iBACpD,QACE,oBAAC,0BAAA;EAAiB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;GACgB;AAIvB,QAAO"}
1	+ {"version":3,"file":"Table.js","names":["defaultConfig: BreakpointConfig[]","simpleConfig: BreakpointConfig[]","Table: React.FC<Props>"],"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 =>\n config.variant === 'centeredoverflow' \|\| config.variant === 'block' ? 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 \| undefined => {\n if (parentWidth >= tableWidth) {\n return;\n }\n\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 { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\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 extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\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 /* Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! /\n scrollAriaLabel?: string;\n /* Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n scrollAriaLabelledById?: string;\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> = ({\n id,\n testId,\n className,\n children,\n breakpointConfig = defaultConfig,\n mode = ModeType.normal,\n scrollAriaLabel,\n scrollAriaLabelledById,\n ...rest\n}) => {\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 tableIsVisible = useIsVisible(tableRef, 0);\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, breakpoint]);\n\n useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n useEffect(() => {\n if (tableWidth === 0 && tableIsVisible) {\n setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n }\n }, [tableWidth, tableIsVisible]);\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\n className={tableClass}\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Table}\n ref={tableRef}\n style={tableStyle}\n {...rest}\n >\n {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n </table>\n );\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n return (\n <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n {table}\n </HorizontalScroll>\n );\n }\n\n return table;\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,YAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;AAQlI,IAAM,+BAA+B,GAAqB,MACxD,WAAW,EAAE,cAAc,WAAW,EAAE;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;AACtI,KAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,SAAO,KAAK,4BAA4B;AAExC,SAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;YAC1D,UAAU,4BAA4B,QAAQ,WAAW,CAClE,QAAO;;AAWX,MAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;AAE7C,KAAI,CAAC,iBACH;AAGF,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,QAAO;;AAQT,MAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;AAQ/D,MAAa,iCAAiC,aAAqB,eAAwD;AACzH,KAAI,eAAe,WACjB;AAKF,QAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAFhB,EAE2C,KAAK;;ACrIjF,IAAY,yBAAA,yBAAA,0BAAL;AAEL,0BAAA,UAAA;AAEA,0BAAA,sBAAA;AAEA,0BAAA,sBAAA;AAEA,0BAAA,WAAA;;;AAEF,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,aAAA;AACA,YAAA,YAAA;;;AA8BF,MAAaA,gBAAoC,CAC/C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF;AAED,MAAaC,eAAmC,CAC9C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,EACD;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF;AAED,MAAaC,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,uBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,UAA4B;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,WAAW;CACjE,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,iBAAiB,aAAa,UAAU,EAAE;CAChD,MAAM,aAAa,eAAe;AAElC,iBAAgB;AACd,mBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,YAAY,CAAC;IACxF;EAAC;EAAkB;EAAY;EAAY;EAAY,CAAC;AAE3D,iBAAgB;AACd,MACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,iBAElD,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;AAErE,MAAI,eAAe,YAAY,uBAAuB,iBACpD,gBAAe,SAAS,SAAS,eAAe,uBAAuB,CAAC,SAAS,EAAE;IAEpF,CAAC,eAAe,WAAW,CAAC;AAE/B,sBAAqB,eAAe,OAAO,WAAW,EAAE,CAAC,SAAS,EAAE,IAAI;AAExE,iBAAgB;AACd,MAAI,eAAe,KAAK,eACtB,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;IAEpE,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,WAAW,GAAG,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,cAAc;CAGzD,MAAM,QACJ,oBAAC,SAAA;EACC,WAJe,WAAW,YAAO,OAAO,iBAAiB,UAAU;EAK/D;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAI;YAEH,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;CAGV,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;EAAwB,CAAC;AAE1G,KAAI,eAAe,YAAY,uBAAuB,iBACpD,QACE,oBAAC,0BAAA;EAAiB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;GACgB;AAIvB,QAAO"}

package/lib/TableBody.js CHANGED Viewed

@@ -2,10 +2,10 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableBody = ({ className, children, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: classNames(styles["table-body"], className),
+		className: classNames(tableStyles["table-body"], className),
 		...rest,
 		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
 	});

package/lib/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"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 extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\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: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAgBA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,OAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,~~OAAY~~,eAAe,UAAU;EAEnC,GAAI;YACrC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACnBZ,IAAA,sBDuBe"}
1	+ {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"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 extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\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: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAgBA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,OAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,YAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACnBZ,IAAA,sBDuBe"}

package/lib/TableCell.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 let TextAlign = /* @__PURE__ */ function(TextAlign$1) {
 	TextAlign$1["left"] = "left";
 	TextAlign$1["center"] = "center";
@@ -11,7 +11,7 @@ let TextAlign = /* @__PURE__ */ function(TextAlign$1) {
 }({});
 const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(styles["table__cell"], { [styles["table__cell--compact"]]: mode === ModeType.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className),
+		className: classNames(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,

package/lib/TableCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"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 extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\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: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\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} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAOA,IAAY,YAAA,yBAAA,aAAL;AACL,aAAA,UAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;;;AAoBF,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,OAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,WACrB,~~OAAY~~,gBACZ,GAAG,~~OAAY~~,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,~~OAAY~~,yBAAyB,QAAQ,EAChD,GAAG,~~OAAY~~,yBAAyB,cAAc,UAAU,EAChE,GAAG,~~OAAY~~,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AClDT,IAAA,sBDsDe"}
1	+ {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"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 extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\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: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\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} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAOA,IAAY,YAAA,yBAAA,aAAL;AACL,aAAA,UAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;;;AAoBF,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,OAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,WACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,YAAY,yBAAyB,QAAQ,EAChD,GAAG,YAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,YAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AClDT,IAAA,sBDsDe"}

package/lib/TableExpandedRow.js CHANGED Viewed

@@ -5,16 +5,16 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: classNames(styles["table__expanded-row"], { [styles["table__expanded-row--expanded"]]: expanded }, className),
+		className: classNames(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
 		id,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: numberOfColumns,
-			className: classNames(styles["table__cell"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact }),
+			className: classNames(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["table__expanded-row-container"]),
+				className: classNames(tableStyles["table__expanded-row-container"]),
 				children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
 					variant: "borderless",
 					onClick: toggleClick,

package/lib/TableExpandedRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\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 /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\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\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\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","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,WACpB,~~OAAY~~,wBACZ,GAAG,~~OAAY~~,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,WAAW,~~OAAY~~,gBAAgB,WAAW,GACtE,~~OAAY~~,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,WAAW,~~OAAY~~,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}
1	+ {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\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 /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\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\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\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","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,WACpB,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,WAAW,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,WAAW,YAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}

package/lib/TableExpanderCell.js CHANGED Viewed

@@ -6,9 +6,9 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = classNames(styles["table__cell"], styles["table__cell-expander"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact });
+	const tableCellClass = classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact });
 	const icon = expanded ? ChevronUp_default : ChevronDown_default;
 	return /* @__PURE__ */ jsx("td", {
 		className: tableCellClass,

package/lib/TableExpanderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"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';\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","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;;AA0BA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,WAAW,~~OAAY~~,gBAAgB,~~OAAY~~,yBAAyB,WAAW,GAC3G,~~OAAY~~,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC/CT,IAAA,8BDmDe"}
1	+ {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"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';\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","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;;AA0BA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,WAAW,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC/CT,IAAA,8BDmDe"}

package/lib/TableHead.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 let HeaderCategory = /* @__PURE__ */ function(HeaderCategory$1) {
 	HeaderCategory$1["normal"] = "normal";
 	HeaderCategory$1["transparent"] = "transparent";
@@ -11,11 +11,11 @@ let HeaderCategory = /* @__PURE__ */ function(HeaderCategory$1) {
 }({});
 const TableHead = ({ category = HeaderCategory.normal, className, children, mode,...rest }) => {
 	return /* @__PURE__ */ jsx("thead", {
-		className: classNames(styles["table__head"], {
-			[styles["table__head--normal"]]: category === HeaderCategory.normal,
-			[styles["table__head--transparent"]]: category === HeaderCategory.transparent,
-			[styles["table__head--sortable"]]: category == HeaderCategory.sortable,
-			[styles["table__head--compact"]]: mode == ModeType.compact
+		className: classNames(tableStyles["table__head"], {
+			[tableStyles["table__head--normal"]]: category === HeaderCategory.normal,
+			[tableStyles["table__head--transparent"]]: category === HeaderCategory.transparent,
+			[tableStyles["table__head--sortable"]]: category == HeaderCategory.sortable,
+			[tableStyles["table__head--compact"]]: mode == ModeType.compact
 		}, className),
 		...rest,
 		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))

package/lib/TableHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"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","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAOA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,iBAAA;AACA,kBAAA,cAAA;;;AAcF,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,KAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,WACrB,~~OAAY~~,gBACZ;IACG,~~OAAY~~,yBAAyB,aAAa,eAAe;IACjE,~~OAAY~~,8BAA8B,aAAa,eAAe;IACtE,~~OAAY~~,2BAA2B,YAAY,eAAe;IAClE,~~OAAY~~,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACrCZ,IAAA,sBDyCe"}
1	+ {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"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","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAOA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,iBAAA;AACA,kBAAA,cAAA;;;AAcF,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,KAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,WACrB,YAAY,gBACZ;IACG,YAAY,yBAAyB,aAAa,eAAe;IACjE,YAAY,8BAA8B,aAAa,eAAe;IACtE,YAAY,2BAA2B,YAAY,eAAe;IAClE,YAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACrCZ,IAAA,sBDyCe"}

package/lib/TableHeadCell.js CHANGED Viewed

@@ -6,14 +6,14 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 let SortDirection = /* @__PURE__ */ function(SortDirection$1) {
 	SortDirection$1["asc"] = "asc";
 	SortDirection$1["desc"] = "desc";
 	return SortDirection$1;
 }({});
 const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col",...rest }) => {
-	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, { [styles["table__head-cell--compact"]]: mode === ModeType.compact });
+	const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, { [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact });
 	if (!sortable && !children) return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
 	if (!sortable) return /* @__PURE__ */ jsx("th", {
 		scope,
@@ -21,9 +21,9 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = classNames(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
+	const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
-		className: styles["table__head-cell-sort-icon-wrapper"],
+		className: tableStyles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			svgIcon: sortDir == SortDirection.asc ? ArrowDown_default : ArrowUp_default,
 			size: IconSize.XXSmall
@@ -43,7 +43,7 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick,
-			className: styles["table__sort-button"],
+			className: tableStyles["table__sort-button"],
 			"aria-pressed": sortDir ? !!sortDir : void 0,
 			children: [renderSortIcon(), children]
 		})

package/lib/TableHeadCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"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","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;;AAUA,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,SAAA;AACA,iBAAA,UAAA;;;AAkBF,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,MACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,~~OAAY~~,qBAAqB,WAAW,GACtF,~~OAAY~~,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,~~OAAY~~,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,~~OAAY~~;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,~~OAAY~~;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;AC9ET,IAAA,0BDkFe"}
1	+ {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"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","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;;AAUA,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,SAAA;AACA,iBAAA,UAAA;;;AAkBF,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,MACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,YAAY,qBAAqB,WAAW,GACtF,YAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,YAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;AC9ET,IAAA,0BDkFe"}

package/lib/TableRow.js CHANGED Viewed

@@ -6,12 +6,12 @@ import { t as ModeType } from "./Table.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(styles.table__cell, styles["table__expander-cell-mobile"], {
-			[styles["table__expander-cell-mobile--expanded"]]: expanded,
-			[styles["table__cell--compact"]]: mode === ModeType.compact
+		className: classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+			[tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
+			[tableStyles["table__cell--compact"]]: mode === ModeType.compact
 		}),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			"aria-expanded": expanded,
@@ -28,7 +28,7 @@ var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetails
 var TableExpanderCellMobile_default = TableExpanderCellMobile;
 const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsxs("tr", {
-		className: classNames(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
+		className: classNames(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
 		children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {

package/lib/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"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","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAcA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,~~OAAY~~,aAAa,~~OAAY~~,gCAAgC;IAC/F,~~OAAY~~,2CAA2C;IACvD,~~OAAY~~,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,OAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,~~OAAY~~,cACZ,GACG,~~OAAY~~,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC,EAC9H,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC3DT,IAAA,qBD+De"}
1	+ {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"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","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAcA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,OAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC,EAC9H,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC3DT,IAAA,qBD+De"}

package/lib/components/FormFieldTag/FormFieldTag.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export interface FormFieldTagProps {
     /** What level is the required tag, sets the styling and the text. */
     level: FormFieldTagLevel;
     /** Texts if overriding SOT */
-    resources?: HNDesignsystemFormFieldTag;
+    resources?: Partial<HNDesignsystemFormFieldTag>;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "13.0.0-workspaces-beta.2",
+  "version": "13.0.0-workspaces-beta.3",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./index.d.ts",
       "import": "./lib/index.js"
     },
     "./components/Icons/*": {
@@ -38,14 +38,20 @@
       "types": "./lib/components/Illustrations/*.d.ts",
       "import": "./lib/components/Illustrations/*.js"
     },
-    "./components/*/*": {
-      "types": "./lib/components/*/*.d.ts",
-      "import": "./lib/components/*/index.js"
-    },
-    "./components/*": {
-      "types": "./lib/components/*/index.d.ts",
-      "import": "./lib/components/*/index.js"
-    },
+    "./components/*/*": [
+      {
+        "types": "./lib/components/*/*.d.ts",
+        "import": "./lib/components/*/index.js"
+      },
+      "./lib/components/*/*.scss"
+    ],
+    "./components/*": [
+      {
+        "types": "./lib/components/*/index.d.ts",
+        "import": "./lib/components/*/index.js"
+      },
+      "./lib/components/*/*.scss"
+    ],
     "./constants": {
       "types": "./lib/constants.d.ts",
       "import": "./lib/constants.js"