@postenbring/hedwig-react 0.0.64 → 0.0.65
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/_tsup-dts-rollup.d.mts +171 -19
- package/dist/_tsup-dts-rollup.d.ts +171 -19
- package/dist/accordion/accordion-content.js +5 -9
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +1 -1
- package/dist/accordion/accordion-header.js +6 -9
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion-header.mjs +1 -1
- package/dist/accordion/accordion-item.js +2 -7
- package/dist/accordion/accordion-item.js.map +1 -1
- package/dist/accordion/accordion-item.mjs +1 -1
- package/dist/accordion/index.js +13 -25
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +4 -4
- package/dist/{chunk-SAGJ5W7M.mjs → chunk-62F4I3MQ.mjs} +3 -8
- package/dist/{chunk-SAGJ5W7M.mjs.map → chunk-62F4I3MQ.mjs.map} +1 -1
- package/dist/{chunk-BYDSISQZ.mjs → chunk-A47QULAK.mjs} +2 -2
- package/dist/{chunk-BYDSISQZ.mjs.map → chunk-A47QULAK.mjs.map} +1 -1
- package/dist/{chunk-2E6XPNPX.mjs → chunk-DEVTAZKG.mjs} +8 -6
- package/dist/chunk-DEVTAZKG.mjs.map +1 -0
- package/dist/chunk-EHUVLDIZ.mjs +121 -0
- package/dist/chunk-EHUVLDIZ.mjs.map +1 -0
- package/dist/{chunk-KRGKVH5J.mjs → chunk-GUB3UCXO.mjs} +6 -10
- package/dist/chunk-GUB3UCXO.mjs.map +1 -0
- package/dist/{chunk-37WVYY6X.mjs → chunk-HXV2UMEV.mjs} +6 -3
- package/dist/chunk-HXV2UMEV.mjs.map +1 -0
- package/dist/chunk-KQITCS3U.mjs +18 -0
- package/dist/chunk-KQITCS3U.mjs.map +1 -0
- package/dist/{chunk-DJRMXOCP.mjs → chunk-LIQ3FB56.mjs} +8 -8
- package/dist/chunk-MUVJAMFN.mjs +104 -0
- package/dist/chunk-MUVJAMFN.mjs.map +1 -0
- package/dist/{chunk-WGVZWX5L.mjs → chunk-RLUXDZ6X.mjs} +14 -4
- package/dist/chunk-RLUXDZ6X.mjs.map +1 -0
- package/dist/{chunk-H3VGHTDC.mjs → chunk-TE5M6GJB.mjs} +2 -2
- package/dist/chunk-TE5M6GJB.mjs.map +1 -0
- package/dist/chunk-U2MRMUB2.mjs +19 -0
- package/dist/chunk-U2MRMUB2.mjs.map +1 -0
- package/dist/{chunk-EJADADIY.mjs → chunk-UWTGHSWT.mjs} +6 -9
- package/dist/chunk-UWTGHSWT.mjs.map +1 -0
- package/dist/{chunk-5MDJP43L.mjs → chunk-VFFIUNR6.mjs} +7 -7
- package/dist/chunk-X7EKQZNU.mjs +76 -0
- package/dist/chunk-X7EKQZNU.mjs.map +1 -0
- package/dist/{chunk-V4NGUB4I.mjs → chunk-XFSZBILE.mjs} +2 -2
- package/dist/chunk-XFSZBILE.mjs.map +1 -0
- package/dist/{chunk-MBBFU4IR.mjs → chunk-XVFQWVHO.mjs} +3 -9
- package/dist/{chunk-MBBFU4IR.mjs.map → chunk-XVFQWVHO.mjs.map} +1 -1
- package/dist/chunk-YWNVB7TY.mjs +1 -0
- package/dist/{chunk-FT5CX2W5.mjs → chunk-YXHXRUFX.mjs} +7 -10
- package/dist/chunk-YXHXRUFX.mjs.map +1 -0
- package/dist/footer/footer.d.mts +7 -0
- package/dist/footer/footer.d.ts +7 -0
- package/dist/footer/footer.js +404 -0
- package/dist/footer/footer.js.map +1 -0
- package/dist/footer/footer.mjs +26 -0
- package/dist/footer/footer.mjs.map +1 -0
- package/dist/footer/index.d.mts +7 -0
- package/dist/footer/index.d.ts +7 -0
- package/dist/footer/index.js +405 -0
- package/dist/footer/index.js.map +1 -0
- package/dist/footer/index.mjs +19 -0
- package/dist/footer/index.mjs.map +1 -0
- package/dist/form/checkbox/checkbox.js +122 -24
- package/dist/form/checkbox/checkbox.js.map +1 -1
- package/dist/form/checkbox/checkbox.mjs +5 -1
- package/dist/form/checkbox/index.js +122 -24
- package/dist/form/checkbox/index.js.map +1 -1
- package/dist/form/checkbox/index.mjs +5 -1
- package/dist/form/fieldset/fieldset.d.mts +1 -0
- package/dist/form/fieldset/fieldset.d.ts +1 -0
- package/dist/form/fieldset/fieldset.js +7 -3
- package/dist/form/fieldset/fieldset.js.map +1 -1
- package/dist/form/fieldset/fieldset.mjs +5 -3
- package/dist/form/fieldset/index.d.mts +1 -0
- package/dist/form/fieldset/index.d.ts +1 -0
- package/dist/form/fieldset/index.js +7 -3
- package/dist/form/fieldset/index.js.map +1 -1
- package/dist/form/fieldset/index.mjs +5 -3
- package/dist/form/index.d.mts +2 -1
- package/dist/form/index.d.ts +2 -1
- package/dist/form/index.js +68 -27
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +17 -13
- package/dist/form/radiobutton/index.d.mts +1 -1
- package/dist/form/radiobutton/index.d.ts +1 -1
- package/dist/form/radiobutton/index.js +17 -8
- package/dist/form/radiobutton/index.js.map +1 -1
- package/dist/form/radiobutton/index.mjs +7 -5
- package/dist/form/radiobutton/radiobutton.js +13 -6
- package/dist/form/radiobutton/radiobutton.js.map +1 -1
- package/dist/form/radiobutton/radiobutton.mjs +3 -3
- package/dist/form/radiobutton/radiogroup.js +2 -1
- package/dist/form/radiobutton/radiogroup.js.map +1 -1
- package/dist/form/radiobutton/radiogroup.mjs +2 -2
- package/dist/index-no-css.d.mts +10 -1
- package/dist/index-no-css.d.ts +10 -1
- package/dist/index-no-css.js +468 -307
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +58 -46
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +468 -307
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -46
- package/dist/index.mjs.map +1 -1
- package/dist/navbar/index.d.mts +1 -0
- package/dist/navbar/index.d.ts +1 -0
- package/dist/navbar/index.js +10 -7
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +7 -4
- package/dist/navbar/navbar-expandable-menu.d.mts +1 -0
- package/dist/navbar/navbar-expandable-menu.d.ts +1 -0
- package/dist/navbar/navbar-expandable-menu.js +10 -7
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +5 -3
- package/dist/skeleton/index.js +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +1 -1
- package/dist/skeleton/skeleton.js +1 -1
- package/dist/skeleton/skeleton.js.map +1 -1
- package/dist/skeleton/skeleton.mjs +1 -1
- package/dist/tabs/context.d.mts +1 -0
- package/dist/tabs/context.d.ts +1 -0
- package/dist/tabs/context.js +13 -8
- package/dist/tabs/context.js.map +1 -1
- package/dist/tabs/context.mjs +5 -3
- package/dist/tabs/index.js +46 -28
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +5 -5
- package/dist/tabs/tabs-content.js +11 -11
- package/dist/tabs/tabs-content.js.map +1 -1
- package/dist/tabs/tabs-content.mjs +2 -2
- package/dist/tabs/tabs-list.js +43 -16
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +2 -2
- package/dist/tabs/tabs.js +2 -14
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-2E6XPNPX.mjs.map +0 -1
- package/dist/chunk-33JD5XDW.mjs +0 -14
- package/dist/chunk-33JD5XDW.mjs.map +0 -1
- package/dist/chunk-37WVYY6X.mjs.map +0 -1
- package/dist/chunk-EJADADIY.mjs.map +0 -1
- package/dist/chunk-FT5CX2W5.mjs.map +0 -1
- package/dist/chunk-H3VGHTDC.mjs.map +0 -1
- package/dist/chunk-H4GIHEB2.mjs +0 -1
- package/dist/chunk-KRGKVH5J.mjs.map +0 -1
- package/dist/chunk-PXHYOQPB.mjs +0 -42
- package/dist/chunk-PXHYOQPB.mjs.map +0 -1
- package/dist/chunk-V4NGUB4I.mjs.map +0 -1
- package/dist/chunk-WGVZWX5L.mjs.map +0 -1
- package/dist/chunk-XVZ44NGD.mjs +0 -80
- package/dist/chunk-XVZ44NGD.mjs.map +0 -1
- /package/dist/{chunk-DJRMXOCP.mjs.map → chunk-LIQ3FB56.mjs.map} +0 -0
- /package/dist/{chunk-5MDJP43L.mjs.map → chunk-VFFIUNR6.mjs.map} +0 -0
- /package/dist/{chunk-H4GIHEB2.mjs.map → chunk-YWNVB7TY.mjs.map} +0 -0
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import "./chunk-
|
|
1
|
+
import "./chunk-YWNVB7TY.mjs";
|
|
2
|
+
import {
|
|
3
|
+
TabsComponent
|
|
4
|
+
} from "./chunk-VFFIUNR6.mjs";
|
|
5
|
+
import "./chunk-UWTGHSWT.mjs";
|
|
6
|
+
import "./chunk-MUVJAMFN.mjs";
|
|
7
|
+
import "./chunk-XVFQWVHO.mjs";
|
|
2
8
|
import {
|
|
3
9
|
TextBody,
|
|
4
10
|
TextBodySmall,
|
|
@@ -22,11 +28,14 @@ import {
|
|
|
22
28
|
WarningBanner
|
|
23
29
|
} from "./chunk-IAS3E2S3.mjs";
|
|
24
30
|
import {
|
|
25
|
-
|
|
26
|
-
} from "./chunk-
|
|
27
|
-
import
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
NavbarComponent
|
|
32
|
+
} from "./chunk-TE5M6GJB.mjs";
|
|
33
|
+
import {
|
|
34
|
+
useNavbarExpendableMenuContext
|
|
35
|
+
} from "./chunk-DEVTAZKG.mjs";
|
|
36
|
+
import "./chunk-MGUYIOP2.mjs";
|
|
37
|
+
import "./chunk-625SVQEP.mjs";
|
|
38
|
+
import "./chunk-6QV3OV66.mjs";
|
|
30
39
|
import {
|
|
31
40
|
MessageComponent
|
|
32
41
|
} from "./chunk-AR2NOI4U.mjs";
|
|
@@ -35,12 +44,6 @@ import {
|
|
|
35
44
|
ModalComponent
|
|
36
45
|
} from "./chunk-QSYU64U4.mjs";
|
|
37
46
|
import "./chunk-POJTVNEO.mjs";
|
|
38
|
-
import {
|
|
39
|
-
NavbarComponent
|
|
40
|
-
} from "./chunk-H3VGHTDC.mjs";
|
|
41
|
-
import "./chunk-2E6XPNPX.mjs";
|
|
42
|
-
import "./chunk-625SVQEP.mjs";
|
|
43
|
-
import "./chunk-MGUYIOP2.mjs";
|
|
44
47
|
import {
|
|
45
48
|
CardComponent
|
|
46
49
|
} from "./chunk-JC6DBIFE.mjs";
|
|
@@ -48,27 +51,43 @@ import "./chunk-2YL2MVWN.mjs";
|
|
|
48
51
|
import {
|
|
49
52
|
DescriptionList
|
|
50
53
|
} from "./chunk-XMB45ILT.mjs";
|
|
54
|
+
import {
|
|
55
|
+
FooterComponent
|
|
56
|
+
} from "./chunk-U2MRMUB2.mjs";
|
|
57
|
+
import "./chunk-EHUVLDIZ.mjs";
|
|
58
|
+
import {
|
|
59
|
+
LinkList
|
|
60
|
+
} from "./chunk-GJDRW6PA.mjs";
|
|
61
|
+
import {
|
|
62
|
+
OrderedList,
|
|
63
|
+
UnorderedList
|
|
64
|
+
} from "./chunk-PMLDK3VC.mjs";
|
|
51
65
|
import "./chunk-T24JZIQO.mjs";
|
|
66
|
+
import "./chunk-AGZHQDCQ.mjs";
|
|
67
|
+
import {
|
|
68
|
+
Textarea
|
|
69
|
+
} from "./chunk-RK6BB3HH.mjs";
|
|
52
70
|
import "./chunk-2KX7VFN2.mjs";
|
|
53
71
|
import {
|
|
54
72
|
Radiobutton
|
|
55
|
-
} from "./chunk-
|
|
73
|
+
} from "./chunk-RLUXDZ6X.mjs";
|
|
56
74
|
import {
|
|
57
|
-
RadioGroup
|
|
58
|
-
|
|
75
|
+
RadioGroup,
|
|
76
|
+
useRadioGroupContext
|
|
77
|
+
} from "./chunk-XFSZBILE.mjs";
|
|
59
78
|
import "./chunk-BYEJZSG5.mjs";
|
|
60
79
|
import {
|
|
61
80
|
Select
|
|
62
81
|
} from "./chunk-RVJD2UZF.mjs";
|
|
63
|
-
import "./chunk-AGZHQDCQ.mjs";
|
|
64
|
-
import {
|
|
65
|
-
Textarea
|
|
66
|
-
} from "./chunk-RK6BB3HH.mjs";
|
|
67
82
|
import "./chunk-YJOOSTJC.mjs";
|
|
83
|
+
import {
|
|
84
|
+
Checkbox
|
|
85
|
+
} from "./chunk-X7EKQZNU.mjs";
|
|
68
86
|
import "./chunk-LMF3QGSF.mjs";
|
|
69
87
|
import {
|
|
70
|
-
Fieldset
|
|
71
|
-
|
|
88
|
+
Fieldset,
|
|
89
|
+
useFieldsetContext
|
|
90
|
+
} from "./chunk-HXV2UMEV.mjs";
|
|
72
91
|
import "./chunk-7LPYJC6S.mjs";
|
|
73
92
|
import {
|
|
74
93
|
Input
|
|
@@ -79,9 +98,6 @@ import "./chunk-NSLSA7F7.mjs";
|
|
|
79
98
|
import {
|
|
80
99
|
ErrorMessage
|
|
81
100
|
} from "./chunk-IL7576PP.mjs";
|
|
82
|
-
import {
|
|
83
|
-
Checkbox
|
|
84
|
-
} from "./chunk-PXHYOQPB.mjs";
|
|
85
101
|
import "./chunk-OIQUYB26.mjs";
|
|
86
102
|
import {
|
|
87
103
|
Container
|
|
@@ -90,19 +106,11 @@ import "./chunk-XLLYMQLW.mjs";
|
|
|
90
106
|
import {
|
|
91
107
|
Link
|
|
92
108
|
} from "./chunk-5QL53TR2.mjs";
|
|
93
|
-
import "./chunk-6QV3OV66.mjs";
|
|
94
|
-
import {
|
|
95
|
-
LinkList
|
|
96
|
-
} from "./chunk-GJDRW6PA.mjs";
|
|
97
|
-
import {
|
|
98
|
-
OrderedList,
|
|
99
|
-
UnorderedList
|
|
100
|
-
} from "./chunk-PMLDK3VC.mjs";
|
|
101
|
-
import "./chunk-K6PP3ACJ.mjs";
|
|
102
109
|
import {
|
|
103
|
-
|
|
104
|
-
} from "./chunk-
|
|
105
|
-
import "./chunk-
|
|
110
|
+
AccordionComponent
|
|
111
|
+
} from "./chunk-LIQ3FB56.mjs";
|
|
112
|
+
import "./chunk-62F4I3MQ.mjs";
|
|
113
|
+
import "./chunk-VRIY65P5.mjs";
|
|
106
114
|
import "./chunk-ZOCMUEOX.mjs";
|
|
107
115
|
import {
|
|
108
116
|
Breadcrumbs
|
|
@@ -113,19 +121,19 @@ import {
|
|
|
113
121
|
SecondaryButton
|
|
114
122
|
} from "./chunk-OUHO4LGN.mjs";
|
|
115
123
|
import "./chunk-X5JERDDU.mjs";
|
|
116
|
-
import
|
|
117
|
-
AccordionComponent
|
|
118
|
-
} from "./chunk-DJRMXOCP.mjs";
|
|
119
|
-
import "./chunk-KRGKVH5J.mjs";
|
|
120
|
-
import "./chunk-FT5CX2W5.mjs";
|
|
121
|
-
import "./chunk-SAGJ5W7M.mjs";
|
|
122
|
-
import "./chunk-VRIY65P5.mjs";
|
|
124
|
+
import "./chunk-K6PP3ACJ.mjs";
|
|
123
125
|
import {
|
|
124
126
|
Badge,
|
|
125
127
|
DarkBadge,
|
|
126
128
|
WarningBadge,
|
|
127
129
|
WhiteBadge
|
|
128
130
|
} from "./chunk-W3D4VR4Y.mjs";
|
|
131
|
+
import {
|
|
132
|
+
BoxComponent
|
|
133
|
+
} from "./chunk-BZNDK3KJ.mjs";
|
|
134
|
+
import "./chunk-EGXM575K.mjs";
|
|
135
|
+
import "./chunk-GUB3UCXO.mjs";
|
|
136
|
+
import "./chunk-YXHXRUFX.mjs";
|
|
129
137
|
import "./chunk-WCA2WPFS.mjs";
|
|
130
138
|
import "./chunk-V3PAFMK5.mjs";
|
|
131
139
|
import "./chunk-MSFHJVHD.mjs";
|
|
@@ -135,7 +143,7 @@ import {
|
|
|
135
143
|
import "./chunk-JTZPQHKD.mjs";
|
|
136
144
|
import {
|
|
137
145
|
Skeleton
|
|
138
|
-
} from "./chunk-
|
|
146
|
+
} from "./chunk-A47QULAK.mjs";
|
|
139
147
|
import "./chunk-TJH5QJMS.mjs";
|
|
140
148
|
import {
|
|
141
149
|
StepIndicator
|
|
@@ -144,7 +152,7 @@ import "./chunk-JKCVB5TR.mjs";
|
|
|
144
152
|
import {
|
|
145
153
|
StyledHtml
|
|
146
154
|
} from "./chunk-S5RB7KLJ.mjs";
|
|
147
|
-
import "./chunk-
|
|
155
|
+
import "./chunk-KQITCS3U.mjs";
|
|
148
156
|
import "./chunk-DZNH5JHY.mjs";
|
|
149
157
|
import {
|
|
150
158
|
AutoAnimateHeight
|
|
@@ -166,6 +174,7 @@ export {
|
|
|
166
174
|
DescriptionList,
|
|
167
175
|
ErrorMessage,
|
|
168
176
|
Fieldset,
|
|
177
|
+
FooterComponent as Footer,
|
|
169
178
|
Input,
|
|
170
179
|
Link,
|
|
171
180
|
LinkList,
|
|
@@ -201,6 +210,9 @@ export {
|
|
|
201
210
|
UnorderedList,
|
|
202
211
|
WarningBadge,
|
|
203
212
|
WarningBanner,
|
|
204
|
-
WhiteBadge
|
|
213
|
+
WhiteBadge,
|
|
214
|
+
useFieldsetContext,
|
|
215
|
+
useNavbarExpendableMenuContext,
|
|
216
|
+
useRadioGroupContext
|
|
205
217
|
};
|
|
206
218
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}
|
package/dist/navbar/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Navbar_alias_2 as Navbar } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useNavbarExpendableMenuContext_alias_2 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { NavbarProps_alias_2 as NavbarProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { NavbarLogo_alias_2 as NavbarLogo } from '../_tsup-dts-rollup';
|
|
4
5
|
export { NavbarLogoAndServiceText_alias_2 as NavbarLogoAndServiceText } from '../_tsup-dts-rollup';
|
package/dist/navbar/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Navbar_alias_2 as Navbar } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useNavbarExpendableMenuContext_alias_2 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { NavbarProps_alias_2 as NavbarProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { NavbarLogo_alias_2 as NavbarLogo } from '../_tsup-dts-rollup';
|
|
4
5
|
export { NavbarLogoAndServiceText_alias_2 as NavbarLogoAndServiceText } from '../_tsup-dts-rollup';
|
package/dist/navbar/index.js
CHANGED
|
@@ -59,7 +59,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
59
59
|
// src/navbar/index.tsx
|
|
60
60
|
var navbar_exports = {};
|
|
61
61
|
__export(navbar_exports, {
|
|
62
|
-
Navbar: () => NavbarComponent
|
|
62
|
+
Navbar: () => NavbarComponent,
|
|
63
|
+
useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext
|
|
63
64
|
});
|
|
64
65
|
module.exports = __toCommonJS(navbar_exports);
|
|
65
66
|
|
|
@@ -162,11 +163,12 @@ function MenuIcon() {
|
|
|
162
163
|
|
|
163
164
|
// src/navbar/navbar-expandable-menu.tsx
|
|
164
165
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
165
|
-
var
|
|
166
|
+
var expandableMenuContext = (0, import_react2.createContext)([
|
|
166
167
|
false,
|
|
167
168
|
() => {
|
|
168
169
|
}
|
|
169
170
|
]);
|
|
171
|
+
var useNavbarExpendableMenuContext = () => (0, import_react2.useContext)(expandableMenuContext);
|
|
170
172
|
function NavbarExpandableMenu({ children }) {
|
|
171
173
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
172
174
|
const toggleOpen = () => {
|
|
@@ -180,7 +182,7 @@ function NavbarExpandableMenu({ children }) {
|
|
|
180
182
|
}
|
|
181
183
|
};
|
|
182
184
|
const navbarElement = document.getElementsByClassName((0, import_typed_classname2.clsx)("hds-navbar"))[0];
|
|
183
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
|
|
184
186
|
open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
|
|
185
187
|
children
|
|
186
188
|
] });
|
|
@@ -219,7 +221,7 @@ function RenderButton(_a) {
|
|
|
219
221
|
type: "button"
|
|
220
222
|
}, rest), {
|
|
221
223
|
children: [
|
|
222
|
-
text,
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_typed_classname2.clsx)("hds-navbar__button-responsive-text"), children: text }),
|
|
223
225
|
" ",
|
|
224
226
|
icon
|
|
225
227
|
]
|
|
@@ -241,7 +243,7 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
241
243
|
"whenOpenHelperTitle",
|
|
242
244
|
"className"
|
|
243
245
|
]);
|
|
244
|
-
const [open, toggleOpen] = (
|
|
246
|
+
const [open, toggleOpen] = useNavbarExpendableMenuContext();
|
|
245
247
|
const [width, setWidth] = (0, import_react2.useState)(0);
|
|
246
248
|
const measureButtonRef = (0, import_react2.useRef)(null);
|
|
247
249
|
const text = open ? whenOpenText : whenClosedText;
|
|
@@ -308,7 +310,7 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
308
310
|
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
|
|
309
311
|
var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
|
|
310
312
|
var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
|
|
311
|
-
const [open] = (
|
|
313
|
+
const [open] = useNavbarExpendableMenuContext();
|
|
312
314
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
313
315
|
Component,
|
|
314
316
|
__spreadProps(__spreadValues({}, rest), {
|
|
@@ -333,6 +335,7 @@ NavbarComponent.Button = NavbarButton;
|
|
|
333
335
|
NavbarComponent.Navigation = NavbarNavigation;
|
|
334
336
|
// Annotate the CommonJS export names for ESM import in node:
|
|
335
337
|
0 && (module.exports = {
|
|
336
|
-
Navbar
|
|
338
|
+
Navbar,
|
|
339
|
+
useNavbarExpendableMenuContext
|
|
337
340
|
});
|
|
338
341
|
//# sourceMappingURL=index.js.map
|
package/dist/navbar/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/navbar/index.tsx","../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import {\n Navbar,\n NavbarLogo,\n NavbarButton,\n NavbarNavigation,\n NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n NavbarExpandableMenu,\n NavbarExpandableMenuTrigger,\n NavbarExpandableMenuContent,\n} from \"./navbar-expandable-menu\";\n\nconst NavbarExpandableMenuComponent = NavbarExpandableMenu as typeof NavbarExpandableMenu & {\n Trigger: typeof NavbarExpandableMenuTrigger;\n Content: typeof NavbarExpandableMenuContent;\n};\nNavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;\nNavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;\n\nconst NavbarComponent = Navbar as typeof Navbar & {\n Logo: typeof NavbarLogo;\n LogoAndServiceText: typeof NavbarLogoAndServiceText;\n ExpandableMenu: typeof NavbarExpandableMenuComponent;\n Button: typeof NavbarButton;\n Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\nNavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;\nNavbarComponent.Button = NavbarButton;\nNavbarComponent.Navigation = NavbarNavigation;\n\nexport { NavbarComponent as Navbar };\nexport type * from \"./navbar\";\n","import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n /**\n * Navbar variant\n *\n * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n *\n * For internal services or flagship services use the `service` should be used\n */\n variant?: \"default\" | \"service\";\n children: React.ReactNode;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n ({ children, className, variant, ...rest }, ref) => {\n return (\n <header\n className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </header>\n );\n },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps {\n children?: never;\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 NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement> = forwardRef(\n ({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component className={clsx(\"hds-navbar__logo\", className as undefined)} ref={ref} {...rest} />\n );\n },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n /**\n * The text display next to the logo\n */\n children: React.ReactNode;\n\n /**\n * The text variant\n *\n * Use `service` for internal applications\n * Use `flagship` for public facing applications\n */\n variant: \"service\" | \"flagship\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean;\n}\n/**\n * Internal service or flagship text next to either the 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 NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n ({ children, asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-navbar__logo-and-service-text\",\n `hds-navbar__logo-and-service-text--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\n// Navbar button\ninterface NavbarButtonProps {\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\nexport const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement> = forwardRef(\n ({ as: Component = \"button\", children, icon, className, ...rest }, ref) => {\n return (\n <Component className={clsx(\"hds-navbar__button\", className as undefined)} ref={ref} {...rest}>\n {children} {icon}\n </Component>\n );\n },\n);\nNavbarButton.displayName = \"Navbar.Button\";\n\ninterface NavbarNavigationProps {\n children: React.ReactNode;\n}\nexport const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement> =\n forwardRef(({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-navbar__navigation\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n });\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n","import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst navbarContext = createContext([\n false as boolean,\n () => {\n // Empty\n },\n] as const);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n const toggleOpen = () => {\n const nextOpenState = !open;\n setOpen(nextOpenState);\n if (nextOpenState) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n } else {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n }\n };\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n return (\n <navbarContext.Provider value={[open, toggleOpen]}>\n {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n {children}\n </navbarContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n className?: ClassValue;\n open?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement>;\n ref?: React.ForwardedRef<HTMLButtonElement>;\n text: React.ReactNode;\n title?: string;\n toggleOpen?: () => void;\n width?: number;\n}\n\nfunction RenderButton({\n className,\n innerRef,\n open = false,\n ref,\n text,\n title,\n toggleOpen,\n width,\n ...rest\n}: ButtonInterface) {\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n const style = width ? { width } : {};\n return (\n <button\n className={clsx(\"hds-navbar__button\", className)}\n onClick={toggleOpen}\n ref={ref ?? innerRef}\n style={style}\n title={title}\n type=\"button\"\n {...rest}\n >\n {text} {icon}\n </button>\n );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [ ] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\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 className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useContext(navbarContext);\n const [width, setWidth] = useState(0);\n const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n /**\n *\n * @param element - Button to measure\n * @param callback - report the width back\n */\n const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n // Create an empty div to render the Button in\n const container = document.createElement(\"div\");\n container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n // Attach the empty div inside the navigation section\n const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n c.appendChild(container);\n\n // Render the Button here\n const root = createRoot(container as HTMLElement);\n root.render(element);\n\n /**\n * Get the offsetWidth now that it is rendered\n * Also clean up after us\n */\n const getWidth = () => {\n callback(measureButtonRef.current?.offsetWidth ?? 0);\n root.unmount();\n c.removeChild(container);\n };\n // This is instead of the callback that used to be on ReactDOM.render()\n setTimeout(getWidth, 0);\n };\n\n useEffect(() => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n text={whenClosedText}\n title={title}\n {...rest}\n />,\n (closedWidth: number) => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n open\n text={whenOpenText}\n title={title}\n {...rest}\n />,\n (openWidth: number) => {\n setWidth(Math.max(openWidth, closedWidth));\n },\n );\n },\n );\n }, [className, rest, title, whenClosedText, whenOpenText]);\n\n return (\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n open={open}\n ref={ref}\n text={text as string}\n title={title}\n toggleOpen={toggleOpen}\n width={width}\n {...rest}\n />\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n NavbarExpandableMenuContentProps,\n HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n const [open] = useContext(navbarContext);\n return (\n <Component\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </Component>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n return (\n <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nfunction MenuIcon() {\n return (\n <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime","FocusTrap","_a","_b"]}
|
|
1
|
+
{"version":3,"sources":["../../src/navbar/index.tsx","../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import {\n Navbar,\n NavbarLogo,\n NavbarButton,\n NavbarNavigation,\n NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n useNavbarExpendableMenuContext,\n NavbarExpandableMenu,\n NavbarExpandableMenuTrigger,\n NavbarExpandableMenuContent,\n} from \"./navbar-expandable-menu\";\n\nconst NavbarExpandableMenuComponent = NavbarExpandableMenu as typeof NavbarExpandableMenu & {\n Trigger: typeof NavbarExpandableMenuTrigger;\n Content: typeof NavbarExpandableMenuContent;\n};\nNavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;\nNavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;\n\nconst NavbarComponent = Navbar as typeof Navbar & {\n Logo: typeof NavbarLogo;\n LogoAndServiceText: typeof NavbarLogoAndServiceText;\n ExpandableMenu: typeof NavbarExpandableMenuComponent;\n Button: typeof NavbarButton;\n Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\nNavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;\nNavbarComponent.Button = NavbarButton;\nNavbarComponent.Navigation = NavbarNavigation;\n\nexport { NavbarComponent as Navbar, useNavbarExpendableMenuContext };\nexport type * from \"./navbar\";\n","import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n /**\n * Navbar variant\n *\n * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n *\n * For internal services or flagship services use the `service` should be used\n */\n variant?: \"default\" | \"service\";\n children: React.ReactNode;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n ({ children, className, variant, ...rest }, ref) => {\n return (\n <header\n className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </header>\n );\n },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps {\n children?: never;\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 NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement> = forwardRef(\n ({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component className={clsx(\"hds-navbar__logo\", className as undefined)} ref={ref} {...rest} />\n );\n },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n /**\n * The text display next to the logo\n */\n children: React.ReactNode;\n\n /**\n * The text variant\n *\n * Use `service` for internal applications\n * Use `flagship` for public facing applications\n */\n variant: \"service\" | \"flagship\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean;\n}\n/**\n * Internal service or flagship text next to either the 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 NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n ({ children, asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-navbar__logo-and-service-text\",\n `hds-navbar__logo-and-service-text--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\n// Navbar button\ninterface NavbarButtonProps {\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\nexport const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement> = forwardRef(\n ({ as: Component = \"button\", children, icon, className, ...rest }, ref) => {\n return (\n <Component className={clsx(\"hds-navbar__button\", className as undefined)} ref={ref} {...rest}>\n {children} {icon}\n </Component>\n );\n },\n);\nNavbarButton.displayName = \"Navbar.Button\";\n\ninterface NavbarNavigationProps {\n children: React.ReactNode;\n}\nexport const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement> =\n forwardRef(({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-navbar__navigation\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n });\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n","import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } 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\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n const toggleOpen = () => {\n const nextOpenState = !open;\n setOpen(nextOpenState);\n if (nextOpenState) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n } else {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n }\n };\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n return (\n <expandableMenuContext.Provider value={[open, toggleOpen]}>\n {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n {children}\n </expandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n className?: ClassValue;\n open?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement>;\n ref?: React.ForwardedRef<HTMLButtonElement>;\n text: React.ReactNode;\n title?: string;\n toggleOpen?: () => void;\n width?: number;\n}\n\nfunction RenderButton({\n className,\n innerRef,\n open = false,\n ref,\n text,\n title,\n toggleOpen,\n width,\n ...rest\n}: ButtonInterface) {\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n const style = width ? { width } : {};\n return (\n <button\n className={clsx(\"hds-navbar__button\", className)}\n onClick={toggleOpen}\n ref={ref ?? innerRef}\n style={style}\n title={title}\n type=\"button\"\n {...rest}\n >\n <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n </button>\n );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\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 className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useNavbarExpendableMenuContext();\n const [width, setWidth] = useState(0);\n const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n /**\n *\n * @param element - Button to measure\n * @param callback - report the width back\n */\n const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n // Create an empty div to render the Button in\n const container = document.createElement(\"div\");\n container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n // Attach the empty div inside the navigation section\n const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n c.appendChild(container);\n\n // Render the Button here\n const root = createRoot(container as HTMLElement);\n root.render(element);\n\n /**\n * Get the offsetWidth now that it is rendered\n * Also clean up after us\n */\n const getWidth = () => {\n callback(measureButtonRef.current?.offsetWidth ?? 0);\n root.unmount();\n c.removeChild(container);\n };\n // This is instead of the callback that used to be on ReactDOM.render()\n setTimeout(getWidth, 0);\n };\n\n useEffect(() => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n text={whenClosedText}\n title={title}\n {...rest}\n />,\n (closedWidth: number) => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n open\n text={whenOpenText}\n title={title}\n {...rest}\n />,\n (openWidth: number) => {\n setWidth(Math.max(openWidth, closedWidth));\n },\n );\n },\n );\n }, [className, rest, title, whenClosedText, whenOpenText]);\n\n return (\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n open={open}\n ref={ref}\n text={text as string}\n title={title}\n toggleOpen={toggleOpen}\n width={width}\n {...rest}\n />\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n NavbarExpandableMenuContentProps,\n HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n const [open] = useNavbarExpendableMenuContext();\n return (\n <Component\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </Component>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n return (\n <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nfunction MenuIcon() {\n return (\n <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime","FocusTrap","_a","_b"]}
|
package/dist/navbar/index.mjs
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
NavbarComponent
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import
|
|
5
|
-
|
|
3
|
+
} from "../chunk-TE5M6GJB.mjs";
|
|
4
|
+
import {
|
|
5
|
+
useNavbarExpendableMenuContext
|
|
6
|
+
} from "../chunk-DEVTAZKG.mjs";
|
|
6
7
|
import "../chunk-MGUYIOP2.mjs";
|
|
8
|
+
import "../chunk-625SVQEP.mjs";
|
|
7
9
|
import "../chunk-R4SQKVDQ.mjs";
|
|
8
10
|
export {
|
|
9
|
-
NavbarComponent as Navbar
|
|
11
|
+
NavbarComponent as Navbar,
|
|
12
|
+
useNavbarExpendableMenuContext
|
|
10
13
|
};
|
|
11
14
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { NavbarExpandableMenu } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useNavbarExpendableMenuContext_alias_3 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { NavbarExpandableMenuProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { NavbarExpandableMenuTriggerProps } from '../_tsup-dts-rollup';
|
|
4
5
|
export { NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { NavbarExpandableMenu } from '../_tsup-dts-rollup';
|
|
2
|
+
export { useNavbarExpendableMenuContext_alias_3 as useNavbarExpendableMenuContext } from '../_tsup-dts-rollup';
|
|
2
3
|
export { NavbarExpandableMenuProps } from '../_tsup-dts-rollup';
|
|
3
4
|
export { NavbarExpandableMenuTriggerProps } from '../_tsup-dts-rollup';
|
|
4
5
|
export { NavbarExpandableMenuTrigger } from '../_tsup-dts-rollup';
|
|
@@ -61,7 +61,8 @@ var navbar_expandable_menu_exports = {};
|
|
|
61
61
|
__export(navbar_expandable_menu_exports, {
|
|
62
62
|
NavbarExpandableMenu: () => NavbarExpandableMenu,
|
|
63
63
|
NavbarExpandableMenuContent: () => NavbarExpandableMenuContent,
|
|
64
|
-
NavbarExpandableMenuTrigger: () => NavbarExpandableMenuTrigger
|
|
64
|
+
NavbarExpandableMenuTrigger: () => NavbarExpandableMenuTrigger,
|
|
65
|
+
useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext
|
|
65
66
|
});
|
|
66
67
|
module.exports = __toCommonJS(navbar_expandable_menu_exports);
|
|
67
68
|
var import_react = require("react");
|
|
@@ -92,11 +93,12 @@ function MenuIcon() {
|
|
|
92
93
|
|
|
93
94
|
// src/navbar/navbar-expandable-menu.tsx
|
|
94
95
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
95
|
-
var
|
|
96
|
+
var expandableMenuContext = (0, import_react.createContext)([
|
|
96
97
|
false,
|
|
97
98
|
() => {
|
|
98
99
|
}
|
|
99
100
|
]);
|
|
101
|
+
var useNavbarExpendableMenuContext = () => (0, import_react.useContext)(expandableMenuContext);
|
|
100
102
|
function NavbarExpandableMenu({ children }) {
|
|
101
103
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
102
104
|
const toggleOpen = () => {
|
|
@@ -110,7 +112,7 @@ function NavbarExpandableMenu({ children }) {
|
|
|
110
112
|
}
|
|
111
113
|
};
|
|
112
114
|
const navbarElement = document.getElementsByClassName((0, import_typed_classname.clsx)("hds-navbar"))[0];
|
|
113
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
|
|
114
116
|
open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
|
|
115
117
|
children
|
|
116
118
|
] });
|
|
@@ -149,7 +151,7 @@ function RenderButton(_a) {
|
|
|
149
151
|
type: "button"
|
|
150
152
|
}, rest), {
|
|
151
153
|
children: [
|
|
152
|
-
text,
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-navbar__button-responsive-text"), children: text }),
|
|
153
155
|
" ",
|
|
154
156
|
icon
|
|
155
157
|
]
|
|
@@ -171,7 +173,7 @@ var NavbarExpandableMenuTrigger = (0, import_react.forwardRef)(
|
|
|
171
173
|
"whenOpenHelperTitle",
|
|
172
174
|
"className"
|
|
173
175
|
]);
|
|
174
|
-
const [open, toggleOpen] = (
|
|
176
|
+
const [open, toggleOpen] = useNavbarExpendableMenuContext();
|
|
175
177
|
const [width, setWidth] = (0, import_react.useState)(0);
|
|
176
178
|
const measureButtonRef = (0, import_react.useRef)(null);
|
|
177
179
|
const text = open ? whenOpenText : whenClosedText;
|
|
@@ -238,7 +240,7 @@ var NavbarExpandableMenuTrigger = (0, import_react.forwardRef)(
|
|
|
238
240
|
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
|
|
239
241
|
var NavbarExpandableMenuContent = (0, import_react.forwardRef)((_a, ref) => {
|
|
240
242
|
var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
|
|
241
|
-
const [open] = (
|
|
243
|
+
const [open] = useNavbarExpendableMenuContext();
|
|
242
244
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
243
245
|
Component,
|
|
244
246
|
__spreadProps(__spreadValues({}, rest), {
|
|
@@ -254,6 +256,7 @@ NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenu.Content";
|
|
|
254
256
|
0 && (module.exports = {
|
|
255
257
|
NavbarExpandableMenu,
|
|
256
258
|
NavbarExpandableMenuContent,
|
|
257
|
-
NavbarExpandableMenuTrigger
|
|
259
|
+
NavbarExpandableMenuTrigger,
|
|
260
|
+
useNavbarExpendableMenuContext
|
|
258
261
|
});
|
|
259
262
|
//# sourceMappingURL=navbar-expandable-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst navbarContext = createContext([\n false as boolean,\n () => {\n // Empty\n },\n] as const);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n const toggleOpen = () => {\n const nextOpenState = !open;\n setOpen(nextOpenState);\n if (nextOpenState) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n } else {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n }\n };\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n return (\n <navbarContext.Provider value={[open, toggleOpen]}>\n {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n {children}\n </navbarContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n className?: ClassValue;\n open?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement>;\n ref?: React.ForwardedRef<HTMLButtonElement>;\n text: React.ReactNode;\n title?: string;\n toggleOpen?: () => void;\n width?: number;\n}\n\nfunction RenderButton({\n className,\n innerRef,\n open = false,\n ref,\n text,\n title,\n toggleOpen,\n width,\n ...rest\n}: ButtonInterface) {\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n const style = width ? { width } : {};\n return (\n <button\n className={clsx(\"hds-navbar__button\", className)}\n onClick={toggleOpen}\n ref={ref ?? innerRef}\n style={style}\n title={title}\n type=\"button\"\n {...rest}\n >\n {text} {icon}\n </button>\n );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [ ] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\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 className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useContext(navbarContext);\n const [width, setWidth] = useState(0);\n const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n /**\n *\n * @param element - Button to measure\n * @param callback - report the width back\n */\n const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n // Create an empty div to render the Button in\n const container = document.createElement(\"div\");\n container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n // Attach the empty div inside the navigation section\n const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n c.appendChild(container);\n\n // Render the Button here\n const root = createRoot(container as HTMLElement);\n root.render(element);\n\n /**\n * Get the offsetWidth now that it is rendered\n * Also clean up after us\n */\n const getWidth = () => {\n callback(measureButtonRef.current?.offsetWidth ?? 0);\n root.unmount();\n c.removeChild(container);\n };\n // This is instead of the callback that used to be on ReactDOM.render()\n setTimeout(getWidth, 0);\n };\n\n useEffect(() => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n text={whenClosedText}\n title={title}\n {...rest}\n />,\n (closedWidth: number) => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n open\n text={whenOpenText}\n title={title}\n {...rest}\n />,\n (openWidth: number) => {\n setWidth(Math.max(openWidth, closedWidth));\n },\n );\n },\n );\n }, [className, rest, title, whenClosedText, whenOpenText]);\n\n return (\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n open={open}\n ref={ref}\n text={text as string}\n title={title}\n toggleOpen={toggleOpen}\n width={width}\n {...rest}\n />\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n NavbarExpandableMenuContentProps,\n HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n const [open] = useContext(navbarContext);\n return (\n <Component\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </Component>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n return (\n <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nfunction MenuIcon() {\n return (\n <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_jsx_runtime","FocusTrap","_a","_b"]}
|
|
1
|
+
{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } 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\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n const toggleOpen = () => {\n const nextOpenState = !open;\n setOpen(nextOpenState);\n if (nextOpenState) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n } else {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n }\n };\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n return (\n <expandableMenuContext.Provider value={[open, toggleOpen]}>\n {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n {children}\n </expandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n className?: ClassValue;\n open?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement>;\n ref?: React.ForwardedRef<HTMLButtonElement>;\n text: React.ReactNode;\n title?: string;\n toggleOpen?: () => void;\n width?: number;\n}\n\nfunction RenderButton({\n className,\n innerRef,\n open = false,\n ref,\n text,\n title,\n toggleOpen,\n width,\n ...rest\n}: ButtonInterface) {\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n const style = width ? { width } : {};\n return (\n <button\n className={clsx(\"hds-navbar__button\", className)}\n onClick={toggleOpen}\n ref={ref ?? innerRef}\n style={style}\n title={title}\n type=\"button\"\n {...rest}\n >\n <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n </button>\n );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\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 className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useNavbarExpendableMenuContext();\n const [width, setWidth] = useState(0);\n const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n /**\n *\n * @param element - Button to measure\n * @param callback - report the width back\n */\n const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n // Create an empty div to render the Button in\n const container = document.createElement(\"div\");\n container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n // Attach the empty div inside the navigation section\n const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n c.appendChild(container);\n\n // Render the Button here\n const root = createRoot(container as HTMLElement);\n root.render(element);\n\n /**\n * Get the offsetWidth now that it is rendered\n * Also clean up after us\n */\n const getWidth = () => {\n callback(measureButtonRef.current?.offsetWidth ?? 0);\n root.unmount();\n c.removeChild(container);\n };\n // This is instead of the callback that used to be on ReactDOM.render()\n setTimeout(getWidth, 0);\n };\n\n useEffect(() => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n text={whenClosedText}\n title={title}\n {...rest}\n />,\n (closedWidth: number) => {\n measureButton(\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n innerRef={measureButtonRef}\n open\n text={whenOpenText}\n title={title}\n {...rest}\n />,\n (openWidth: number) => {\n setWidth(Math.max(openWidth, closedWidth));\n },\n );\n },\n );\n }, [className, rest, title, whenClosedText, whenOpenText]);\n\n return (\n <RenderButton\n className={(className ? className : \"\") as ClassValue}\n open={open}\n ref={ref}\n text={text as string}\n title={title}\n toggleOpen={toggleOpen}\n width={width}\n {...rest}\n />\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n NavbarExpandableMenuContentProps,\n HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n const [open] = useNavbarExpendableMenuContext();\n return (\n <Component\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </Component>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n return (\n <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nfunction MenuIcon() {\n return (\n <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_jsx_runtime","FocusTrap","_a","_b"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
2
|
NavbarExpandableMenu,
|
|
3
3
|
NavbarExpandableMenuContent,
|
|
4
|
-
NavbarExpandableMenuTrigger
|
|
5
|
-
|
|
4
|
+
NavbarExpandableMenuTrigger,
|
|
5
|
+
useNavbarExpendableMenuContext
|
|
6
|
+
} from "../chunk-DEVTAZKG.mjs";
|
|
6
7
|
import "../chunk-MGUYIOP2.mjs";
|
|
7
8
|
import "../chunk-R4SQKVDQ.mjs";
|
|
8
9
|
export {
|
|
9
10
|
NavbarExpandableMenu,
|
|
10
11
|
NavbarExpandableMenuContent,
|
|
11
|
-
NavbarExpandableMenuTrigger
|
|
12
|
+
NavbarExpandableMenuTrigger,
|
|
13
|
+
useNavbarExpendableMenuContext
|
|
12
14
|
};
|
|
13
15
|
//# sourceMappingURL=navbar-expandable-menu.mjs.map
|
package/dist/skeleton/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/skeleton/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n height?: number | string;\n width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n /**\n * The visual style of the Skeleton\n */\n variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n /**\n * Whether to show animation or not\n * In the future the animation effect might become configurable\n *\n * default true\n */\n animation?: boolean;\n\n children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n animation,\n variant = \"text\",\n width,\n height,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n return (\n <Component\n className={clsx(\n \"hds-skeleton\",\n `hds-skeleton--${variant}`,\n !animation && `hds-skeleton--no-animation`,\n className as undefined,\n )}\n style={{ ...style, width, height }}\n ref={ref}\n aria-hidden\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/skeleton/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n height?: number | string;\n width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n /**\n * The visual style of the Skeleton\n */\n variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n /**\n * Whether to show animation or not\n * In the future the animation effect might become configurable\n *\n * default true\n */\n animation?: boolean;\n\n children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n animation = true,\n variant = \"text\",\n width,\n height,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n return (\n <Component\n className={clsx(\n \"hds-skeleton\",\n `hds-skeleton--${variant}`,\n !animation && `hds-skeleton--no-animation`,\n className as undefined,\n )}\n style={{ ...style, width, height }}\n ref={ref}\n aria-hidden\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
|
package/dist/skeleton/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n height?: number | string;\n width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n /**\n * The visual style of the Skeleton\n */\n variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n /**\n * Whether to show animation or not\n * In the future the animation effect might become configurable\n *\n * default true\n */\n animation?: boolean;\n\n children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n animation,\n variant = \"text\",\n width,\n height,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n return (\n <Component\n className={clsx(\n \"hds-skeleton\",\n `hds-skeleton--${variant}`,\n !animation && `hds-skeleton--no-animation`,\n className as undefined,\n )}\n style={{ ...style, width, height }}\n ref={ref}\n aria-hidden\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n height?: number | string;\n width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n /**\n * The visual style of the Skeleton\n */\n variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n /**\n * Whether to show animation or not\n * In the future the animation effect might become configurable\n *\n * default true\n */\n animation?: boolean;\n\n children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n animation = true,\n variant = \"text\",\n width,\n height,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n return (\n <Component\n className={clsx(\n \"hds-skeleton\",\n `hds-skeleton--${variant}`,\n !animation && `hds-skeleton--no-animation`,\n className as undefined,\n )}\n style={{ ...style, width, height }}\n ref={ref}\n aria-hidden\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
|
package/dist/tabs/context.d.mts
CHANGED