@abgov/react-components 7.2.0-dev.4 → 7.2.0-dev.6
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/index.d.ts +1 -0
- package/index.js +74 -16
- package/index.js.map +1 -1
- package/index.mjs +76 -18
- package/index.mjs.map +1 -1
- package/lib/accordion/accordion.d.ts +7 -2
- package/lib/theme/theme-context.d.ts +14 -0
- package/lib/work-side-menu-item/work-side-menu-item.d.ts +4 -2
- package/package.json +1 -1
package/index.mjs
CHANGED
|
@@ -9,7 +9,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
|
|
|
9
9
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
10
10
|
var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
|
|
11
11
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
12
|
-
import { useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
|
|
12
|
+
import { useRef, useEffect, useLayoutEffect, useState, useCallback, createContext, useContext } from "react";
|
|
13
13
|
const lowercase = (input) => input.toLowerCase();
|
|
14
14
|
const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
15
15
|
function transformProps(props, transform = lowercase) {
|
|
@@ -28,6 +28,8 @@ function GoabAccordion({
|
|
|
28
28
|
open,
|
|
29
29
|
onChange,
|
|
30
30
|
headingContent,
|
|
31
|
+
headingType,
|
|
32
|
+
actions,
|
|
31
33
|
children,
|
|
32
34
|
...rest
|
|
33
35
|
}) {
|
|
@@ -46,10 +48,20 @@ function GoabAccordion({
|
|
|
46
48
|
};
|
|
47
49
|
}
|
|
48
50
|
}, [onChange]);
|
|
49
|
-
return /* @__PURE__ */ jsxs(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
return /* @__PURE__ */ jsxs(
|
|
52
|
+
"goa-accordion",
|
|
53
|
+
{
|
|
54
|
+
ref,
|
|
55
|
+
open: open ? "true" : void 0,
|
|
56
|
+
"heading-type": headingType,
|
|
57
|
+
..._props,
|
|
58
|
+
children: [
|
|
59
|
+
headingContent && /* @__PURE__ */ jsx("div", { slot: "headingcontent", children: headingContent }),
|
|
60
|
+
actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
|
|
61
|
+
children
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
);
|
|
53
65
|
}
|
|
54
66
|
function GoabAppHeader({
|
|
55
67
|
onMenuClick,
|
|
@@ -4302,30 +4314,28 @@ function GoabWorkSideMenu({
|
|
|
4302
4314
|
}) {
|
|
4303
4315
|
const el = useRef(null);
|
|
4304
4316
|
useEffect(() => {
|
|
4305
|
-
|
|
4306
|
-
if (!
|
|
4317
|
+
const node = el.current;
|
|
4318
|
+
if (!node || !onToggle) {
|
|
4307
4319
|
return;
|
|
4308
4320
|
}
|
|
4309
|
-
|
|
4321
|
+
node.addEventListener("_toggle", onToggle);
|
|
4310
4322
|
return () => {
|
|
4311
|
-
|
|
4312
|
-
(_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
|
|
4323
|
+
node.removeEventListener("_toggle", onToggle);
|
|
4313
4324
|
};
|
|
4314
|
-
}, [
|
|
4325
|
+
}, [onToggle]);
|
|
4315
4326
|
useEffect(() => {
|
|
4316
|
-
|
|
4317
|
-
if (!
|
|
4327
|
+
const node = el.current;
|
|
4328
|
+
if (!node || !onNavigate) {
|
|
4318
4329
|
return;
|
|
4319
4330
|
}
|
|
4320
4331
|
const handler = (e) => {
|
|
4321
4332
|
onNavigate(e.detail.url);
|
|
4322
4333
|
};
|
|
4323
|
-
|
|
4334
|
+
node.addEventListener("_navigate", handler);
|
|
4324
4335
|
return () => {
|
|
4325
|
-
|
|
4326
|
-
(_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_navigate", handler);
|
|
4336
|
+
node.removeEventListener("_navigate", handler);
|
|
4327
4337
|
};
|
|
4328
|
-
}, [
|
|
4338
|
+
}, [onNavigate]);
|
|
4329
4339
|
return /* @__PURE__ */ jsxs(
|
|
4330
4340
|
"goa-work-side-menu",
|
|
4331
4341
|
{
|
|
@@ -4370,6 +4380,7 @@ function GoabWorkSideMenuItem(props) {
|
|
|
4370
4380
|
type: props.type,
|
|
4371
4381
|
children: [
|
|
4372
4382
|
props.popoverContent && /* @__PURE__ */ jsx("div", { slot: "popoverContent", children: props.popoverContent }),
|
|
4383
|
+
props.trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: props.trailingContent }),
|
|
4373
4384
|
props.children
|
|
4374
4385
|
]
|
|
4375
4386
|
}
|
|
@@ -4447,6 +4458,51 @@ function GoabWorkSideNotificationPanel({
|
|
|
4447
4458
|
}
|
|
4448
4459
|
);
|
|
4449
4460
|
}
|
|
4461
|
+
const STORAGE_KEY = "goab-theme";
|
|
4462
|
+
const ATTRIBUTE = "data-theme";
|
|
4463
|
+
const GoabThemeContext = createContext(null);
|
|
4464
|
+
function readInitialMode(defaultMode) {
|
|
4465
|
+
if (typeof window === "undefined") return defaultMode;
|
|
4466
|
+
try {
|
|
4467
|
+
const stored = window.localStorage.getItem(STORAGE_KEY);
|
|
4468
|
+
if (stored === "light" || stored === "dark") return stored;
|
|
4469
|
+
} catch {
|
|
4470
|
+
}
|
|
4471
|
+
const fromAttribute = document.documentElement.getAttribute(ATTRIBUTE);
|
|
4472
|
+
if (fromAttribute === "light" || fromAttribute === "dark") return fromAttribute;
|
|
4473
|
+
if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
|
|
4474
|
+
return defaultMode;
|
|
4475
|
+
}
|
|
4476
|
+
function GoabThemeProvider({
|
|
4477
|
+
children,
|
|
4478
|
+
defaultMode = "light"
|
|
4479
|
+
}) {
|
|
4480
|
+
const [mode, setModeState] = useState(
|
|
4481
|
+
() => readInitialMode(defaultMode)
|
|
4482
|
+
);
|
|
4483
|
+
useEffect(() => {
|
|
4484
|
+
if (typeof document === "undefined") return;
|
|
4485
|
+
document.documentElement.setAttribute(ATTRIBUTE, mode);
|
|
4486
|
+
try {
|
|
4487
|
+
window.localStorage.setItem(STORAGE_KEY, mode);
|
|
4488
|
+
} catch {
|
|
4489
|
+
}
|
|
4490
|
+
}, [mode]);
|
|
4491
|
+
const setMode = useCallback((next) => {
|
|
4492
|
+
setModeState(next);
|
|
4493
|
+
}, []);
|
|
4494
|
+
const toggle = useCallback(() => {
|
|
4495
|
+
setModeState((prev) => prev === "light" ? "dark" : "light");
|
|
4496
|
+
}, []);
|
|
4497
|
+
return /* @__PURE__ */ jsx(GoabThemeContext.Provider, { value: { mode, setMode, toggle }, children });
|
|
4498
|
+
}
|
|
4499
|
+
function useTheme() {
|
|
4500
|
+
const ctx = useContext(GoabThemeContext);
|
|
4501
|
+
if (!ctx) {
|
|
4502
|
+
throw new Error("useTheme must be used within a GoabThemeProvider");
|
|
4503
|
+
}
|
|
4504
|
+
return ctx;
|
|
4505
|
+
}
|
|
4450
4506
|
export {
|
|
4451
4507
|
GoALinkButton,
|
|
4452
4508
|
GoabAccordion,
|
|
@@ -4536,6 +4592,7 @@ export {
|
|
|
4536
4592
|
GoabText,
|
|
4537
4593
|
GoabTextArea,
|
|
4538
4594
|
GoabTextArea as GoabTextarea,
|
|
4595
|
+
GoabThemeProvider,
|
|
4539
4596
|
GoabThreeColumnLayout,
|
|
4540
4597
|
GoabTooltip,
|
|
4541
4598
|
GoabTwoColumnLayout,
|
|
@@ -4544,6 +4601,7 @@ export {
|
|
|
4544
4601
|
GoabWorkSideMenuItem,
|
|
4545
4602
|
GoabWorkSideNotificationItem,
|
|
4546
4603
|
GoabWorkSideNotificationPanel,
|
|
4547
|
-
usePublicFormController
|
|
4604
|
+
usePublicFormController,
|
|
4605
|
+
useTheme
|
|
4548
4606
|
};
|
|
4549
4607
|
//# sourceMappingURL=index.mjs.map
|