@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.
Files changed (66) hide show
  1. package/dist/_tsup-dts-rollup.d.mts +81 -82
  2. package/dist/_tsup-dts-rollup.d.ts +81 -82
  3. package/dist/{chunk-WDD7QJP6.mjs → chunk-2E6XPNPX.mjs} +7 -2
  4. package/dist/chunk-2E6XPNPX.mjs.map +1 -0
  5. package/dist/chunk-2YL2MVWN.mjs +1 -0
  6. package/dist/{chunk-T3ADJNOV.mjs → chunk-37WVYY6X.mjs} +1 -1
  7. package/dist/chunk-37WVYY6X.mjs.map +1 -0
  8. package/dist/{chunk-CA226LBE.mjs → chunk-5MDJP43L.mjs} +5 -5
  9. package/dist/chunk-6QV3OV66.mjs +1 -0
  10. package/dist/chunk-DY7LD3X3.mjs +1 -0
  11. package/dist/{chunk-QGMW5QJ3.mjs → chunk-Q3GMWURJ.mjs} +6 -6
  12. package/dist/{chunk-UTVSGTRJ.mjs → chunk-XMB45ILT.mjs} +2 -2
  13. package/dist/chunk-XMB45ILT.mjs.map +1 -0
  14. package/dist/{list → description-list}/description-list.js +1 -1
  15. package/dist/description-list/description-list.js.map +1 -0
  16. package/dist/{list → description-list}/description-list.mjs +1 -1
  17. package/dist/description-list/description-list.mjs.map +1 -0
  18. package/dist/description-list/index.d.mts +2 -0
  19. package/dist/description-list/index.d.ts +2 -0
  20. package/dist/description-list/index.js +82 -0
  21. package/dist/description-list/index.js.map +1 -0
  22. package/dist/description-list/index.mjs +9 -0
  23. package/dist/description-list/index.mjs.map +1 -0
  24. package/dist/form/fieldset/fieldset.js.map +1 -1
  25. package/dist/form/fieldset/fieldset.mjs +1 -1
  26. package/dist/form/fieldset/index.js.map +1 -1
  27. package/dist/form/fieldset/index.mjs +1 -1
  28. package/dist/form/index.js.map +1 -1
  29. package/dist/form/index.mjs +7 -7
  30. package/dist/index-no-css.d.mts +2 -2
  31. package/dist/index-no-css.d.ts +2 -2
  32. package/dist/index-no-css.js +93 -88
  33. package/dist/index-no-css.js.map +1 -1
  34. package/dist/index-no-css.mjs +25 -24
  35. package/dist/index.d.mts +2 -2
  36. package/dist/index.d.ts +2 -2
  37. package/dist/index.js +93 -88
  38. package/dist/index.js.map +1 -1
  39. package/dist/index.mjs +25 -24
  40. package/dist/index.mjs.map +1 -1
  41. package/dist/list/index.d.mts +0 -2
  42. package/dist/list/index.d.ts +0 -2
  43. package/dist/list/index.js +7 -35
  44. package/dist/list/index.js.map +1 -1
  45. package/dist/list/index.mjs +1 -5
  46. package/dist/navbar/index.js +16 -1
  47. package/dist/navbar/index.js.map +1 -1
  48. package/dist/navbar/index.mjs +3 -3
  49. package/dist/navbar/navbar-expandable-menu.js +16 -1
  50. package/dist/navbar/navbar-expandable-menu.js.map +1 -1
  51. package/dist/navbar/navbar-expandable-menu.mjs +1 -1
  52. package/dist/tabs/index.mjs +2 -2
  53. package/package.json +4 -3
  54. package/dist/chunk-E2LKLNGA.mjs +0 -1
  55. package/dist/chunk-KOAR6LZG.mjs +0 -1
  56. package/dist/chunk-T3ADJNOV.mjs.map +0 -1
  57. package/dist/chunk-UTVSGTRJ.mjs.map +0 -1
  58. package/dist/chunk-WDD7QJP6.mjs.map +0 -1
  59. package/dist/list/description-list.js.map +0 -1
  60. /package/dist/{chunk-E2LKLNGA.mjs.map → chunk-2YL2MVWN.mjs.map} +0 -0
  61. /package/dist/{chunk-CA226LBE.mjs.map → chunk-5MDJP43L.mjs.map} +0 -0
  62. /package/dist/{chunk-KOAR6LZG.mjs.map → chunk-6QV3OV66.mjs.map} +0 -0
  63. /package/dist/{list/description-list.mjs.map → chunk-DY7LD3X3.mjs.map} +0 -0
  64. /package/dist/{chunk-QGMW5QJ3.mjs.map → chunk-Q3GMWURJ.mjs.map} +0 -0
  65. /package/dist/{list → description-list}/description-list.d.mts +0 -0
  66. /package/dist/{list → description-list}/description-list.d.ts +0 -0
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import "./chunk-E2LKLNGA.mjs";
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-CA226LBE.mjs";
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-QGMW5QJ3.mjs";
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-T3ADJNOV.mjs";
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
- Radiobutton
67
- } from "./chunk-SEKRICE4.mjs";
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-KOAR6LZG.mjs";
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";
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}
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":[]}
@@ -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';
@@ -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';
@@ -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/description-list.tsx
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, import_jsx_runtime2.jsx)(ListTag, __spreadProps(__spreadValues({ className: (0, import_typed_classname2.clsx)("hds-list", `hds-list--${size}`, className) }, rest), { children }));
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, import_jsx_runtime2.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
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, import_jsx_runtime2.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
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 import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
114
- var import_jsx_runtime3 = require("react/jsx-runtime");
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, import_jsx_runtime3.jsx)(UnorderedList, __spreadValues({ className: (0, import_typed_classname3.clsx)("hds-list--link-list", className) }, rest));
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
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/list/index.tsx","../../src/list/description-list.tsx","../../src/list/list.tsx","../../src/list/link-list.tsx"],"sourcesContent":["export { DescriptionList } from \"./description-list\";\nexport type * from \"./description-list\";\n\nexport { UnorderedList, OrderedList } from \"./list\";\nexport type * from \"./list\";\n\nexport { LinkList } from \"./link-list\";\nexport type * from \"./link-list\";\n","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","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;AAAA;;;ACCA,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;;;AC3D9B,IAAAA,0BAAqB;AAkBjB,IAAAC,sBAAA;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,6CAAC,wCAAQ,eAAW,8BAAK,YAAY,aAAa,IAAI,IAAI,SAAsB,KAAO,OAAtF,EACE,WACH;AAEJ;AAOO,SAAS,cAAc,OAAkB;AAC9C,SACE,6CAAC,yCAAS,IAAG,QAAS,QAArB,EACE,gBAAM,WACT;AAEJ;AAOO,SAAS,YAAY,OAAkB;AAC5C,SACE,6CAAC,yCAAS,IAAG,QAAS,QAArB,EACE,gBAAM,WACT;AAEJ;AAEA,SAAS,cAAc;AACvB,YAAY,cAAc;AAC1B,cAAc,cAAc;;;ACrD5B,IAAAC,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","import_typed_classname","import_jsx_runtime"]}
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"]}
@@ -1,7 +1,4 @@
1
- import "../chunk-KOAR6LZG.mjs";
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
@@ -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
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(navbarContext.Provider, { value: [open, toggleOpen], children });
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) {
@@ -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"]}
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  NavbarComponent
3
- } from "../chunk-QGMW5QJ3.mjs";
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
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(navbarContext.Provider, { value: [open, toggleOpen], children });
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0F;AAC1F,oBAA2B;AAE3B,6BAAqB;AACrB,8BAAsB;;;ACDhB;AAHN,SAAS,YAAY;AACnB,SACE,4CAAC,SAAI,eAAW,MAAC,SAAQ,eAAc,OAAM,8BAC3C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,SAAS,WAAW;AAClB,SACE,4CAAC,SAAI,MAAK,OAAM,SAAQ,eAAc,OAAM,8BAC1C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;;;ADeI,IAAAA,sBAAA;AA3BJ,IAAM,oBAAgB,4BAAc;AAAA,EAClC;AAAA,EACA,MAAM;AAAA,EAEN;AACF,CAAU;AAQH,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,aAAa,MAAM;AACvB,UAAM,gBAAgB,CAAC;AACvB,YAAQ,aAAa;AACrB,QAAI,eAAe;AACjB,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,QAAI,6BAAK,wBAAwB,CAAC;AAAA,IAC5D,OAAO;AACL,eAAS,KAAK,UAAU,WAAO,6BAAK,wBAAwB,CAAC;AAAA,IAC/D;AAAA,EACF;AACA,QAAM,gBAAgB,SAAS,2BAAuB,6BAAK,YAAY,CAAC,EAAE,CAAC;AAC3E,SACE,8CAAC,cAAc,UAAd,EAAuB,OAAO,CAAC,MAAM,UAAU,GAC7C;AAAA,WAAO,6CAAC,wBAAAC,SAAA,EAAU,mBAAmB,CAAC,aAA4B,GAAG,IAAK;AAAA,IAC1E;AAAA,KACH;AAEJ;AACA,qBAAqB,cAAc;AAanC,SAAS,aAAa,IAUF;AAVE,eACpB;AAAA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA9DF,IAsDsB,IASjB,iBATiB,IASjB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,OAAO,6CAAC,aAAU,IAAK,6CAAC,YAAS;AAC9C,QAAM,QAAQ,QAAQ,EAAE,MAAM,IAAI,CAAC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,6BAAK,sBAAsB,SAAS;AAAA,MAC/C,SAAS;AAAA,MACT,KAAK,oBAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,MAAK;AAAA,OACD,OAPL;AAAA,MASE;AAAA;AAAA,QAAK;AAAA,QAAE;AAAA;AAAA;AAAA,EACV;AAEJ;AAmBO,IAAM,kCAA8B;AAAA,EAIzC,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,IA/GN,IAwGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA;AAKF,UAAM,CAAC,MAAM,UAAU,QAAI,yBAAW,aAAa;AACnD,UAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,UAAM,uBAAmB,qBAA0B,IAAI;AAEvD,UAAM,OAAwB,OAAO,eAAe;AACpD,UAAM,QAAQ,OAAO,sBAAsB;AAO3C,UAAM,gBAAgB,CAAC,SAA0B,aAAsC;AAErF,YAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,gBAAU,MAAM,UAAU;AAG1B,YAAM,IAAI,SAAS,uBAAuB,wBAAwB,EAAE,CAAC;AACrE,QAAE,YAAY,SAAS;AAGvB,YAAM,WAAO,0BAAW,SAAwB;AAChD,WAAK,OAAO,OAAO;AAMnB,YAAM,WAAW,MAAM;AAjJ7B,YAAAC,KAAAC;AAkJQ,kBAASA,OAAAD,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,gBAA1B,OAAAC,MAAyC,CAAC;AACnD,aAAK,QAAQ;AACb,UAAE,YAAY,SAAS;AAAA,MACzB;AAEA,iBAAW,UAAU,CAAC;AAAA,IACxB;AAEA,gCAAU,MAAM;AACd;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAY,YAAY,YAAY;AAAA,YACpC,UAAU;AAAA,YACV,MAAM;AAAA,YACN;AAAA,aACI;AAAA,QACN;AAAA,QACA,CAAC,gBAAwB;AACvB;AAAA,YACE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAY,YAAY,YAAY;AAAA,gBACpC,UAAU;AAAA,gBACV,MAAI;AAAA,gBACJ,MAAM;AAAA,gBACN;AAAA,iBACI;AAAA,YACN;AAAA,YACA,CAAC,cAAsB;AACrB,uBAAS,KAAK,IAAI,WAAW,WAAW,CAAC;AAAA,YAC3C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,MAAM,OAAO,gBAAgB,YAAY,CAAC;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAY,YAAY,YAAY;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AASnC,IAAM,kCAGT,yBAAW,CAAC,IAA6D,QAAQ;AAArE,eAAE,MAAI,YAAY,WAAW,UAAU,UA/MvD,IA+MgB,IAAqD,iBAArD,IAAqD,CAAnD,MAA2B,YAAU;AACrD,QAAM,CAAC,IAAI,QAAI,yBAAW,aAAa;AACvC,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,eAAW,6BAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,uDAAC,SAAI,eAAW,6BAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":["import_jsx_runtime","FocusTrap","_a","_b"]}
@@ -2,7 +2,7 @@ import {
2
2
  NavbarExpandableMenu,
3
3
  NavbarExpandableMenuContent,
4
4
  NavbarExpandableMenuTrigger
5
- } from "../chunk-WDD7QJP6.mjs";
5
+ } from "../chunk-2E6XPNPX.mjs";
6
6
  import "../chunk-MGUYIOP2.mjs";
7
7
  import "../chunk-R4SQKVDQ.mjs";
8
8
  export {
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  TabsComponent
3
- } from "../chunk-CA226LBE.mjs";
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.58",
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.67",
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
- "@postenbring/hedwig-css": "0.0.52"
32
+ "focus-trap-react": "10.2.3",
33
+ "@postenbring/hedwig-css": "0.0.54"
33
34
  },
34
35
  "publishConfig": {
35
36
  "access": "public"
@@ -1 +0,0 @@
1
- //# sourceMappingURL=chunk-E2LKLNGA.mjs.map
@@ -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":[]}