@postenbring/hedwig-react 0.0.58 → 0.0.60
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 +81 -82
- package/dist/_tsup-dts-rollup.d.ts +81 -82
- package/dist/{chunk-WDD7QJP6.mjs → chunk-2E6XPNPX.mjs} +7 -2
- package/dist/chunk-2E6XPNPX.mjs.map +1 -0
- package/dist/chunk-2YL2MVWN.mjs +1 -0
- package/dist/{chunk-T3ADJNOV.mjs → chunk-37WVYY6X.mjs} +1 -1
- package/dist/chunk-37WVYY6X.mjs.map +1 -0
- package/dist/{chunk-CA226LBE.mjs → chunk-5MDJP43L.mjs} +5 -5
- package/dist/chunk-6QV3OV66.mjs +1 -0
- package/dist/chunk-DY7LD3X3.mjs +1 -0
- package/dist/{chunk-QGMW5QJ3.mjs → chunk-Q3GMWURJ.mjs} +6 -6
- package/dist/{chunk-UTVSGTRJ.mjs → chunk-XMB45ILT.mjs} +2 -2
- package/dist/chunk-XMB45ILT.mjs.map +1 -0
- package/dist/{list → description-list}/description-list.js +1 -1
- package/dist/description-list/description-list.js.map +1 -0
- package/dist/{list → description-list}/description-list.mjs +1 -1
- package/dist/description-list/description-list.mjs.map +1 -0
- package/dist/description-list/index.d.mts +2 -0
- package/dist/description-list/index.d.ts +2 -0
- package/dist/description-list/index.js +82 -0
- package/dist/description-list/index.js.map +1 -0
- package/dist/description-list/index.mjs +9 -0
- package/dist/description-list/index.mjs.map +1 -0
- package/dist/form/fieldset/fieldset.js.map +1 -1
- package/dist/form/fieldset/fieldset.mjs +1 -1
- package/dist/form/fieldset/index.js.map +1 -1
- package/dist/form/fieldset/index.mjs +1 -1
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +7 -7
- package/dist/index-no-css.d.mts +2 -2
- package/dist/index-no-css.d.ts +2 -2
- package/dist/index-no-css.js +93 -88
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +25 -24
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +93 -88
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +25 -24
- package/dist/index.mjs.map +1 -1
- package/dist/list/index.d.mts +0 -2
- package/dist/list/index.d.ts +0 -2
- package/dist/list/index.js +7 -35
- package/dist/list/index.js.map +1 -1
- package/dist/list/index.mjs +1 -5
- package/dist/navbar/index.js +16 -1
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +3 -3
- package/dist/navbar/navbar-expandable-menu.js +16 -1
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +1 -1
- package/dist/tabs/index.mjs +2 -2
- package/package.json +4 -3
- package/dist/chunk-E2LKLNGA.mjs +0 -1
- package/dist/chunk-KOAR6LZG.mjs +0 -1
- package/dist/chunk-T3ADJNOV.mjs.map +0 -1
- package/dist/chunk-UTVSGTRJ.mjs.map +0 -1
- package/dist/chunk-WDD7QJP6.mjs.map +0 -1
- package/dist/list/description-list.js.map +0 -1
- /package/dist/{chunk-E2LKLNGA.mjs.map → chunk-2YL2MVWN.mjs.map} +0 -0
- /package/dist/{chunk-CA226LBE.mjs.map → chunk-5MDJP43L.mjs.map} +0 -0
- /package/dist/{chunk-KOAR6LZG.mjs.map → chunk-6QV3OV66.mjs.map} +0 -0
- /package/dist/{list/description-list.mjs.map → chunk-DY7LD3X3.mjs.map} +0 -0
- /package/dist/{chunk-QGMW5QJ3.mjs.map → chunk-Q3GMWURJ.mjs.map} +0 -0
- /package/dist/{list → description-list}/description-list.d.mts +0 -0
- /package/dist/{list → description-list}/description-list.d.ts +0 -0
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./chunk-
|
|
1
|
+
import "./chunk-DY7LD3X3.mjs";
|
|
2
2
|
import {
|
|
3
3
|
TextBody,
|
|
4
4
|
TextBodySmall,
|
|
@@ -23,10 +23,10 @@ import {
|
|
|
23
23
|
} from "./chunk-IAS3E2S3.mjs";
|
|
24
24
|
import {
|
|
25
25
|
TabsComponent
|
|
26
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-5MDJP43L.mjs";
|
|
27
|
+
import "./chunk-XVZ44NGD.mjs";
|
|
27
28
|
import "./chunk-MBBFU4IR.mjs";
|
|
28
29
|
import "./chunk-EJADADIY.mjs";
|
|
29
|
-
import "./chunk-XVZ44NGD.mjs";
|
|
30
30
|
import {
|
|
31
31
|
MessageComponent
|
|
32
32
|
} from "./chunk-AR2NOI4U.mjs";
|
|
@@ -37,11 +37,19 @@ import {
|
|
|
37
37
|
import "./chunk-POJTVNEO.mjs";
|
|
38
38
|
import {
|
|
39
39
|
NavbarComponent
|
|
40
|
-
} from "./chunk-
|
|
41
|
-
import "./chunk-WDD7QJP6.mjs";
|
|
42
|
-
import "./chunk-MGUYIOP2.mjs";
|
|
40
|
+
} from "./chunk-Q3GMWURJ.mjs";
|
|
43
41
|
import "./chunk-JMDXW2ML.mjs";
|
|
42
|
+
import "./chunk-2E6XPNPX.mjs";
|
|
43
|
+
import "./chunk-MGUYIOP2.mjs";
|
|
44
|
+
import "./chunk-2YL2MVWN.mjs";
|
|
45
|
+
import {
|
|
46
|
+
DescriptionList
|
|
47
|
+
} from "./chunk-XMB45ILT.mjs";
|
|
44
48
|
import "./chunk-T24JZIQO.mjs";
|
|
49
|
+
import "./chunk-MQ3EEUTP.mjs";
|
|
50
|
+
import {
|
|
51
|
+
Radiobutton
|
|
52
|
+
} from "./chunk-SEKRICE4.mjs";
|
|
45
53
|
import "./chunk-BYEJZSG5.mjs";
|
|
46
54
|
import {
|
|
47
55
|
Select
|
|
@@ -53,7 +61,7 @@ import {
|
|
|
53
61
|
import "./chunk-LMF3QGSF.mjs";
|
|
54
62
|
import {
|
|
55
63
|
Fieldset
|
|
56
|
-
} from "./chunk-
|
|
64
|
+
} from "./chunk-37WVYY6X.mjs";
|
|
57
65
|
import "./chunk-7LPYJC6S.mjs";
|
|
58
66
|
import {
|
|
59
67
|
Input
|
|
@@ -61,17 +69,13 @@ import {
|
|
|
61
69
|
import "./chunk-Y5SUMFYJ.mjs";
|
|
62
70
|
import "./chunk-SKI2APSK.mjs";
|
|
63
71
|
import "./chunk-NSLSA7F7.mjs";
|
|
64
|
-
import "./chunk-MQ3EEUTP.mjs";
|
|
65
72
|
import {
|
|
66
|
-
|
|
67
|
-
} from "./chunk-
|
|
73
|
+
ErrorMessage
|
|
74
|
+
} from "./chunk-IL7576PP.mjs";
|
|
68
75
|
import "./chunk-YJOOSTJC.mjs";
|
|
69
76
|
import {
|
|
70
77
|
Checkbox
|
|
71
78
|
} from "./chunk-PXHYOQPB.mjs";
|
|
72
|
-
import {
|
|
73
|
-
ErrorMessage
|
|
74
|
-
} from "./chunk-IL7576PP.mjs";
|
|
75
79
|
import "./chunk-OIQUYB26.mjs";
|
|
76
80
|
import {
|
|
77
81
|
Container
|
|
@@ -80,10 +84,7 @@ import "./chunk-XLLYMQLW.mjs";
|
|
|
80
84
|
import {
|
|
81
85
|
Link
|
|
82
86
|
} from "./chunk-MDA3MMNA.mjs";
|
|
83
|
-
import "./chunk-
|
|
84
|
-
import {
|
|
85
|
-
DescriptionList
|
|
86
|
-
} from "./chunk-UTVSGTRJ.mjs";
|
|
87
|
+
import "./chunk-6QV3OV66.mjs";
|
|
87
88
|
import {
|
|
88
89
|
LinkList
|
|
89
90
|
} from "./chunk-ZUKLWHUR.mjs";
|
|
@@ -108,13 +109,6 @@ import {
|
|
|
108
109
|
CardComponent
|
|
109
110
|
} from "./chunk-JC6DBIFE.mjs";
|
|
110
111
|
import "./chunk-X5JERDDU.mjs";
|
|
111
|
-
import "./chunk-K6PP3ACJ.mjs";
|
|
112
|
-
import {
|
|
113
|
-
Badge,
|
|
114
|
-
DarkBadge,
|
|
115
|
-
WarningBadge,
|
|
116
|
-
WhiteBadge
|
|
117
|
-
} from "./chunk-JDJQFQQ6.mjs";
|
|
118
112
|
import {
|
|
119
113
|
AccordionComponent
|
|
120
114
|
} from "./chunk-DJRMXOCP.mjs";
|
|
@@ -122,6 +116,13 @@ import "./chunk-KRGKVH5J.mjs";
|
|
|
122
116
|
import "./chunk-FT5CX2W5.mjs";
|
|
123
117
|
import "./chunk-SAGJ5W7M.mjs";
|
|
124
118
|
import "./chunk-VRIY65P5.mjs";
|
|
119
|
+
import "./chunk-K6PP3ACJ.mjs";
|
|
120
|
+
import {
|
|
121
|
+
Badge,
|
|
122
|
+
DarkBadge,
|
|
123
|
+
WarningBadge,
|
|
124
|
+
WhiteBadge
|
|
125
|
+
} from "./chunk-JDJQFQQ6.mjs";
|
|
125
126
|
import "./chunk-WCA2WPFS.mjs";
|
|
126
127
|
import "./chunk-V3PAFMK5.mjs";
|
|
127
128
|
import "./chunk-MSFHJVHD.mjs";
|
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/list/index.d.mts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
export { DescriptionList_alias_3 as DescriptionList } from '../_tsup-dts-rollup';
|
|
2
1
|
export { UnorderedList_alias_2 as UnorderedList } from '../_tsup-dts-rollup';
|
|
3
2
|
export { OrderedList_alias_2 as OrderedList } from '../_tsup-dts-rollup';
|
|
4
3
|
export { LinkList_alias_2 as LinkList } from '../_tsup-dts-rollup';
|
|
5
|
-
export { DescriptionListProps_alias_3 as DescriptionListProps } from '../_tsup-dts-rollup';
|
|
6
4
|
export { ListProps_alias_2 as ListProps } from '../_tsup-dts-rollup';
|
|
7
5
|
export { LinkListProps_alias_2 as LinkListProps } from '../_tsup-dts-rollup';
|
package/dist/list/index.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
export { DescriptionList_alias_3 as DescriptionList } from '../_tsup-dts-rollup';
|
|
2
1
|
export { UnorderedList_alias_2 as UnorderedList } from '../_tsup-dts-rollup';
|
|
3
2
|
export { OrderedList_alias_2 as OrderedList } from '../_tsup-dts-rollup';
|
|
4
3
|
export { LinkList_alias_2 as LinkList } from '../_tsup-dts-rollup';
|
|
5
|
-
export { DescriptionListProps_alias_3 as DescriptionListProps } from '../_tsup-dts-rollup';
|
|
6
4
|
export { ListProps_alias_2 as ListProps } from '../_tsup-dts-rollup';
|
|
7
5
|
export { LinkListProps_alias_2 as LinkListProps } from '../_tsup-dts-rollup';
|
package/dist/list/index.js
CHANGED
|
@@ -49,42 +49,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
49
49
|
// src/list/index.tsx
|
|
50
50
|
var list_exports = {};
|
|
51
51
|
__export(list_exports, {
|
|
52
|
-
DescriptionList: () => DescriptionList,
|
|
53
52
|
LinkList: () => LinkList,
|
|
54
53
|
OrderedList: () => OrderedList,
|
|
55
54
|
UnorderedList: () => UnorderedList
|
|
56
55
|
});
|
|
57
56
|
module.exports = __toCommonJS(list_exports);
|
|
58
57
|
|
|
59
|
-
// src/list/
|
|
58
|
+
// src/list/list.tsx
|
|
60
59
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
61
60
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
62
|
-
function DescriptionList(_a) {
|
|
63
|
-
var _b = _a, {
|
|
64
|
-
variant = "vertical",
|
|
65
|
-
className
|
|
66
|
-
} = _b, rest = __objRest(_b, [
|
|
67
|
-
"variant",
|
|
68
|
-
"className"
|
|
69
|
-
]);
|
|
70
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
-
"dl",
|
|
72
|
-
__spreadValues({
|
|
73
|
-
className: (0, import_typed_classname.clsx)(
|
|
74
|
-
"hds-description-list",
|
|
75
|
-
{
|
|
76
|
-
"hds-description-list--horizontal": variant === "horizontal"
|
|
77
|
-
},
|
|
78
|
-
className
|
|
79
|
-
)
|
|
80
|
-
}, rest)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
DescriptionList.displayName = "DescriptionList";
|
|
84
|
-
|
|
85
|
-
// src/list/list.tsx
|
|
86
|
-
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
87
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
88
61
|
function BaseList(_a) {
|
|
89
62
|
var _b = _a, {
|
|
90
63
|
as: ListTag = "ul",
|
|
@@ -97,29 +70,28 @@ function BaseList(_a) {
|
|
|
97
70
|
"size",
|
|
98
71
|
"className"
|
|
99
72
|
]);
|
|
100
|
-
return /* @__PURE__ */ (0,
|
|
73
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListTag, __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-list", `hds-list--${size}`, className) }, rest), { children }));
|
|
101
74
|
}
|
|
102
75
|
function UnorderedList(props) {
|
|
103
|
-
return /* @__PURE__ */ (0,
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
|
|
104
77
|
}
|
|
105
78
|
function OrderedList(props) {
|
|
106
|
-
return /* @__PURE__ */ (0,
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
|
|
107
80
|
}
|
|
108
81
|
BaseList.displayName = "BaseList";
|
|
109
82
|
OrderedList.displayName = "OrderedList";
|
|
110
83
|
UnorderedList.displayName = "UnorderedList";
|
|
111
84
|
|
|
112
85
|
// src/list/link-list.tsx
|
|
113
|
-
var
|
|
114
|
-
var
|
|
86
|
+
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
87
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
115
88
|
function LinkList(_a) {
|
|
116
89
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
117
|
-
return /* @__PURE__ */ (0,
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UnorderedList, __spreadValues({ className: (0, import_typed_classname2.clsx)("hds-list--link-list", className) }, rest));
|
|
118
91
|
}
|
|
119
92
|
LinkList.displayName = "LinkList";
|
|
120
93
|
// Annotate the CommonJS export names for ESM import in node:
|
|
121
94
|
0 && (module.exports = {
|
|
122
|
-
DescriptionList,
|
|
123
95
|
LinkList,
|
|
124
96
|
OrderedList,
|
|
125
97
|
UnorderedList
|
package/dist/list/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/index.tsx","../../src/list/
|
|
1
|
+
{"version":3,"sources":["../../src/list/index.tsx","../../src/list/list.tsx","../../src/list/link-list.tsx"],"sourcesContent":["export { UnorderedList, OrderedList } from \"./list\";\nexport type * from \"./list\";\n\nexport { LinkList } from \"./link-list\";\nexport type * from \"./link-list\";\n","import type { HTMLAttributes } from \"react\";\nimport * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n children?: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];\n /**\n * Sets the size of the items (font)\n */\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nfunction BaseList({\n as: ListTag = \"ul\",\n children,\n size = \"medium\",\n className,\n ...rest\n}: ListProps & { as?: \"ul\" | \"ol\" }) {\n return (\n <ListTag className={clsx(\"hds-list\", `hds-list--${size}`, className as undefined)} {...rest}>\n {children}\n </ListTag>\n );\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs build your own using the semantic `ul` and `ol` tags.\n */\nexport function UnorderedList(props: ListProps) {\n return (\n <BaseList as=\"ul\" {...props}>\n {props.children}\n </BaseList>\n );\n}\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs build your own using the semantic `ul` and `ol` tags.\n */\nexport function OrderedList(props: ListProps) {\n return (\n <BaseList as=\"ol\" {...props}>\n {props.children}\n </BaseList>\n );\n}\n\nBaseList.displayName = \"BaseList\";\nOrderedList.displayName = \"OrderedList\";\nUnorderedList.displayName = \"UnorderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ListProps } from \"./list\";\nimport { UnorderedList } from \"./list\";\n\nexport interface LinkListProps extends Omit<ListProps, \"listStyle\"> {\n children?: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];\n}\n\n/**\n * Show a list of links\n *\n * For other list types use `UnorderedList` and `OrderedList`, or use your own list component using the semantic `ul` and `ol` tags.\n */\nexport function LinkList({ className, ...rest }: LinkListProps) {\n return (\n <UnorderedList className={clsx(\"hds-list--link-list\", className as undefined)} {...rest} />\n );\n}\n\nLinkList.displayName = \"LinkList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,6BAAqB;AAkBjB;AARJ,SAAS,SAAS,IAMmB;AANnB,eAChB;AAAA,QAAI,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EAhBF,IAYkB,IAKb,iBALa,IAKb;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,4CAAC,wCAAQ,eAAW,6BAAK,YAAY,aAAa,IAAI,IAAI,SAAsB,KAAO,OAAtF,EACE,WACH;AAEJ;AAOO,SAAS,cAAc,OAAkB;AAC9C,SACE,4CAAC,yCAAS,IAAG,QAAS,QAArB,EACE,gBAAM,WACT;AAEJ;AAOO,SAAS,YAAY,OAAkB;AAC5C,SACE,4CAAC,yCAAS,IAAG,QAAS,QAArB,EACE,gBAAM,WACT;AAEJ;AAEA,SAAS,cAAc;AACvB,YAAY,cAAc;AAC1B,cAAc,cAAc;;;ACrD5B,IAAAA,0BAAqB;AAejB,IAAAC,sBAAA;AAFG,SAAS,SAAS,IAAuC;AAAvC,eAAE,YAd3B,IAcyB,IAAgB,iBAAhB,IAAgB,CAAd;AACzB,SACE,6CAAC,gCAAc,eAAW,8BAAK,uBAAuB,SAAsB,KAAO,KAAM;AAE7F;AAEA,SAAS,cAAc;","names":["import_typed_classname","import_jsx_runtime"]}
|
package/dist/list/index.mjs
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import "../chunk-
|
|
2
|
-
import {
|
|
3
|
-
DescriptionList
|
|
4
|
-
} from "../chunk-UTVSGTRJ.mjs";
|
|
1
|
+
import "../chunk-6QV3OV66.mjs";
|
|
5
2
|
import {
|
|
6
3
|
LinkList
|
|
7
4
|
} from "../chunk-ZUKLWHUR.mjs";
|
|
@@ -11,7 +8,6 @@ import {
|
|
|
11
8
|
} from "../chunk-PTANXZW6.mjs";
|
|
12
9
|
import "../chunk-R4SQKVDQ.mjs";
|
|
13
10
|
export {
|
|
14
|
-
DescriptionList,
|
|
15
11
|
LinkList,
|
|
16
12
|
OrderedList,
|
|
17
13
|
UnorderedList
|
package/dist/navbar/index.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
8
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
11
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
12
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
44
46
|
}
|
|
45
47
|
return to;
|
|
46
48
|
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
47
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
58
|
|
|
49
59
|
// src/navbar/index.tsx
|
|
@@ -98,6 +108,7 @@ NavbarNavigation.displayName = "Navbar.Navigation";
|
|
|
98
108
|
var import_react2 = require("react");
|
|
99
109
|
var import_client = require("react-dom/client");
|
|
100
110
|
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
111
|
+
var import_focus_trap_react = __toESM(require("focus-trap-react"));
|
|
101
112
|
|
|
102
113
|
// src/navbar/icons.tsx
|
|
103
114
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -139,7 +150,11 @@ function NavbarExpandableMenu({ children }) {
|
|
|
139
150
|
document.body.classList.remove((0, import_typed_classname2.clsx)("hds-navbar-scroll-lock"));
|
|
140
151
|
}
|
|
141
152
|
};
|
|
142
|
-
|
|
153
|
+
const navbarElement = document.getElementsByClassName((0, import_typed_classname2.clsx)("hds-navbar"))[0];
|
|
154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(navbarContext.Provider, { value: [open, toggleOpen], children: [
|
|
155
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
|
|
156
|
+
children
|
|
157
|
+
] });
|
|
143
158
|
}
|
|
144
159
|
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
|
|
145
160
|
function RenderButton(_a) {
|
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 { Navbar, NavbarLogo, NavbarButton, NavbarNavigation } 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 ExpandableMenu: typeof NavbarExpandableMenuComponent;\n Button: typeof NavbarButton;\n Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\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 type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n children: React.ReactNode;\n}\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <header className={clsx(\"hds-navbar\", className as undefined)} ref={ref} {...rest}>\n {children}\n </header>\n );\n },\n);\nNavbar.displayName = \"Navbar\";\n\n// Navbar logo\ninterface NavbarLogoProps {\n children?: never;\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\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 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 //hideAllOtherElements();\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 return <navbarContext.Provider value={[open, toggleOpen]}>{children}</navbarContext.Provider>;\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n/*\nfunction hideAllOtherElements() {\n //const elements = document.querySelectorAll(\"body > *\");\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n const siblings = getAllSiblings(navbarElement);\n console.log(siblings);\n}\n\nfunction getAllSiblings(elem: Element) {\n const sibs = [];\n let element = elem.parentNode?.firstChild;\n do {\n console.log(element);\n if (element === elem) continue;\n sibs.push(element);\n } while ((element = element?.nextSibling));\n return sibs;\n}\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","_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 { Navbar, NavbarLogo, NavbarButton, NavbarNavigation } 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 ExpandableMenu: typeof NavbarExpandableMenuComponent;\n Button: typeof NavbarButton;\n Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\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 type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n children: React.ReactNode;\n}\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <header className={clsx(\"hds-navbar\", className as undefined)} ref={ref} {...rest}>\n {children}\n </header>\n );\n },\n);\nNavbar.displayName = \"Navbar\";\n\n// Navbar logo\ninterface NavbarLogoProps {\n children?: never;\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\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"]}
|
package/dist/navbar/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
NavbarComponent
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-WDD7QJP6.mjs";
|
|
5
|
-
import "../chunk-MGUYIOP2.mjs";
|
|
3
|
+
} from "../chunk-Q3GMWURJ.mjs";
|
|
6
4
|
import "../chunk-JMDXW2ML.mjs";
|
|
5
|
+
import "../chunk-2E6XPNPX.mjs";
|
|
6
|
+
import "../chunk-MGUYIOP2.mjs";
|
|
7
7
|
import "../chunk-R4SQKVDQ.mjs";
|
|
8
8
|
export {
|
|
9
9
|
NavbarComponent as Navbar
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
8
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
11
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
12
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
44
46
|
}
|
|
45
47
|
return to;
|
|
46
48
|
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
47
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
58
|
|
|
49
59
|
// src/navbar/navbar-expandable-menu.tsx
|
|
@@ -57,6 +67,7 @@ module.exports = __toCommonJS(navbar_expandable_menu_exports);
|
|
|
57
67
|
var import_react = require("react");
|
|
58
68
|
var import_client = require("react-dom/client");
|
|
59
69
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
70
|
+
var import_focus_trap_react = __toESM(require("focus-trap-react"));
|
|
60
71
|
|
|
61
72
|
// src/navbar/icons.tsx
|
|
62
73
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -98,7 +109,11 @@ function NavbarExpandableMenu({ children }) {
|
|
|
98
109
|
document.body.classList.remove((0, import_typed_classname.clsx)("hds-navbar-scroll-lock"));
|
|
99
110
|
}
|
|
100
111
|
};
|
|
101
|
-
|
|
112
|
+
const navbarElement = document.getElementsByClassName((0, import_typed_classname.clsx)("hds-navbar"))[0];
|
|
113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(navbarContext.Provider, { value: [open, toggleOpen], children: [
|
|
114
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
|
|
115
|
+
children
|
|
116
|
+
] });
|
|
102
117
|
}
|
|
103
118
|
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
|
|
104
119
|
function RenderButton(_a) {
|
|
@@ -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 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 //hideAllOtherElements();\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 return <navbarContext.Provider value={[open, toggleOpen]}>{children}</navbarContext.Provider>;\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n/*\nfunction hideAllOtherElements() {\n //const elements = document.querySelectorAll(\"body > *\");\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n const siblings = getAllSiblings(navbarElement);\n console.log(siblings);\n}\n\nfunction getAllSiblings(elem: Element) {\n const sibs = [];\n let element = elem.parentNode?.firstChild;\n do {\n console.log(element);\n if (element === elem) continue;\n sibs.push(element);\n } while ((element = element?.nextSibling));\n return sibs;\n}\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","_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 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"]}
|
package/dist/tabs/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
TabsComponent
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-5MDJP43L.mjs";
|
|
4
|
+
import "../chunk-XVZ44NGD.mjs";
|
|
4
5
|
import "../chunk-MBBFU4IR.mjs";
|
|
5
6
|
import "../chunk-EJADADIY.mjs";
|
|
6
|
-
import "../chunk-XVZ44NGD.mjs";
|
|
7
7
|
import "../chunk-WCA2WPFS.mjs";
|
|
8
8
|
import "../chunk-33JD5XDW.mjs";
|
|
9
9
|
import "../chunk-R4SQKVDQ.mjs";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@postenbring/hedwig-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.60",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
],
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@microsoft/api-extractor": "7.43.0",
|
|
16
|
-
"@types/react": "^18.2.
|
|
16
|
+
"@types/react": "^18.2.69",
|
|
17
17
|
"@types/react-dom": "^18.2.22",
|
|
18
18
|
"react": "^18.2.0",
|
|
19
19
|
"react-dom": "18.2.0",
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"
|
|
32
|
+
"focus-trap-react": "10.2.3",
|
|
33
|
+
"@postenbring/hedwig-css": "0.0.54"
|
|
33
34
|
},
|
|
34
35
|
"publishConfig": {
|
|
35
36
|
"access": "public"
|
package/dist/chunk-E2LKLNGA.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-E2LKLNGA.mjs.map
|
package/dist/chunk-KOAR6LZG.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-KOAR6LZG.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { useId, forwardRef } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <div className={clsx(\"hds-fieldset__input-wrapper\")}>{children}</div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,kBAAkB;AAElC,SAAS,YAAY;AA8BjB,SAQE,KARF;AAfG,IAAM,WAAW,WAA+C,SAASA,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EAtBjG,IAkBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBAtB5D,IAsBiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EAxBJ,IAkBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,WAAW,KAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,SAAI,WAAW,KAAK,6BAA6B,GAAI,UAAS;AAAA,QAC/D,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["Fieldset"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list/description-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n /**\n * Either `DescriptionDetails` or `DescriptionTerm` elements\n */\n children?: ReactNode;\n /**\n * Direction of the description list\n */\n variant?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * Uses the HTML5 `<dl>` element\n *\n * Pass in corresponding `<dt>` and `<dd>` elements as children\n *\n * ```tsx\n * <DescriptionList>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </DescriptionList>\n * ```\n *\n * Optionally wrap them in `<div>` elements as allowed by the HTML5 spec\n *\n * ```tsx\n * <DescriptionList>\n * <div>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * </div>\n * <div>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </div>\n * </DescriptionList>\n * ```\n */\nexport function DescriptionList({\n variant = \"vertical\",\n className,\n ...rest\n}: DescriptionListProps) {\n return (\n <dl\n className={clsx(\n \"hds-description-list\",\n {\n \"hds-description-list--horizontal\": variant === \"horizontal\",\n },\n className as undefined,\n )}\n {...rest}\n />\n );\n}\nDescriptionList.displayName = \"DescriptionList\";\n"],"mappings":";;;;;;AACA,SAAS,YAAY;AAgDjB;AANG,SAAS,gBAAgB,IAIP;AAJO,eAC9B;AAAA,cAAU;AAAA,IACV;AAAA,EA7CF,IA2CgC,IAG3B,iBAH2B,IAG3B;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,oCAAoC,YAAY;AAAA,QAClD;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AACA,gBAAgB,cAAc;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/navbar/navbar-expandable-menu.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 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 //hideAllOtherElements();\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 return <navbarContext.Provider value={[open, toggleOpen]}>{children}</navbarContext.Provider>;\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n/*\nfunction hideAllOtherElements() {\n //const elements = document.querySelectorAll(\"body > *\");\n const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n const siblings = getAllSiblings(navbarElement);\n console.log(siblings);\n}\n\nfunction getAllSiblings(elem: Element) {\n const sibs = [];\n let element = elem.parentNode?.firstChild;\n do {\n console.log(element);\n if (element === elem) continue;\n sibs.push(element);\n } while ((element = element?.nextSibling));\n return sibs;\n}\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"],"mappings":"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","names":["_a","_b"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/description-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n /**\n * Either `DescriptionDetails` or `DescriptionTerm` elements\n */\n children?: ReactNode;\n /**\n * Direction of the description list\n */\n variant?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * Uses the HTML5 `<dl>` element\n *\n * Pass in corresponding `<dt>` and `<dd>` elements as children\n *\n * ```tsx\n * <DescriptionList>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </DescriptionList>\n * ```\n *\n * Optionally wrap them in `<div>` elements as allowed by the HTML5 spec\n *\n * ```tsx\n * <DescriptionList>\n * <div>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * </div>\n * <div>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </div>\n * </DescriptionList>\n * ```\n */\nexport function DescriptionList({\n variant = \"vertical\",\n className,\n ...rest\n}: DescriptionListProps) {\n return (\n <dl\n className={clsx(\n \"hds-description-list\",\n {\n \"hds-description-list--horizontal\": variant === \"horizontal\",\n },\n className as undefined,\n )}\n {...rest}\n />\n );\n}\nDescriptionList.displayName = \"DescriptionList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAAqB;AAgDjB;AANG,SAAS,gBAAgB,IAIP;AAJO,eAC9B;AAAA,cAAU;AAAA,IACV;AAAA,EA7CF,IA2CgC,IAG3B,iBAH2B,IAG3B;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,oCAAoC,YAAY;AAAA,QAClD;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AACA,gBAAgB,cAAc;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|