@helsenorge/designsystem-react 7.0.0-beta.5 → 7.0.0

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 (8) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/components/Button/Button.stories.d.ts +1 -1
  3. package/components/Expander/Expander.d.ts +2 -0
  4. package/components/Expander/Expander.js +33 -31
  5. package/components/Expander/Expander.js.map +1 -1
  6. package/hooks/useExpand.d.ts +1 -1
  7. package/hooks/useToggle.d.ts +1 -1
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 7.0.0-beta.7 (2024-04-05)
2
+
3
+ ## 7.0.0-beta.6 (2024-04-05)
4
+
5
+ ## 7.0.0-beta.5 (2024-04-05)
6
+
7
+ ### Features
8
+
9
+ - expander ny prop contentclassnames
10
+ ([d83abda](https://github.com/helsenorge/designsystem/commit/d83abdaaf321131398450dbb5ea163a8ce61f54f)), closes
11
+ [#309420](https://github.com/helsenorge/designsystem/issues/309420)
12
+
13
+ ### Reverts
14
+
15
+ - bruk getSpacer på gamlemåten pga trøbbel i core-frontend
16
+ ([15b45fa](https://github.com/helsenorge/designsystem/commit/15b45fa5b8a56afb5befb4954aede3c2a3f518eb))
17
+ - react 17+ som peerdependency ([73fcee0](https://github.com/helsenorge/designsystem/commit/73fcee033cf6e17e0c35b7096cc7976bb6217fdb))
18
+
1
19
  ## 7.0.0-beta.3 (2024-04-04)
2
20
 
3
21
  ### Features
@@ -25,6 +43,34 @@
25
43
 
26
44
  - ts5, oppdater alle pakker ([d93bf76](https://github.com/helsenorge/designsystem/commit/d93bf76212b41b47aef279478b2af76705be2713))
27
45
 
46
+ ## [6.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.6.1&targetVersion=GTv6.6.2) (2024-04-03)
47
+
48
+ ### Bug Fixes
49
+
50
+ - fjern ikke-fungerende animasjon ([fa2f140](https://github.com/helsenorge/designsystem/commit/fa2f14035ef093eaedbbc3a6baf00857b355e851)),
51
+ closes [#313072](https://github.com/helsenorge/designsystem/issues/313072)
52
+ - iconwall fungerer igjen ([5538068](https://github.com/helsenorge/designsystem/commit/55380689ee7b806c28dfcc84718bf161e1e89e83)), closes
53
+ [#322532](https://github.com/helsenorge/designsystem/issues/322532)
54
+ - popmenu lukkes automatisk ved klikk på linker i menyen
55
+ ([e6693bb](https://github.com/helsenorge/designsystem/commit/e6693bb3dc2e47aa56555fad6dbeb812bceb91ea)), closes
56
+ [#321671](https://github.com/helsenorge/designsystem/issues/321671)
57
+
58
+ ## [6.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.6.0&targetVersion=GTv6.6.1) (2024-03-19)
59
+
60
+ ### Bug Fixes
61
+
62
+ - reactdaypicker styling eksporterer riktig
63
+ ([45352f0](https://github.com/helsenorge/designsystem/commit/45352f099804e22af77d6ee5c8e903865151ed2d)), closes
64
+ [#322222](https://github.com/helsenorge/designsystem/issues/322222)
65
+
66
+ ## [6.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.5.0&targetVersion=GTv6.6.0) (2024-03-15)
67
+
68
+ ### Features
69
+
70
+ - zindex med prop lagt til i datepicker dropdown expander og popover
71
+ ([915fabc](https://github.com/helsenorge/designsystem/commit/915fabcb890fe3d339d874a74701fbadb606dcc9)), closes
72
+ [#309420](https://github.com/helsenorge/designsystem/issues/309420)
73
+
28
74
  ## [6.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.4.0&targetVersion=GTv6.5.0) (2024-03-07)
29
75
 
30
76
  ### Features
package/components/Button/Button.stories.d.ts CHANGED
@@ -47,9 +47,9 @@ export declare const Concepts: Story;
47
47
  export declare const Icons: Story;
48
48
  export declare const LazyIcons: Story;
49
49
  export declare const Sizes: Story;
50
- export declare const Variants: Story;
51
50
  export declare const DarkMode: Story;
52
51
  export declare const Disabled: Story;
53
52
  export declare const Fluid: Story;
53
+ export declare const Variants: Story;
54
54
  export declare const Ellipsis: Story;
55
55
  export declare const UURightArrow: Story;
package/components/Expander/Expander.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface ExpanderProps {
12
12
  title: string;
13
13
  /** Sets the expanded content */
14
14
  children?: React.ReactNode;
15
+ /** Sets classnames on the content area */
16
+ contentClassNames?: string;
15
17
  /** Sets the size of the expander. Default: ExpanderSize.small */
16
18
  size?: ExpanderSize;
17
19
  /** Sets the background of the expander. Requires size=ExpanderSize.large. */
package/components/Expander/Expander.js CHANGED
@@ -1,31 +1,32 @@
1
1
  import r, { useRef as N } from "react";
2
2
  import d from "classnames";
3
- import { ZIndex as D, AnalyticsId as C, IconSize as p } from "../../constants.js";
4
- import { useExpand as O } from "../../hooks/useExpand.js";
5
- import { useHover as U } from "../../hooks/useHover.js";
6
- import { useSticky as Z } from "../../hooks/useSticky.js";
7
- import j from "../Button/Button.js";
3
+ import { ZIndex as O, AnalyticsId as C, IconSize as p } from "../../constants.js";
4
+ import { useExpand as U } from "../../hooks/useExpand.js";
5
+ import { useHover as Z } from "../../hooks/useHover.js";
6
+ import { useSticky as j } from "../../hooks/useSticky.js";
7
+ import q from "../Button/Button.js";
8
8
  import { Icon as _ } from "../Icon/Icon.js";
9
9
  import b from "../Icons/ChevronDown.js";
10
10
  import h from "../Icons/ChevronUp.js";
11
- import q from "../LazyIcon/LazyIcon.js";
11
+ import F from "../LazyIcon/LazyIcon.js";
12
12
  import e from "./styles.module.scss";
13
- var F = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(F || {});
14
- const G = (s) => {
13
+ var G = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(G || {});
14
+ const J = (s) => {
15
15
  const {
16
16
  title: x,
17
17
  children: z,
18
18
  size: n = "small",
19
19
  color: g,
20
+ contentClassNames: $,
20
21
  svgIcon: o,
21
- expanded: $ = !1,
22
- noNestedLine: k = !1,
23
- sticky: S = !1,
22
+ expanded: k = !1,
23
+ noNestedLine: S = !1,
24
+ sticky: w = !1,
24
25
  testId: f,
25
- onExpand: w,
26
- renderChildrenWhenClosed: R = !1,
27
- zIndex: W = D.ExpanderTrigger
28
- } = s, [t, u] = O($, w), E = N(null), l = N(null), { isHovered: i } = U(l), { isOutsideWindow: X, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = Z(E, l), a = S && t && X, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall, isHovered: i })), H = d(
26
+ onExpand: R,
27
+ renderChildrenWhenClosed: W = !1,
28
+ zIndex: X = O.ExpanderTrigger
29
+ } = s, [t, u] = U(k, R), E = N(null), l = N(null), { isHovered: i } = Z(l), { isOutsideWindow: H, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = j(E, l), a = w && t && H, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall, isHovered: i })), L = d(
29
30
  e.expander__trigger,
30
31
  n === "large" && e[`expander__trigger--${n}`],
31
32
  n === "large" && e[`expander__trigger--${g || "neutral"}`],
@@ -33,13 +34,13 @@ const G = (s) => {
33
34
  t && e["expander__trigger--expanded"],
34
35
  a && !c && e["expander__trigger--sticky"],
35
36
  a && c && e["expander__trigger--absolute"]
36
- ), L = () => /* @__PURE__ */ r.createElement(
37
+ ), T = () => /* @__PURE__ */ r.createElement(
37
38
  "button",
38
39
  {
39
40
  type: "button",
40
- className: H,
41
+ className: L,
41
42
  style: {
42
- zIndex: i || a ? W : void 0,
43
+ zIndex: i || a ? X : void 0,
43
44
  width: a && y ? `${y}px` : void 0
44
45
  },
45
46
  "aria-expanded": t,
@@ -49,19 +50,19 @@ const G = (s) => {
49
50
  "data-analyticsid": C.Expander
50
51
  },
51
52
  n === "small" && I("left"),
52
- o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(q, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
53
+ o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(F, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
53
54
  x,
54
55
  n === "large" && I("right")
55
- ), T = d(
56
+ ), B = d(
56
57
  e.expander__button,
57
58
  t && e["expander__button--expanded"],
58
59
  a && !c && e["expander__button--sticky"],
59
60
  a && c && e["expander__button--absolute"]
60
- ), B = () => /* @__PURE__ */ r.createElement(
61
- j,
61
+ ), A = () => /* @__PURE__ */ r.createElement(
62
+ q,
62
63
  {
63
64
  variant: "borderless",
64
- className: T,
65
+ className: B,
65
66
  "aria-expanded": t,
66
67
  ref: l,
67
68
  onClick: () => u(!t),
@@ -70,8 +71,8 @@ const G = (s) => {
70
71
  },
71
72
  /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall }),
72
73
  x
73
- ), A = () => {
74
- if (!R && !t)
74
+ ), D = () => {
75
+ if (!W && !t)
75
76
  return null;
76
77
  const m = d(
77
78
  e.expander__content,
@@ -79,7 +80,8 @@ const G = (s) => {
79
80
  n === "large" && e[`expander__content--${g || "neutral"}`],
80
81
  n === "large" && o && e["expander__content--icon"],
81
82
  t && e["expander__content--expanded"],
82
- n === "small" && !k && e["expander__content--nested-line"]
83
+ n === "small" && !S && e["expander__content--nested-line"],
84
+ $
83
85
  );
84
86
  return /* @__PURE__ */ r.createElement("div", { className: m }, z);
85
87
  };
@@ -90,12 +92,12 @@ const G = (s) => {
90
92
  ref: E,
91
93
  style: { paddingTop: a && v ? `${v}px` : void 0 }
92
94
  },
93
- n === "large" ? L() : B(),
94
- A()
95
+ n === "large" ? T() : A(),
96
+ D()
95
97
  );
96
- }, oe = G;
98
+ }, se = J;
97
99
  export {
98
- F as ExpanderSize,
99
- oe as default
100
+ G as ExpanderSize,
101
+ se as default
100
102
  };
101
103
  //# sourceMappingURL=Expander.js.map
package/components/Expander/Expander.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n title,\n children,\n size = ExpanderSize.small,\n color,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex = ZIndex.ExpanderTrigger,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n const isSticky = sticky && isExpanded && isOutsideWindow;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(\n styles['expander__button'],\n isExpanded && styles['expander__button--expanded'],\n isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n isSticky && isLeavingWindow && styles['expander__button--absolute']\n );\n\n const renderButton = (): React.ReactNode => (\n <Button\n variant=\"borderless\"\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n );\n\n return <div className={contentClassName}>{children}</div>;\n };\n\n return (\n <div\n className={styles['expander']}\n ref={expanderRef}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
1
+ {"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets classnames on the content area */\n contentClassNames?: string;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex = ZIndex.ExpanderTrigger,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n const isSticky = sticky && isExpanded && isOutsideWindow;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(\n styles['expander__button'],\n isExpanded && styles['expander__button--expanded'],\n isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n isSticky && isLeavingWindow && styles['expander__button--absolute']\n );\n\n const renderButton = (): React.ReactNode => (\n <Button\n variant=\"borderless\"\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n contentClassNames\n );\n\n return <div className={contentClassName}>{children}</div>;\n };\n\n return (\n <div\n className={styles['expander']}\n ref={expanderRef}\n style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n >\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
package/hooks/useExpand.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { Dispatch, SetStateAction } from 'react';
2
- export declare const useExpand: (expanded: boolean, onExpand?: ((isExpanded: boolean) => void) | undefined) => [boolean, Dispatch<SetStateAction<boolean>>];
2
+ export declare const useExpand: (expanded: boolean, onExpand?: (isExpanded: boolean) => void) => [boolean, Dispatch<SetStateAction<boolean>>];
package/hooks/useToggle.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * @param callback Funksjon som kalles når value endrer verdi (optional)
6
6
  * @returns Objekt med nåværende verdi og funksjon som kan kalles for å toggle verdien
7
7
  */
8
- export declare const useToggle: (initialValue: boolean, callback?: ((value: boolean) => void) | undefined) => {
8
+ export declare const useToggle: (initialValue: boolean, callback?: (value: boolean) => void) => {
9
9
  value: boolean;
10
10
  toggleValue: () => void;
11
11
  };
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helsenorge/designsystem.git"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "7.0.0-beta.5",
10
+ "version": "7.0.0",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "peerDependencies": {