@postenbring/hedwig-react 0.0.82 → 0.0.84

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 (213) hide show
  1. package/dist/accordion/accordion-content.d.ts.map +1 -1
  2. package/dist/accordion/accordion-content.js +1 -0
  3. package/dist/accordion/accordion-content.js.map +1 -1
  4. package/dist/accordion/accordion-content.mjs +2 -2
  5. package/dist/accordion/accordion-header.d.ts.map +1 -1
  6. package/dist/accordion/accordion-header.js +1 -0
  7. package/dist/accordion/accordion-header.js.map +1 -1
  8. package/dist/accordion/accordion-header.mjs +2 -2
  9. package/dist/accordion/accordion-item.d.ts.map +1 -1
  10. package/dist/accordion/accordion-item.js +2 -1
  11. package/dist/accordion/accordion-item.js.map +1 -1
  12. package/dist/accordion/accordion-item.mjs +2 -2
  13. package/dist/accordion/accordion.js +4 -1
  14. package/dist/accordion/accordion.js.map +1 -1
  15. package/dist/accordion/accordion.mjs +5 -5
  16. package/dist/accordion/context.d.ts +1 -0
  17. package/dist/accordion/context.d.ts.map +1 -1
  18. package/dist/accordion/context.js.map +1 -1
  19. package/dist/accordion/context.mjs +1 -1
  20. package/dist/accordion/index.js +4 -1
  21. package/dist/accordion/index.js.map +1 -1
  22. package/dist/accordion/index.mjs +7 -7
  23. package/dist/badge/badge.d.ts +13 -4
  24. package/dist/badge/badge.d.ts.map +1 -1
  25. package/dist/badge/badge.js +22 -42
  26. package/dist/badge/badge.js.map +1 -1
  27. package/dist/badge/badge.mjs +3 -9
  28. package/dist/badge/index.d.ts +1 -1
  29. package/dist/badge/index.d.ts.map +1 -1
  30. package/dist/badge/index.js +22 -42
  31. package/dist/badge/index.js.map +1 -1
  32. package/dist/badge/index.mjs +3 -9
  33. package/dist/button/button.d.ts +17 -5
  34. package/dist/button/button.d.ts.map +1 -1
  35. package/dist/button/button.js +4 -17
  36. package/dist/button/button.js.map +1 -1
  37. package/dist/button/button.mjs +3 -5
  38. package/dist/button/index.d.ts +1 -1
  39. package/dist/button/index.d.ts.map +1 -1
  40. package/dist/button/index.js +4 -17
  41. package/dist/button/index.js.map +1 -1
  42. package/dist/button/index.mjs +3 -5
  43. package/dist/{chunk-67TP3E2D.mjs → chunk-6FBPKLWB.mjs} +3 -3
  44. package/dist/chunk-6FBPKLWB.mjs.map +1 -0
  45. package/dist/{chunk-KEKPEN2C.mjs → chunk-6MR5XZOX.mjs} +4 -16
  46. package/dist/chunk-6MR5XZOX.mjs.map +1 -0
  47. package/dist/{chunk-4WQWU5TL.mjs → chunk-AXQCREUJ.mjs} +2 -2
  48. package/dist/chunk-AXQCREUJ.mjs.map +1 -0
  49. package/dist/{chunk-M3Y3XOGC.mjs → chunk-B6L7IFDX.mjs} +6 -6
  50. package/dist/{chunk-F2C3KZFX.mjs → chunk-BVPSZ3JI.mjs} +2 -2
  51. package/dist/chunk-BVPSZ3JI.mjs.map +1 -0
  52. package/dist/chunk-CYDWEPFL.mjs +1 -0
  53. package/dist/{chunk-6AGDK5V3.mjs → chunk-EVUKWONG.mjs} +2 -2
  54. package/dist/chunk-GQUFERB2.mjs +37 -0
  55. package/dist/chunk-GQUFERB2.mjs.map +1 -0
  56. package/dist/{chunk-C34HEQXO.mjs → chunk-GRWLX5BC.mjs} +5 -5
  57. package/dist/chunk-GRWLX5BC.mjs.map +1 -0
  58. package/dist/{chunk-3EFAPJ3H.mjs → chunk-HJYS664B.mjs} +3 -2
  59. package/dist/chunk-HJYS664B.mjs.map +1 -0
  60. package/dist/{chunk-LCJSUBCZ.mjs → chunk-IHZ2MRF6.mjs} +4 -4
  61. package/dist/chunk-IHZ2MRF6.mjs.map +1 -0
  62. package/dist/{chunk-3WVRY6CC.mjs → chunk-L4YBHIS3.mjs} +20 -12
  63. package/dist/chunk-L4YBHIS3.mjs.map +1 -0
  64. package/dist/{chunk-6R7AXKBR.mjs → chunk-OIC2CPID.mjs} +19 -13
  65. package/dist/chunk-OIC2CPID.mjs.map +1 -0
  66. package/dist/{chunk-7UD72WOC.mjs → chunk-QZZIOBF4.mjs} +2 -2
  67. package/dist/{chunk-A2H2LAII.mjs → chunk-SKVM7G76.mjs} +5 -4
  68. package/dist/chunk-SKVM7G76.mjs.map +1 -0
  69. package/dist/chunk-SRLM3K2X.mjs +1 -0
  70. package/dist/{chunk-DEX36MFK.mjs → chunk-TDXU2IC6.mjs} +3 -4
  71. package/dist/chunk-TDXU2IC6.mjs.map +1 -0
  72. package/dist/{chunk-GLAEI3SD.mjs → chunk-VCQIR53Y.mjs} +3 -2
  73. package/dist/chunk-VCQIR53Y.mjs.map +1 -0
  74. package/dist/{chunk-V3PAFMK5.mjs → chunk-YQFL5UN4.mjs} +1 -1
  75. package/dist/chunk-YQFL5UN4.mjs.map +1 -0
  76. package/dist/footer/footer.js +7 -15
  77. package/dist/footer/footer.js.map +1 -1
  78. package/dist/footer/footer.mjs +7 -7
  79. package/dist/footer/index.js +7 -15
  80. package/dist/footer/index.js.map +1 -1
  81. package/dist/footer/index.mjs +7 -7
  82. package/dist/form/date-picker/date-picker.js +1 -1
  83. package/dist/form/date-picker/date-picker.js.map +1 -1
  84. package/dist/form/date-picker/date-picker.mjs +2 -2
  85. package/dist/form/date-picker/index.js +1 -1
  86. package/dist/form/date-picker/index.js.map +1 -1
  87. package/dist/form/date-picker/index.mjs +2 -2
  88. package/dist/form/index.js +1 -1
  89. package/dist/form/index.js.map +1 -1
  90. package/dist/form/index.mjs +2 -2
  91. package/dist/index-no-css.d.ts +1 -1
  92. package/dist/index-no-css.d.ts.map +1 -1
  93. package/dist/index-no-css.js +237 -242
  94. package/dist/index-no-css.js.map +1 -1
  95. package/dist/index-no-css.mjs +43 -42
  96. package/dist/index.js +237 -242
  97. package/dist/index.js.map +1 -1
  98. package/dist/index.mjs +43 -42
  99. package/dist/index.mjs.map +1 -1
  100. package/dist/modal/index.js +1 -1
  101. package/dist/modal/index.js.map +1 -1
  102. package/dist/modal/index.mjs +2 -2
  103. package/dist/modal/modal.d.ts +4 -4
  104. package/dist/modal/modal.js +1 -1
  105. package/dist/modal/modal.js.map +1 -1
  106. package/dist/modal/modal.mjs +2 -2
  107. package/dist/navbar/index.js +18 -12
  108. package/dist/navbar/index.js.map +1 -1
  109. package/dist/navbar/index.mjs +3 -3
  110. package/dist/navbar/navbar-expandable-menu.d.ts +7 -1
  111. package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -1
  112. package/dist/navbar/navbar-expandable-menu.js +18 -12
  113. package/dist/navbar/navbar-expandable-menu.js.map +1 -1
  114. package/dist/navbar/navbar-expandable-menu.mjs +2 -2
  115. package/dist/navbar/navbar.js +18 -12
  116. package/dist/navbar/navbar.js.map +1 -1
  117. package/dist/navbar/navbar.mjs +3 -3
  118. package/dist/show-more/index.d.ts +0 -2
  119. package/dist/show-more/index.d.ts.map +1 -1
  120. package/dist/show-more/index.js +5 -143
  121. package/dist/show-more/index.js.map +1 -1
  122. package/dist/show-more/index.mjs +1 -6
  123. package/dist/tabs/index.js +1 -1
  124. package/dist/tabs/index.js.map +1 -1
  125. package/dist/tabs/index.mjs +3 -3
  126. package/dist/tabs/tabs-list.js +1 -1
  127. package/dist/tabs/tabs-list.js.map +1 -1
  128. package/dist/tabs/tabs-list.mjs +2 -2
  129. package/dist/tabs/tabs.js +1 -1
  130. package/dist/tabs/tabs.js.map +1 -1
  131. package/dist/tabs/tabs.mjs +3 -3
  132. package/dist/utils/auto-animate-height.d.ts.map +1 -0
  133. package/dist/{utilities → utils}/auto-animate-height.js +3 -3
  134. package/dist/utils/auto-animate-height.js.map +1 -0
  135. package/dist/utils/auto-animate-height.mjs +9 -0
  136. package/dist/{utilities → utils}/index.d.ts +1 -0
  137. package/dist/utils/index.d.ts.map +1 -0
  138. package/dist/{utilities → utils}/index.js +81 -11
  139. package/dist/utils/index.js.map +1 -0
  140. package/dist/utils/index.mjs +19 -0
  141. package/dist/{utils.d.ts → utils/utils.d.ts} +0 -4
  142. package/dist/utils/utils.d.ts.map +1 -0
  143. package/dist/{utils.js → utils/utils.js} +1 -3
  144. package/dist/utils/utils.js.map +1 -0
  145. package/dist/utils/utils.mjs +14 -0
  146. package/dist/warning-banner/index.js +28 -94
  147. package/dist/warning-banner/index.js.map +1 -1
  148. package/dist/warning-banner/index.mjs +1 -3
  149. package/dist/warning-banner/warning-banner.d.ts.map +1 -1
  150. package/dist/warning-banner/warning-banner.js +28 -94
  151. package/dist/warning-banner/warning-banner.js.map +1 -1
  152. package/dist/warning-banner/warning-banner.mjs +1 -3
  153. package/package.json +5 -5
  154. package/src/accordion/accordion-content.tsx +1 -0
  155. package/src/accordion/accordion-header.tsx +1 -0
  156. package/src/accordion/accordion-item.tsx +3 -2
  157. package/src/accordion/context.ts +1 -0
  158. package/src/badge/badge.stories.tsx +6 -4
  159. package/src/badge/badge.tsx +32 -40
  160. package/src/badge/index.tsx +1 -1
  161. package/src/button/button.stories.tsx +19 -17
  162. package/src/button/button.tsx +19 -18
  163. package/src/button/index.tsx +1 -1
  164. package/src/footer/footer.tsx +3 -3
  165. package/src/form/date-picker/date-picker.tsx +1 -1
  166. package/src/form/input/input.stories.tsx +6 -6
  167. package/src/index-no-css.tsx +1 -1
  168. package/src/modal/modal.stories.tsx +9 -9
  169. package/src/modal/modal.tsx +5 -5
  170. package/src/navbar/navbar-expandable-menu.tsx +26 -15
  171. package/src/show-more/index.ts +0 -3
  172. package/src/show-more/show-more.stories.tsx +1 -1
  173. package/src/skeleton/skeleton.stories.tsx +3 -3
  174. package/src/tabs/tabs-list.tsx +1 -1
  175. package/src/{utilities → utils}/auto-animate-height.tsx +1 -1
  176. package/src/{utilities → utils}/index.ts +2 -0
  177. package/src/{utils.ts → utils/utils.ts} +1 -1
  178. package/src/warning-banner/warning-banner.tsx +24 -13
  179. package/dist/chunk-3EFAPJ3H.mjs.map +0 -1
  180. package/dist/chunk-3WVRY6CC.mjs.map +0 -1
  181. package/dist/chunk-4WQWU5TL.mjs.map +0 -1
  182. package/dist/chunk-67TP3E2D.mjs.map +0 -1
  183. package/dist/chunk-6R7AXKBR.mjs.map +0 -1
  184. package/dist/chunk-A2H2LAII.mjs.map +0 -1
  185. package/dist/chunk-C34HEQXO.mjs.map +0 -1
  186. package/dist/chunk-DEX36MFK.mjs.map +0 -1
  187. package/dist/chunk-DZNH5JHY.mjs +0 -1
  188. package/dist/chunk-F2C3KZFX.mjs.map +0 -1
  189. package/dist/chunk-GLAEI3SD.mjs.map +0 -1
  190. package/dist/chunk-KEKPEN2C.mjs.map +0 -1
  191. package/dist/chunk-LCJSUBCZ.mjs.map +0 -1
  192. package/dist/chunk-MSFHJVHD.mjs +0 -1
  193. package/dist/chunk-P6KBFRF4.mjs +0 -54
  194. package/dist/chunk-P6KBFRF4.mjs.map +0 -1
  195. package/dist/chunk-V3PAFMK5.mjs.map +0 -1
  196. package/dist/utilities/auto-animate-height.d.ts.map +0 -1
  197. package/dist/utilities/auto-animate-height.js.map +0 -1
  198. package/dist/utilities/auto-animate-height.mjs +0 -9
  199. package/dist/utilities/index.d.ts.map +0 -1
  200. package/dist/utilities/index.js.map +0 -1
  201. package/dist/utilities/index.mjs +0 -10
  202. package/dist/utils.d.ts.map +0 -1
  203. package/dist/utils.js.map +0 -1
  204. package/dist/utils.mjs +0 -16
  205. /package/dist/{chunk-M3Y3XOGC.mjs.map → chunk-B6L7IFDX.mjs.map} +0 -0
  206. /package/dist/{chunk-DZNH5JHY.mjs.map → chunk-CYDWEPFL.mjs.map} +0 -0
  207. /package/dist/{chunk-6AGDK5V3.mjs.map → chunk-EVUKWONG.mjs.map} +0 -0
  208. /package/dist/{chunk-7UD72WOC.mjs.map → chunk-QZZIOBF4.mjs.map} +0 -0
  209. /package/dist/{chunk-MSFHJVHD.mjs.map → chunk-SRLM3K2X.mjs.map} +0 -0
  210. /package/dist/{utilities → utils}/auto-animate-height.d.ts +0 -0
  211. /package/dist/{utilities → utils}/auto-animate-height.mjs.map +0 -0
  212. /package/dist/{utilities → utils}/index.mjs.map +0 -0
  213. /package/dist/{utils.mjs.map → utils/utils.mjs.map} +0 -0
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
3
  import { useState } from "react";
