@helsenorge/designsystem-react 3.1.3 → 3.1.4
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## [3.1.3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.1.2&targetVersion=GTv3.1.3) (2023-04-11)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- eksport av PopMenu
|
|
6
|
+
([857d136](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/857d136c0e5608cf3087315107b4e265289b412f)), closes
|
|
7
|
+
[#260926](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/260926)
|
|
8
|
+
- html-validering i flere komponenter
|
|
9
|
+
([cd61d5c](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/cd61d5c77f931e67507d3666a9ea9bd681fca1dd)), closes
|
|
10
|
+
[#298931](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/298931)
|
|
11
|
+
- panel med content a, b og datetime har riktig plassering av datetime på stor skjerm
|
|
12
|
+
([74adbca](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/74adbca810aa08cacc76c7e01fb6164d941f917a)), closes
|
|
13
|
+
[#297532](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/297532)
|
|
14
|
+
- statusdot transparent har bedre kontrast mot bakgrunn
|
|
15
|
+
([2015054](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/20150540118e1d4d67a3847b1a3c182ebfb77ef1)), closes
|
|
16
|
+
[#298938](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/298938)
|
|
17
|
+
|
|
1
18
|
## [3.1.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv3.1.1&targetVersion=GTv3.1.2) (2023-03-31)
|
|
2
19
|
|
|
3
20
|
### Bug Fixes
|
|
@@ -697,12 +714,12 @@
|
|
|
697
714
|
|
|
698
715
|
### Bug Fixes
|
|
699
716
|
|
|
700
|
-
- økt kontrast på understreking av lenker
|
|
701
|
-
([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
|
|
702
|
-
[#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
|
|
703
717
|
- panel har avstand fra tittel til badge
|
|
704
718
|
([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
|
|
705
719
|
[#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
|
|
720
|
+
- økt kontrast på understreking av lenker
|
|
721
|
+
([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
|
|
722
|
+
[#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
|
|
706
723
|
|
|
707
724
|
## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
|
|
708
725
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAMtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAMtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwCjC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import v,{useState as c,useRef as y,useEffect as w}from"react";import B from"classnames";import{Breakpoint as p,useBreakpoint as W}from"../../hooks/useBreakpoint.js";import{isTouchDevice as H}from"../../utils/device.js";import u from"./styles.module.scss";import{AnalyticsId as V}from"../../constants.js";import{useLayoutEvent as E}from"../../hooks/useLayoutEvent.js";import{H as S}from"../../HorizontalScroll.js";import{T as ut}from"../../TableBody.js";import{T as zt,a as Ct}from"../../TableCell.js";import{T as yt}from"../../TableExpandedRow.js";import{T as Wt}from"../../TableExpanderCell.js";import{H as Vt,T as Et}from"../../TableHead.js";import{S as At,T as Dt}from"../../TableHeadCell.js";import{T as Ut}from"../../TableRow.js";import"../../theme/grid.js";import"../../utils/debounce.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";const A=t=>t.variant===o.centeredoverflow||t.variant===o.block,D=t=>u[`table--${t.variant}-${t.breakpoint}`],R=(t,a)=>p[t.breakpoint]-p[a.breakpoint],h=(t,a)=>p[t.breakpoint]>=a,U=(t,a)=>{if(Array.isArray(t))return t.sort(R),t.find(n=>h(n,a));if(t&&h(t,a))return t},F=(t,a,n,l)=>{const r=U(t,a),e=H(),i=n<=l;if(r)return r.variant===o.centeredoverflow&&!i&&r.fallbackVariant===o.horizontalscroll?{variant:e?o.horizontalscroll:o.none,breakpoint:r.breakpoint}:r.variant===o.centeredoverflow&&!i&&r.fallbackVariant!==o.centeredoverflow?{variant:r.fallbackVariant??o.none,breakpoint:r.breakpoint}:r.variant===o.horizontalscroll&&!e&&r.fallbackVariant===o.centeredoverflow?{variant:i?o.centeredoverflow:o.none,breakpoint:r.breakpoint}:r.variant===o.horizontalscroll&&!e&&r.fallbackVariant!==o.horizontalscroll?{variant:r.fallbackVariant??o.none,breakpoint:r.breakpoint}:r},I=t=>t&&A(t)?D(t):void 0;var o=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(o||{});const N=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],kt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],vt=({id:t,testId:a,className:n,children:l,breakpointConfig:r=N})=>{const[e,i]=c(),[s,T]=c(0),[m,z]=c(window.innerWidth),f=y(null),d=W();w(()=>{i(F(r,d,s,m))},[r,d,s,m]),w(()=>{var k;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&T(((k=f.current)==null?void 0:k.getBoundingClientRect().width)??0)},[e]),E(()=>z(window.innerWidth),["resize"],100);const C=I(e),x=B(u.table,C,n),b=v.createElement("table",{className:x,id:t,"data-testid":a,"data-analyticsid":V.Table,ref:f},l);return(e==null?void 0:e.variant)==="horizontalscroll"?v.createElement(S,{childWidth:s,testId:"horizontal-scroll"},b):b};export{Vt as HeaderCategory,o as ResponsiveTableVariant,At as SortDirection,vt as Table,ut as TableBody,zt as TableCell,yt as TableExpandedRow,Wt as TableExpanderCell,Et as TableHead,Dt as TableHeadCell,Ut as TableRow,Ct as TextAlign,vt as default,N as defaultConfig,kt as simpleConfig};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Table/utils.ts","../../../src/components/Table/Table.tsx"],"sourcesContent":["import { 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","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass } 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}\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}\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 }) => {\n const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n const [tableWidth, setTableWidth] = 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 setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n if (\n currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n ) {\n setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n }\n }, [currentConfig]);\n\n useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\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}>\n {children}\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","defaultConfig","simpleConfig","Table","id","testId","className","children","currentConfig","setCurrentConfig","useState","setTableWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_b","useLayoutEvent","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Table/utils.ts","../../../src/components/Table/Table.tsx"],"sourcesContent":["import { 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","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass } 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}\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}\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 }) => {\n const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n const [tableWidth, setTableWidth] = 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 }, [currentConfig]);\n\n useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\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}>\n {children}\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","defaultConfig","simpleConfig","Table","id","testId","className","children","currentConfig","setCurrentConfig","useState","setTableWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","useLayoutEvent","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}
|
package/package.json
CHANGED