@postenbring/hedwig-react 0.0.83 → 0.0.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/accordion-content.d.ts.map +1 -1
- package/dist/accordion/accordion-content.js +1 -0
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +2 -2
- package/dist/accordion/accordion-header.d.ts.map +1 -1
- package/dist/accordion/accordion-header.js +1 -0
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion-header.mjs +2 -2
- package/dist/accordion/accordion-item.d.ts.map +1 -1
- package/dist/accordion/accordion-item.js +2 -1
- package/dist/accordion/accordion-item.js.map +1 -1
- package/dist/accordion/accordion-item.mjs +2 -2
- package/dist/accordion/accordion.js +4 -1
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion.mjs +5 -5
- package/dist/accordion/context.d.ts +1 -0
- package/dist/accordion/context.d.ts.map +1 -1
- package/dist/accordion/context.js.map +1 -1
- package/dist/accordion/context.mjs +1 -1
- package/dist/accordion/index.js +4 -1
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +7 -7
- package/dist/badge/badge.d.ts +13 -4
- package/dist/badge/badge.d.ts.map +1 -1
- package/dist/badge/badge.js +22 -42
- package/dist/badge/badge.js.map +1 -1
- package/dist/badge/badge.mjs +3 -9
- package/dist/badge/index.d.ts +1 -1
- package/dist/badge/index.d.ts.map +1 -1
- package/dist/badge/index.js +22 -42
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +3 -9
- package/dist/button/button.d.ts +17 -5
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +4 -17
- package/dist/button/button.js.map +1 -1
- package/dist/button/button.mjs +3 -5
- package/dist/button/index.d.ts +1 -1
- package/dist/button/index.d.ts.map +1 -1
- package/dist/button/index.js +4 -17
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +3 -5
- package/dist/{chunk-KEKPEN2C.mjs → chunk-6MR5XZOX.mjs} +4 -16
- package/dist/chunk-6MR5XZOX.mjs.map +1 -0
- package/dist/{chunk-M3Y3XOGC.mjs → chunk-B6L7IFDX.mjs} +6 -6
- package/dist/{chunk-FC4CEI2V.mjs → chunk-EVUKWONG.mjs} +2 -2
- package/dist/chunk-GQUFERB2.mjs +37 -0
- package/dist/chunk-GQUFERB2.mjs.map +1 -0
- package/dist/{chunk-C34HEQXO.mjs → chunk-GRWLX5BC.mjs} +5 -5
- package/dist/chunk-GRWLX5BC.mjs.map +1 -0
- package/dist/{chunk-3EFAPJ3H.mjs → chunk-HJYS664B.mjs} +3 -2
- package/dist/chunk-HJYS664B.mjs.map +1 -0
- package/dist/{chunk-OGZ2NBMH.mjs → chunk-IHZ2MRF6.mjs} +4 -4
- package/dist/chunk-IHZ2MRF6.mjs.map +1 -0
- package/dist/{chunk-3WVRY6CC.mjs → chunk-L4YBHIS3.mjs} +20 -12
- package/dist/chunk-L4YBHIS3.mjs.map +1 -0
- package/dist/{chunk-35TXKAUH.mjs → chunk-OIC2CPID.mjs} +18 -12
- package/dist/chunk-OIC2CPID.mjs.map +1 -0
- package/dist/{chunk-A2H2LAII.mjs → chunk-SKVM7G76.mjs} +5 -4
- package/dist/chunk-SKVM7G76.mjs.map +1 -0
- package/dist/chunk-SRLM3K2X.mjs +1 -0
- package/dist/{chunk-GLAEI3SD.mjs → chunk-VCQIR53Y.mjs} +3 -2
- package/dist/chunk-VCQIR53Y.mjs.map +1 -0
- package/dist/{chunk-V3PAFMK5.mjs → chunk-YQFL5UN4.mjs} +1 -1
- package/dist/chunk-YQFL5UN4.mjs.map +1 -0
- package/dist/footer/footer.js +7 -15
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +7 -7
- package/dist/footer/index.js +7 -15
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +7 -7
- package/dist/index-no-css.js +226 -239
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +30 -38
- package/dist/index.js +226 -239
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +30 -38
- package/dist/index.mjs.map +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +2 -2
- package/dist/modal/modal.d.ts +4 -4
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +2 -2
- package/dist/navbar/index.js +17 -11
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +2 -2
- package/dist/navbar/navbar-expandable-menu.d.ts +7 -1
- package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -1
- package/dist/navbar/navbar-expandable-menu.js +17 -11
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +1 -1
- package/dist/navbar/navbar.js +17 -11
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +2 -2
- package/dist/show-more/index.d.ts +0 -2
- package/dist/show-more/index.d.ts.map +1 -1
- package/dist/show-more/index.js +5 -143
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +1 -6
- package/dist/warning-banner/index.js +28 -94
- package/dist/warning-banner/index.js.map +1 -1
- package/dist/warning-banner/index.mjs +1 -3
- package/dist/warning-banner/warning-banner.d.ts.map +1 -1
- package/dist/warning-banner/warning-banner.js +28 -94
- package/dist/warning-banner/warning-banner.js.map +1 -1
- package/dist/warning-banner/warning-banner.mjs +1 -3
- package/package.json +4 -4
- package/src/accordion/accordion-content.tsx +1 -0
- package/src/accordion/accordion-header.tsx +1 -0
- package/src/accordion/accordion-item.tsx +3 -2
- package/src/accordion/context.ts +1 -0
- package/src/badge/badge.stories.tsx +6 -4
- package/src/badge/badge.tsx +32 -40
- package/src/badge/index.tsx +1 -1
- package/src/button/button.stories.tsx +19 -17
- package/src/button/button.tsx +19 -18
- package/src/button/index.tsx +1 -1
- package/src/footer/footer.tsx +3 -3
- package/src/form/input/input.stories.tsx +6 -6
- package/src/modal/modal.stories.tsx +9 -9
- package/src/modal/modal.tsx +4 -4
- package/src/navbar/navbar-expandable-menu.tsx +25 -14
- package/src/show-more/index.ts +0 -3
- package/src/skeleton/skeleton.stories.tsx +3 -3
- package/src/warning-banner/warning-banner.tsx +24 -13
- package/dist/chunk-35TXKAUH.mjs.map +0 -1
- package/dist/chunk-3EFAPJ3H.mjs.map +0 -1
- package/dist/chunk-3WVRY6CC.mjs.map +0 -1
- package/dist/chunk-A2H2LAII.mjs.map +0 -1
- package/dist/chunk-C34HEQXO.mjs.map +0 -1
- package/dist/chunk-GLAEI3SD.mjs.map +0 -1
- package/dist/chunk-KEKPEN2C.mjs.map +0 -1
- package/dist/chunk-MSFHJVHD.mjs +0 -1
- package/dist/chunk-OGZ2NBMH.mjs.map +0 -1
- package/dist/chunk-P6KBFRF4.mjs +0 -54
- package/dist/chunk-P6KBFRF4.mjs.map +0 -1
- package/dist/chunk-V3PAFMK5.mjs.map +0 -1
- /package/dist/{chunk-M3Y3XOGC.mjs.map → chunk-B6L7IFDX.mjs.map} +0 -0
- /package/dist/{chunk-FC4CEI2V.mjs.map → chunk-EVUKWONG.mjs.map} +0 -0
- /package/dist/{chunk-MSFHJVHD.mjs.map → chunk-SRLM3K2X.mjs.map} +0 -0
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
interface ExpandableMenuContextProps {
|
|
3
|
+
open: boolean;
|
|
4
|
+
setOpen: (open: boolean) => void;
|
|
5
|
+
contentId: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const useNavbarExpendableMenuContext: () => ExpandableMenuContextProps;
|
|
3
8
|
export interface NavbarExpandableMenuProps {
|
|
4
9
|
children: React.ReactNode;
|
|
5
10
|
}
|
|
@@ -32,4 +37,5 @@ export interface NavbarExpandableMenuContentProps {
|
|
|
32
37
|
className?: string;
|
|
33
38
|
}
|
|
34
39
|
export declare const NavbarExpandableMenuContent: import("react").ForwardRefExoticComponent<NavbarExpandableMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
40
|
+
export {};
|
|
35
41
|
//# sourceMappingURL=navbar-expandable-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar-expandable-menu.d.ts","sourceRoot":"","sources":["../../src/navbar/navbar-expandable-menu.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"navbar-expandable-menu.d.ts","sourceRoot":"","sources":["../../src/navbar/navbar-expandable-menu.tsx"],"names":[],"mappings":";AAKA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,8BAA8B,kCAM1C,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAwB3E;yBAxBe,oBAAoB;;;AA2BpC;;GAEG;AACH,MAAM,WAAW,gCACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AACD,eAAO,MAAM,2BAA2B,gIA0FvC,CAAC;AAGF;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,eAAO,MAAM,2BAA2B,6HAiBtC,CAAC"}
|
|
@@ -125,17 +125,17 @@ function MenuIcon() {
|
|
|
125
125
|
|
|
126
126
|
// src/navbar/navbar-expandable-menu.tsx
|
|
127
127
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
128
|
-
var
|
|
129
|
-
|
|
130
|
-
()
|
|
128
|
+
var ExpandableMenuContext = (0, import_react2.createContext)(null);
|
|
129
|
+
var useNavbarExpendableMenuContext = () => {
|
|
130
|
+
const value = (0, import_react2.useContext)(ExpandableMenuContext);
|
|
131
|
+
if (value === null) {
|
|
132
|
+
throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
|
|
131
133
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
+
return value;
|
|
135
|
+
};
|
|
134
136
|
function NavbarExpandableMenu({ children }) {
|
|
137
|
+
const contentId = (0, import_react2.useId)();
|
|
135
138
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
136
|
-
function toggleOpen() {
|
|
137
|
-
setOpen((prev) => !prev);
|
|
138
|
-
}
|
|
139
139
|
(0, import_react2.useEffect)(() => {
|
|
140
140
|
if (open) {
|
|
141
141
|
window.scrollTo(0, 0);
|
|
@@ -149,7 +149,7 @@ function NavbarExpandableMenu({ children }) {
|
|
|
149
149
|
};
|
|
150
150
|
}
|
|
151
151
|
}, [open]);
|
|
152
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
|
|
153
153
|
}
|
|
154
154
|
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
|
|
155
155
|
var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
@@ -169,7 +169,7 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
169
169
|
"style",
|
|
170
170
|
"className"
|
|
171
171
|
]);
|
|
172
|
-
const
|
|
172
|
+
const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
|
|
173
173
|
const [textWidth, setTextWidth] = (0, import_react2.useState)(void 0);
|
|
174
174
|
const measurementId = (0, import_react2.useId)();
|
|
175
175
|
(0, import_react2.useEffect)(() => {
|
|
@@ -181,9 +181,14 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
181
181
|
const text = open ? whenOpenText : whenClosedText;
|
|
182
182
|
const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
|
|
183
183
|
const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, {});
|
|
184
|
+
function toggleOpen() {
|
|
185
|
+
setOpen(!open);
|
|
186
|
+
}
|
|
184
187
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
185
188
|
"button",
|
|
186
189
|
__spreadProps(__spreadValues({
|
|
190
|
+
"aria-expanded": open,
|
|
191
|
+
"aria-controls": contentId,
|
|
187
192
|
className: (0, import_typed_classname.clsx)("hds-navbar__item", className),
|
|
188
193
|
onClick: toggleOpen,
|
|
189
194
|
ref,
|
|
@@ -237,10 +242,11 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
237
242
|
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
|
|
238
243
|
var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
|
|
239
244
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
240
|
-
const
|
|
245
|
+
const { contentId, open } = useNavbarExpendableMenuContext();
|
|
241
246
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
242
247
|
"section",
|
|
243
248
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
|
|
249
|
+
id: contentId,
|
|
244
250
|
className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content", className),
|
|
245
251
|
"data-state": open ? "open" : "closed"
|
|
246
252
|
}), { inert: open ? void 0 : "true" }), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/utils/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n false as boolean,\n () => {\n // Empty\n },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n function toggleOpen() {\n setOpen((prev) => !prev);\n }\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <expandableMenuContext.Provider value={[open, toggleOpen]}>\n {children}\n </expandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useNavbarExpendableMenuContext();\n\n // Measure the width of the text when open and closed and choose the widest one\n // This is to ensure that the button doesn't change size when the text changes\n const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n const measurementId = useId();\n useEffect(() => {\n const widthWhenOpen =\n document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n const widthWhenClosed =\n document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n }, [measurementId]);\n\n const text = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n return (\n <button\n className={clsx(\"hds-navbar__item\", className as undefined)}\n onClick={toggleOpen}\n ref={ref}\n title={title}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n {/* Measurement elements, not shown to the user */}\n <span\n id={`${measurementId}-when-closed`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenOpenText}\n </span>\n <span\n id={`${measurementId}-when-open`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenClosedText}\n </span>\n\n {/* Actual content */}\n <span\n style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n className={clsx(\"hds-navbar__item-responsive-text\")}\n >\n {text}\n </span>\n <span style={{ width: 32, height: 32 }}>{icon}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const [open] = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n","export function CloseIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24}>\n <path\n fill=\"currentColor\"\n d=\"m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z\"\n />\n </svg>\n );\n}\n\nexport function MenuIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32}>\n <path\n fill=\"currentColor\"\n d=\"M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","releaseFocusTrap","_a","_b"]}
|
|
1
|
+
{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/utils/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\ninterface ExpandableMenuContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\nconst ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);\nexport const useNavbarExpendableMenuContext = () => {\n const value = useContext(ExpandableMenuContext);\n if (value === null) {\n throw new Error(\"useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu\");\n }\n return value;\n};\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const contentId = useId();\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>\n {children}\n </ExpandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const { contentId, open, setOpen } = useNavbarExpendableMenuContext();\n\n // Measure the width of the text when open and closed and choose the widest one\n // This is to ensure that the button doesn't change size when the text changes\n const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n const measurementId = useId();\n useEffect(() => {\n const widthWhenOpen =\n document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n const widthWhenClosed =\n document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n }, [measurementId]);\n\n const text = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n function toggleOpen() {\n setOpen(!open);\n }\n\n return (\n <button\n aria-expanded={open}\n aria-controls={contentId}\n className={clsx(\"hds-navbar__item\", className as undefined)}\n onClick={toggleOpen}\n ref={ref}\n title={title}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n {/* Measurement elements, not shown to the user */}\n <span\n id={`${measurementId}-when-closed`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenOpenText}\n </span>\n <span\n id={`${measurementId}-when-open`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenClosedText}\n </span>\n\n {/* Actual content */}\n <span\n style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n className={clsx(\"hds-navbar__item-responsive-text\")}\n >\n {text}\n </span>\n <span style={{ width: 32, height: 32 }}>{icon}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const { contentId, open } = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n id={contentId}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n","export function CloseIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24}>\n <path\n fill=\"currentColor\"\n d=\"m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z\"\n />\n </svg>\n );\n}\n\nexport function MenuIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32}>\n <path\n fill=\"currentColor\"\n d=\"M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","releaseFocusTrap","_a","_b"]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
NavbarExpandableMenuContent,
|
|
4
4
|
NavbarExpandableMenuTrigger,
|
|
5
5
|
useNavbarExpendableMenuContext
|
|
6
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-OIC2CPID.mjs";
|
|
7
7
|
import "../chunk-MOU6WBT2.mjs";
|
|
8
8
|
import "../chunk-TDXU2IC6.mjs";
|
|
9
9
|
import "../chunk-R4SQKVDQ.mjs";
|
package/dist/navbar/navbar.js
CHANGED
|
@@ -134,17 +134,17 @@ function MenuIcon() {
|
|
|
134
134
|
|
|
135
135
|
// src/navbar/navbar-expandable-menu.tsx
|
|
136
136
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
137
|
-
var
|
|
138
|
-
|
|
139
|
-
()
|
|
137
|
+
var ExpandableMenuContext = (0, import_react2.createContext)(null);
|
|
138
|
+
var useNavbarExpendableMenuContext = () => {
|
|
139
|
+
const value = (0, import_react2.useContext)(ExpandableMenuContext);
|
|
140
|
+
if (value === null) {
|
|
141
|
+
throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
|
|
140
142
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
+
return value;
|
|
144
|
+
};
|
|
143
145
|
function NavbarExpandableMenu({ children }) {
|
|
146
|
+
const contentId = (0, import_react2.useId)();
|
|
144
147
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
145
|
-
function toggleOpen() {
|
|
146
|
-
setOpen((prev) => !prev);
|
|
147
|
-
}
|
|
148
148
|
(0, import_react2.useEffect)(() => {
|
|
149
149
|
if (open) {
|
|
150
150
|
window.scrollTo(0, 0);
|
|
@@ -158,7 +158,7 @@ function NavbarExpandableMenu({ children }) {
|
|
|
158
158
|
};
|
|
159
159
|
}
|
|
160
160
|
}, [open]);
|
|
161
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
|
|
162
162
|
}
|
|
163
163
|
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
|
|
164
164
|
var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
@@ -178,7 +178,7 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
178
178
|
"style",
|
|
179
179
|
"className"
|
|
180
180
|
]);
|
|
181
|
-
const
|
|
181
|
+
const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
|
|
182
182
|
const [textWidth, setTextWidth] = (0, import_react2.useState)(void 0);
|
|
183
183
|
const measurementId = (0, import_react2.useId)();
|
|
184
184
|
(0, import_react2.useEffect)(() => {
|
|
@@ -190,9 +190,14 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
190
190
|
const text = open ? whenOpenText : whenClosedText;
|
|
191
191
|
const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
|
|
192
192
|
const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, {});
|
|
193
|
+
function toggleOpen() {
|
|
194
|
+
setOpen(!open);
|
|
195
|
+
}
|
|
193
196
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
194
197
|
"button",
|
|
195
198
|
__spreadProps(__spreadValues({
|
|
199
|
+
"aria-expanded": open,
|
|
200
|
+
"aria-controls": contentId,
|
|
196
201
|
className: (0, import_typed_classname.clsx)("hds-navbar__item", className),
|
|
197
202
|
onClick: toggleOpen,
|
|
198
203
|
ref,
|
|
@@ -246,10 +251,11 @@ var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
|
|
|
246
251
|
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
|
|
247
252
|
var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
|
|
248
253
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
249
|
-
const
|
|
254
|
+
const { contentId, open } = useNavbarExpendableMenuContext();
|
|
250
255
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
251
256
|
"section",
|
|
252
257
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
|
|
258
|
+
id: contentId,
|
|
253
259
|
className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content", className),
|
|
254
260
|
"data-state": open ? "open" : "closed"
|
|
255
261
|
}), { inert: open ? void 0 : "true" }), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/utils/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n NavbarExpandableMenu,\n NavbarExpandableMenuContent,\n NavbarExpandableMenuTrigger,\n} from \"./navbar-expandable-menu\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n /**\n * The text display next to the logo\n */\n children: React.ReactNode;\n\n /**\n * The text variant\n *\n * Use `service` for internal applications\n *\n * Use `flagship` for public facing applications\n */\n variant: \"service\" | \"flagship\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n ({ children, asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-navbar__logo-and-service-text\",\n `hds-navbar__logo-and-service-text--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Slot>\n );\n },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\"hds-navbar__item\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-navbar__navigation\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n /**\n * Navbar variant\n *\n * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n *\n * For internal services or flagship services use the `service` should be used\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"service\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLDivElement, NavbarProps>(\n ({ asChild, children, className, variant, ...rest }, ref) => {\n const Component = asChild ? Slot : \"header\";\n return (\n <Component\n className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as NavbarType;\nNavbar.displayName = \"Navbar\";\n\ntype NavbarType = ReturnType<typeof forwardRef<HTMLDivElement, NavbarProps>> & {\n Logo: typeof NavbarLogo;\n LogoAndServiceText: typeof NavbarLogoAndServiceText;\n ExpandableMenu: typeof NavbarExpandableMenu;\n ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;\n ExpandableMenuContent: typeof NavbarExpandableMenuContent;\n Item: typeof NavbarItem;\n ButtonItem: typeof NavbarButtonItem;\n LinkItem: typeof NavbarLinkItem;\n ItemIcon: typeof NavbarItemIcon;\n Navigation: typeof NavbarNavigation;\n};\n\nNavbar.Logo = NavbarLogo;\nNavbar.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbar.ExpandableMenu = NavbarExpandableMenu;\nNavbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;\nNavbar.ExpandableMenuContent = NavbarExpandableMenuContent;\nNavbar.Item = NavbarItem;\nNavbar.ButtonItem = NavbarButtonItem;\nNavbar.LinkItem = NavbarLinkItem;\nNavbar.ItemIcon = NavbarItemIcon;\nNavbar.Navigation = NavbarNavigation;\n","import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n false as boolean,\n () => {\n // Empty\n },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const [open, setOpen] = useState(false);\n function toggleOpen() {\n setOpen((prev) => !prev);\n }\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <expandableMenuContext.Provider value={[open, toggleOpen]}>\n {children}\n </expandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const [open, toggleOpen] = useNavbarExpendableMenuContext();\n\n // Measure the width of the text when open and closed and choose the widest one\n // This is to ensure that the button doesn't change size when the text changes\n const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n const measurementId = useId();\n useEffect(() => {\n const widthWhenOpen =\n document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n const widthWhenClosed =\n document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n }, [measurementId]);\n\n const text = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n return (\n <button\n className={clsx(\"hds-navbar__item\", className as undefined)}\n onClick={toggleOpen}\n ref={ref}\n title={title}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n {/* Measurement elements, not shown to the user */}\n <span\n id={`${measurementId}-when-closed`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenOpenText}\n </span>\n <span\n id={`${measurementId}-when-open`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenClosedText}\n </span>\n\n {/* Actual content */}\n <span\n style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n className={clsx(\"hds-navbar__item-responsive-text\")}\n >\n {text}\n </span>\n <span style={{ width: 32, height: 32 }}>{icon}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const [open] = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n","export function CloseIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24}>\n <path\n fill=\"currentColor\"\n d=\"m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z\"\n />\n </svg>\n );\n}\n\nexport function MenuIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32}>\n <path\n fill=\"currentColor\"\n d=\"M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","releaseFocusTrap","_a","_b","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/utils/utils.ts","../../src/navbar/icons.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n NavbarExpandableMenu,\n NavbarExpandableMenuContent,\n NavbarExpandableMenuTrigger,\n} from \"./navbar-expandable-menu\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n /**\n * The text display next to the logo\n */\n children: React.ReactNode;\n\n /**\n * The text variant\n *\n * Use `service` for internal applications\n *\n * Use `flagship` for public facing applications\n */\n variant: \"service\" | \"flagship\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n ({ children, asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-navbar__logo-and-service-text\",\n `hds-navbar__logo-and-service-text--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Slot>\n );\n },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\"hds-navbar__item\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-navbar__navigation\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n /**\n * Navbar variant\n *\n * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n *\n * For internal services or flagship services use the `service` should be used\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"service\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLDivElement, NavbarProps>(\n ({ asChild, children, className, variant, ...rest }, ref) => {\n const Component = asChild ? Slot : \"header\";\n return (\n <Component\n className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as NavbarType;\nNavbar.displayName = \"Navbar\";\n\ntype NavbarType = ReturnType<typeof forwardRef<HTMLDivElement, NavbarProps>> & {\n Logo: typeof NavbarLogo;\n LogoAndServiceText: typeof NavbarLogoAndServiceText;\n ExpandableMenu: typeof NavbarExpandableMenu;\n ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;\n ExpandableMenuContent: typeof NavbarExpandableMenuContent;\n Item: typeof NavbarItem;\n ButtonItem: typeof NavbarButtonItem;\n LinkItem: typeof NavbarLinkItem;\n ItemIcon: typeof NavbarItemIcon;\n Navigation: typeof NavbarNavigation;\n};\n\nNavbar.Logo = NavbarLogo;\nNavbar.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbar.ExpandableMenu = NavbarExpandableMenu;\nNavbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;\nNavbar.ExpandableMenuContent = NavbarExpandableMenuContent;\nNavbar.Item = NavbarItem;\nNavbar.ButtonItem = NavbarButtonItem;\nNavbar.LinkItem = NavbarLinkItem;\nNavbar.ItemIcon = NavbarItemIcon;\nNavbar.Navigation = NavbarNavigation;\n","import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\ninterface ExpandableMenuContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\nconst ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);\nexport const useNavbarExpendableMenuContext = () => {\n const value = useContext(ExpandableMenuContext);\n if (value === null) {\n throw new Error(\"useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu\");\n }\n return value;\n};\n\nexport interface NavbarExpandableMenuProps {\n children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n const contentId = useId();\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open) {\n window.scrollTo(0, 0);\n document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n const releaseFocusTrap = focusTrap(\n document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n );\n\n return () => {\n document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n releaseFocusTrap();\n };\n }\n }, [open]);\n\n return (\n <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>\n {children}\n </ExpandableMenuContext.Provider>\n );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n whenClosedText: React.ReactNode;\n whenClosedHelperTitle?: string;\n\n whenOpenText: React.ReactNode;\n whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n HTMLButtonElement,\n NavbarExpandableMenuTriggerProps\n>(\n (\n {\n whenClosedText,\n whenClosedHelperTitle,\n\n whenOpenText,\n whenOpenHelperTitle,\n\n style,\n className,\n ...rest\n },\n ref,\n ) => {\n const { contentId, open, setOpen } = useNavbarExpendableMenuContext();\n\n // Measure the width of the text when open and closed and choose the widest one\n // This is to ensure that the button doesn't change size when the text changes\n const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n const measurementId = useId();\n useEffect(() => {\n const widthWhenOpen =\n document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n const widthWhenClosed =\n document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n }, [measurementId]);\n\n const text = open ? whenOpenText : whenClosedText;\n const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n function toggleOpen() {\n setOpen(!open);\n }\n\n return (\n <button\n aria-expanded={open}\n aria-controls={contentId}\n className={clsx(\"hds-navbar__item\", className as undefined)}\n onClick={toggleOpen}\n ref={ref}\n title={title}\n type=\"button\"\n style={{ position: \"relative\", ...style }}\n {...rest}\n >\n {/* Measurement elements, not shown to the user */}\n <span\n id={`${measurementId}-when-closed`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenOpenText}\n </span>\n <span\n id={`${measurementId}-when-open`}\n aria-hidden\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {whenClosedText}\n </span>\n\n {/* Actual content */}\n <span\n style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n className={clsx(\"hds-navbar__item-responsive-text\")}\n >\n {text}\n </span>\n <span style={{ width: 32, height: 32 }}>{icon}</span>\n </button>\n );\n },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n children: React.ReactNode;\n className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n HTMLDivElement,\n NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n const { contentId, open } = useNavbarExpendableMenuContext();\n return (\n <section\n {...rest}\n id={contentId}\n className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n data-state={open ? \"open\" : \"closed\"}\n {...{ inert: open ? undefined : \"true\" }}\n ref={ref}\n >\n <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n </section>\n );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n","export function CloseIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24}>\n <path\n fill=\"currentColor\"\n d=\"m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z\"\n />\n </svg>\n );\n}\n\nexport function MenuIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32}>\n <path\n fill=\"currentColor\"\n d=\"M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","releaseFocusTrap","_a","_b","import_jsx_runtime"]}
|
package/dist/navbar/navbar.mjs
CHANGED
|
@@ -7,8 +7,8 @@ import {
|
|
|
7
7
|
NavbarLogo,
|
|
8
8
|
NavbarLogoAndServiceText,
|
|
9
9
|
NavbarNavigation
|
|
10
|
-
} from "../chunk-
|
|
11
|
-
import "../chunk-
|
|
10
|
+
} from "../chunk-EVUKWONG.mjs";
|
|
11
|
+
import "../chunk-OIC2CPID.mjs";
|
|
12
12
|
import "../chunk-MOU6WBT2.mjs";
|
|
13
13
|
import "../chunk-TDXU2IC6.mjs";
|
|
14
14
|
import "../chunk-R4SQKVDQ.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/show-more/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/show-more/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,mBAAmB,aAAa,CAAC"}
|
package/dist/show-more/index.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
5
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
7
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
10
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
9
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
10
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -46,158 +44,23 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
46
44
|
}
|
|
47
45
|
return to;
|
|
48
46
|
};
|
|
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
|
-
));
|
|
57
47
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
48
|
|
|
59
49
|
// src/show-more/index.ts
|
|
60
50
|
var show_more_exports = {};
|
|
61
51
|
__export(show_more_exports, {
|
|
62
|
-
AutoAnimateHeight: () => AutoAnimateHeight,
|
|
63
52
|
ShowMoreButton: () => ShowMoreButton
|
|
64
53
|
});
|
|
65
54
|
module.exports = __toCommonJS(show_more_exports);
|
|
66
55
|
|
|
67
|
-
// src/utils/auto-animate-height.tsx
|
|
68
|
-
var import_react2 = require("react");
|
|
69
|
-
|
|
70
|
-
// src/utils/utils.ts
|
|
71
|
-
var React = __toESM(require("react"));
|
|
72
|
-
var import_react = require("react");
|
|
73
|
-
function useMergeRefs(refs) {
|
|
74
|
-
return React.useMemo(() => {
|
|
75
|
-
if (refs.every((ref) => ref === null)) {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
|
-
return (value) => {
|
|
79
|
-
refs.forEach((ref) => {
|
|
80
|
-
if (typeof ref === "function") {
|
|
81
|
-
ref(value);
|
|
82
|
-
} else if (ref !== null) {
|
|
83
|
-
ref.current = value;
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
}, refs);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// src/utils/auto-animate-height.tsx
|
|
91
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
92
|
-
var AutoAnimateHeight = (0, import_react2.forwardRef)(
|
|
93
|
-
(_a, ref) => {
|
|
94
|
-
var _b = _a, {
|
|
95
|
-
children,
|
|
96
|
-
style,
|
|
97
|
-
animationDuration = "quick",
|
|
98
|
-
animationEasing = "normal",
|
|
99
|
-
onTransitionEnd
|
|
100
|
-
} = _b, rest = __objRest(_b, [
|
|
101
|
-
"children",
|
|
102
|
-
"style",
|
|
103
|
-
"animationDuration",
|
|
104
|
-
"animationEasing",
|
|
105
|
-
"onTransitionEnd"
|
|
106
|
-
]);
|
|
107
|
-
var _a2, _b2;
|
|
108
|
-
const rootRef = (0, import_react2.useRef)(null);
|
|
109
|
-
const mergedRef = useMergeRefs([rootRef, ref]);
|
|
110
|
-
const measurementRef = (0, import_react2.useRef)(null);
|
|
111
|
-
const [height, setHeight] = (0, import_react2.useState)(
|
|
112
|
-
void 0
|
|
113
|
-
);
|
|
114
|
-
const [clonedChildren, setClonedChildren] = (0, import_react2.useState)(
|
|
115
|
-
() => (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {})
|
|
116
|
-
);
|
|
117
|
-
(0, import_react2.useEffect)(() => {
|
|
118
|
-
var _a3;
|
|
119
|
-
if (!rootRef.current)
|
|
120
|
-
return;
|
|
121
|
-
if (!measurementRef.current)
|
|
122
|
-
return;
|
|
123
|
-
if (document.body.scrollHeight === 0)
|
|
124
|
-
return;
|
|
125
|
-
const currentMeasurement = measurementRef.current;
|
|
126
|
-
const { height: newHeight } = currentMeasurement.getBoundingClientRect();
|
|
127
|
-
let previouslyObservedHeight = newHeight;
|
|
128
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
129
|
-
const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
|
|
130
|
-
if (resizedHeight === previouslyObservedHeight)
|
|
131
|
-
return;
|
|
132
|
-
previouslyObservedHeight = resizedHeight;
|
|
133
|
-
setHeight({ height: resizedHeight, shouldAnimate: false });
|
|
134
|
-
});
|
|
135
|
-
resizeObserver.observe(currentMeasurement);
|
|
136
|
-
setHeight({ height: newHeight, shouldAnimate: true });
|
|
137
|
-
const nextClonedChildren = (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {});
|
|
138
|
-
if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
|
|
139
|
-
setClonedChildren(nextClonedChildren);
|
|
140
|
-
return () => {
|
|
141
|
-
resizeObserver.disconnect();
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
const currentRoot = rootRef.current;
|
|
145
|
-
function onTransitionEndHandler(e) {
|
|
146
|
-
if (e.propertyName !== "height")
|
|
147
|
-
return;
|
|
148
|
-
setClonedChildren(nextClonedChildren);
|
|
149
|
-
}
|
|
150
|
-
currentRoot.addEventListener("transitionend", onTransitionEndHandler);
|
|
151
|
-
return () => {
|
|
152
|
-
resizeObserver.disconnect();
|
|
153
|
-
currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
|
|
154
|
-
};
|
|
155
|
-
}, [children]);
|
|
156
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
157
|
-
"div",
|
|
158
|
-
__spreadProps(__spreadValues({
|
|
159
|
-
ref: mergedRef,
|
|
160
|
-
onTransitionEnd,
|
|
161
|
-
style: __spreadValues({
|
|
162
|
-
position: "relative",
|
|
163
|
-
overflow: "hidden",
|
|
164
|
-
height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
|
|
165
|
-
transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
|
|
166
|
-
transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
|
|
167
|
-
transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
|
|
168
|
-
willChange: "height"
|
|
169
|
-
}, style)
|
|
170
|
-
}, rest), {
|
|
171
|
-
children: [
|
|
172
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
173
|
-
"div",
|
|
174
|
-
{
|
|
175
|
-
"aria-hidden": true,
|
|
176
|
-
ref: measurementRef,
|
|
177
|
-
style: {
|
|
178
|
-
position: "absolute",
|
|
179
|
-
visibility: "hidden",
|
|
180
|
-
pointerEvents: "none"
|
|
181
|
-
},
|
|
182
|
-
children
|
|
183
|
-
}
|
|
184
|
-
),
|
|
185
|
-
clonedChildren
|
|
186
|
-
]
|
|
187
|
-
})
|
|
188
|
-
);
|
|
189
|
-
}
|
|
190
|
-
);
|
|
191
|
-
AutoAnimateHeight.displayName = "AutoAnimateHeight";
|
|
192
|
-
|
|
193
56
|
// src/show-more/show-more.tsx
|
|
194
57
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
195
|
-
var
|
|
196
|
-
var
|
|
197
|
-
var ShowMoreButton = (0,
|
|
58
|
+
var import_react = require("react");
|
|
59
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
60
|
+
var ShowMoreButton = (0, import_react.forwardRef)(
|
|
198
61
|
(_a, ref) => {
|
|
199
62
|
var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
|
|
200
|
-
return /* @__PURE__ */ (0,
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
201
64
|
"button",
|
|
202
65
|
__spreadProps(__spreadValues({
|
|
203
66
|
ref,
|
|
@@ -211,7 +74,7 @@ var ShowMoreButton = (0, import_react3.forwardRef)(
|
|
|
211
74
|
}, rest), {
|
|
212
75
|
children: [
|
|
213
76
|
text,
|
|
214
|
-
/* @__PURE__ */ (0,
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-show-more__icon") })
|
|
215
78
|
]
|
|
216
79
|
})
|
|
217
80
|
);
|
|
@@ -220,7 +83,6 @@ var ShowMoreButton = (0, import_react3.forwardRef)(
|
|
|
220
83
|
ShowMoreButton.displayName = "ShowMoreButton";
|
|
221
84
|
// Annotate the CommonJS export names for ESM import in node:
|
|
222
85
|
0 && (module.exports = {
|
|
223
|
-
AutoAnimateHeight,
|
|
224
86
|
ShowMoreButton
|
|
225
87
|
});
|
|
226
88
|
//# sourceMappingURL=index.js.map
|