4
- import { PrimaryButton, SecondaryButton } from "../../button";
4
+ import { Button } from "../../button";
5
5
  import { HStack, VStack } from "../../layout";
6
6
  import { Input } from ".";
7
7
 
@@ -118,7 +118,7 @@ export const TrackingNumberSearch: Story = {
118
118
  }}
119
119
  >
120
120
  <Input label="Sporingsnummer" style={{ width: "100%" }} />
121
- <PrimaryButton size="large">Spor</PrimaryButton>
121
+ <Button size="large">Spor</Button>
122
122
  </HStack>
123
123
  ),
124
124
  };
@@ -148,16 +148,16 @@ export const FormWithErrorsOnSubmit: Story = {
148
148
  <Input errorMessage={errors.Two} label="Two" name="Two" />
149
149
  <Input errorMessage={errors.Three} label="Three" name="Three" />
150
150
  <VStack gap="4">
151
- <PrimaryButton type="submit">Submit</PrimaryButton>
152
- <SecondaryButton
153
- fill="outline"
151
+ <Button type="submit">Submit</Button>
152
+ <Button
153
+ variant="secondary-outline"
154
154
  onClick={() => {
155
155
  setErrors({});
156
156
  }}
157
157
  type="reset"
158
158
  >
159
159
  Reset
160
- </SecondaryButton>
160
+ </Button>
161
161
  </VStack>
162
162
  </form>
163
163
  </VStack>
@@ -21,5 +21,5 @@ export * from "./styled-html";
21
21
  export * from "./table";
22
22
  export * from "./tabs";
23
23
  export * from "./text";
24
- export * from "./utilities";
24
+ export * from "./utils";
25
25
  export * from "./warning-banner";
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
3
  import { useRef } from "react";
4
- import { PrimaryButton } from "../button";
4
+ import { Button } from "../button";
5
5
  import { Link } from "../link";
6
6
  import { Message } from "../message";
7
7
  import { StyledHtml } from "../styled-html";
@@ -24,7 +24,7 @@ export const Main = {
24
24
 
25
25
  return (
26
26
  <>
27
- <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
27
+ <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
28
28
  <Modal ref={modalRef} {...args}>
29
29
  <Modal.Header>Dialog header</Modal.Header>
30
30
  <Modal.Content>
@@ -35,10 +35,10 @@ export const Main = {
35
35
  </Modal.Content>
36
36
  <Modal.Footer>
37
37
  <HStack gap="16" wrap>
38
- <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
39
- <PrimaryButton fill="outline" onClick={onClose}>
38
+ <Button onClick={onMainAction}>Main action</Button>
39
+ <Button variant="primary-outline" onClick={onClose}>
40
40
  Cancel
41
- </PrimaryButton>
41
+ </Button>
42
42
  </HStack>
43
43
  </Modal.Footer>
44
44
  </Modal>
@@ -53,7 +53,7 @@ export const ShareParcelModal = {
53
53
  const open = window.location.search.includes("viewMode=story");
54
54
  return (
55
55
  <>
56
- <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
56
+ <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
57
57
  <Modal ref={modalRef} {...args} closeOnBackdropClick open={open}>
58
58
  <Modal.Header>Legg til pakken</Modal.Header>
59
59
  <Modal.Content>
@@ -67,7 +67,7 @@ export const ShareParcelModal = {
67
67
  </StyledHtml>
68
68
  </Modal.Content>
69
69
  <Modal.Footer>
70
- <PrimaryButton fullWidth="mobile">Legg til pakken i Posten-appen </PrimaryButton>
70
+ <Button fullWidth="mobile">Legg til pakken i Posten-appen </Button>
71
71
  </Modal.Footer>
72
72
  </Modal>
73
73
  </>
@@ -136,9 +136,9 @@ export const AsAReadMore: Story = {
136
136
  </Modal.Content>
137
137
 
138
138
  <Modal.Footer>
139
- <PrimaryButton fullWidth="mobile" onClick={() => modalRef.current?.close()}>
139
+ <Button fullWidth="mobile" onClick={() => modalRef.current?.close()}>
140
140
  Lukk
141
- </PrimaryButton>
141
+ </Button>
142
142
  </Modal.Footer>
143
143
  </Modal>
144
144
  </>
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useRef } from "react";
2
2
  import { clsx } from "@postenbring/hedwig-css/typed-classname";
3
3
  import { Slot } from "@radix-ui/react-slot";
4
4
  import { Box } from "../box/box";
5
- import { useMergeRefs } from "../utils";
5
+ import { useMergeRefs } from "../utils/utils";
6
6
 
7
7
  interface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
8
8
  /**
@@ -96,7 +96,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
96
96
  *
97
97
  * return (
98
98
  * <>
99
- * <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
99
+ * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
100
100
  * <Modal ref={modalRef}>
101
101
  * <Modal.Header>Dialog header</Modal.Header>
102
102
  * <Modal.Content>
@@ -107,10 +107,10 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
107
107
  * </Modal.Content>
108
108
  * <Modal.Footer>
109
109
  * <HStack gap="16" wrap>
110
- * <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
111
- * <PrimaryButton fill="outline" onClick={onClose}>
110
+ * <Button onClick={onMainAction}>Main action</Button>
111
+ * <Button variant="primary-outline" onClick={onClose}>
112
112
  * Cancel
113
- * </PrimaryButton>
113
+ * </Button>
114
114
  * </HStack>
115
115
  * </Modal.Footer>
116
116
  * </Modal>
@@ -1,15 +1,21 @@
1
1
  import { createContext, useContext, forwardRef, useState, useEffect, useId } from "react";
2
2
  import { clsx } from "@postenbring/hedwig-css/typed-classname";
3
- import { focusTrap } from "../utils";
3
+ import { focusTrap } from "../utils/utils";
4
4
  import { CloseIcon, MenuIcon } from "./icons";
5
5
 
6
- const expandableMenuContext = createContext([
7
- false as boolean,
8
- () => {
9
- // Empty
10
- },
11
- ] as const);
12
- export const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);
6
+ interface ExpandableMenuContextProps {
7
+ open: boolean;
8
+ setOpen: (open: boolean) => void;
9
+ contentId: string;
10
+ }
11
+ const ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);
12
+ export const useNavbarExpendableMenuContext = () => {
13
+ const value = useContext(ExpandableMenuContext);
14
+ if (value === null) {
15
+ throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
16
+ }
17
+ return value;
18
+ };
13
19
 
14
20
  export interface NavbarExpandableMenuProps {
15
21
  children: React.ReactNode;
@@ -23,10 +29,8 @@ export interface NavbarExpandableMenuProps {
23
29
  * If we want a sticky header in the future the scrolling should be configurable
24
30
  */
25
31
  export function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {
32
+ const contentId = useId();
26
33
  const [open, setOpen] = useState(false);
27
- function toggleOpen() {
28
- setOpen((prev) => !prev);
29
- }
30
34
 
31
35
  useEffect(() => {
32
36
  if (open) {
@@ -44,9 +48,9 @@ export function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {
44
48
  }, [open]);
45
49
 
46
50
  return (
47
- <expandableMenuContext.Provider value={[open, toggleOpen]}>
51
+ <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>
48
52
  {children}
49
- </expandableMenuContext.Provider>
53
+ </ExpandableMenuContext.Provider>
50
54
  );
51
55
  }
52
56
  NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
@@ -80,7 +84,7 @@ export const NavbarExpandableMenuTrigger = forwardRef<
80
84
  },
81
85
  ref,
82
86
  ) => {
83
- const [open, toggleOpen] = useNavbarExpendableMenuContext();
87
+ const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
84
88
 
85
89
  // Measure the width of the text when open and closed and choose the widest one
86
90
  // This is to ensure that the button doesn't change size when the text changes
@@ -99,8 +103,14 @@ export const NavbarExpandableMenuTrigger = forwardRef<
99
103
  const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
100
104
  const icon = open ? <CloseIcon /> : <MenuIcon />;
101
105
 
106
+ function toggleOpen() {
107
+ setOpen(!open);
108
+ }
109
+
102
110
  return (
103
111
  <button
112
+ aria-expanded={open}
113
+ aria-controls={contentId}
104
114
  className={clsx("hds-navbar__item", className as undefined)}
105
115
  onClick={toggleOpen}
106
116
  ref={ref}
@@ -160,10 +170,11 @@ export const NavbarExpandableMenuContent = forwardRef<
160
170
  HTMLDivElement,
161
171
  NavbarExpandableMenuContentProps
162
172
  >(({ children, className, ...rest }, ref) => {
163
- const [open] = useNavbarExpendableMenuContext();
173
+ const { contentId, open } = useNavbarExpendableMenuContext();
164
174
  return (
165
175
  <section
166
176
  {...rest}
177
+ id={contentId}
167
178
  className={clsx("hds-navbar__expandable-menu-content", className as undefined)}
168
179
  data-state={open ? "open" : "closed"}
169
180
  {...{ inert: open ? undefined : "true" }}
@@ -1,5 +1,2 @@
1
- export { AutoAnimateHeight } from "../utilities/auto-animate-height";
2
- export type * from "../utilities/auto-animate-height";
3
-
4
1
  export { ShowMoreButton } from "./show-more";
5
2
  export type * from "./show-more";
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
4
4
  import { useRef, useState } from "react";
5
5
  import { flushSync } from "react-dom";
6
6
  import { StyledHtml } from "../styled-html";
7
- import { AutoAnimateHeight } from "../utilities/auto-animate-height";
7
+ import { AutoAnimateHeight } from "../utils/auto-animate-height";
8
8
  import { ShowMoreButton } from ".";
9
9
 
10
10
  const meta: Meta<typeof ShowMoreButton> = {
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
5
5
  import { StyledHtml } from "../styled-html";
6
6
  import { Card } from "../card";
7
7
  import { CardStory } from "../card/card.stories";
8
- import { PrimaryButton } from "../button";
8
+ import { Button } from "../button";
9
9
  import { HStack, VStack } from "../layout";
10
10
  import { Skeleton } from ".";
11
11
 
@@ -91,14 +91,14 @@ export const LoadingCards: Story = {
91
91
  const card = isLoading ? skeletonCard : realCard;
92
92
  return (
93
93
  <div>
94
- <PrimaryButton
94
+ <Button
95
95
  size="small"
96
96
  onClick={() => {
97
97
  setIsLoading(true);
98
98
  }}
99
99
  >
100
100
  Reload
101
- </PrimaryButton>
101
+ </Button>
102
102
  <p className="hds-mt-8">Only use greytones, never any red or green colors.</p>
103
103
  <HStack className="hds-mt-16" wrap gap="24">
104
104
  {card}
@@ -1,7 +1,7 @@
1
1
  import type { HTMLAttributes, ReactElement, MouseEvent } from "react";
2
2
  import { forwardRef, useEffect, useRef } from "react";
3
3
  import { clsx } from "@postenbring/hedwig-css/typed-classname";
4
- import { useResize, useHydrated, useMergeRefs } from "../utils";
4
+ import { useResize, useHydrated, useMergeRefs } from "../utils/utils";
5
5
  import { useTabsContext } from "./context";
6
6
 
7
7
  export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
@@ -1,5 +1,5 @@
1
1
  import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
2
- import { useMergeRefs } from "../utils";
2
+ import { useMergeRefs } from "./utils";
3
3
 
4
4
  export interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  /**
@@ -1,2 +1,4 @@
1
+ export * from "./utils";
2
+
1
3
  export { AutoAnimateHeight } from "./auto-animate-height";
2
4
  export type * from "./auto-animate-height";
@@ -103,7 +103,7 @@ export function focusTrap(element: HTMLElement) {
103
103
  /**
104
104
  * Unset the `inert` attribute on all elements given
105
105
  */
106
- export function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {
106
+ function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {
107
107
  for (const el of inertElements) {
108
108
  el.removeAttribute("inert");
109
109
  }
@@ -1,7 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
- import React, { forwardRef, useState } from "react";
2
+ import React, { forwardRef, useId, useState } from "react";
3
3
  import { clsx } from "@postenbring/hedwig-css/typed-classname";
4
- import { Box } from "../box";
5
4
 
6
5
  export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
7
6
  title: ReactNode;
@@ -10,36 +9,47 @@ export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivEle
10
9
 
11
10
  export const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(
12
11
  ({ title, description, className, ...rest }, ref) => {
12
+ const descriptionId = useId();
13
13
  const expandable = !!description;
14
14
  return (
15
- <Box {...rest} className={clsx("hds-warning-banner", className as undefined)} ref={ref}>
16
- <WarningBannerTitle variant={expandable ? "expandable" : "default"}>
15
+ <div {...rest} className={clsx("hds-warning-banner", className as undefined)} ref={ref}>
16
+ <WarningBannerTitle
17
+ variant={expandable ? "expandable" : "default"}
18
+ descriptionId={descriptionId}
19
+ >
17
20
  {title}
18
21
  </WarningBannerTitle>
19
- {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}
20
- </Box>
22
+ {expandable ? (
23
+ <WarningBannerDescription id={descriptionId}>{description}</WarningBannerDescription>
24
+ ) : null}
25
+ </div>
21
26
  );
22
27
  },
23
28
  );
24
29
  WarningBanner.displayName = "WarningBanner";
25
30
 
26
31
  type WarningBannerTitleProps =
27
- | ({ variant: "expandable" } & React.ButtonHTMLAttributes<HTMLButtonElement>)
28
- | ({ variant: "default" } & React.HTMLAttributes<HTMLParagraphElement>);
32
+ | ({
33
+ variant: "expandable";
34
+ descriptionId: string;
35
+ } & React.ButtonHTMLAttributes<HTMLButtonElement>)
36
+ | ({ variant: "default"; descriptionId?: string } & React.HTMLAttributes<HTMLParagraphElement>);
29
37
 
30
38
  const WarningBannerTitle = forwardRef<
31
39
  HTMLButtonElement | HTMLParagraphElement,
32
40
  WarningBannerTitleProps
33
- >(({ variant, children, className, ...rest }, ref) => {
41
+ >(({ variant, descriptionId, children, className, ...rest }, ref) => {
34
42
  const [open, setOpen] = useState<boolean>(false);
35
43
  if (variant === "expandable") {
36
44
  return (
37
45
  <button
38
46
  {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
47
+ aria-expanded={open}
48
+ aria-controls={descriptionId}
49
+ data-state={open ? "open" : "closed"}
39
50
  className={clsx(
40
51
  "hds-warning-banner__title",
41
52
  "hds-warning-banner__title-trigger",
42
- { "hds-warning-banner--closed": !open },
43
53
  className as undefined,
44
54
  )}
45
55
  onClick={() => {
@@ -48,7 +58,7 @@ const WarningBannerTitle = forwardRef<
48
58
  ref={ref as React.Ref<HTMLButtonElement>}
49
59
  type="button"
50
60
  >
51
- <span>{children}</span>
61
+ <div>{children}</div>
52
62
  </button>
53
63
  );
54
64
  }
@@ -64,11 +74,12 @@ const WarningBannerTitle = forwardRef<
64
74
  });
65
75
  WarningBannerTitle.displayName = "WarningBannerTitle";
66
76
 
67
- type WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
77
+ type WarningBannerDescriptionProps = { id: string } & React.HTMLAttributes<HTMLParagraphElement>;
68
78
  const WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(
69
- ({ className, ...rest }, ref) => {
79
+ ({ className, id, ...rest }, ref) => {
70
80
  return (
71
81
  <p
82
+ id={id}
72
83
  className={clsx("hds-warning-banner__description", className as undefined)}
73
84
  ref={ref}
74
85
  {...rest}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/accordion/accordion-header.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n ({ children, className, onClick, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n context.setOpen(!context.open);\n onClick?.(e);\n };\n return (\n <button\n {...rest}\n aria-expanded={context.open}\n data-state={context.open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item-header\", className as undefined)}\n onClick={expandOrCollapse}\n ref={ref}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AA2Bb;AApBD,IAAM,kBAAkB;AAAA,EAC7B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAV1B,IAUG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,UAAM,mBAAmB,CAAC,MAAqC;AAC7D,cAAQ,QAAQ,CAAC,QAAQ,IAAI;AAC7B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,iBAAe,QAAQ;AAAA,QACvB,cAAY,QAAQ,OAAO,SAAS;AAAA,QACpC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/warning-banner/warning-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n title: ReactNode;\n description?: ReactNode;\n}\n\nexport const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(\n ({ title, description, className, ...rest }, ref) => {\n const expandable = !!description;\n return (\n <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n {title}\n </WarningBannerTitle>\n {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n </Box>\n );\n },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n | ({ variant: \"expandable\" } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n | ({ variant: \"default\" } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n HTMLButtonElement | HTMLParagraphElement,\n WarningBannerTitleProps\n>(({ variant, children, className, ...rest }, ref) => {\n const [open, setOpen] = useState<boolean>(false);\n if (variant === \"expandable\") {\n return (\n <button\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n className={clsx(\n \"hds-warning-banner__title\",\n \"hds-warning-banner__title-trigger\",\n { \"hds-warning-banner--closed\": !open },\n className as undefined,\n )}\n onClick={() => {\n setOpen((prev) => !prev);\n }}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n }\n return (\n <p\n {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}\n className={clsx(\"hds-warning-banner__title\", className as undefined)}\n ref={ref as React.Ref<HTMLParagraphElement>}\n >\n {children}\n </p>\n );\n});\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\ntype WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n ({ className, ...rest }, ref) => {\n return (\n <p\n className={clsx(\"hds-warning-banner__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n"],"mappings":";;;;;;;;;;AACA,SAAgB,YAAY,gBAAgB;AAC5C,SAAS,YAAY;AAYf,SACE,KADF;AAJC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAXzB,IAWG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,qBAAC,sCAAQ,OAAR,EAAc,WAAW,KAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA,0BAAC,sBAAmB,SAAS,aAAa,eAAe,WACtD,iBACH;AAAA,MACC,aAAa,oBAAC,4BAA0B,uBAAY,IAA8B;AAAA,QACrF;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAM5B,IAAM,qBAAqB,WAGzB,CAAC,IAA2C,QAAQ;AAAnD,eAAE,WAAS,UAAU,UAhCxB,IAgCG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,EAAE,8BAA8B,CAAC,KAAK;AAAA,UACtC;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,qCACM,OADN;AAAA,MAEC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,MACnE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,mBAAmB,cAAc;AAGjC,IAAM,2BAA2B;AAAA,EAC/B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YApEL,IAoEG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/tabs/tabs-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated, useMergeRefs } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n /**\n * Direction of the tabs. Can either be vertical or horizontal.\n * Horizontal breaks on window width with fallback back to vertical\n *\n * @default \"horizontal\"\n */\n direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n const { activeTabId } = useTabsContext();\n const tabsListRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([tabsListRef, ref]);\n const { width: tabsWidth } = useResize(tabsListRef);\n\n const isClientSide = useHydrated();\n const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n const wideEnough = innerWidth >= tabsWidth;\n\n const previousTabId = useRef(activeTabId);\n\n // Marker animation\n useEffect(() => {\n const tabList = tabsListRef.current;\n const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n if (!activeTab || !tabList) return;\n\n const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n // Calculate the height and width of the marker relative to the container\n const height = offsetHeight / containerHeight;\n const width = offsetWidth / containerWidth;\n\n // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n // Start with border fallback, then switch to the animated marker when the user changes tabs\n // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n if (previousTabId.current !== activeTabId) {\n tabsListRef.current.style.setProperty(\n \"--_hds-tabs-marker-animated-color\",\n \"var(--_hds-tabs-marker-color)\",\n );\n tabsListRef.current.style.setProperty(\n \"--_hds-tabs-marker-border-fallback-color\",\n \"transparent\",\n );\n }\n previousTabId.current = activeTabId;\n }, [activeTabId, innerWidth]);\n\n return (\n <div\n className={clsx(\n \"hds-tabs__list\",\n direction === \"horizontal\"\n ? {\n \"hds-tabs__list--horizontal\": wideEnough,\n \"hds-tabs__list--vertical\": !wideEnough,\n }\n : {\n \"hds-tabs__list--vertical\": true,\n },\n className as undefined,\n )}\n ref={mergedRef}\n role=\"tablist\"\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n children: ReactElement<HTMLElement> | string;\n\n /**\n * Identifier for the tab\n */\n tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n ({ children, tabId, className, onClick, ...rest }, ref) => {\n const context = useTabsContext();\n\n const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n context.toggleActiveTabId(tabId);\n onClick?.(e);\n };\n return (\n <button\n className={clsx(\n \"hds-tabs__tab\",\n { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n className as undefined,\n )}\n data-tabid={tabId}\n onClick={toggleTab}\n ref={ref}\n type=\"button\"\n role=\"tab\"\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\nTabsTab.displayName = \"Tabs.Tab\";\n"],"mappings":";;;;;;;;;;;;;;;AACA,SAAS,YAAY,WAAW,cAAc;AAC9C,SAAS,YAAY;AAiEf;AAjDC,IAAM,WAAW;AAAA,EACtB,CAAC,IAA4D,QAAQ;AAApE,iBAAE,YAAU,YAAY,cAAc,UAnBzC,IAmBG,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AACrC,UAAM,EAAE,YAAY,IAAI,eAAe;AACvC,UAAM,cAAc,OAAuB,IAAI;AAC/C,UAAM,YAAY,aAAa,CAAC,aAAa,GAAG,CAAC;AACjD,UAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAElD,UAAM,eAAe,YAAY;AACjC,UAAM,EAAE,WAAW,IAAI,eAAe,SAAS,EAAE,YAAY,IAAK;AAClE,UAAM,aAAa,cAAc;AAEjC,UAAM,gBAAgB,OAAO,WAAW;AAGxC,cAAU,MAAM;AACd,YAAM,UAAU,YAAY;AAC5B,YAAM,YAAY,mCAAS,cAAc,gBAAgB,WAAW;AACpE,UAAI,CAAC,aAAa,CAAC;AAAS;AAE5B,YAAM,EAAE,cAAc,iBAAiB,aAAa,eAAe,IAAI;AACvE,YAAM,EAAE,cAAc,aAAa,WAAW,WAAW,IAAI;AAG7D,YAAM,SAAS,eAAe;AAC9B,YAAM,QAAQ,cAAc;AAI5B,kBAAY,QAAQ,MAAM,YAAY,6BAA6B,OAAO,MAAM,CAAC;AACjF,kBAAY,QAAQ,MAAM,YAAY,4BAA4B,OAAO,KAAK,CAAC;AAC/E,kBAAY,QAAQ,MAAM,YAAY,0BAA0B,GAAG,SAAS,IAAI;AAChF,kBAAY,QAAQ,MAAM,YAAY,2BAA2B,GAAG,UAAU,IAAI;AAIlF,UAAI,cAAc,YAAY,aAAa;AACzC,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AACA,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,oBAAc,UAAU;AAAA,IAC1B,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,cAAc,eACV;AAAA,YACE,8BAA8B;AAAA,YAC9B,4BAA4B,CAAC;AAAA,UAC/B,IACA;AAAA,YACE,4BAA4B;AAAA,UAC9B;AAAA,UACJ;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,SACD,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAWhB,IAAM,UAAU;AAAA,EACrB,CAAC,IAAkD,QAAQ;AAA1D,iBAAE,YAAU,OAAO,WAAW,QArGjC,IAqGG,IAA0C,iBAA1C,IAA0C,CAAxC,YAAU,SAAO,aAAW;AAC7B,UAAM,UAAU,eAAe;AAE/B,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,EAAE,yBAAyB,QAAQ,gBAAgB,MAAM;AAAA,UACzD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,SACD,OAXL;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Callback fired when animiation transition ends\n * Use this to do effects after resizing is done, e.g. scrolling to the element\n * using `element.scrollIntoView()`\n */\n onTransitionEnd?: () => void;\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight = forwardRef<HTMLDivElement, AutoAnimateHeightProps>(\n (\n {\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n onTransitionEnd,\n ...rest\n },\n ref,\n ) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([rootRef, ref]);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(\n undefined,\n );\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n\n useEffect(() => {\n if (!rootRef.current) return;\n if (!measurementRef.current) return;\n if (document.body.scrollHeight === 0) return;\n const currentMeasurement = measurementRef.current;\n const { height: newHeight } = currentMeasurement.getBoundingClientRect();\n\n // Listen for resize events on the measurement element\n // Keep the children in sync with the height\n // But don't animate it.\n let previouslyObservedHeight = newHeight;\n const resizeObserver = new ResizeObserver(() => {\n const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();\n if (resizedHeight === previouslyObservedHeight) return;\n previouslyObservedHeight = resizedHeight;\n setHeight({ height: resizedHeight, shouldAnimate: false });\n });\n resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions\n\n // Set the new height when children changes\n setHeight({ height: newHeight, shouldAnimate: true });\n\n // Update children\n const nextClonedChildren = cloneElement(<>{children}</>, {});\n\n // When increasing in height update immediately so the new content is shown during the animation\n if (newHeight >= (height?.height ?? 0)) {\n setClonedChildren(nextClonedChildren);\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content\n const currentRoot = rootRef.current;\n function onTransitionEndHandler(e: TransitionEvent) {\n if (e.propertyName !== \"height\") return;\n setClonedChildren(nextClonedChildren);\n }\n currentRoot.addEventListener(\"transitionend\", onTransitionEndHandler);\n return () => {\n resizeObserver.disconnect();\n currentRoot.removeEventListener(\"transitionend\", onTransitionEndHandler);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, [children]);\n\n return (\n <div\n ref={mergedRef}\n onTransitionEnd={onTransitionEnd}\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,\n transitionProperty: height?.shouldAnimate ? \"height\" : \"none\",\n transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n willChange: \"height\",\n ...style,\n }}\n {...rest}\n >\n <div\n aria-hidden\n ref={measurementRef}\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n }}\n >\n {children}\n </div>\n {clonedChildren}\n </div>\n );\n },\n);\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AAuDnD,wBAoDb,YApDa;AAnBZ,IAAM,oBAAoB;AAAA,EAC/B,CACE,IAQA,QACG;AATH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB;AAAA,IA3CN,IAsCI,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AA3CN,QAAAA,KAAAC;AAgDI,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,YAAY,aAAa,CAAC,SAAS,GAAG,CAAC;AAC7C,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AAEA,cAAU,MAAM;AA1DpB,UAAAD;AA2DM,UAAI,CAAC,QAAQ;AAAS;AACtB,UAAI,CAAC,eAAe;AAAS;AAC7B,UAAI,SAAS,KAAK,iBAAiB;AAAG;AACtC,YAAM,qBAAqB,eAAe;AAC1C,YAAM,EAAE,QAAQ,UAAU,IAAI,mBAAmB,sBAAsB;AAKvE,UAAI,2BAA2B;AAC/B,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB,sBAAsB;AAC3E,YAAI,kBAAkB;AAA0B;AAChD,mCAA2B;AAC3B,kBAAU,EAAE,QAAQ,eAAe,eAAe,MAAM,CAAC;AAAA,MAC3D,CAAC;AACD,qBAAe,QAAQ,kBAAkB;AAGzC,gBAAU,EAAE,QAAQ,WAAW,eAAe,KAAK,CAAC;AAGpD,YAAM,qBAAqB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAG3D,UAAI,eAAcA,MAAA,iCAAQ,WAAR,OAAAA,MAAkB,IAAI;AACtC,0BAAkB,kBAAkB;AACpC,eAAO,MAAM;AACX,yBAAe,WAAW;AAAA,QAC5B;AAAA,MACF;AAGA,YAAM,cAAc,QAAQ;AAC5B,eAAS,uBAAuB,GAAoB;AAClD,YAAI,EAAE,iBAAiB;AAAU;AACjC,0BAAkB,kBAAkB;AAAA,MACtC;AACA,kBAAY,iBAAiB,iBAAiB,sBAAsB;AACpE,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,oBAAY,oBAAoB,iBAAiB,sBAAsB;AAAA,MACzE;AAAA,IAGF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAQC,MAAA,iCAAQ,WAAR,OAAAA,OAAkBD,MAAA,eAAe,YAAf,gBAAAA,IAAwB,wBAAwB;AAAA,UAC1E,qBAAoB,iCAAQ,iBAAgB,WAAW;AAAA,UACvD,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,UAC7E,YAAY;AAAA,WACT;AAAA,SAED,OAbL;AAAA,QAeC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,eAAe;AAAA,cACjB;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;","names":["_a","_b"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n false as boolean,\n () => {\n // Empty\n },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n function toggleOpen() {\n setOpen((prev) => !prev);\n }\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <expandableMenuContext.Provider value={[open, toggleOpen]}>\n {children}\n </expandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useNavbarExpendableMenuContext();\n\n // Measure the width of the text when open and closed and choose the widest one\n // This is to ensure that the button doesn't change size when the text changes\n const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n const measurementId = useId();\n useEffect(() => {\n const widthWhenOpen =\n document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n const widthWhenClosed =\n document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n }, [measurementId]);\n\n const text = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n return (\n <button\n className={clsx(\"hds-navbar__item\", className as undefined)}\n onClick={toggleOpen}\n ref={ref}\n title={title}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n {/* Measurement elements, not shown to the user */}\n <span\n id={`${measurementId}-when-closed`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenOpenText}\n </span>\n <span\n id={`${measurementId}-when-open`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenClosedText}\n </span>\n\n {/* Actual content */}\n <span\n style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n className={clsx(\"hds-navbar__item-responsive-text\")}\n >\n {text}\n </span>\n <span style={{ width: 32, height: 32 }}>{icon}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const [open] = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n"],"mappings":"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","names":["_a","_b"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/accordion/accordion-item.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n | ReactElement<AccordionHeaderProps>\n | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Control the open state of the accordion manually\n */\n open?: boolean;\n\n /**\n * Use with open to control the open state of the accordion manually\n */\n onOpenChange?: (open: boolean) => void;\n\n /**\n * If the accordion should be open by default\n */\n defaultOpen?: boolean;\n\n /**\n * Accepts type of Accordion.Content and Accordion.Header\n */\n children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n const open = outerOpen ?? innerOpen;\n\n const handleOpen = () => {\n if (outerOpen !== undefined) {\n onOpenChange && onOpenChange(!open);\n } else {\n setInnerOpen(!open);\n }\n };\n\n return (\n <div\n {...rest}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item\", className as undefined)}\n ref={ref}\n >\n <AccordionItemContext.Provider value={{ open, setOpen: handleOpen }}>\n {children}\n </AccordionItemContext.Provider>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,gBAAgB;AACrC,SAAS,YAAY;AAmDb;AApBD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA8E,QAAQ;AAAtF,iBAAE,YAAU,aAAa,MAAM,WAAW,cAAc,UAlC3D,IAkCG,IAAsE,iBAAtE,IAAsE,CAApE,YAAU,eAAa,QAAiB,gBAAc;AACvD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,oCAAe,KAAK;AAC/D,UAAM,OAAO,gCAAa;AAE1B,UAAM,aAAa,MAAM;AACvB,UAAI,cAAc,QAAW;AAC3B,wBAAgB,aAAa,CAAC,IAAI;AAAA,MACpC,OAAO;AACL,qBAAa,CAAC,IAAI;AAAA,MACpB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,cAAY,OAAO,SAAS;AAAA,QAC5B,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,QAEA,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,MAAM,SAAS,WAAW,GAC/D,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/footer/footer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Accordion } from \"../accordion\";\nimport { LinkList } from \"../list/link-list\";\nimport { PrimaryButton } from \"../button\";\n\ninterface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nFooterLogo.displayName = \"Footer.Logo\";\n\nexport interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <PrimaryButton asChild fill=\"outline\" className={clsx(className as undefined)}>\n <Component ref={ref} {...rest}>\n {children}\n </Component>\n </PrimaryButton>\n );\n },\n);\nFooterButtonLink.displayName = \"FooterButton\";\n\ninterface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];\n}\n\n/**\n * Responsive sections of links. Will become an accordion on mobile.\n *\n * Use with {@link FooterLinkSection} for each section.\n */\nexport const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <>\n {/* Mobile and Desktop. The accordion styling gets removed on desktop */}\n <Accordion\n className={clsx(\"hds-footer__link-sections\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {/* @ts-expect-error -- It's ok */}\n {children}\n </Accordion>\n </>\n );\n },\n);\nFooterLinkSections.displayName = \"Footer.LinkSections\";\n\ninterface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {\n heading: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(\n ({ heading, children, className, ...rest }, ref) => {\n // @ts-expect-error -- It's ok\n const linkListChildren = <LinkList>{children}</LinkList>;\n return (\n <>\n {/* Mobile */}\n <Accordion.Item\n className={clsx(`hds-footer__link-section`, className as undefined)}\n ref={ref}\n {...rest}\n >\n <Accordion.Header>{heading}</Accordion.Header>\n <Accordion.Content>{linkListChildren}</Accordion.Content>\n </Accordion.Item>\n\n {/* Desktop */}\n <div className={clsx(`hds-footer__link-section`, className as undefined)}>\n <h2>{heading}</h2>\n {linkListChildren}\n </div>\n </>\n );\n },\n);\nFooterLinkSection.displayName = \"Footer.LinkSection\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Footer variant\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"slim\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Footer = forwardRef<HTMLDivElement, FooterProps>(\n ({ children, className, variant, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\n `hds-footer`,\n variant === \"slim\" && \"hds-footer--slim\",\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as FooterType;\nFooter.displayName = \"Footer\";\n\ntype FooterType = ReturnType<typeof forwardRef<HTMLDivElement, FooterProps>> & {\n Logo: typeof FooterLogo;\n ButtonLink: typeof FooterButtonLink;\n LinkSections: typeof FooterLinkSections;\n LinkSection: typeof FooterLinkSection;\n};\n\nFooter.Logo = FooterLogo;\nFooter.ButtonLink = FooterButtonLink;\nFooter.LinkSections = FooterLinkSections;\nFooter.LinkSection = FooterLinkSection;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,kBAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AAuBf,SA8CA,UA9CA,KA0EE,YA1EF;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAtB1B,IAsBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,OAArF,EACE,WACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAclB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QA9C1B,IA8CG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,iBAAc,SAAO,MAAC,MAAK,WAAU,WAAW,KAAK,SAAsB,GAC1E,8BAAC,0CAAU,OAAc,OAAxB,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAWxB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UArEf,IAqEG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,gCAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE;AAAA,SACI,OAHL;AAAA,QAME;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAO1B,IAAM,oBAAoB;AAAA,EAC/B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,WAAS,UAAU,UA7FxB,IA6FG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AAEpB,UAAM,mBAAmB,oBAAC,YAAU,UAAS;AAC7C,WACE,iCAEE;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,UAClE;AAAA,WACI,OAHL;AAAA,UAKC;AAAA,gCAAC,UAAU,QAAV,EAAkB,mBAAQ;AAAA,YAC3B,oBAAC,UAAU,SAAV,EAAmB,4BAAiB;AAAA;AAAA;AAAA,MACvC;AAAA,MAGA,qBAAC,SAAI,WAAW,KAAK,4BAA4B,SAAsB,GACrE;AAAA,4BAAC,QAAI,mBAAQ;AAAA,QACZ;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAqBzB,IAAM,SAAS;AAAA,EACpB,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,WAAW,SAAS,QA3InC,IA2IG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,aAAW,WAAS;AAC/B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AASrB,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,aAAa,WAAW,gBAAgB;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,eAAe,YAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,YAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS;AAAM,WAAO,MAAM;AAAA,IAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS;AAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY;AAAI;AACpB,UAAI,EAAE,mBAAmB;AAAc;AACvC,UAAI,QAAQ,aAAa,OAAO;AAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKO,SAAS,iBAAiB,eAAsC;AACrE,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;","names":[]}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=chunk-DZNH5JHY.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/form/date-picker/date-picker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,cAAwC;AAC7D,SAAS,YAAY;AA4Db,mBACE,KADF;AAhCD,IAAM,aAAa,WAA8C,SAASA,YAC/E,IAaA,KACA;AAdA,eACE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,EAxC1B,IA8BE,IAWK,iBAXL,IAWK;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,mBAAmB,SAAsB;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,eACA,iCACE;AAAA;AAAA,UAAC;AAAA,0DACK,OACA,aAFL;AAAA,YAGC;AAAA,YACA;AAAA,YACA,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,kCAAkC;AAAA,YAClD,MAAK;AAAA,YACL,OAAO;AAAA,YACP,SAAS,MAAM;AA1E3B,kBAAAC;AA2Ec,eAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["DatePicker","_a"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/accordion/accordion-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n aria-hidden={!context.open}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: context.open ? undefined : \"true\" }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AAsBb;AAfD,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAVf,IAUG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,CAAC,QAAQ;AAAA,QACtB,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,QAAQ,OAAO,SAAY,OAAO,IAHhD;AAAA,QAIC,WAAW,KAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OANL;AAAA,QAQC,8BAAC,SAAI,WAAW,KAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * The background fill of the button\n *\n * @default \"contained\"\n */\n fill?: \"contained\" | \"outline\";\n\n /**\n * Make the button use 100% width available.\n * Using the \"mobile\" it only stretch to full width on smaller screens\n */\n fullWidth?: boolean | \"mobile\";\n\n /**\n * Use the button as an icon button\n *\n * Render the icon in `children`\n */\n icon?: boolean;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: \"primary\" | \"secondary\" }>(\n (\n {\n asChild,\n children,\n variant,\n size = \"medium\",\n fullWidth = false,\n fill = \"contained\",\n icon,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\n \"hds-button\",\n `hds-button--${size}`,\n {\n [`hds-button--${variant}`]: fill === \"contained\",\n [`hds-button--outline-${variant}`]: fill === \"outline\",\n \"hds-button--full\": fullWidth === true,\n \"hds-button--mobile-full\": fullWidth === \"mobile\",\n \"hds-button--icon-only\": icon,\n },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n return <Button {...props} ref={ref} variant=\"primary\" />;\n});\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n return <Button {...props} ref={ref} variant=\"secondary\" />;\n});\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAqDf;AAjBN,IAAM,SAAS;AAAA,EACb,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB;AAAA,YACE,CAAC,eAAe,OAAO,EAAE,GAAG,SAAS;AAAA,YACrC,CAAC,uBAAuB,OAAO,EAAE,GAAG,SAAS;AAAA,YAC7C,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB;AAAA,UAC3B;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAEd,IAAM,gBAAgB,WAA2C,CAAC,OAAO,QAAQ;AACtF,SAAO,oBAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,YAAU;AACxD,CAAC;AACD,cAAc,cAAc;AAErB,IAAM,kBAAkB,WAA2C,CAAC,OAAO,QAAQ;AACxF,SAAO,oBAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,cAAY;AAC1D,CAAC;AACD,gBAAgB,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/modal/modal.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"h1\";\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n * const modalRef = useRef<HTMLDialogElement>(null);\n * const onClose = () => modalRef.current?.close();\n *\n * return (\n * <>\n * <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n * <Modal ref={modalRef}>\n * <Modal.Header>Dialog header</Modal.Header>\n * <Modal.Content>\n * <p>\n * Dialog header Dialog description - a description of what is about to happen and maybe\n * something about the consequences.\n * </p>\n * </Modal.Content>\n * <Modal.Footer>\n * <HStack gap=\"16\" wrap>\n * <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n * <PrimaryButton fill=\"outline\" onClick={onClose}>\n * Cancel\n * </PrimaryButton>\n * </HStack>\n * </Modal.Footer>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n asChild\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n variant=\"white\"\n >\n <dialog ref={mergedRef} {...rest}>\n {children}\n </dialog>\n </Box>\n );\n },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n"],"mappings":"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","names":["_a"]}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=chunk-MSFHJVHD.mjs.map