@postenbring/hedwig-react 2.2.0 → 2.2.1
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 +22 -6
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +4 -1
- package/dist/accordion/accordion.js +24 -6
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion.mjs +5 -2
- package/dist/accordion/index.js +24 -6
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +5 -2
- package/dist/{chunk-GVO57ZWU.mjs → chunk-23IZCRJA.mjs} +2 -2
- package/dist/{chunk-KNGG6M2I.mjs → chunk-5RXT5GLF.mjs} +2 -2
- package/dist/{chunk-ILFK3VKS.mjs → chunk-77M2ZTP7.mjs} +6 -3
- package/dist/chunk-77M2ZTP7.mjs.map +1 -0
- package/dist/{chunk-5FWY7FIX.mjs → chunk-AGIY7SFP.mjs} +5 -2
- package/dist/chunk-AGIY7SFP.mjs.map +1 -0
- package/dist/{chunk-WLESNP6Z.mjs → chunk-B6T36QDV.mjs} +5 -2
- package/dist/chunk-B6T36QDV.mjs.map +1 -0
- package/dist/{chunk-GXIKHXWC.mjs → chunk-EQFY63YP.mjs} +2 -2
- package/dist/{chunk-KCEWKQ4W.mjs → chunk-GYI4NCUY.mjs} +2 -2
- package/dist/{chunk-J5SCUELT.mjs → chunk-HBGFFKP3.mjs} +2 -2
- package/dist/{chunk-4C76JM3T.mjs → chunk-I4NL4ESV.mjs} +2 -2
- package/dist/{chunk-DTU7AXY3.mjs → chunk-NUP7ZBVE.mjs} +2 -2
- package/dist/{chunk-CKG2XRMX.mjs → chunk-R6MQFVHE.mjs} +2 -2
- package/dist/{chunk-DRSAVDIE.mjs → chunk-W6CFPK2C.mjs} +5 -4
- package/dist/chunk-W6CFPK2C.mjs.map +1 -0
- package/dist/{chunk-ZSYBCM2L.mjs → chunk-W7CPW23K.mjs} +27 -18
- package/dist/chunk-W7CPW23K.mjs.map +1 -0
- package/dist/footer/footer.js +37 -19
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +6 -3
- package/dist/footer/index.js +37 -19
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +6 -3
- package/dist/form/date-picker/date-picker.js +1 -0
- package/dist/form/date-picker/date-picker.js.map +1 -1
- package/dist/form/date-picker/date-picker.mjs +2 -2
- package/dist/form/date-picker/index.js +1 -0
- package/dist/form/date-picker/index.js.map +1 -1
- package/dist/form/date-picker/index.mjs +2 -2
- package/dist/form/error-summary/error-summary.d.ts +5 -5
- package/dist/form/error-summary/error-summary.d.ts.map +1 -1
- package/dist/form/error-summary/error-summary.js +47 -93
- package/dist/form/error-summary/error-summary.js.map +1 -1
- package/dist/form/error-summary/error-summary.mjs +5 -6
- package/dist/form/error-summary/index.js +47 -93
- package/dist/form/error-summary/index.js.map +1 -1
- package/dist/form/error-summary/index.mjs +5 -6
- package/dist/form/index.js +75 -121
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +6 -7
- package/dist/index.js +555 -540
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +34 -32
- package/dist/modal/index.js +1 -0
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +2 -2
- package/dist/modal/modal.js +1 -0
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +2 -2
- package/dist/navbar/index.js +3 -1
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +3 -3
- package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -1
- package/dist/navbar/navbar-expandable-menu.js +3 -1
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +2 -2
- package/dist/navbar/navbar.js +3 -1
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +3 -3
- package/dist/skeleton/index.js +20 -2
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +4 -1
- package/dist/skeleton/skeleton.d.ts.map +1 -1
- package/dist/skeleton/skeleton.js +20 -2
- package/dist/skeleton/skeleton.js.map +1 -1
- package/dist/skeleton/skeleton.mjs +4 -1
- package/dist/tabs/index.js +1 -0
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/tabs/tabs-list.js +1 -0
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +2 -2
- package/dist/tabs/tabs.js +1 -0
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +3 -3
- package/dist/utils/auto-animate-height.js +1 -0
- package/dist/utils/auto-animate-height.js.map +1 -1
- package/dist/utils/auto-animate-height.mjs +2 -2
- package/dist/utils/index.js +4 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +4 -2
- package/dist/utils/utils.d.ts +4 -0
- package/dist/utils/utils.d.ts.map +1 -1
- package/dist/utils/utils.js +4 -0
- package/dist/utils/utils.js.map +1 -1
- package/dist/utils/utils.mjs +3 -1
- package/package.json +2 -2
- package/src/accordion/accordion-content.tsx +2 -1
- package/src/form/error-summary/error-summary.tsx +32 -31
- package/src/navbar/navbar-expandable-menu.tsx +3 -2
- package/src/skeleton/skeleton.tsx +2 -1
- package/src/utils/utils.ts +14 -1
- package/dist/chunk-5FWY7FIX.mjs.map +0 -1
- package/dist/chunk-DRSAVDIE.mjs.map +0 -1
- package/dist/chunk-ILFK3VKS.mjs.map +0 -1
- package/dist/chunk-WLESNP6Z.mjs.map +0 -1
- package/dist/chunk-ZSYBCM2L.mjs.map +0 -1
- /package/dist/{chunk-GVO57ZWU.mjs.map → chunk-23IZCRJA.mjs.map} +0 -0
- /package/dist/{chunk-KNGG6M2I.mjs.map → chunk-5RXT5GLF.mjs.map} +0 -0
- /package/dist/{chunk-GXIKHXWC.mjs.map → chunk-EQFY63YP.mjs.map} +0 -0
- /package/dist/{chunk-KCEWKQ4W.mjs.map → chunk-GYI4NCUY.mjs.map} +0 -0
- /package/dist/{chunk-J5SCUELT.mjs.map → chunk-HBGFFKP3.mjs.map} +0 -0
- /package/dist/{chunk-4C76JM3T.mjs.map → chunk-I4NL4ESV.mjs.map} +0 -0
- /package/dist/{chunk-DTU7AXY3.mjs.map → chunk-NUP7ZBVE.mjs.map} +0 -0
- /package/dist/{chunk-CKG2XRMX.mjs.map → chunk-R6MQFVHE.mjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-content.d.ts","sourceRoot":"","sources":["../../src/accordion/accordion-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"accordion-content.d.ts","sourceRoot":"","sources":["../../src/accordion/accordion-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,kHAmB5B,CAAC"}
|
|
@@ -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/accordion/accordion-content.tsx
|
|
@@ -52,19 +62,25 @@ __export(accordion_content_exports, {
|
|
|
52
62
|
AccordionContent: () => AccordionContent
|
|
53
63
|
});
|
|
54
64
|
module.exports = __toCommonJS(accordion_content_exports);
|
|
55
|
-
var
|
|
65
|
+
var import_react3 = require("react");
|
|
56
66
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
57
67
|
|
|
58
|
-
// src/
|
|
68
|
+
// src/utils/utils.ts
|
|
69
|
+
var React = __toESM(require("react"));
|
|
59
70
|
var import_react = require("react");
|
|
60
|
-
var
|
|
71
|
+
var inertBooleanSupported = Number(import_react.version.split(".")[0]) >= 19;
|
|
72
|
+
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
|
|
73
|
+
|
|
74
|
+
// src/accordion/context.ts
|
|
75
|
+
var import_react2 = require("react");
|
|
76
|
+
var AccordionItemContext = (0, import_react2.createContext)(null);
|
|
61
77
|
|
|
62
78
|
// src/accordion/accordion-content.tsx
|
|
63
79
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
64
|
-
var AccordionContent = (0,
|
|
80
|
+
var AccordionContent = (0, import_react3.forwardRef)(
|
|
65
81
|
(_a, ref) => {
|
|
66
82
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
67
|
-
const context = (0,
|
|
83
|
+
const context = (0, import_react3.useContext)(AccordionItemContext);
|
|
68
84
|
if (context === null) {
|
|
69
85
|
return null;
|
|
70
86
|
}
|
|
@@ -73,7 +89,7 @@ var AccordionContent = (0, import_react2.forwardRef)(
|
|
|
73
89
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
74
90
|
id: context.contentId,
|
|
75
91
|
"data-state": context.open ? "open" : "closed"
|
|
76
|
-
}, { inert: context.open
|
|
92
|
+
}, { inert: inertPropValue(!context.open) }), {
|
|
77
93
|
className: (0, import_typed_classname.clsx)("hds-accordion-item-content", className),
|
|
78
94
|
ref
|
|
79
95
|
}), rest), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/accordion/accordion-content.tsx","../../src/accordion/context.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: context.open
|
|
1
|
+
{"version":3,"sources":["../../src/accordion/accordion-content.tsx","../../src/utils/utils.ts","../../src/accordion/context.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { inertPropValue } from \"../utils\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: inertPropValue(!context.open) }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n ? (x: boolean): boolean => x\n : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n","import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAuC;AACvC,6BAAqB;;;ACFrB,YAAuB;AACvB,mBAA0D;AAkH1D,IAAM,wBAAiC,OAAO,qBAAQ,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK;AAKjE,IAAM,iBAA2D,wBACpE,CAAC,MAAwB,IACzB,CAAC,MAAgC,IAAI,KAAK;;;AC1H9C,IAAAC,gBAA8B;AAQvB,IAAM,2BAAuB,6BAAgD,IAAI;;;AFiBhF;AAfD,IAAM,uBAAmB;AAAA,EAC9B,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAXf,IAWG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,cAAU,0BAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ;AAAA,QACZ,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,eAAe,CAAC,QAAQ,IAAI,EAAE,IAH5C;AAAA,QAIC,eAAW,6BAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OANL;AAAA,QAQC,sDAAC,SAAI,eAAW,6BAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":["import_react","import_react"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
AccordionContent
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-AGIY7SFP.mjs";
|
|
4
|
+
import "../chunk-CYDWEPFL.mjs";
|
|
5
|
+
import "../chunk-GYI4NCUY.mjs";
|
|
6
|
+
import "../chunk-77M2ZTP7.mjs";
|
|
4
7
|
import "../chunk-YQFL5UN4.mjs";
|
|
5
8
|
import "../chunk-YOSPWY5K.mjs";
|
|
6
9
|
export {
|
|
@@ -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/accordion/accordion.tsx
|
|
@@ -52,7 +62,7 @@ __export(accordion_exports, {
|
|
|
52
62
|
Accordion: () => Accordion
|
|
53
63
|
});
|
|
54
64
|
module.exports = __toCommonJS(accordion_exports);
|
|
55
|
-
var
|
|
65
|
+
var import_react6 = require("react");
|
|
56
66
|
var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
|
|
57
67
|
|
|
58
68
|
// src/accordion/accordion-item.tsx
|
|
@@ -124,13 +134,21 @@ var AccordionHeader = (0, import_react3.forwardRef)(
|
|
|
124
134
|
AccordionHeader.displayName = "Accordion.Header";
|
|
125
135
|
|
|
126
136
|
// src/accordion/accordion-content.tsx
|
|
127
|
-
var
|
|
137
|
+
var import_react5 = require("react");
|
|
128
138
|
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
139
|
+
|
|
140
|
+
// src/utils/utils.ts
|
|
141
|
+
var React = __toESM(require("react"));
|
|
142
|
+
var import_react4 = require("react");
|
|
143
|
+
var inertBooleanSupported = Number(import_react4.version.split(".")[0]) >= 19;
|
|
144
|
+
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
|
|
145
|
+
|
|
146
|
+
// src/accordion/accordion-content.tsx
|
|
129
147
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
130
|
-
var AccordionContent = (0,
|
|
148
|
+
var AccordionContent = (0, import_react5.forwardRef)(
|
|
131
149
|
(_a, ref) => {
|
|
132
150
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
133
|
-
const context = (0,
|
|
151
|
+
const context = (0, import_react5.useContext)(AccordionItemContext);
|
|
134
152
|
if (context === null) {
|
|
135
153
|
return null;
|
|
136
154
|
}
|
|
@@ -139,7 +157,7 @@ var AccordionContent = (0, import_react4.forwardRef)(
|
|
|
139
157
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
140
158
|
id: context.contentId,
|
|
141
159
|
"data-state": context.open ? "open" : "closed"
|
|
142
|
-
}, { inert: context.open
|
|
160
|
+
}, { inert: inertPropValue(!context.open) }), {
|
|
143
161
|
className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
|
|
144
162
|
ref
|
|
145
163
|
}), rest), {
|
|
@@ -152,7 +170,7 @@ AccordionContent.displayName = "Accordion.Content";
|
|
|
152
170
|
|
|
153
171
|
// src/accordion/accordion.tsx
|
|
154
172
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
155
|
-
var Accordion = (0,
|
|
173
|
+
var Accordion = (0, import_react6.forwardRef)(
|
|
156
174
|
(_a, ref) => {
|
|
157
175
|
var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
|
|
158
176
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/accordion/accordion.tsx","../../src/accordion/accordion-item.tsx","../../src/accordion/context.ts","../../src/accordion/accordion-header.tsx","../../src/accordion/accordion-content.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItem, type AccordionItemProps } from \"./accordion-item\";\nimport { AccordionHeader } from \"./accordion-header\";\nimport { AccordionContent } from \"./accordion-content\";\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Accepts type of <AccordionItem/>\n */\n children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n /**\n * Adds padding to the left of the accordion\n */\n indent?: boolean;\n}\n\n/**\n * Displays collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion>\n * <Accordion.Item defaultOpen>\n * <Accordion.Header>Item one</Accordion.Header>\n * <Accordion.Content>\n * Some content\n * </Accordion.Content>\n * </Accordion.Item>\n * <Accordion.Item>\n * <Accordion.Header>Item two</Accordion.Header>\n * <Accordion.Content>\n * Some more content\n * </Accordion.Content>\n * </Accordion.Item>\n * </Accordion>\n * ```\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n ({ children, className, indent = true, ...rest }, ref) => {\n return (\n <div\n {...rest}\n className={clsx(\n \"hds-accordion\",\n !indent && \"hds-accordion--no-indent\",\n className as undefined,\n )}\n ref={ref}\n >\n {children}\n </div>\n );\n },\n) as AccordionType;\nAccordion.displayName = \"Accordion\";\n\nAccordion.Item = AccordionItem;\nAccordion.Header = AccordionHeader;\nAccordion.Content = AccordionContent;\n\ntype AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {\n Item: typeof AccordionItem;\n Header: typeof AccordionHeader;\n Content: typeof AccordionContent;\n};\n","import type { ReactElement } from \"react\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n | ReactElement<AccordionHeaderProps>\n | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Control the open state of the accordion manually\n */\n open?: boolean;\n\n /**\n * Use with open to control the open state of the accordion manually\n */\n onOpenChange?: (open: boolean) => void;\n\n /**\n * If the accordion should be open by default\n */\n defaultOpen?: boolean;\n\n /**\n * Accepts type of Accordion.Content and Accordion.Header\n */\n children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n const contentId = useId();\n const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n const open = outerOpen ?? innerOpen;\n\n const handleOpen = () => {\n if (outerOpen !== undefined) {\n onOpenChange && onOpenChange(!open);\n } else {\n setInnerOpen(!open);\n }\n };\n\n return (\n <div\n {...rest}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item\", className as undefined)}\n ref={ref}\n >\n <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>\n {children}\n </AccordionItemContext.Provider>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n","import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n","import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n ({ children, className, onClick, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n context.setOpen(!context.open);\n onClick?.(e);\n };\n return (\n <button\n {...rest}\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item-header\", className as undefined)}\n onClick={expandOrCollapse}\n ref={ref}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: context.open ? undefined : \"true\" }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_react","import_typed_classname","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/accordion/accordion.tsx","../../src/accordion/accordion-item.tsx","../../src/accordion/context.ts","../../src/accordion/accordion-header.tsx","../../src/accordion/accordion-content.tsx","../../src/utils/utils.ts"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItem, type AccordionItemProps } from \"./accordion-item\";\nimport { AccordionHeader } from \"./accordion-header\";\nimport { AccordionContent } from \"./accordion-content\";\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Accepts type of <AccordionItem/>\n */\n children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n /**\n * Adds padding to the left of the accordion\n */\n indent?: boolean;\n}\n\n/**\n * Displays collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion>\n * <Accordion.Item defaultOpen>\n * <Accordion.Header>Item one</Accordion.Header>\n * <Accordion.Content>\n * Some content\n * </Accordion.Content>\n * </Accordion.Item>\n * <Accordion.Item>\n * <Accordion.Header>Item two</Accordion.Header>\n * <Accordion.Content>\n * Some more content\n * </Accordion.Content>\n * </Accordion.Item>\n * </Accordion>\n * ```\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n ({ children, className, indent = true, ...rest }, ref) => {\n return (\n <div\n {...rest}\n className={clsx(\n \"hds-accordion\",\n !indent && \"hds-accordion--no-indent\",\n className as undefined,\n )}\n ref={ref}\n >\n {children}\n </div>\n );\n },\n) as AccordionType;\nAccordion.displayName = \"Accordion\";\n\nAccordion.Item = AccordionItem;\nAccordion.Header = AccordionHeader;\nAccordion.Content = AccordionContent;\n\ntype AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {\n Item: typeof AccordionItem;\n Header: typeof AccordionHeader;\n Content: typeof AccordionContent;\n};\n","import type { ReactElement } from \"react\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n | ReactElement<AccordionHeaderProps>\n | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Control the open state of the accordion manually\n */\n open?: boolean;\n\n /**\n * Use with open to control the open state of the accordion manually\n */\n onOpenChange?: (open: boolean) => void;\n\n /**\n * If the accordion should be open by default\n */\n defaultOpen?: boolean;\n\n /**\n * Accepts type of Accordion.Content and Accordion.Header\n */\n children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n const contentId = useId();\n const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n const open = outerOpen ?? innerOpen;\n\n const handleOpen = () => {\n if (outerOpen !== undefined) {\n onOpenChange && onOpenChange(!open);\n } else {\n setInnerOpen(!open);\n }\n };\n\n return (\n <div\n {...rest}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item\", className as undefined)}\n ref={ref}\n >\n <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>\n {children}\n </AccordionItemContext.Provider>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n","import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n","import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n ({ children, className, onClick, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n context.setOpen(!context.open);\n onClick?.(e);\n };\n return (\n <button\n {...rest}\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item-header\", className as undefined)}\n onClick={expandOrCollapse}\n ref={ref}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { inertPropValue } from \"../utils\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: inertPropValue(!context.open) }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n ? (x: boolean): boolean => x\n : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_react","import_typed_classname","import_jsx_runtime","import_react","import_typed_classname","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Accordion
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-
|
|
3
|
+
} from "../chunk-R6MQFVHE.mjs";
|
|
4
|
+
import "../chunk-AGIY7SFP.mjs";
|
|
5
|
+
import "../chunk-CYDWEPFL.mjs";
|
|
6
|
+
import "../chunk-GYI4NCUY.mjs";
|
|
7
|
+
import "../chunk-77M2ZTP7.mjs";
|
|
5
8
|
import "../chunk-MYVC3HMO.mjs";
|
|
6
9
|
import "../chunk-EZVEYJOX.mjs";
|
|
7
10
|
import "../chunk-YQFL5UN4.mjs";
|
package/dist/accordion/index.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
8
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
11
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
12
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
44
46
|
}
|
|
45
47
|
return to;
|
|
46
48
|
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
47
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
58
|
|
|
49
59
|
// src/accordion/index.tsx
|
|
@@ -57,7 +67,7 @@ __export(accordion_exports, {
|
|
|
57
67
|
module.exports = __toCommonJS(accordion_exports);
|
|
58
68
|
|
|
59
69
|
// src/accordion/accordion.tsx
|
|
60
|
-
var
|
|
70
|
+
var import_react6 = require("react");
|
|
61
71
|
var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
|
|
62
72
|
|
|
63
73
|
// src/accordion/accordion-item.tsx
|
|
@@ -129,13 +139,21 @@ var AccordionHeader = (0, import_react3.forwardRef)(
|
|
|
129
139
|
AccordionHeader.displayName = "Accordion.Header";
|
|
130
140
|
|
|
131
141
|
// src/accordion/accordion-content.tsx
|
|
132
|
-
var
|
|
142
|
+
var import_react5 = require("react");
|
|
133
143
|
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
144
|
+
|
|
145
|
+
// src/utils/utils.ts
|
|
146
|
+
var React = __toESM(require("react"));
|
|
147
|
+
var import_react4 = require("react");
|
|
148
|
+
var inertBooleanSupported = Number(import_react4.version.split(".")[0]) >= 19;
|
|
149
|
+
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
|
|
150
|
+
|
|
151
|
+
// src/accordion/accordion-content.tsx
|
|
134
152
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
135
|
-
var AccordionContent = (0,
|
|
153
|
+
var AccordionContent = (0, import_react5.forwardRef)(
|
|
136
154
|
(_a, ref) => {
|
|
137
155
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
138
|
-
const context = (0,
|
|
156
|
+
const context = (0, import_react5.useContext)(AccordionItemContext);
|
|
139
157
|
if (context === null) {
|
|
140
158
|
return null;
|
|
141
159
|
}
|
|
@@ -144,7 +162,7 @@ var AccordionContent = (0, import_react4.forwardRef)(
|
|
|
144
162
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
145
163
|
id: context.contentId,
|
|
146
164
|
"data-state": context.open ? "open" : "closed"
|
|
147
|
-
}, { inert: context.open
|
|
165
|
+
}, { inert: inertPropValue(!context.open) }), {
|
|
148
166
|
className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
|
|
149
167
|
ref
|
|
150
168
|
}), rest), {
|
|
@@ -157,7 +175,7 @@ AccordionContent.displayName = "Accordion.Content";
|
|
|
157
175
|
|
|
158
176
|
// src/accordion/accordion.tsx
|
|
159
177
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
160
|
-
var Accordion = (0,
|
|
178
|
+
var Accordion = (0, import_react6.forwardRef)(
|
|
161
179
|
(_a, ref) => {
|
|
162
180
|
var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
|
|
163
181
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/accordion/index.tsx","../../src/accordion/accordion.tsx","../../src/accordion/accordion-item.tsx","../../src/accordion/context.ts","../../src/accordion/accordion-header.tsx","../../src/accordion/accordion-content.tsx"],"sourcesContent":["export { Accordion } from \"./accordion\";\nexport { AccordionItem } from \"./accordion-item\";\nexport { AccordionHeader } from \"./accordion-header\";\nexport { AccordionContent } from \"./accordion-content\";\n\nexport type * from \"./accordion\";\nexport type * from \"./accordion-item\";\nexport type * from \"./accordion-header\";\nexport type * from \"./accordion-content\";\n","import type { ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItem, type AccordionItemProps } from \"./accordion-item\";\nimport { AccordionHeader } from \"./accordion-header\";\nimport { AccordionContent } from \"./accordion-content\";\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Accepts type of <AccordionItem/>\n */\n children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n /**\n * Adds padding to the left of the accordion\n */\n indent?: boolean;\n}\n\n/**\n * Displays collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion>\n * <Accordion.Item defaultOpen>\n * <Accordion.Header>Item one</Accordion.Header>\n * <Accordion.Content>\n * Some content\n * </Accordion.Content>\n * </Accordion.Item>\n * <Accordion.Item>\n * <Accordion.Header>Item two</Accordion.Header>\n * <Accordion.Content>\n * Some more content\n * </Accordion.Content>\n * </Accordion.Item>\n * </Accordion>\n * ```\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n ({ children, className, indent = true, ...rest }, ref) => {\n return (\n <div\n {...rest}\n className={clsx(\n \"hds-accordion\",\n !indent && \"hds-accordion--no-indent\",\n className as undefined,\n )}\n ref={ref}\n >\n {children}\n </div>\n );\n },\n) as AccordionType;\nAccordion.displayName = \"Accordion\";\n\nAccordion.Item = AccordionItem;\nAccordion.Header = AccordionHeader;\nAccordion.Content = AccordionContent;\n\ntype AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {\n Item: typeof AccordionItem;\n Header: typeof AccordionHeader;\n Content: typeof AccordionContent;\n};\n","import type { ReactElement } from \"react\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n | ReactElement<AccordionHeaderProps>\n | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Control the open state of the accordion manually\n */\n open?: boolean;\n\n /**\n * Use with open to control the open state of the accordion manually\n */\n onOpenChange?: (open: boolean) => void;\n\n /**\n * If the accordion should be open by default\n */\n defaultOpen?: boolean;\n\n /**\n * Accepts type of Accordion.Content and Accordion.Header\n */\n children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n const contentId = useId();\n const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n const open = outerOpen ?? innerOpen;\n\n const handleOpen = () => {\n if (outerOpen !== undefined) {\n onOpenChange && onOpenChange(!open);\n } else {\n setInnerOpen(!open);\n }\n };\n\n return (\n <div\n {...rest}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item\", className as undefined)}\n ref={ref}\n >\n <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>\n {children}\n </AccordionItemContext.Provider>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n","import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n","import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n ({ children, className, onClick, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n context.setOpen(!context.open);\n onClick?.(e);\n };\n return (\n <button\n {...rest}\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item-header\", className as undefined)}\n onClick={expandOrCollapse}\n ref={ref}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: context.open ? undefined : \"true\" }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_react","import_typed_classname","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/accordion/index.tsx","../../src/accordion/accordion.tsx","../../src/accordion/accordion-item.tsx","../../src/accordion/context.ts","../../src/accordion/accordion-header.tsx","../../src/accordion/accordion-content.tsx","../../src/utils/utils.ts"],"sourcesContent":["export { Accordion } from \"./accordion\";\nexport { AccordionItem } from \"./accordion-item\";\nexport { AccordionHeader } from \"./accordion-header\";\nexport { AccordionContent } from \"./accordion-content\";\n\nexport type * from \"./accordion\";\nexport type * from \"./accordion-item\";\nexport type * from \"./accordion-header\";\nexport type * from \"./accordion-content\";\n","import type { ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItem, type AccordionItemProps } from \"./accordion-item\";\nimport { AccordionHeader } from \"./accordion-header\";\nimport { AccordionContent } from \"./accordion-content\";\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Accepts type of <AccordionItem/>\n */\n children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n /**\n * Adds padding to the left of the accordion\n */\n indent?: boolean;\n}\n\n/**\n * Displays collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion>\n * <Accordion.Item defaultOpen>\n * <Accordion.Header>Item one</Accordion.Header>\n * <Accordion.Content>\n * Some content\n * </Accordion.Content>\n * </Accordion.Item>\n * <Accordion.Item>\n * <Accordion.Header>Item two</Accordion.Header>\n * <Accordion.Content>\n * Some more content\n * </Accordion.Content>\n * </Accordion.Item>\n * </Accordion>\n * ```\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n ({ children, className, indent = true, ...rest }, ref) => {\n return (\n <div\n {...rest}\n className={clsx(\n \"hds-accordion\",\n !indent && \"hds-accordion--no-indent\",\n className as undefined,\n )}\n ref={ref}\n >\n {children}\n </div>\n );\n },\n) as AccordionType;\nAccordion.displayName = \"Accordion\";\n\nAccordion.Item = AccordionItem;\nAccordion.Header = AccordionHeader;\nAccordion.Content = AccordionContent;\n\ntype AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {\n Item: typeof AccordionItem;\n Header: typeof AccordionHeader;\n Content: typeof AccordionContent;\n};\n","import type { ReactElement } from \"react\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n | ReactElement<AccordionHeaderProps>\n | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Control the open state of the accordion manually\n */\n open?: boolean;\n\n /**\n * Use with open to control the open state of the accordion manually\n */\n onOpenChange?: (open: boolean) => void;\n\n /**\n * If the accordion should be open by default\n */\n defaultOpen?: boolean;\n\n /**\n * Accepts type of Accordion.Content and Accordion.Header\n */\n children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n const contentId = useId();\n const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n const open = outerOpen ?? innerOpen;\n\n const handleOpen = () => {\n if (outerOpen !== undefined) {\n onOpenChange && onOpenChange(!open);\n } else {\n setInnerOpen(!open);\n }\n };\n\n return (\n <div\n {...rest}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item\", className as undefined)}\n ref={ref}\n >\n <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>\n {children}\n </AccordionItemContext.Provider>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n","import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n","import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n ({ children, className, onClick, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n context.setOpen(!context.open);\n onClick?.(e);\n };\n return (\n <button\n {...rest}\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n className={clsx(\"hds-accordion-item-header\", className as undefined)}\n onClick={expandOrCollapse}\n ref={ref}\n type=\"button\"\n >\n <span>{children}</span>\n </button>\n );\n },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { inertPropValue } from \"../utils\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: inertPropValue(!context.open) }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n ? (x: boolean): boolean => x\n : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_react","import_typed_classname","import_jsx_runtime","import_react","import_typed_classname","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/accordion/index.mjs
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import "../chunk-ZKMFJZSH.mjs";
|
|
2
2
|
import {
|
|
3
3
|
Accordion
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-R6MQFVHE.mjs";
|
|
5
5
|
import {
|
|
6
6
|
AccordionContent
|
|
7
|
-
} from "../chunk-
|
|
7
|
+
} from "../chunk-AGIY7SFP.mjs";
|
|
8
|
+
import "../chunk-CYDWEPFL.mjs";
|
|
9
|
+
import "../chunk-GYI4NCUY.mjs";
|
|
10
|
+
import "../chunk-77M2ZTP7.mjs";
|
|
8
11
|
import {
|
|
9
12
|
AccordionHeader
|
|
10
13
|
} from "../chunk-MYVC3HMO.mjs";
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-XZ43OSZ5.mjs";
|
|
4
4
|
import {
|
|
5
5
|
useMergeRefs
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
7
7
|
import {
|
|
8
8
|
__objRest,
|
|
9
9
|
__spreadProps,
|
|
@@ -83,4 +83,4 @@ DatePicker.displayName = "DatePicker";
|
|
|
83
83
|
export {
|
|
84
84
|
DatePicker
|
|
85
85
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
86
|
+
//# sourceMappingURL=chunk-23IZCRJA.mjs.map
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
TabsList,
|
|
7
7
|
TabsTab
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-HBGFFKP3.mjs";
|
|
9
9
|
import {
|
|
10
10
|
TabsContext
|
|
11
11
|
} from "./chunk-KQITCS3U.mjs";
|
|
@@ -37,4 +37,4 @@ Tabs.Content = TabsContent;
|
|
|
37
37
|
export {
|
|
38
38
|
Tabs
|
|
39
39
|
};
|
|
40
|
-
//# sourceMappingURL=chunk-
|
|
40
|
+
//# sourceMappingURL=chunk-5RXT5GLF.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/utils/utils.ts
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import { useCallback, useEffect, useState, version } from "react";
|
|
4
4
|
function useMergeRefs(refs) {
|
|
5
5
|
return React.useMemo(() => {
|
|
6
6
|
if (refs.every((ref) => ref === null)) {
|
|
@@ -76,11 +76,14 @@ function releaseFocusTrap(inertElements) {
|
|
|
76
76
|
el.removeAttribute("inert");
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
+
var inertBooleanSupported = Number(version.split(".")[0]) >= 19;
|
|
80
|
+
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
|
|
79
81
|
|
|
80
82
|
export {
|
|
81
83
|
useMergeRefs,
|
|
82
84
|
useResize,
|
|
83
85
|
useHydrated,
|
|
84
|
-
focusTrap
|
|
86
|
+
focusTrap,
|
|
87
|
+
inertPropValue
|
|
85
88
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
89
|
+
//# sourceMappingURL=chunk-77M2ZTP7.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n ? (x: boolean): boolean => x\n : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,aAAa,WAAW,UAAU,eAAe;AAMnD,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,eAAe,YAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,YAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS,KAAM,QAAO,MAAM;AAAA,EAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS,KAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY,GAAI;AACpB,UAAI,EAAE,mBAAmB,aAAc;AACvC,UAAI,QAAQ,aAAa,OAAO,EAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKA,SAAS,iBAAiB,eAAsC;AAC9D,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;AAMA,IAAM,wBAAiC,OAAO,QAAQ,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK;AAKjE,IAAM,iBAA2D,wBACpE,CAAC,MAAwB,IACzB,CAAC,MAAgC,IAAI,KAAK;","names":[]}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
inertPropValue
|
|
3
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
1
4
|
import {
|
|
2
5
|
AccordionItemContext
|
|
3
6
|
} from "./chunk-YQFL5UN4.mjs";
|
|
@@ -23,7 +26,7 @@ var AccordionContent = forwardRef(
|
|
|
23
26
|
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
24
27
|
id: context.contentId,
|
|
25
28
|
"data-state": context.open ? "open" : "closed"
|
|
26
|
-
}, { inert: context.open
|
|
29
|
+
}, { inert: inertPropValue(!context.open) }), {
|
|
27
30
|
className: clsx("hds-accordion-item-content", className),
|
|
28
31
|
ref
|
|
29
32
|
}), rest), {
|
|
@@ -37,4 +40,4 @@ AccordionContent.displayName = "Accordion.Content";
|
|
|
37
40
|
export {
|
|
38
41
|
AccordionContent
|
|
39
42
|
};
|
|
40
|
-
//# sourceMappingURL=chunk-
|
|
43
|
+
//# sourceMappingURL=chunk-AGIY7SFP.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/accordion/accordion-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { inertPropValue } from \"../utils\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n ({ children, className, ...rest }, ref) => {\n const context = useContext(AccordionItemContext);\n if (context === null) {\n return null;\n }\n return (\n <div\n id={context.contentId}\n data-state={context.open ? \"open\" : \"closed\"}\n {...{ inert: inertPropValue(!context.open) }}\n className={clsx(\"hds-accordion-item-content\", className as undefined)}\n ref={ref}\n {...rest}\n >\n <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":";;;;;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AAuBb;AAfD,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAXf,IAWG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ;AAAA,QACZ,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,eAAe,CAAC,QAAQ,IAAI,EAAE,IAH5C;AAAA,QAIC,WAAW,KAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OANL;AAAA,QAQC,8BAAC,SAAI,WAAW,KAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
inertPropValue
|
|
3
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
1
4
|
import {
|
|
2
5
|
__objRest,
|
|
3
6
|
__spreadProps,
|
|
@@ -44,7 +47,7 @@ var Skeleton = forwardRef(
|
|
|
44
47
|
),
|
|
45
48
|
style: __spreadProps(__spreadValues({}, style), { width, height }),
|
|
46
49
|
"aria-hidden": true
|
|
47
|
-
}, { inert:
|
|
50
|
+
}, { inert: inertPropValue(true) }), {
|
|
48
51
|
ref
|
|
49
52
|
}), rest), {
|
|
50
53
|
children
|
|
@@ -57,4 +60,4 @@ Skeleton.displayName = "Skeleton";
|
|
|
57
60
|
export {
|
|
58
61
|
Skeleton
|
|
59
62
|
};
|
|
60
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-B6T36QDV.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { inertPropValue } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n height?: number | string;\n width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * The visual style of the Skeleton\n */\n variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n /**\n * Whether to show animation or not\n * In the future the animation effect might become configurable\n *\n * default true\n */\n animation?: boolean;\n\n children?: React.ReactNode;\n\n /**\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 * Convienence prop to change the rendered element.\n *\n * Use {@link SkeletonProps.asChild} if you need more control of the rendered element.\n */\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n as: Tag = \"div\",\n asChild,\n children,\n animation = true,\n variant = \"text\",\n width,\n height,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n className={clsx(\n \"hds-skeleton\",\n `hds-skeleton--${variant}`,\n !animation && `hds-skeleton--no-animation`,\n className as undefined,\n )}\n style={{ ...style, width, height }}\n aria-hidden\n {...{ inert: inertPropValue(true) }}\n ref={ref as any}\n {...(rest as any)}\n >\n {children}\n </Component>\n );\n },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;AAGA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA2FrB;AAlBC,IAAM,WAAW;AAAA,EACtB,CACE,IAYA,QACG;AAbH,iBACE;AAAA,UAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzFN,IAgFI,IAUK,iBAVL,IAUK;AAAA,MATH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC,eAAW;AAAA,SACP,EAAE,OAAO,eAAe,IAAI,EAAE,IATnC;AAAA,QAUC;AAAA,UACK,OAXN;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useMergeRefs
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
4
4
|
import {
|
|
5
5
|
Box
|
|
6
6
|
} from "./chunk-3OGHJOJF.mjs";
|
|
@@ -127,4 +127,4 @@ export {
|
|
|
127
127
|
ModalFooter,
|
|
128
128
|
Modal
|
|
129
129
|
};
|
|
130
|
-
//# sourceMappingURL=chunk-
|
|
130
|
+
//# sourceMappingURL=chunk-EQFY63YP.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useMergeRefs
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadProps,
|
|
@@ -109,4 +109,4 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
|
|
|
109
109
|
export {
|
|
110
110
|
AutoAnimateHeight
|
|
111
111
|
};
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
112
|
+
//# sourceMappingURL=chunk-GYI4NCUY.mjs.map
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
useHydrated,
|
|
6
6
|
useMergeRefs,
|
|
7
7
|
useResize
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-77M2ZTP7.mjs";
|
|
9
9
|
import {
|
|
10
10
|
__objRest,
|
|
11
11
|
__spreadProps,
|
|
@@ -107,4 +107,4 @@ export {
|
|
|
107
107
|
TabsList,
|
|
108
108
|
TabsTab
|
|
109
109
|
};
|
|
110
|
-
//# sourceMappingURL=chunk-
|
|
110
|
+
//# sourceMappingURL=chunk-HBGFFKP3.mjs.map
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-TYCGAA35.mjs";
|
|
7
7
|
import {
|
|
8
8
|
Accordion
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-R6MQFVHE.mjs";
|
|
10
10
|
import {
|
|
11
11
|
__objRest,
|
|
12
12
|
__spreadProps,
|
|
@@ -106,4 +106,4 @@ export {
|
|
|
106
106
|
FooterLinkSection,
|
|
107
107
|
Footer
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=chunk-
|
|
109
|
+
//# sourceMappingURL=chunk-I4NL4ESV.mjs.map
|