@helsenorge/designsystem-react 15.0.0-beta.0 → 15.0.0-beta.1
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/lib/CHANGELOG.md +28 -0
- package/lib/Drawer.js +2 -2
- package/lib/Drawer.js.map +1 -1
- package/lib/FormGroup.js +3 -1
- package/lib/FormGroup.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/Filter/FilterSort/styles.module.scss +2 -0
- package/lib/components/FormGroup/FormGroup.d.ts +2 -0
- package/lib/components/Table/index.js +2 -2
- package/lib/components/Table/index.js.map +1 -1
- package/lib/floating-ui.react.js +4 -0
- package/lib/floating-ui.react.js.map +1 -1
- package/lib/resources/HN.Designsystem.Drawer.en-GB.json.d.ts +2 -2
- package/lib/utils6.js +2 -2
- package/lib/utils6.js.map +1 -1
- package/package.json +1 -1
package/lib/utils6.js
CHANGED
|
@@ -2,7 +2,7 @@ import { Breakpoint } from "./hooks/useBreakpoint.js";
|
|
|
2
2
|
import { r as ResponsiveTableVariant } from "./constants2.js";
|
|
3
3
|
import { isTouchDevice } from "./utils/device.js";
|
|
4
4
|
import React from "react";
|
|
5
|
-
import
|
|
5
|
+
import styles from "./components/Table/styles.module.scss";
|
|
6
6
|
//#region src/components/Table/utils.ts
|
|
7
7
|
/**
|
|
8
8
|
* Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint
|
|
@@ -15,7 +15,7 @@ var configUsesCss = (config) => config.variant === ResponsiveTableVariant.center
|
|
|
15
15
|
* @param config Konfigurasjon for responsiv oppførsel
|
|
16
16
|
* @returns CSS-klassenavn
|
|
17
17
|
*/
|
|
18
|
-
var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ?
|
|
18
|
+
var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
|
|
19
19
|
/**
|
|
20
20
|
* Sorter konfigurasjon etter breakpoints, fra største til minste
|
|
21
21
|
* @param a Konfigurasjon for responsiv oppførsel
|
package/lib/utils6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils6.js","names":[],"sources":["../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport type { ModeType } from './constants';\nimport type { BreakpointConfig } from './Table';\n\nimport { ResponsiveTableVariant } from './constants';\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\n/**\n * Map children and inject the `mode` prop into element children, but never on React.Fragment.\n * If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.\n */\nexport const mapChildrenWithMode = (children: React.ReactNode, mode: ModeType | undefined): React.ReactNode =>\n React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child;\n if (child.type === React.Fragment) {\n const fragmentChildren = (child.props as { children?: React.ReactNode }).children;\n const mapped = React.Children.map(fragmentChildren, gc =>\n React.isValidElement<{ mode?: ModeType }>(gc) ? React.cloneElement(gc, { mode }) : gc\n );\n return React.cloneElement(child, undefined, mapped);\n }\n return React.cloneElement(child as React.ReactElement<{ mode?: ModeType }>, { mode });\n });\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n const clone: Partial<T> = { ...obj };\n for (const k of keys) {\n delete clone[k];\n }\n return clone;\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;;;;;;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,
|
|
1
|
+
{"version":3,"file":"utils6.js","names":[],"sources":["../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport type { ModeType } from './constants';\nimport type { BreakpointConfig } from './Table';\n\nimport { ResponsiveTableVariant } from './constants';\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\n/**\n * Map children and inject the `mode` prop into element children, but never on React.Fragment.\n * If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.\n */\nexport const mapChildrenWithMode = (children: React.ReactNode, mode: ModeType | undefined): React.ReactNode =>\n React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child;\n if (child.type === React.Fragment) {\n const fragmentChildren = (child.props as { children?: React.ReactNode }).children;\n const mapped = React.Children.map(fragmentChildren, gc =>\n React.isValidElement<{ mode?: ModeType }>(gc) ? React.cloneElement(gc, { mode }) : gc\n );\n return React.cloneElement(child, undefined, mapped);\n }\n return React.cloneElement(child as React.ReactElement<{ mode?: ModeType }>, { mode });\n });\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n const clone: Partial<T> = { ...obj };\n for (const k of keys) {\n delete clone[k];\n }\n return clone;\n};\n"],"mappings":";;;;;;;;;;;AAgBA,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;CACtI,IAAI,MAAM,QAAQ,OAAO,EAAE;EACzB,OAAO,KAAK,4BAA4B;EAExC,OAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;QAC9D,IAAI,UAAU,4BAA4B,QAAQ,WAAW,EAClE,OAAO;;;;;;;;;AAWX,IAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;CAE7C,IAAI,CAAC,kBACH;CAGF,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;CAGH,OAAO;;;;;;;AAQT,IAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;;;;;;;AAQ/D,IAAa,iCAAiC,aAAqB,eAAwD;CACzH,IAAI,eAAe,YACjB;CAKF,OAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAAI,EAAuB,KAAK;;;;;;AAOjF,IAAa,uBAAuB,UAA2B,SAC7D,MAAM,SAAS,IAAI,WAAU,UAAS;CACpC,IAAI,CAAC,MAAM,eAAe,MAAM,EAAE,OAAO;CACzC,IAAI,MAAM,SAAS,MAAM,UAAU;EACjC,MAAM,mBAAoB,MAAM,MAAyC;EACzE,MAAM,SAAS,MAAM,SAAS,IAAI,mBAAkB,OAClD,MAAM,eAAoC,GAAG,GAAG,MAAM,aAAa,IAAI,EAAE,MAAM,CAAC,GAAG,GACpF;EACD,OAAO,MAAM,aAAa,OAAO,KAAA,GAAW,OAAO;;CAErD,OAAO,MAAM,aAAa,OAAkD,EAAE,MAAM,CAAC;EACrF;;;;AAKJ,IAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAM,QAAoB,EAAE,GAAG,KAAK;CACpC,KAAK,MAAM,KAAK,MACd,OAAO,MAAM;CAEf,OAAO"}
|
package/package.json
CHANGED