@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.
- package/dist/accordion/accordion-content.d.ts.map +1 -1
- package/dist/accordion/accordion-content.js +1 -0
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +2 -2
- package/dist/accordion/accordion-header.d.ts.map +1 -1
- package/dist/accordion/accordion-header.js +1 -0
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion-header.mjs +2 -2
- package/dist/accordion/accordion-item.d.ts.map +1 -1
- package/dist/accordion/accordion-item.js +2 -1
- package/dist/accordion/accordion-item.js.map +1 -1
- package/dist/accordion/accordion-item.mjs +2 -2
- package/dist/accordion/accordion.js +4 -1
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion.mjs +5 -5
- package/dist/accordion/context.d.ts +1 -0
- package/dist/accordion/context.d.ts.map +1 -1
- package/dist/accordion/context.js.map +1 -1
- package/dist/accordion/context.mjs +1 -1
- package/dist/accordion/index.js +4 -1
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +7 -7
- package/dist/badge/badge.d.ts +13 -4
- package/dist/badge/badge.d.ts.map +1 -1
- package/dist/badge/badge.js +22 -42
- package/dist/badge/badge.js.map +1 -1
- package/dist/badge/badge.mjs +3 -9
- package/dist/badge/index.d.ts +1 -1
- package/dist/badge/index.d.ts.map +1 -1
- package/dist/badge/index.js +22 -42
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +3 -9
- package/dist/button/button.d.ts +17 -5
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +4 -17
- package/dist/button/button.js.map +1 -1
- package/dist/button/button.mjs +3 -5
- package/dist/button/index.d.ts +1 -1
- package/dist/button/index.d.ts.map +1 -1
- package/dist/button/index.js +4 -17
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +3 -5
- package/dist/{chunk-67TP3E2D.mjs → chunk-6FBPKLWB.mjs} +3 -3
- package/dist/chunk-6FBPKLWB.mjs.map +1 -0
- package/dist/{chunk-KEKPEN2C.mjs → chunk-6MR5XZOX.mjs} +4 -16
- package/dist/chunk-6MR5XZOX.mjs.map +1 -0
- package/dist/{chunk-4WQWU5TL.mjs → chunk-AXQCREUJ.mjs} +2 -2
- package/dist/chunk-AXQCREUJ.mjs.map +1 -0
- package/dist/{chunk-M3Y3XOGC.mjs → chunk-B6L7IFDX.mjs} +6 -6
- package/dist/{chunk-F2C3KZFX.mjs → chunk-BVPSZ3JI.mjs} +2 -2
- package/dist/chunk-BVPSZ3JI.mjs.map +1 -0
- package/dist/chunk-CYDWEPFL.mjs +1 -0
- package/dist/{chunk-6AGDK5V3.mjs → chunk-EVUKWONG.mjs} +2 -2
- package/dist/chunk-GQUFERB2.mjs +37 -0
- package/dist/chunk-GQUFERB2.mjs.map +1 -0
- package/dist/{chunk-C34HEQXO.mjs → chunk-GRWLX5BC.mjs} +5 -5
- package/dist/chunk-GRWLX5BC.mjs.map +1 -0
- package/dist/{chunk-3EFAPJ3H.mjs → chunk-HJYS664B.mjs} +3 -2
- package/dist/chunk-HJYS664B.mjs.map +1 -0
- package/dist/{chunk-LCJSUBCZ.mjs → chunk-IHZ2MRF6.mjs} +4 -4
- package/dist/chunk-IHZ2MRF6.mjs.map +1 -0
- package/dist/{chunk-3WVRY6CC.mjs → chunk-L4YBHIS3.mjs} +20 -12
- package/dist/chunk-L4YBHIS3.mjs.map +1 -0
- package/dist/{chunk-6R7AXKBR.mjs → chunk-OIC2CPID.mjs} +19 -13
- package/dist/chunk-OIC2CPID.mjs.map +1 -0
- package/dist/{chunk-7UD72WOC.mjs → chunk-QZZIOBF4.mjs} +2 -2
- package/dist/{chunk-A2H2LAII.mjs → chunk-SKVM7G76.mjs} +5 -4
- package/dist/chunk-SKVM7G76.mjs.map +1 -0
- package/dist/chunk-SRLM3K2X.mjs +1 -0
- package/dist/{chunk-DEX36MFK.mjs → chunk-TDXU2IC6.mjs} +3 -4
- package/dist/chunk-TDXU2IC6.mjs.map +1 -0
- package/dist/{chunk-GLAEI3SD.mjs → chunk-VCQIR53Y.mjs} +3 -2
- package/dist/chunk-VCQIR53Y.mjs.map +1 -0
- package/dist/{chunk-V3PAFMK5.mjs → chunk-YQFL5UN4.mjs} +1 -1
- package/dist/chunk-YQFL5UN4.mjs.map +1 -0
- package/dist/footer/footer.js +7 -15
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +7 -7
- package/dist/footer/index.js +7 -15
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +7 -7
- package/dist/form/date-picker/date-picker.js +1 -1
- package/dist/form/date-picker/date-picker.js.map +1 -1
- package/dist/form/date-picker/date-picker.mjs +2 -2
- package/dist/form/date-picker/index.js +1 -1
- package/dist/form/date-picker/index.js.map +1 -1
- package/dist/form/date-picker/index.mjs +2 -2
- package/dist/form/index.js +1 -1
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +2 -2
- package/dist/index-no-css.d.ts +1 -1
- package/dist/index-no-css.d.ts.map +1 -1
- package/dist/index-no-css.js +237 -242
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +43 -42
- package/dist/index.js +237 -242
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +43 -42
- package/dist/index.mjs.map +1 -1
- package/dist/modal/index.js +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +2 -2
- package/dist/modal/modal.d.ts +4 -4
- package/dist/modal/modal.js +1 -1
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +2 -2
- package/dist/navbar/index.js +18 -12
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +3 -3
- package/dist/navbar/navbar-expandable-menu.d.ts +7 -1
- package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -1
- package/dist/navbar/navbar-expandable-menu.js +18 -12
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +2 -2
- package/dist/navbar/navbar.js +18 -12
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +3 -3
- package/dist/show-more/index.d.ts +0 -2
- package/dist/show-more/index.d.ts.map +1 -1
- package/dist/show-more/index.js +5 -143
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +1 -6
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/tabs/tabs-list.js +1 -1
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +2 -2
- package/dist/tabs/tabs.js +1 -1
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +3 -3
- package/dist/utils/auto-animate-height.d.ts.map +1 -0
- package/dist/{utilities → utils}/auto-animate-height.js +3 -3
- package/dist/utils/auto-animate-height.js.map +1 -0
- package/dist/utils/auto-animate-height.mjs +9 -0
- package/dist/{utilities → utils}/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/{utilities → utils}/index.js +81 -11
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/index.mjs +19 -0
- package/dist/{utils.d.ts → utils/utils.d.ts} +0 -4
- package/dist/utils/utils.d.ts.map +1 -0
- package/dist/{utils.js → utils/utils.js} +1 -3
- package/dist/utils/utils.js.map +1 -0
- package/dist/utils/utils.mjs +14 -0
- package/dist/warning-banner/index.js +28 -94
- package/dist/warning-banner/index.js.map +1 -1
- package/dist/warning-banner/index.mjs +1 -3
- package/dist/warning-banner/warning-banner.d.ts.map +1 -1
- package/dist/warning-banner/warning-banner.js +28 -94
- package/dist/warning-banner/warning-banner.js.map +1 -1
- package/dist/warning-banner/warning-banner.mjs +1 -3
- package/package.json +5 -5
- package/src/accordion/accordion-content.tsx +1 -0
- package/src/accordion/accordion-header.tsx +1 -0
- package/src/accordion/accordion-item.tsx +3 -2
- package/src/accordion/context.ts +1 -0
- package/src/badge/badge.stories.tsx +6 -4
- package/src/badge/badge.tsx +32 -40
- package/src/badge/index.tsx +1 -1
- package/src/button/button.stories.tsx +19 -17
- package/src/button/button.tsx +19 -18
- package/src/button/index.tsx +1 -1
- package/src/footer/footer.tsx +3 -3
- package/src/form/date-picker/date-picker.tsx +1 -1
- package/src/form/input/input.stories.tsx +6 -6
- package/src/index-no-css.tsx +1 -1
- package/src/modal/modal.stories.tsx +9 -9
- package/src/modal/modal.tsx +5 -5
- package/src/navbar/navbar-expandable-menu.tsx +26 -15
- package/src/show-more/index.ts +0 -3
- package/src/show-more/show-more.stories.tsx +1 -1
- package/src/skeleton/skeleton.stories.tsx +3 -3
- package/src/tabs/tabs-list.tsx +1 -1
- package/src/{utilities → utils}/auto-animate-height.tsx +1 -1
- package/src/{utilities → utils}/index.ts +2 -0
- package/src/{utils.ts → utils/utils.ts} +1 -1
- package/src/warning-banner/warning-banner.tsx +24 -13
- package/dist/chunk-3EFAPJ3H.mjs.map +0 -1
- package/dist/chunk-3WVRY6CC.mjs.map +0 -1
- package/dist/chunk-4WQWU5TL.mjs.map +0 -1
- package/dist/chunk-67TP3E2D.mjs.map +0 -1
- package/dist/chunk-6R7AXKBR.mjs.map +0 -1
- package/dist/chunk-A2H2LAII.mjs.map +0 -1
- package/dist/chunk-C34HEQXO.mjs.map +0 -1
- package/dist/chunk-DEX36MFK.mjs.map +0 -1
- package/dist/chunk-DZNH5JHY.mjs +0 -1
- package/dist/chunk-F2C3KZFX.mjs.map +0 -1
- package/dist/chunk-GLAEI3SD.mjs.map +0 -1
- package/dist/chunk-KEKPEN2C.mjs.map +0 -1
- package/dist/chunk-LCJSUBCZ.mjs.map +0 -1
- package/dist/chunk-MSFHJVHD.mjs +0 -1
- package/dist/chunk-P6KBFRF4.mjs +0 -54
- package/dist/chunk-P6KBFRF4.mjs.map +0 -1
- package/dist/chunk-V3PAFMK5.mjs.map +0 -1
- package/dist/utilities/auto-animate-height.d.ts.map +0 -1
- package/dist/utilities/auto-animate-height.js.map +0 -1
- package/dist/utilities/auto-animate-height.mjs +0 -9
- package/dist/utilities/index.d.ts.map +0 -1
- package/dist/utilities/index.js.map +0 -1
- package/dist/utilities/index.mjs +0 -10
- package/dist/utils.d.ts.map +0 -1
- package/dist/utils.js.map +0 -1
- package/dist/utils.mjs +0 -16
- /package/dist/{chunk-M3Y3XOGC.mjs.map → chunk-B6L7IFDX.mjs.map} +0 -0
- /package/dist/{chunk-DZNH5JHY.mjs.map → chunk-CYDWEPFL.mjs.map} +0 -0
- /package/dist/{chunk-6AGDK5V3.mjs.map → chunk-EVUKWONG.mjs.map} +0 -0
- /package/dist/{chunk-7UD72WOC.mjs.map → chunk-QZZIOBF4.mjs.map} +0 -0
- /package/dist/{chunk-MSFHJVHD.mjs.map → chunk-SRLM3K2X.mjs.map} +0 -0
- /package/dist/{utilities → utils}/auto-animate-height.d.ts +0 -0
- /package/dist/{utilities → utils}/auto-animate-height.mjs.map +0 -0
- /package/dist/{utilities → utils}/index.mjs.map +0 -0
- /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 {
|
|
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
|
-
<
|
|
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
|
-
<
|
|
152
|
-
<
|
|
153
|
-
|
|
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
|
-
</
|
|
160
|
+
</Button>
|
|
161
161
|
</VStack>
|
|
162
162
|
</form>
|
|
163
163
|
</VStack>
|
package/src/index-no-css.tsx
CHANGED
|
@@ -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 {
|
|
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
|
-
<
|
|
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
|
-
<
|
|
39
|
-
<
|
|
38
|
+
<Button onClick={onMainAction}>Main action</Button>
|
|
39
|
+
<Button variant="primary-outline" onClick={onClose}>
|
|
40
40
|
Cancel
|
|
41
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
139
|
+
<Button fullWidth="mobile" onClick={() => modalRef.current?.close()}>
|
|
140
140
|
Lukk
|
|
141
|
-
</
|
|
141
|
+
</Button>
|
|
142
142
|
</Modal.Footer>
|
|
143
143
|
</Modal>
|
|
144
144
|
</>
|
package/src/modal/modal.tsx
CHANGED
|
@@ -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
|
-
* <
|
|
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
|
-
* <
|
|
111
|
-
* <
|
|
110
|
+
* <Button onClick={onMainAction}>Main action</Button>
|
|
111
|
+
* <Button variant="primary-outline" onClick={onClose}>
|
|
112
112
|
* Cancel
|
|
113
|
-
* </
|
|
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
|
-
|
|
7
|
-
|
|
8
|
-
() =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export const useNavbarExpendableMenuContext = () =>
|
|
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
|
-
<
|
|
51
|
+
<ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>
|
|
48
52
|
{children}
|
|
49
|
-
</
|
|
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
|
|
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
|
|
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" }}
|
package/src/show-more/index.ts
CHANGED
|
@@ -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 "../
|
|
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 {
|
|
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
|
-
<
|
|
94
|
+
<Button
|
|
95
95
|
size="small"
|
|
96
96
|
onClick={() => {
|
|
97
97
|
setIsLoading(true);
|
|
98
98
|
}}
|
|
99
99
|
>
|
|
100
100
|
Reload
|
|
101
|
-
</
|
|
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}
|
package/src/tabs/tabs-list.tsx
CHANGED
|
@@ -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> {
|
|
@@ -103,7 +103,7 @@ export function focusTrap(element: HTMLElement) {
|
|
|
103
103
|
/**
|
|
104
104
|
* Unset the `inert` attribute on all elements given
|
|
105
105
|
*/
|
|
106
|
-
|
|
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
|
-
<
|
|
16
|
-
<WarningBannerTitle
|
|
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 ?
|
|
20
|
-
|
|
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
|
-
| ({
|
|
28
|
-
|
|
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
|
-
<
|
|
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":[]}
|
package/dist/chunk-DZNH5JHY.mjs
DELETED
|
@@ -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"]}
|
package/dist/chunk-MSFHJVHD.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-MSFHJVHD.mjs.map
|