@hitachivantara/app-shell-ui 1.2.1 → 1.3.0
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/esm/components/AppShellProvider/AppShellProvider.js +25 -25
- package/dist/esm/components/AppShellProvider/AppShellProvider.js.map +1 -1
- package/dist/esm/components/layout/VerticalNavigation/VerticalNavigation.js +16 -18
- package/dist/esm/components/layout/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/esm/lib/hooks/useLocalStorage.js +10 -9
- package/dist/esm/lib/hooks/useLocalStorage.js.map +1 -1
- package/dist/esm/lib/hooks/useThemeEventListener.js +4 -4
- package/dist/esm/lib/hooks/useThemeEventListener.js.map +1 -1
- package/dist/esm/providers/NavigationProvider.js +45 -35
- package/dist/esm/providers/NavigationProvider.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
import { jsx as i } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { useContext as
|
|
3
|
-
import { HvAppShellContext as
|
|
4
|
-
import { BrowserRouter as
|
|
5
|
-
import { I18nContext as
|
|
6
|
-
import { themes as T, HvProvider as
|
|
2
|
+
import { useContext as w, useState as d, useEffect as l, useMemo as S } from "react";
|
|
3
|
+
import { HvAppShellContext as L, HvAppShellRuntimeContext as O, CONFIG_TRANSLATIONS_NAMESPACE as H } from "@hitachivantara/app-shell-shared";
|
|
4
|
+
import { BrowserRouter as N } from "react-router-dom";
|
|
5
|
+
import { I18nContext as B } from "react-i18next";
|
|
6
|
+
import { themes as T, HvProvider as _ } from "@hitachivantara/uikit-react-core";
|
|
7
7
|
import j from "../../lib/utils/basePathUtils.js";
|
|
8
|
-
import { addResourceBundles as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
const
|
|
12
|
-
children:
|
|
8
|
+
import { addResourceBundles as D } from "../../lib/i18n/index.js";
|
|
9
|
+
import F from "../../lib/hooks/useLocalStorage.js";
|
|
10
|
+
import G from "../../lib/utils/CombinedProviders.js";
|
|
11
|
+
const V = ({
|
|
12
|
+
children: x,
|
|
13
13
|
config: m,
|
|
14
14
|
configUrl: n
|
|
15
15
|
}) => {
|
|
16
|
-
var v, f, P,
|
|
16
|
+
var v, f, P, I;
|
|
17
17
|
const {
|
|
18
18
|
i18n: a
|
|
19
|
-
} =
|
|
20
|
-
value:
|
|
21
|
-
} =
|
|
19
|
+
} = w(B), {
|
|
20
|
+
value: A
|
|
21
|
+
} = F("COLOR_MODE"), [p, h] = d(void 0), [$, E] = d(!1);
|
|
22
22
|
l(() => {
|
|
23
23
|
!m && n && fetch(new URL(n)).then((r) => r.json()).then((r) => h(r)).catch((r) => {
|
|
24
|
-
console.error(`It was not possible to obtain the context from: ${n}`, r), h(void 0),
|
|
24
|
+
console.error(`It was not possible to obtain the context from: ${n}`, r), h(void 0), E(!0);
|
|
25
25
|
});
|
|
26
26
|
}, [m, n]);
|
|
27
|
-
const e =
|
|
28
|
-
if (
|
|
27
|
+
const e = S(() => m ?? p, [m, p]);
|
|
28
|
+
if ($)
|
|
29
29
|
throw Error("It was not possible to obtain the configuration");
|
|
30
|
-
e != null && e.translations &&
|
|
31
|
-
const [c,
|
|
30
|
+
e != null && e.translations && D(a, e.translations, H);
|
|
31
|
+
const [c, M] = d(void 0), [u, R] = d(void 0);
|
|
32
32
|
l(() => {
|
|
33
33
|
var r, t;
|
|
34
34
|
(r = e == null ? void 0 : e.theming) != null && r.themes && Promise.all((t = e.theming.themes) == null ? void 0 : t.map((o) => (o === "ds3" || o === "ds5") && T[o] || import(
|
|
@@ -37,7 +37,7 @@ const K = ({
|
|
|
37
37
|
).then((s) => s.default).catch((s) => {
|
|
38
38
|
console.error(`Import of theme bundle ${o} failed! ${s}`);
|
|
39
39
|
}))).then((o) => {
|
|
40
|
-
|
|
40
|
+
M(o.filter((s) => !!s));
|
|
41
41
|
}).catch((o) => {
|
|
42
42
|
console.error(`Import of themes failed! ${o}`);
|
|
43
43
|
});
|
|
@@ -47,16 +47,16 @@ const K = ({
|
|
|
47
47
|
r.bundle
|
|
48
48
|
).then((t) => t.default).catch((t) => {
|
|
49
49
|
console.error(`Import of provider '${r.bundle}' failed! ${t}`);
|
|
50
|
-
}))).then((r) =>
|
|
50
|
+
}))).then((r) => R(r.filter((t) => !!t))).catch((r) => {
|
|
51
51
|
console.error("Import of providers failed!", r);
|
|
52
52
|
});
|
|
53
53
|
}, [e == null ? void 0 : e.providers]);
|
|
54
|
-
const
|
|
54
|
+
const b = S(() => ({
|
|
55
55
|
i18n: a
|
|
56
56
|
}), [a]);
|
|
57
|
-
return !e || (f = e.theming) != null && f.themes && !c || e.providers != null && u === void 0 ? null : /* @__PURE__ */ i(
|
|
58
|
-
},
|
|
57
|
+
return !e || (f = e.theming) != null && f.themes && !c || e.providers != null && u === void 0 ? null : /* @__PURE__ */ i(L.Provider, { value: e, children: /* @__PURE__ */ i(O.Provider, { value: b, children: /* @__PURE__ */ i(_, { themes: c, theme: (P = e.theming) == null ? void 0 : P.theme, colorMode: A ?? ((I = e.theming) == null ? void 0 : I.colorMode), children: /* @__PURE__ */ i(N, { basename: j(e), children: /* @__PURE__ */ i(G, { providers: u, children: x }) }) }) }) });
|
|
58
|
+
}, Y = V;
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
Y as default
|
|
61
61
|
};
|
|
62
62
|
//# sourceMappingURL=AppShellProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellProvider.js","sources":["../../../../src/components/AppShellProvider/AppShellProvider.tsx"],"sourcesContent":["import {\n ComponentType,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState\n} from \"react\";\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellConfig,\n HvAppShellContext,\n HvAppShellContextValue,\n HvAppShellRuntimeContext\n} from \"@hitachivantara/app-shell-shared\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { I18nContext } from \"react-i18next\";\n\nimport {\n HvProvider,\n HvTheme,\n themes as baseThemes\n} from \"@hitachivantara/uikit-react-core\";\n\nimport getBasePath from \"../../lib/utils/basePathUtils\";\nimport { addResourceBundles } from \"../../lib/i18n\";\nimport useLocalStorage
|
|
1
|
+
{"version":3,"file":"AppShellProvider.js","sources":["../../../../src/components/AppShellProvider/AppShellProvider.tsx"],"sourcesContent":["import {\n ComponentType,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState\n} from \"react\";\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellConfig,\n HvAppShellContext,\n HvAppShellContextValue,\n HvAppShellRuntimeContext\n} from \"@hitachivantara/app-shell-shared\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { I18nContext } from \"react-i18next\";\n\nimport {\n HvProvider,\n HvTheme,\n themes as baseThemes\n} from \"@hitachivantara/uikit-react-core\";\n\nimport getBasePath from \"../../lib/utils/basePathUtils\";\nimport { addResourceBundles } from \"../../lib/i18n\";\nimport useLocalStorage from \"../../lib/hooks/useLocalStorage\";\nimport CombinedProviders from \"../../lib/utils/CombinedProviders\";\n\nexport type AppShellProviderProps = {\n children: ReactNode;\n config?: Partial<HvAppShellConfig>;\n configUrl?: string;\n};\n\nconst AppShellProvider = ({\n children,\n config: localConfig,\n configUrl\n}: AppShellProviderProps) => {\n const { i18n } = useContext(I18nContext);\n const { value: storedColorModeValue } = useLocalStorage(\"COLOR_MODE\");\n const [loadedConfig, setLoadedConfig] = useState<\n HvAppShellConfig | undefined\n >(undefined);\n\n const [hasError, setHasError] = useState<boolean>(false);\n\n useEffect(() => {\n if (!localConfig && configUrl) {\n fetch(new URL(configUrl))\n .then(result => {\n return result.json();\n })\n .then(data => setLoadedConfig(data))\n .catch(e => {\n console.error(\n `It was not possible to obtain the context from: ${configUrl}`,\n e\n );\n setLoadedConfig(undefined);\n setHasError(true);\n });\n }\n }, [localConfig, configUrl]);\n\n const theConfig: HvAppShellContextValue | undefined = useMemo(\n () => localConfig ?? loadedConfig,\n [localConfig, loadedConfig]\n );\n\n if (hasError) {\n throw Error(\"It was not possible to obtain the configuration\");\n }\n\n if (theConfig?.translations) {\n addResourceBundles(\n i18n,\n theConfig.translations,\n CONFIG_TRANSLATIONS_NAMESPACE\n );\n }\n\n const [themes, setThemes] = useState<HvTheme[] | undefined>(undefined);\n const [providers, setProviders] = useState<\n ComponentType<{ children: ReactNode }>[] | undefined\n >(undefined);\n\n useEffect(() => {\n if (theConfig?.theming?.themes) {\n Promise.all(\n theConfig.theming.themes?.map(bundle => {\n return (\n ((bundle === \"ds3\" || bundle === \"ds5\") && baseThemes[bundle]) ||\n import(/* @vite-ignore */ bundle)\n .then(module => module.default)\n .catch(e => {\n console.error(`Import of theme bundle ${bundle} failed! ${e}`);\n })\n );\n })\n )\n .then(loadedThemes => {\n setThemes(loadedThemes.filter(theme => !!theme));\n })\n .catch(e => {\n console.error(`Import of themes failed! ${e}`);\n });\n }\n }, [theConfig?.theming?.themes]);\n\n useEffect(() => {\n if (theConfig?.providers) {\n Promise.all(\n theConfig.providers.map(provider => {\n return import(/* @vite-ignore */ provider.bundle)\n .then(module => module.default)\n .catch(e => {\n console.error(\n `Import of provider '${provider.bundle}' failed! ${e}`\n );\n });\n })\n )\n .then(loadedProviders =>\n setProviders(loadedProviders.filter(provider => !!provider))\n )\n .catch(e => {\n console.error(`Import of providers failed!`, e);\n });\n }\n }, [theConfig?.providers]);\n\n const runtimeContext = useMemo(\n () => ({\n i18n\n }),\n [i18n]\n );\n if (\n !theConfig ||\n (theConfig.theming?.themes && !themes) ||\n (theConfig.providers != null && providers === undefined)\n ) {\n return null;\n }\n\n return (\n <HvAppShellContext.Provider value={theConfig}>\n <HvAppShellRuntimeContext.Provider value={runtimeContext}>\n <HvProvider\n themes={themes}\n theme={theConfig.theming?.theme}\n colorMode={storedColorModeValue ?? theConfig.theming?.colorMode}>\n <BrowserRouter basename={getBasePath(theConfig)}>\n <CombinedProviders providers={providers}>\n {children}\n </CombinedProviders>\n </BrowserRouter>\n </HvProvider>\n </HvAppShellRuntimeContext.Provider>\n </HvAppShellContext.Provider>\n );\n};\n\nexport default AppShellProvider;\n"],"names":["AppShellProvider","children","config","localConfig","configUrl","i18n","useContext","I18nContext","value","storedColorModeValue","useLocalStorage","loadedConfig","setLoadedConfig","useState","undefined","hasError","setHasError","useEffect","fetch","URL","then","result","json","data","catch","e","console","error","theConfig","useMemo","Error","translations","CONFIG_TRANSLATIONS_NAMESPACE","themes","setThemes","providers","setProviders","theming","Promise","all","map","bundle","baseThemes","module","default","loadedThemes","filter","theme","provider","loadedProviders","runtimeContext","HvAppShellContext","jsx","HvAppShellRuntimeContext","HvProvider","colorMode","BrowserRouter","getBasePath","CombinedProviders","AppShellProvider$1"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { useTranslation as
|
|
4
|
-
import { cx as
|
|
5
|
-
import { HvVerticalNavigation as L, HvVerticalNavigationHeader as V, HvVerticalNavigationTree as B, HvVerticalNavigationActions as
|
|
6
|
-
import { useHvNavigation as
|
|
1
|
+
import { jsx as r, jsxs as N } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useRef as b, useEffect as h } from "react";
|
|
3
|
+
import { useTranslation as C } from "react-i18next";
|
|
4
|
+
import { cx as x } from "@emotion/css";
|
|
5
|
+
import { HvVerticalNavigation as L, HvVerticalNavigationHeader as V, HvVerticalNavigationTree as B, HvVerticalNavigationActions as H } from "@hitachivantara/uikit-react-core";
|
|
6
|
+
import { useHvNavigation as I } from "@hitachivantara/app-shell-navigation";
|
|
7
7
|
import w from "../../../providers/hooks/useNavigationContext.js";
|
|
8
8
|
import { classes as l } from "./styles.js";
|
|
9
9
|
import A from "../../hoc/withClickAwayListener.js";
|
|
@@ -11,7 +11,7 @@ import E from "../../../providers/hooks/useLayoutContext.js";
|
|
|
11
11
|
const M = () => {
|
|
12
12
|
const {
|
|
13
13
|
t: a
|
|
14
|
-
} =
|
|
14
|
+
} = C(), {
|
|
15
15
|
selectedMenuItemId: d,
|
|
16
16
|
rootMenuItemId: g,
|
|
17
17
|
verticalNavigationItems: p,
|
|
@@ -22,27 +22,25 @@ const M = () => {
|
|
|
22
22
|
setVerticalNavigationWidth: o
|
|
23
23
|
} = E(), {
|
|
24
24
|
navigate: m
|
|
25
|
-
} =
|
|
25
|
+
} = I(), v = b(null), n = s === "EXPANDED", f = (e, t) => {
|
|
26
26
|
e.preventDefault(), t.href && (m(t.href, {
|
|
27
27
|
state: {
|
|
28
28
|
selectedItemId: t.id
|
|
29
29
|
}
|
|
30
30
|
}), i && c());
|
|
31
|
-
}, u = () => {
|
|
32
|
-
c();
|
|
33
31
|
};
|
|
34
|
-
|
|
32
|
+
h(() => {
|
|
35
33
|
const {
|
|
36
34
|
current: e
|
|
37
35
|
} = v, t = e == null ? void 0 : e.childNodes[0];
|
|
38
36
|
return o(t && !i ? t.offsetWidth : 0), () => o(0);
|
|
39
37
|
}, [s, i, o]);
|
|
40
|
-
const
|
|
41
|
-
return /* @__PURE__ */ r("div", { ref: v, children: /* @__PURE__ */
|
|
38
|
+
const u = a(n ? "verticalNavigation.ariaLabelCollapse" : "verticalNavigation.ariaLabelExpand");
|
|
39
|
+
return /* @__PURE__ */ r("div", { ref: v, children: /* @__PURE__ */ N(L, { className: x(l.navigation, {
|
|
42
40
|
[l.navigationCompact]: i
|
|
43
41
|
}), open: n, useIcons: !0, slider: i, children: [
|
|
44
|
-
/* @__PURE__ */ r(V, { title: a("verticalNavigation.title") ?? "", onCollapseButtonClick: i ? void 0 :
|
|
45
|
-
"aria-label":
|
|
42
|
+
/* @__PURE__ */ r(V, { title: a("verticalNavigation.title") ?? "", onCollapseButtonClick: i ? void 0 : c, collapseButtonProps: {
|
|
43
|
+
"aria-label": u,
|
|
46
44
|
"aria-expanded": n
|
|
47
45
|
}, backButtonProps: {
|
|
48
46
|
"aria-label": a("verticalNavigation.ariaLabelHeaderBackButton") ?? ""
|
|
@@ -50,10 +48,10 @@ const M = () => {
|
|
|
50
48
|
/* @__PURE__ */ r(B, { mode: "navigation", collapsible: !0, "aria-label": a("verticalNavigation.ariaLabelNavigationTree") ?? "", selected: d ?? "", onChange: f, data: p, classes: {
|
|
51
49
|
navigationPopup: l.navigationPopup
|
|
52
50
|
}, sliderForwardButtonAriaLabel: a("verticalNavigation.ariaLabelSliderForwardButton") ?? "" }, g),
|
|
53
|
-
/* @__PURE__ */ r(
|
|
51
|
+
/* @__PURE__ */ r(H, {})
|
|
54
52
|
] }) });
|
|
55
|
-
},
|
|
53
|
+
}, X = A(M);
|
|
56
54
|
export {
|
|
57
|
-
|
|
55
|
+
X as default
|
|
58
56
|
};
|
|
59
57
|
//# sourceMappingURL=VerticalNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigation.js","sources":["../../../../../src/components/layout/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cx } from \"@emotion/css\";\nimport {\n HvVerticalNavigation,\n HvVerticalNavigationActions,\n HvVerticalNavigationHeader,\n HvVerticalNavigationTree\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport { NavigationMenuItem } from \"../../../lib/types\";\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport { classes } from \"./styles\";\n\nimport withClickAwayListener from \"../../hoc/withClickAwayListener\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nconst VerticalNavigation = () => {\n const { t } = useTranslation();\n const {\n selectedMenuItemId,\n rootMenuItemId,\n verticalNavigationItems,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { setVerticalNavigationWidth } = useLayoutContext();\n const { navigate } = useHvNavigation();\n const verticalNavigationRef = useRef<HTMLDivElement>(null);\n const isVerticalNavigationExpanded = verticalNavigationMode === \"EXPANDED\";\n\n const changeHandler = (\n event: React.SyntheticEvent<Element, Event>,\n selectedItem: NavigationMenuItem\n ) => {\n // Due to the change from buttons to links on the navigation tree, we need to prevent the default behaviour of\n // the event to avoid full refreshes when clicking on the links.\n event.preventDefault();\n\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n\n if (isCompactMode) {\n switchVerticalNavigationMode();\n }\n }\n };\n\n
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.js","sources":["../../../../../src/components/layout/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cx } from \"@emotion/css\";\nimport {\n HvVerticalNavigation,\n HvVerticalNavigationActions,\n HvVerticalNavigationHeader,\n HvVerticalNavigationTree\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport { NavigationMenuItem } from \"../../../lib/types\";\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport { classes } from \"./styles\";\n\nimport withClickAwayListener from \"../../hoc/withClickAwayListener\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nconst VerticalNavigation = () => {\n const { t } = useTranslation();\n const {\n selectedMenuItemId,\n rootMenuItemId,\n verticalNavigationItems,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { setVerticalNavigationWidth } = useLayoutContext();\n const { navigate } = useHvNavigation();\n const verticalNavigationRef = useRef<HTMLDivElement>(null);\n const isVerticalNavigationExpanded = verticalNavigationMode === \"EXPANDED\";\n\n const changeHandler = (\n event: React.SyntheticEvent<Element, Event>,\n selectedItem: NavigationMenuItem\n ) => {\n // Due to the change from buttons to links on the navigation tree, we need to prevent the default behaviour of\n // the event to avoid full refreshes when clicking on the links.\n event.preventDefault();\n\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n\n if (isCompactMode) {\n switchVerticalNavigationMode();\n }\n }\n };\n\n useEffect(() => {\n const { current } = verticalNavigationRef;\n const firstChild = current?.childNodes[0] as HTMLElement;\n if (firstChild && !isCompactMode) {\n setVerticalNavigationWidth(firstChild.offsetWidth);\n } else {\n setVerticalNavigationWidth(0);\n }\n\n return () => setVerticalNavigationWidth(0);\n }, [verticalNavigationMode, isCompactMode, setVerticalNavigationWidth]);\n\n const collapseButtonAriaLabel = isVerticalNavigationExpanded\n ? t(\"verticalNavigation.ariaLabelCollapse\")\n : t(\"verticalNavigation.ariaLabelExpand\");\n\n return (\n <div ref={verticalNavigationRef}>\n <HvVerticalNavigation\n className={cx(classes.navigation, {\n [classes.navigationCompact]: isCompactMode\n })}\n open={isVerticalNavigationExpanded}\n useIcons\n slider={isCompactMode}>\n <HvVerticalNavigationHeader\n title={t(\"verticalNavigation.title\") ?? \"\"}\n onCollapseButtonClick={\n !isCompactMode ? switchVerticalNavigationMode : undefined\n }\n collapseButtonProps={{\n \"aria-label\": collapseButtonAriaLabel,\n \"aria-expanded\": isVerticalNavigationExpanded\n }}\n backButtonProps={{\n \"aria-label\":\n t(\"verticalNavigation.ariaLabelHeaderBackButton\") ?? \"\"\n }}\n />\n\n <HvVerticalNavigationTree\n key={rootMenuItemId}\n mode=\"navigation\"\n collapsible\n aria-label={t(\"verticalNavigation.ariaLabelNavigationTree\") ?? \"\"}\n selected={selectedMenuItemId ?? \"\"}\n onChange={changeHandler}\n data={verticalNavigationItems}\n classes={{ navigationPopup: classes.navigationPopup }}\n sliderForwardButtonAriaLabel={\n t(\"verticalNavigation.ariaLabelSliderForwardButton\") ?? \"\"\n }\n />\n\n <HvVerticalNavigationActions />\n </HvVerticalNavigation>\n </div>\n );\n};\n\nexport default withClickAwayListener(VerticalNavigation);\n"],"names":["VerticalNavigation","t","useTranslation","selectedMenuItemId","rootMenuItemId","verticalNavigationItems","isCompactMode","verticalNavigationMode","switchVerticalNavigationMode","useNavigationContext","setVerticalNavigationWidth","useLayoutContext","navigate","useHvNavigation","verticalNavigationRef","useRef","isVerticalNavigationExpanded","changeHandler","event","selectedItem","preventDefault","href","state","selectedItemId","id","useEffect","current","firstChild","childNodes","offsetWidth","collapseButtonAriaLabel","jsx","HvVerticalNavigation","cx","classes","navigation","navigationCompact","HvVerticalNavigationHeader","undefined","HvVerticalNavigationTree","navigationPopup","HvVerticalNavigationActions","withClickAwayListener"],"mappings":";;;;;;;;;;AAmBA,MAAMA,IAAqBA,MAAM;AACzB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IACJC,oBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,yBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,wBAAAA;AAAAA,IACAC,8BAAAA;AAAAA,MACEC,EAAqB,GACnB;AAAA,IAAEC,4BAAAA;AAAAA,MAA+BC,EAAiB,GAClD;AAAA,IAAEC,UAAAA;AAAAA,MAAaC,EAAgB,GAC/BC,IAAwBC,EAAuB,IAAI,GACnDC,IAA+BT,MAA2B,YAE1DU,IAAgBA,CACpBC,GACAC,MACG;AAGHD,IAAAA,EAAME,eAAe,GAEjBD,EAAaE,SACfT,EAASO,EAAaE,MAAM;AAAA,MAC1BC,OAAO;AAAA,QAAEC,gBAAgBJ,EAAaK;AAAAA,MAAG;AAAA,IAAA,CAC1C,GAEGlB,KAC2BE;EAEjC;AAGFiB,EAAAA,EAAU,MAAM;AACR,UAAA;AAAA,MAAEC,SAAAA;AAAAA,IAAYZ,IAAAA,GACda,IAAaD,KAAAA,gBAAAA,EAASE,WAAW;AACnCD,WACFjB,EADEiB,KAAc,CAACrB,IACUqB,EAAWE,cAEX,CAFsB,GAK5C,MAAMnB,EAA2B,CAAC;AAAA,EACxC,GAAA,CAACH,GAAwBD,GAAeI,CAA0B,CAAC;AAEtE,QAAMoB,IACF7B,EAD4Be,IAC1B,yCACA,oCADsC;AAI1C,SAAA,gBAAAe,EAAC,SAAI,KAAKjB,GACR,4BAACkB,GACC,EAAA,WAAWC,EAAGC,EAAQC,YAAY;AAAA,IAChC,CAACD,EAAQE,iBAAiB,GAAG9B;AAAAA,EAAAA,CAC9B,GACD,MAAMU,GACN,UAAQ,IACR,QAAQV,GACR,UAAA;AAAA,IAAC,gBAAAyB,EAAAM,GAAA,EACC,OAAOpC,EAAE,0BAA0B,KAAK,IACxC,uBACGK,IAA+CgC,SAA/B9B,GAEnB,qBAAqB;AAAA,MACnB,cAAcsB;AAAAA,MACd,iBAAiBd;AAAAA,OAEnB,iBAAiB;AAAA,MACf,cACEf,EAAE,8CAA8C,KAAK;AAAA,IAAA,GACvD;AAAA,sBAGHsC,GAEC,EAAA,MAAK,cACL,aAAW,IACX,cAAYtC,EAAE,4CAA4C,KAAK,IAC/D,UAAUE,KAAsB,IAChC,UAAUc,GACV,MAAMZ,GACN,SAAS;AAAA,MAAEmC,iBAAiBN,EAAQM;AAAAA,IAAAA,GACpC,8BACEvC,EAAE,iDAAiD,KAAK,MATrDG,CAUJ;AAAA,sBAGFqC,GAA2B,EAAA;AAAA,EAAA,EAC9B,CAAA,EACF,CAAA;AAEJ,GAEeC,IAAAA,EAAsB1C,CAAkB;"}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
import { useState as
|
|
1
|
+
import { useState as l, useEffect as c } from "react";
|
|
2
2
|
const u = {
|
|
3
|
-
COLOR_MODE: "hv/user-preferences/color-mode"
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
COLOR_MODE: "hv/user-preferences/color-mode",
|
|
4
|
+
NAV_EXPANDED: "hv/app-shell/expanded"
|
|
5
|
+
}, E = (o) => {
|
|
6
|
+
const e = u[o] || o, [r, s] = l(() => localStorage.getItem(e)), n = (t) => {
|
|
6
7
|
localStorage.setItem(e, t);
|
|
7
8
|
};
|
|
8
|
-
return
|
|
9
|
-
const t = (
|
|
10
|
-
|
|
9
|
+
return c(() => {
|
|
10
|
+
const t = (a) => {
|
|
11
|
+
a.key === e && s(a.newValue);
|
|
11
12
|
};
|
|
12
13
|
return window.addEventListener("storage", t), () => {
|
|
13
14
|
window.removeEventListener("storage", t);
|
|
14
15
|
};
|
|
15
16
|
}, [e]), {
|
|
16
17
|
value: r,
|
|
17
|
-
setStoredValue:
|
|
18
|
+
setStoredValue: n
|
|
18
19
|
};
|
|
19
20
|
};
|
|
20
21
|
export {
|
|
21
22
|
u as LOCAL_STORAGE_KEYS,
|
|
22
|
-
|
|
23
|
+
E as default
|
|
23
24
|
};
|
|
24
25
|
//# sourceMappingURL=useLocalStorage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLocalStorage.js","sources":["../../../../src/lib/hooks/useLocalStorage.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nexport const LOCAL_STORAGE_KEYS = {\n COLOR_MODE: \"hv/user-preferences/color-mode\"\n};\n\nconst useLocalStorage = (
|
|
1
|
+
{"version":3,"file":"useLocalStorage.js","sources":["../../../../src/lib/hooks/useLocalStorage.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nexport const LOCAL_STORAGE_KEYS = {\n COLOR_MODE: \"hv/user-preferences/color-mode\",\n NAV_EXPANDED: \"hv/app-shell/expanded\"\n} satisfies Record<string, string>;\n\ntype StorageKey = keyof typeof LOCAL_STORAGE_KEYS;\n\nconst useLocalStorage = (storageKey: StorageKey) => {\n const key = LOCAL_STORAGE_KEYS[storageKey] || storageKey;\n const [value, setValue] = useState(() => localStorage.getItem(key));\n\n const setStoredValue = (newValue: string) => {\n localStorage.setItem(key, newValue);\n };\n\n useEffect(() => {\n const handleStorageChange = (event: StorageEvent) => {\n if (event.key === key) {\n setValue(event.newValue);\n }\n };\n\n window.addEventListener(\"storage\", handleStorageChange);\n\n return () => {\n window.removeEventListener(\"storage\", handleStorageChange);\n };\n }, [key]);\n\n return { value, setStoredValue } as const;\n};\n\nexport default useLocalStorage;\n"],"names":["LOCAL_STORAGE_KEYS","COLOR_MODE","NAV_EXPANDED","useLocalStorage","storageKey","key","value","setValue","useState","localStorage","getItem","setStoredValue","newValue","setItem","useEffect","handleStorageChange","event","addEventListener","removeEventListener"],"mappings":";AAEO,MAAMA,IAAqB;AAAA,EAChCC,YAAY;AAAA,EACZC,cAAc;AAChB,GAIMC,IAAkBA,CAACC,MAA2B;AAC5CC,QAAAA,IAAML,EAAmBI,CAAU,KAAKA,GACxC,CAACE,GAAOC,CAAQ,IAAIC,EAAS,MAAMC,aAAaC,QAAQL,CAAG,CAAC,GAE5DM,IAAiBA,CAACC,MAAqB;AAC9BC,iBAAAA,QAAQR,GAAKO,CAAQ;AAAA,EAAA;AAGpCE,SAAAA,EAAU,MAAM;AACRC,UAAAA,IAAsBA,CAACC,MAAwB;AAC/CA,MAAAA,EAAMX,QAAQA,KAChBE,EAASS,EAAMJ,QAAQ;AAAA,IACzB;AAGKK,kBAAAA,iBAAiB,WAAWF,CAAmB,GAE/C,MAAM;AACJG,aAAAA,oBAAoB,WAAWH,CAAmB;AAAA,IAAA;AAAA,EAC3D,GACC,CAACV,CAAG,CAAC,GAED;AAAA,IAAEC,OAAAA;AAAAA,IAAOK,gBAAAA;AAAAA,EAAAA;AAClB;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useTheme as h } from "@hitachivantara/uikit-react-core";
|
|
2
|
-
import m
|
|
3
|
-
const
|
|
2
|
+
import m from "./useLocalStorage.js";
|
|
3
|
+
const u = () => {
|
|
4
4
|
const {
|
|
5
5
|
selectedTheme: s,
|
|
6
6
|
changeTheme: d,
|
|
@@ -8,7 +8,7 @@ const O = () => {
|
|
|
8
8
|
colorModes: o
|
|
9
9
|
} = h(), {
|
|
10
10
|
setStoredValue: c
|
|
11
|
-
} = m(
|
|
11
|
+
} = m("COLOR_MODE"), l = () => {
|
|
12
12
|
const e = (o.indexOf(r) + 1) % o.length;
|
|
13
13
|
return o[e];
|
|
14
14
|
};
|
|
@@ -22,6 +22,6 @@ const O = () => {
|
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
export {
|
|
25
|
-
|
|
25
|
+
u as default
|
|
26
26
|
};
|
|
27
27
|
//# sourceMappingURL=useThemeEventListener.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeEventListener.js","sources":["../../../../src/lib/hooks/useThemeEventListener.ts"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvAppShellEventTheme } from \"@hitachivantara/app-shell-events\";\nimport useLocalStorage
|
|
1
|
+
{"version":3,"file":"useThemeEventListener.js","sources":["../../../../src/lib/hooks/useThemeEventListener.ts"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvAppShellEventTheme } from \"@hitachivantara/app-shell-events\";\nimport useLocalStorage from \"./useLocalStorage\";\n\nconst useThemeEventListener = () => {\n const { selectedTheme, changeTheme, selectedMode, colorModes } = useTheme();\n const { setStoredValue } = useLocalStorage(\"COLOR_MODE\");\n\n const getNextColorMode = () => {\n const index = colorModes.indexOf(selectedMode);\n\n const nextIndex = (index + 1) % colorModes.length;\n return colorModes[nextIndex];\n };\n\n const handleThemeEvent = (event: CustomEvent<HvAppShellEventTheme>) => {\n const { colorMode } = event.detail;\n const newColorMode =\n !colorMode || colorModes.indexOf(colorMode) === -1\n ? getNextColorMode()\n : colorMode;\n\n // For now we only want to change the colorMode\n changeTheme(selectedTheme, newColorMode);\n setStoredValue(newColorMode);\n };\n\n return { handleThemeEvent };\n};\n\nexport default useThemeEventListener;\n"],"names":["useThemeEventListener","selectedTheme","changeTheme","selectedMode","colorModes","useTheme","setStoredValue","useLocalStorage","getNextColorMode","nextIndex","indexOf","length","handleThemeEvent","event","colorMode","detail","newColorMode"],"mappings":";;AAKA,MAAMA,IAAwBA,MAAM;AAC5B,QAAA;AAAA,IAAEC,eAAAA;AAAAA,IAAeC,aAAAA;AAAAA,IAAaC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,MAAeC,EAAS,GACpE;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,IAAmBC,EAAgB,YAAY,GAEjDC,IAAmBA,MAAM;AAGvBC,UAAAA,KAFQL,EAAWM,QAAQP,CAAY,IAElB,KAAKC,EAAWO;AAC3C,WAAOP,EAAWK,CAAS;AAAA,EAAA;AAetB,SAAA;AAAA,IAAEG,kBAZgBA,CAACC,MAA6C;AAC/D,YAAA;AAAA,QAAEC,WAAAA;AAAAA,MAAAA,IAAcD,EAAME,QACtBC,IACJ,CAACF,KAAaV,EAAWM,QAAQI,CAAS,MAAM,KAC5CN,EACAM,IAAAA;AAGNZ,MAAAA,EAAYD,GAAee,CAAY,GACvCV,EAAeU,CAAY;AAAA,IAAA;AAAA,EAGpBJ;AACX;"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import { useHvAppShellConfig as
|
|
5
|
-
import { removeHrefFromMenuItemsWithChildren as
|
|
6
|
-
import
|
|
7
|
-
|
|
1
|
+
import { jsx as x } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { createContext as L, useState as d, useMemo as s, useEffect as u, useCallback as A } from "react";
|
|
3
|
+
import { useTheme as O, useMediaQuery as w } from "@mui/material";
|
|
4
|
+
import { useHvAppShellConfig as T } from "@hitachivantara/app-shell-shared";
|
|
5
|
+
import { removeHrefFromMenuItemsWithChildren as I, findItemById as V } from "../lib/utils/navigationUtil.js";
|
|
6
|
+
import b from "../lib/hooks/useNavigationMenuItems.js";
|
|
7
|
+
import H from "../lib/hooks/useLocalStorage.js";
|
|
8
|
+
const X = L({
|
|
8
9
|
selectedMenuItemId: void 0,
|
|
9
10
|
rootMenuItemId: void 0,
|
|
10
11
|
items: [],
|
|
@@ -15,42 +16,51 @@ const w = C({
|
|
|
15
16
|
verticalNavigationMode: "EXPANDED",
|
|
16
17
|
switchVerticalNavigationMode: () => {
|
|
17
18
|
}
|
|
18
|
-
}),
|
|
19
|
-
children:
|
|
19
|
+
}), _ = ({
|
|
20
|
+
children: h
|
|
20
21
|
}) => {
|
|
21
22
|
const {
|
|
22
|
-
navigationMode:
|
|
23
|
-
} =
|
|
23
|
+
navigationMode: a
|
|
24
|
+
} = T(), {
|
|
24
25
|
items: t,
|
|
25
|
-
selectedMenuItemId:
|
|
26
|
-
rootMenuItemId:
|
|
27
|
-
} =
|
|
28
|
-
|
|
26
|
+
selectedMenuItemId: c,
|
|
27
|
+
rootMenuItemId: i
|
|
28
|
+
} = b(), S = O(), e = w(S.breakpoints.down("md")), {
|
|
29
|
+
value: m,
|
|
30
|
+
setStoredValue: l
|
|
31
|
+
} = H("NAV_EXPANDED"), [n, C] = d(m == null ? !0 : m === "true"), [v, f] = d(e), [N, D] = d(!1), g = s(() => e ? v ? "CLOSED" : "EXPANDED" : n ? "EXPANDED" : "COLLAPSED", [v, e, n]), r = s(() => {
|
|
32
|
+
var E;
|
|
29
33
|
if (e)
|
|
30
34
|
return t;
|
|
31
|
-
if (
|
|
32
|
-
return
|
|
33
|
-
const o =
|
|
34
|
-
return
|
|
35
|
-
}, [t,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
if (a === "ONLY_LEFT")
|
|
36
|
+
return I(t);
|
|
37
|
+
const o = i && ((E = V(t, i)) == null ? void 0 : E.data) || [];
|
|
38
|
+
return I(o);
|
|
39
|
+
}, [t, a, i, e]), M = s(() => e ? !0 : a === "ONLY_TOP" ? !1 : r && r.length > 0, [a, r, e]);
|
|
40
|
+
u(() => {
|
|
41
|
+
l(String(n));
|
|
42
|
+
}, [n, l]), u(() => {
|
|
43
|
+
f(e);
|
|
44
|
+
}, [e]), u(() => {
|
|
45
|
+
D(a === "ONLY_TOP" && t.some((o) => o.data && o.data.length > 0));
|
|
46
|
+
}, [a, t]);
|
|
47
|
+
const p = A(() => {
|
|
48
|
+
e ? f((o) => !o) : C((o) => !o);
|
|
49
|
+
}, [e]), P = s(() => ({
|
|
50
|
+
selectedMenuItemId: c,
|
|
51
|
+
rootMenuItemId: i,
|
|
42
52
|
items: t,
|
|
43
53
|
verticalNavigationItems: r,
|
|
44
|
-
hasVerticalNavigation:
|
|
45
|
-
showHeaderSubMenu:
|
|
54
|
+
hasVerticalNavigation: M,
|
|
55
|
+
showHeaderSubMenu: N,
|
|
46
56
|
isCompactMode: e,
|
|
47
|
-
verticalNavigationMode:
|
|
48
|
-
switchVerticalNavigationMode:
|
|
49
|
-
}), [
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
},
|
|
57
|
+
verticalNavigationMode: g,
|
|
58
|
+
switchVerticalNavigationMode: p
|
|
59
|
+
}), [c, i, t, r, M, N, e, g, p]);
|
|
60
|
+
return /* @__PURE__ */ x(X.Provider, { value: P, children: h });
|
|
61
|
+
}, R = _;
|
|
52
62
|
export {
|
|
53
|
-
|
|
54
|
-
|
|
63
|
+
X as NavigationContext,
|
|
64
|
+
R as default
|
|
55
65
|
};
|
|
56
66
|
//# sourceMappingURL=NavigationProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationProvider.js","sources":["../../../src/providers/NavigationProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useState\n} from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useHvAppShellConfig } from \"@hitachivantara/app-shell-shared\";\n\nimport {\n findItemById,\n removeHrefFromMenuItemsWithChildren\n} from \"../lib/utils/navigationUtil\";\nimport { NavigationMenuItem } from \"../lib/types\";\nimport useNavigationMenuItems from \"../lib/hooks/useNavigationMenuItems\";\n\nexport type NavigationProviderProps = {\n children: ReactNode;\n};\n\nexport type VerticalNavigationMode = \"EXPANDED\" | \"COLLAPSED\" | \"CLOSED\";\n\nexport interface NavigationContextValue {\n selectedMenuItemId: string | undefined;\n rootMenuItemId: string | undefined;\n items: NavigationMenuItem[];\n verticalNavigationItems: NavigationMenuItem[];\n hasVerticalNavigation: boolean;\n showHeaderSubMenu: boolean;\n isCompactMode: boolean;\n verticalNavigationMode: VerticalNavigationMode;\n switchVerticalNavigationMode: () => void;\n}\n\nexport const NavigationContext = createContext<NavigationContextValue>({\n selectedMenuItemId: undefined,\n rootMenuItemId: undefined,\n items: [],\n verticalNavigationItems: [],\n hasVerticalNavigation: false,\n showHeaderSubMenu: false,\n isCompactMode: false,\n verticalNavigationMode: \"EXPANDED\",\n switchVerticalNavigationMode: () => {\n // Empty function\n }\n});\n\nconst NavigationProvider = ({ children }: NavigationProviderProps) => {\n const { navigationMode } = useHvAppShellConfig();\n const { items, selectedMenuItemId, rootMenuItemId } =\n useNavigationMenuItems();\n const muiTheme = useTheme();\n\n const isCompactMode = useMediaQuery(muiTheme.breakpoints.down(\"md\"));\n const [
|
|
1
|
+
{"version":3,"file":"NavigationProvider.js","sources":["../../../src/providers/NavigationProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useState\n} from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useHvAppShellConfig } from \"@hitachivantara/app-shell-shared\";\n\nimport {\n findItemById,\n removeHrefFromMenuItemsWithChildren\n} from \"../lib/utils/navigationUtil\";\nimport { NavigationMenuItem } from \"../lib/types\";\nimport useNavigationMenuItems from \"../lib/hooks/useNavigationMenuItems\";\nimport useLocalStorage from \"../lib/hooks/useLocalStorage\";\n\nexport type NavigationProviderProps = {\n children: ReactNode;\n};\n\nexport type VerticalNavigationMode = \"EXPANDED\" | \"COLLAPSED\" | \"CLOSED\";\n\nexport interface NavigationContextValue {\n selectedMenuItemId: string | undefined;\n rootMenuItemId: string | undefined;\n /** Items visible in the header */\n items: NavigationMenuItem[];\n /** Items visible in the vertical navigation */\n verticalNavigationItems: NavigationMenuItem[];\n hasVerticalNavigation: boolean;\n showHeaderSubMenu: boolean;\n isCompactMode: boolean;\n verticalNavigationMode: VerticalNavigationMode;\n switchVerticalNavigationMode: () => void;\n}\n\nexport const NavigationContext = createContext<NavigationContextValue>({\n selectedMenuItemId: undefined,\n rootMenuItemId: undefined,\n items: [],\n verticalNavigationItems: [],\n hasVerticalNavigation: false,\n showHeaderSubMenu: false,\n isCompactMode: false,\n verticalNavigationMode: \"EXPANDED\",\n switchVerticalNavigationMode: () => {\n // Empty function\n }\n});\n\nconst NavigationProvider = ({ children }: NavigationProviderProps) => {\n const { navigationMode } = useHvAppShellConfig();\n const { items, selectedMenuItemId, rootMenuItemId } =\n useNavigationMenuItems();\n const muiTheme = useTheme();\n\n const isCompactMode = useMediaQuery(muiTheme.breakpoints.down(\"md\"));\n const { value: storedExpanded, setStoredValue: setStoreExpanded } =\n useLocalStorage(\"NAV_EXPANDED\");\n const [isExpanded, setIsExpanded] = useState(\n storedExpanded == null ? true : storedExpanded === \"true\"\n );\n const [isClosed, setIsClosed] = useState(isCompactMode);\n const [showHeaderSubMenu, setShowHeaderSubMenu] = useState(false);\n\n const verticalNavigationMode = useMemo<VerticalNavigationMode>(() => {\n if (isCompactMode) {\n return isClosed ? \"CLOSED\" : \"EXPANDED\";\n }\n return isExpanded ? \"EXPANDED\" : \"COLLAPSED\";\n }, [isClosed, isCompactMode, isExpanded]);\n\n const verticalNavigationItems = useMemo(() => {\n if (isCompactMode) {\n return items;\n }\n\n if (navigationMode === \"ONLY_LEFT\") {\n return removeHrefFromMenuItemsWithChildren(items);\n }\n\n const itemsToReturn =\n (rootMenuItemId && findItemById(items, rootMenuItemId)?.data) || [];\n\n return removeHrefFromMenuItemsWithChildren(itemsToReturn);\n }, [items, navigationMode, rootMenuItemId, isCompactMode]);\n\n const hasVerticalNavigation = useMemo(() => {\n if (isCompactMode) {\n return true;\n }\n\n if (navigationMode === \"ONLY_TOP\") {\n return false;\n }\n\n return verticalNavigationItems && verticalNavigationItems.length > 0;\n }, [navigationMode, verticalNavigationItems, isCompactMode]);\n\n // sync isMinimized with the stored value\n useEffect(() => {\n setStoreExpanded(String(isExpanded));\n }, [isExpanded, setStoreExpanded]);\n\n // sync isCompactMode media query\n useEffect(() => {\n setIsClosed(isCompactMode);\n }, [isCompactMode]);\n\n useEffect(() => {\n setShowHeaderSubMenu(\n navigationMode === \"ONLY_TOP\" &&\n items.some(item => item.data && item.data.length > 0)\n );\n }, [navigationMode, items]);\n\n const switchVerticalNavigationMode = useCallback(() => {\n if (isCompactMode) {\n setIsClosed(prevState => !prevState);\n } else {\n setIsExpanded(prevState => !prevState);\n }\n }, [isCompactMode]);\n\n const value = useMemo(\n () => ({\n selectedMenuItemId,\n rootMenuItemId,\n items,\n verticalNavigationItems,\n hasVerticalNavigation,\n showHeaderSubMenu,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n }),\n [\n selectedMenuItemId,\n rootMenuItemId,\n items,\n verticalNavigationItems,\n hasVerticalNavigation,\n showHeaderSubMenu,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n ]\n );\n\n return (\n <NavigationContext.Provider value={value}>\n {children}\n </NavigationContext.Provider>\n );\n};\n\nexport default NavigationProvider;\n"],"names":["NavigationContext","createContext","selectedMenuItemId","undefined","rootMenuItemId","items","verticalNavigationItems","hasVerticalNavigation","showHeaderSubMenu","isCompactMode","verticalNavigationMode","switchVerticalNavigationMode","NavigationProvider","children","navigationMode","useHvAppShellConfig","useNavigationMenuItems","muiTheme","useTheme","useMediaQuery","breakpoints","down","value","storedExpanded","setStoredValue","setStoreExpanded","useLocalStorage","isExpanded","setIsExpanded","useState","isClosed","setIsClosed","setShowHeaderSubMenu","useMemo","removeHrefFromMenuItemsWithChildren","itemsToReturn","findItemById","data","length","useEffect","String","some","item","useCallback","prevState","jsx","NavigationProvider$1"],"mappings":";;;;;;;AAwCO,MAAMA,IAAoBC,EAAsC;AAAA,EACrEC,oBAAoBC;AAAAA,EACpBC,gBAAgBD;AAAAA,EAChBE,OAAO,CAAE;AAAA,EACTC,yBAAyB,CAAE;AAAA,EAC3BC,uBAAuB;AAAA,EACvBC,mBAAmB;AAAA,EACnBC,eAAe;AAAA,EACfC,wBAAwB;AAAA,EACxBC,8BAA8BA,MAAM;AAAA,EAClC;AAEJ,CAAC,GAEKC,IAAqBA,CAAC;AAAA,EAAEC,UAAAA;AAAkC,MAAM;AAC9D,QAAA;AAAA,IAAEC,gBAAAA;AAAAA,MAAmBC,EAAoB,GACzC;AAAA,IAAEV,OAAAA;AAAAA,IAAOH,oBAAAA;AAAAA,IAAoBE,gBAAAA;AAAAA,MACjCY,EAAuB,GACnBC,IAAWC,KAEXT,IAAgBU,EAAcF,EAASG,YAAYC,KAAK,IAAI,CAAC,GAC7D;AAAA,IAAEC,OAAOC;AAAAA,IAAgBC,gBAAgBC;AAAAA,EAAAA,IAC7CC,EAAgB,cAAc,GAC1B,CAACC,GAAYC,CAAa,IAAIC,EAClCN,KAAkB,OAAO,KAAOA,MAAmB,MACrD,GACM,CAACO,GAAUC,CAAW,IAAIF,EAASpB,CAAa,GAChD,CAACD,GAAmBwB,CAAoB,IAAIH,EAAS,EAAK,GAE1DnB,IAAyBuB,EAAgC,MACzDxB,IACKqB,IAAW,WAAW,aAExBH,IAAa,aAAa,aAChC,CAACG,GAAUrB,GAAekB,CAAU,CAAC,GAElCrB,IAA0B2B,EAAQ,MAAM;;AAC5C,QAAIxB;AACKJ,aAAAA;AAGT,QAAIS,MAAmB;AACrB,aAAOoB,EAAoC7B,CAAK;AAGlD,UAAM8B,IACH/B,OAAkBgC,IAAAA,EAAa/B,GAAOD,CAAc,MAAlCgC,gBAAAA,EAAqCC,SAAS;AAEnE,WAAOH,EAAoCC,CAAa;AAAA,KACvD,CAAC9B,GAAOS,GAAgBV,GAAgBK,CAAa,CAAC,GAEnDF,IAAwB0B,EAAQ,MAChCxB,IACK,KAGLK,MAAmB,aACd,KAGFR,KAA2BA,EAAwBgC,SAAS,GAClE,CAACxB,GAAgBR,GAAyBG,CAAa,CAAC;AAG3D8B,EAAAA,EAAU,MAAM;AACGC,IAAAA,EAAAA,OAAOb,CAAU,CAAC;AAAA,EAAA,GAClC,CAACA,GAAYF,CAAgB,CAAC,GAGjCc,EAAU,MAAM;AACdR,IAAAA,EAAYtB,CAAa;AAAA,EAAA,GACxB,CAACA,CAAa,CAAC,GAElB8B,EAAU,MAAM;AAEZzB,IAAAA,EAAAA,MAAmB,cACjBT,EAAMoC,KAAKC,CAAAA,MAAQA,EAAKL,QAAQK,EAAKL,KAAKC,SAAS,CAAC,CACxD;AAAA,EAAA,GACC,CAACxB,GAAgBT,CAAK,CAAC;AAEpBM,QAAAA,IAA+BgC,EAAY,MAAM;AACrD,IAAIlC,IACUmC,EAAAA,CAAAA,MAAa,CAACA,CAAS,IAErBA,EAAAA,CAAAA,MAAa,CAACA,CAAS;AAAA,EACvC,GACC,CAACnC,CAAa,CAAC,GAEZa,IAAQW,EACZ,OAAO;AAAA,IACL/B,oBAAAA;AAAAA,IACAE,gBAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,yBAAAA;AAAAA,IACAC,uBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,wBAAAA;AAAAA,IACAC,8BAAAA;AAAAA,EACF,IACA,CACET,GACAE,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,CAA4B,CAEhC;AAEA,SACG,gBAAAkC,EAAA7C,EAAkB,UAAlB,EAA2B,OAAAsB,GACzBT,UAAAA,EACH,CAAA;AAEJ,GAEAiC,IAAelC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "AppShell Component",
|
|
5
5
|
"author": "Hitachi Vantara - Boba Fett Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"vite-plugin-dts": "^3.6.4",
|
|
69
69
|
"vite-tsconfig-paths": "^4.0.5"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "a574a14823dd07634e7fb7514af077894597519a"
|
|
72
72
|
}
|