@xyo-network/react-appbar 2.64.0 → 2.64.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/components/AppBar/Application.js +252 -6
- package/dist/browser/components/AppBar/Application.js.map +1 -1
- package/dist/browser/components/AppBar/index.js +264 -1
- package/dist/browser/components/AppBar/index.js.map +1 -1
- package/dist/browser/components/CollapsibleDrawer/CollapseToggle.js +13 -3
- package/dist/browser/components/CollapsibleDrawer/CollapseToggle.js.map +1 -1
- package/dist/browser/components/CollapsibleDrawer/CollapsibleDrawer.js +14 -4
- package/dist/browser/components/CollapsibleDrawer/CollapsibleDrawer.js.map +1 -1
- package/dist/browser/components/CollapsibleDrawer/index.js +72 -2
- package/dist/browser/components/CollapsibleDrawer/index.js.map +1 -1
- package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.js +4 -3
- package/dist/browser/components/CollapsibleDrawer/storyExampleMenuData.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/SystemControls.js +117 -5
- package/dist/browser/components/MobileSystemControls/SystemControls.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/SystemControlsRoot.js +57 -5
- package/dist/browser/components/MobileSystemControls/SystemControlsRoot.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/SystemControlsType.js +1 -0
- package/dist/browser/components/MobileSystemControls/SystemControlsType.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/SystemControlsUnstyled.js +35 -9
- package/dist/browser/components/MobileSystemControls/SystemControlsUnstyled.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/controls/SystemControl.js +5 -5
- package/dist/browser/components/MobileSystemControls/controls/SystemControl.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/controls/SystemControlText.js +3 -2
- package/dist/browser/components/MobileSystemControls/controls/SystemControlText.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/controls/index.js +36 -2
- package/dist/browser/components/MobileSystemControls/controls/index.js.map +1 -1
- package/dist/browser/components/MobileSystemControls/index.js +131 -3
- package/dist/browser/components/MobileSystemControls/index.js.map +1 -1
- package/dist/browser/components/SearchBar/SearchBar.js +3 -2
- package/dist/browser/components/SearchBar/SearchBar.js.map +1 -1
- package/dist/browser/components/SearchBar/index.js +31 -1
- package/dist/browser/components/SearchBar/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/Menu.js +144 -13
- package/dist/browser/components/SiteMenu/Menu.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/MenuListItemContainer.js +73 -13
- package/dist/browser/components/SiteMenu/MenuListItem/MenuListItemContainer.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/index.js +131 -1
- package/dist/browser/components/SiteMenu/MenuListItem/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.js +3 -2
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.js +3 -2
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.js +3 -2
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/index.js +30 -3
- package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.js +3 -2
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.js +3 -2
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/index.js +29 -2
- package/dist/browser/components/SiteMenu/MenuListItem/sub-nav/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/MenuSection.js +138 -7
- package/dist/browser/components/SiteMenu/MenuSection.js.map +1 -1
- package/dist/browser/components/SiteMenu/hooks/index.js +34 -1
- package/dist/browser/components/SiteMenu/hooks/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/hooks/useMenuItemsShared.js +12 -2
- package/dist/browser/components/SiteMenu/hooks/useMenuItemsShared.js.map +1 -1
- package/dist/browser/components/SiteMenu/index.js +209 -5
- package/dist/browser/components/SiteMenu/index.js.map +1 -1
- package/dist/browser/components/SiteMenu/lib/index.js +0 -2
- package/dist/browser/components/SiteMenu/lib/index.js.map +1 -1
- package/dist/browser/components/Toolbar/Context/ContextToolbar.js +45 -4
- package/dist/browser/components/Toolbar/Context/ContextToolbar.js.map +1 -1
- package/dist/browser/components/Toolbar/Context/Logo.js +3 -2
- package/dist/browser/components/Toolbar/Context/Logo.js.map +1 -1
- package/dist/browser/components/Toolbar/Context/LogoLinkEx.js +18 -7
- package/dist/browser/components/Toolbar/Context/LogoLinkEx.js.map +1 -1
- package/dist/browser/components/Toolbar/Context/index.js +50 -1
- package/dist/browser/components/Toolbar/Context/index.js.map +1 -1
- package/dist/browser/components/Toolbar/System/SystemToolbar.js +179 -8
- package/dist/browser/components/Toolbar/System/SystemToolbar.js.map +1 -1
- package/dist/browser/components/Toolbar/System/index.js +198 -1
- package/dist/browser/components/Toolbar/System/index.js.map +1 -1
- package/dist/browser/components/Toolbar/index.js +247 -2
- package/dist/browser/components/Toolbar/index.js.map +1 -1
- package/dist/browser/components/index.js +526 -6
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/contexts/Collapsible/context.js +2 -1
- package/dist/browser/contexts/Collapsible/context.js.map +1 -1
- package/dist/browser/contexts/Collapsible/index.js +28 -3
- package/dist/browser/contexts/Collapsible/index.js.map +1 -1
- package/dist/browser/contexts/Collapsible/provider.js +9 -3
- package/dist/browser/contexts/Collapsible/provider.js.map +1 -1
- package/dist/browser/contexts/Collapsible/use.js +8 -2
- package/dist/browser/contexts/Collapsible/use.js.map +1 -1
- package/dist/browser/contexts/index.js +28 -1
- package/dist/browser/contexts/index.js.map +1 -1
- package/dist/browser/index.js +545 -2
- package/dist/browser/index.js.map +1 -1
- package/dist/docs.json +91 -91
- package/package.json +13 -13
@@ -1,12 +1,72 @@
|
|
1
|
-
|
2
|
-
import { ListItemText, useTheme } from "@mui/material";
|
1
|
+
// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
|
2
|
+
import { ListItemText, useTheme as useTheme2 } from "@mui/material";
|
3
3
|
import { FlexRow } from "@xylabs/react-flexbox";
|
4
4
|
import { LinkEx } from "@xylabs/react-link";
|
5
5
|
import { useState } from "react";
|
6
|
-
|
7
|
-
|
8
|
-
import {
|
9
|
-
|
6
|
+
|
7
|
+
// src/contexts/Collapsible/context.ts
|
8
|
+
import { createContextEx } from "@xyo-network/react-shared";
|
9
|
+
var CollapsibleContext = createContextEx();
|
10
|
+
|
11
|
+
// src/contexts/Collapsible/use.tsx
|
12
|
+
import { useContextEx } from "@xyo-network/react-shared";
|
13
|
+
var useCollapsible = () => useContextEx(CollapsibleContext, "Collapsible", false);
|
14
|
+
|
15
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
|
16
|
+
import { Tooltip } from "@mui/material";
|
17
|
+
import { FlexCol } from "@xylabs/react-flexbox";
|
18
|
+
import { VscInfo } from "react-icons/vsc/index.js";
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
20
|
+
var ListItemTooltip = ({ title, ...props }) => {
|
21
|
+
return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx(VscInfo, { color: "grey" }) }) }) });
|
22
|
+
};
|
23
|
+
|
24
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
|
25
|
+
import { Typography } from "@mui/material";
|
26
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
27
|
+
var MenuIcon = ({ icon, ...props }) => {
|
28
|
+
return /* @__PURE__ */ jsx2(Typography, { display: "flex", ...props, children: icon });
|
29
|
+
};
|
30
|
+
|
31
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
|
32
|
+
import { ListItem } from "@mui/material";
|
33
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
34
|
+
var MenuListItem = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
|
35
|
+
const listItemSx = iconOnly ? { borderRadius: "50%", display: "inline-flex", flexGrow: 0, width: "auto" } : { width: "100%" };
|
36
|
+
const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
|
37
|
+
const paddingSx = dense ? { px: "8px" } : { px: "12px" };
|
38
|
+
return /* @__PURE__ */ jsx3(ListItem, { sx: { ...listItemSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children });
|
39
|
+
};
|
40
|
+
|
41
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
|
42
|
+
import { Collapse, List } from "@mui/material";
|
43
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
44
|
+
var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
|
45
|
+
return /* @__PURE__ */ jsx4(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx4(List, { children }) });
|
46
|
+
};
|
47
|
+
|
48
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
|
49
|
+
import { IconButton, useTheme } from "@mui/material";
|
50
|
+
import { VscChevronDown } from "react-icons/vsc/index.js";
|
51
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
52
|
+
var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
|
53
|
+
const theme = useTheme();
|
54
|
+
return /* @__PURE__ */ jsx5(
|
55
|
+
IconButton,
|
56
|
+
{
|
57
|
+
onClick: (event) => {
|
58
|
+
event.stopPropagation();
|
59
|
+
setOpenSubNav?.(!openSubNav);
|
60
|
+
},
|
61
|
+
sx: { marginRight: theme.spacing(0.5) },
|
62
|
+
children: /* @__PURE__ */ jsx5(VscChevronDown, { fontSize: "16px" })
|
63
|
+
}
|
64
|
+
);
|
65
|
+
};
|
66
|
+
|
67
|
+
// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
|
68
|
+
import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
|
69
|
+
var MenuListItemContainer = ({
|
10
70
|
style,
|
11
71
|
icon,
|
12
72
|
iconMenuTextSpacing,
|
@@ -20,7 +80,7 @@ const MenuListItemContainer = ({
|
|
20
80
|
...props
|
21
81
|
}) => {
|
22
82
|
const { dense } = props;
|
23
|
-
const theme =
|
83
|
+
const theme = useTheme2();
|
24
84
|
const { collapse } = useCollapsible();
|
25
85
|
const [openSubNav, setOpenSubNav] = useState(false);
|
26
86
|
const [hovered, setHovered] = useState(false);
|
@@ -37,7 +97,7 @@ const MenuListItemContainer = ({
|
|
37
97
|
style: { whiteSpace: "nowrap", ...style },
|
38
98
|
...props,
|
39
99
|
children: [
|
40
|
-
/* @__PURE__ */
|
100
|
+
/* @__PURE__ */ jsx6(
|
41
101
|
LinkEx,
|
42
102
|
{
|
43
103
|
onMouseEnter: () => setHovered(true),
|
@@ -51,19 +111,19 @@ const MenuListItemContainer = ({
|
|
51
111
|
}
|
52
112
|
},
|
53
113
|
children: /* @__PURE__ */ jsxs(FlexRow, { children: [
|
54
|
-
/* @__PURE__ */
|
55
|
-
/* @__PURE__ */
|
114
|
+
/* @__PURE__ */ jsx6(MenuIcon, { icon, paddingRight: resolvedIconMenuTextSpacing, color: hovered ? "secondary" : "inherit" }),
|
115
|
+
/* @__PURE__ */ jsx6(ListItemText, { primary })
|
56
116
|
] })
|
57
117
|
}
|
58
118
|
),
|
59
119
|
/* @__PURE__ */ jsxs(FlexRow, { style: { marginLeft: theme.spacing(1) }, children: [
|
60
|
-
subNavListItems ? /* @__PURE__ */
|
61
|
-
tooltip ? /* @__PURE__ */
|
120
|
+
subNavListItems ? /* @__PURE__ */ jsx6(SubNavToggleIconButton, { setOpenSubNav, openSubNav }) : null,
|
121
|
+
tooltip ? /* @__PURE__ */ jsx6(ListItemTooltip, { title: tooltip }) : null
|
62
122
|
] })
|
63
123
|
]
|
64
124
|
}
|
65
125
|
),
|
66
|
-
subNavListItems ? /* @__PURE__ */
|
126
|
+
subNavListItems ? /* @__PURE__ */ jsx6(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems?.map((item, index) => /* @__PURE__ */ jsx6(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
|
67
127
|
] });
|
68
128
|
};
|
69
129
|
export {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx"],"sourcesContent":["import { ListItemProps, ListItemText, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useState } from 'react'\n\nimport { useCollapsible } from '../../../contexts'\nimport { MenuListItemBase, NavListItemProps } from '../lib'\nimport { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components'\nimport { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav'\n\nexport interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {\n iconMenuTextSpacing?: string\n iconOnly?: boolean\n subNavListItems?: NavListItemProps[]\n subNavOpen?: boolean\n}\n\nexport const MenuListItemContainer: React.FC<MenuListItemProps> = ({\n style,\n icon,\n iconMenuTextSpacing,\n iconOnly,\n onButtonClick,\n primary,\n subNavListItems,\n sx,\n tooltip,\n to,\n ...props\n}) => {\n const { dense } = props\n const theme = useTheme()\n const { collapse } = useCollapsible()\n const [openSubNav, setOpenSubNav] = useState(false)\n const [hovered, setHovered] = useState(false)\n const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1)\n\n return (\n <>\n <MenuListItem\n disableGutters\n iconOnly={iconOnly}\n onClick={onButtonClick}\n dense={dense}\n sx={{ justifyContent: 'space-between', ...sx }}\n style={{ whiteSpace: 'nowrap', ...style }}\n {...props}\n >\n <LinkEx\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n color=\"inherit\"\n to={to}\n sx={{\n '& :hover': {\n cursor: 'pointer',\n textDecoration: 'underline',\n },\n }}\n >\n <FlexRow>\n <MenuIcon icon={icon} paddingRight={resolvedIconMenuTextSpacing} color={hovered ? 'secondary' : 'inherit'} />\n <ListItemText primary={primary} />\n </FlexRow>\n </LinkEx>\n <FlexRow style={{ marginLeft: theme.spacing(1) }}>\n {subNavListItems ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} /> : null}\n {tooltip ? <ListItemTooltip title={tooltip} /> : null}\n </FlexRow>\n </MenuListItem>\n {subNavListItems ? (\n <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>\n {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}\n </SubNavListItemsCollapse>\n ) : null}\n </>\n )\n}\n"],"mappings":"AAsCI,mBAuBQ,KADF,YAtBN;AAtCJ,SAAwB,cAAc,gBAAgB;AACtD,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,UAAU,oBAAoB;AACxD,SAAS,yBAAyB,8BAA8B;AASzD,MAAM,wBAAqD,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,SAAS,IAAI,eAAe;AACpC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,8BAA8B,sBAAsB,sBAAsB,MAAM,QAAQ,CAAC;AAE/F,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,IAAI,EAAE,gBAAgB,iBAAiB,GAAG,GAAG;AAAA,QAC7C,OAAO,EAAE,YAAY,UAAU,GAAG,MAAM;AAAA,QACvC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,MAAM,WAAW,IAAI;AAAA,cACnC,cAAc,MAAM,WAAW,KAAK;AAAA,cACpC,OAAM;AAAA,cACN;AAAA,cACA,IAAI;AAAA,gBACF,YAAY;AAAA,kBACV,QAAQ;AAAA,kBACR,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,cAEA,+BAAC,WACC;AAAA,oCAAC,YAAS,MAAY,cAAc,6BAA6B,OAAO,UAAU,cAAc,WAAW;AAAA,gBAC3G,oBAAC,gBAAa,SAAkB;AAAA,iBAClC;AAAA;AAAA,UACF;AAAA,UACA,qBAAC,WAAQ,OAAO,EAAE,YAAY,MAAM,QAAQ,CAAC,EAAE,GAC5C;AAAA,8BAAkB,oBAAC,0BAAuB,eAA8B,YAAwB,IAAK;AAAA,YACrG,UAAU,oBAAC,mBAAgB,OAAO,SAAS,IAAK;AAAA,aACnD;AAAA;AAAA;AAAA,IACF;AAAA,IACC,kBACC,oBAAC,2BAAwB,YAAwB,UAC9C,2BAAiB,IAAI,CAAC,MAAM,UAAU,oBAAC,yBAAsB,OAAc,IAAI,EAAE,IAAI,MAAM,QAAQ,CAAC,EAAE,GAAgB,GAAG,QAAX,KAAiB,CAAE,GACpI,IACE;AAAA,KACN;AAEJ;","names":[]}
|
1
|
+
{"version":3,"sources":["../../../../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx","../../../../../src/contexts/Collapsible/context.ts","../../../../../src/contexts/Collapsible/use.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx","../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx","../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { ListItemProps, ListItemText, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useState } from 'react'\n\nimport { useCollapsible } from '../../../contexts'\nimport { MenuListItemBase, NavListItemProps } from '../lib'\nimport { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components'\nimport { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav'\n\nexport interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {\n iconMenuTextSpacing?: string\n iconOnly?: boolean\n subNavListItems?: NavListItemProps[]\n subNavOpen?: boolean\n}\n\nexport const MenuListItemContainer: React.FC<MenuListItemProps> = ({\n style,\n icon,\n iconMenuTextSpacing,\n iconOnly,\n onButtonClick,\n primary,\n subNavListItems,\n sx,\n tooltip,\n to,\n ...props\n}) => {\n const { dense } = props\n const theme = useTheme()\n const { collapse } = useCollapsible()\n const [openSubNav, setOpenSubNav] = useState(false)\n const [hovered, setHovered] = useState(false)\n const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1)\n\n return (\n <>\n <MenuListItem\n disableGutters\n iconOnly={iconOnly}\n onClick={onButtonClick}\n dense={dense}\n sx={{ justifyContent: 'space-between', ...sx }}\n style={{ whiteSpace: 'nowrap', ...style }}\n {...props}\n >\n <LinkEx\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n color=\"inherit\"\n to={to}\n sx={{\n '& :hover': {\n cursor: 'pointer',\n textDecoration: 'underline',\n },\n }}\n >\n <FlexRow>\n <MenuIcon icon={icon} paddingRight={resolvedIconMenuTextSpacing} color={hovered ? 'secondary' : 'inherit'} />\n <ListItemText primary={primary} />\n </FlexRow>\n </LinkEx>\n <FlexRow style={{ marginLeft: theme.spacing(1) }}>\n {subNavListItems ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} /> : null}\n {tooltip ? <ListItemTooltip title={tooltip} /> : null}\n </FlexRow>\n </MenuListItem>\n {subNavListItems ? (\n <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>\n {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}\n </SubNavListItemsCollapse>\n ) : null}\n </>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleState } from './State'\n\nexport const CollapsibleContext = createContextEx<CollapsibleState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleContext } from './context'\n\nexport const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)\n","import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n","import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n","import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n {children}\n </ListItem>\n )\n}\n","import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n","import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n"],"mappings":"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","names":["useTheme","jsx","jsx","jsx","jsx","jsx","useTheme"]}
|
@@ -1,2 +1,132 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
|
2
|
+
import { ListItemText, useTheme as useTheme2 } from "@mui/material";
|
3
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
4
|
+
import { LinkEx } from "@xylabs/react-link";
|
5
|
+
import { useState } from "react";
|
6
|
+
|
7
|
+
// src/contexts/Collapsible/context.ts
|
8
|
+
import { createContextEx } from "@xyo-network/react-shared";
|
9
|
+
var CollapsibleContext = createContextEx();
|
10
|
+
|
11
|
+
// src/contexts/Collapsible/use.tsx
|
12
|
+
import { useContextEx } from "@xyo-network/react-shared";
|
13
|
+
var useCollapsible = () => useContextEx(CollapsibleContext, "Collapsible", false);
|
14
|
+
|
15
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
|
16
|
+
import { Tooltip } from "@mui/material";
|
17
|
+
import { FlexCol } from "@xylabs/react-flexbox";
|
18
|
+
import { VscInfo } from "react-icons/vsc/index.js";
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
20
|
+
var ListItemTooltip = ({ title, ...props }) => {
|
21
|
+
return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx(VscInfo, { color: "grey" }) }) }) });
|
22
|
+
};
|
23
|
+
|
24
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
|
25
|
+
import { Typography } from "@mui/material";
|
26
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
27
|
+
var MenuIcon = ({ icon, ...props }) => {
|
28
|
+
return /* @__PURE__ */ jsx2(Typography, { display: "flex", ...props, children: icon });
|
29
|
+
};
|
30
|
+
|
31
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
|
32
|
+
import { ListItem } from "@mui/material";
|
33
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
34
|
+
var MenuListItem = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
|
35
|
+
const listItemSx = iconOnly ? { borderRadius: "50%", display: "inline-flex", flexGrow: 0, width: "auto" } : { width: "100%" };
|
36
|
+
const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
|
37
|
+
const paddingSx = dense ? { px: "8px" } : { px: "12px" };
|
38
|
+
return /* @__PURE__ */ jsx3(ListItem, { sx: { ...listItemSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children });
|
39
|
+
};
|
40
|
+
|
41
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
|
42
|
+
import { Collapse, List } from "@mui/material";
|
43
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
44
|
+
var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
|
45
|
+
return /* @__PURE__ */ jsx4(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx4(List, { children }) });
|
46
|
+
};
|
47
|
+
|
48
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
|
49
|
+
import { IconButton, useTheme } from "@mui/material";
|
50
|
+
import { VscChevronDown } from "react-icons/vsc/index.js";
|
51
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
52
|
+
var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
|
53
|
+
const theme = useTheme();
|
54
|
+
return /* @__PURE__ */ jsx5(
|
55
|
+
IconButton,
|
56
|
+
{
|
57
|
+
onClick: (event) => {
|
58
|
+
event.stopPropagation();
|
59
|
+
setOpenSubNav?.(!openSubNav);
|
60
|
+
},
|
61
|
+
sx: { marginRight: theme.spacing(0.5) },
|
62
|
+
children: /* @__PURE__ */ jsx5(VscChevronDown, { fontSize: "16px" })
|
63
|
+
}
|
64
|
+
);
|
65
|
+
};
|
66
|
+
|
67
|
+
// src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx
|
68
|
+
import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
|
69
|
+
var MenuListItemContainer = ({
|
70
|
+
style,
|
71
|
+
icon,
|
72
|
+
iconMenuTextSpacing,
|
73
|
+
iconOnly,
|
74
|
+
onButtonClick,
|
75
|
+
primary,
|
76
|
+
subNavListItems,
|
77
|
+
sx,
|
78
|
+
tooltip,
|
79
|
+
to,
|
80
|
+
...props
|
81
|
+
}) => {
|
82
|
+
const { dense } = props;
|
83
|
+
const theme = useTheme2();
|
84
|
+
const { collapse } = useCollapsible();
|
85
|
+
const [openSubNav, setOpenSubNav] = useState(false);
|
86
|
+
const [hovered, setHovered] = useState(false);
|
87
|
+
const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1);
|
88
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
89
|
+
/* @__PURE__ */ jsxs(
|
90
|
+
MenuListItem,
|
91
|
+
{
|
92
|
+
disableGutters: true,
|
93
|
+
iconOnly,
|
94
|
+
onClick: onButtonClick,
|
95
|
+
dense,
|
96
|
+
sx: { justifyContent: "space-between", ...sx },
|
97
|
+
style: { whiteSpace: "nowrap", ...style },
|
98
|
+
...props,
|
99
|
+
children: [
|
100
|
+
/* @__PURE__ */ jsx6(
|
101
|
+
LinkEx,
|
102
|
+
{
|
103
|
+
onMouseEnter: () => setHovered(true),
|
104
|
+
onMouseLeave: () => setHovered(false),
|
105
|
+
color: "inherit",
|
106
|
+
to,
|
107
|
+
sx: {
|
108
|
+
"& :hover": {
|
109
|
+
cursor: "pointer",
|
110
|
+
textDecoration: "underline"
|
111
|
+
}
|
112
|
+
},
|
113
|
+
children: /* @__PURE__ */ jsxs(FlexRow, { children: [
|
114
|
+
/* @__PURE__ */ jsx6(MenuIcon, { icon, paddingRight: resolvedIconMenuTextSpacing, color: hovered ? "secondary" : "inherit" }),
|
115
|
+
/* @__PURE__ */ jsx6(ListItemText, { primary })
|
116
|
+
] })
|
117
|
+
}
|
118
|
+
),
|
119
|
+
/* @__PURE__ */ jsxs(FlexRow, { style: { marginLeft: theme.spacing(1) }, children: [
|
120
|
+
subNavListItems ? /* @__PURE__ */ jsx6(SubNavToggleIconButton, { setOpenSubNav, openSubNav }) : null,
|
121
|
+
tooltip ? /* @__PURE__ */ jsx6(ListItemTooltip, { title: tooltip }) : null
|
122
|
+
] })
|
123
|
+
]
|
124
|
+
}
|
125
|
+
),
|
126
|
+
subNavListItems ? /* @__PURE__ */ jsx6(SubNavListItemsCollapse, { openSubNav, collapse, children: subNavListItems?.map((item, index) => /* @__PURE__ */ jsx6(MenuListItemContainer, { dense, sx: { pl: theme.spacing(1) }, ...item }, index)) }) : null
|
127
|
+
] });
|
128
|
+
};
|
129
|
+
export {
|
130
|
+
MenuListItemContainer
|
131
|
+
};
|
2
132
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/SiteMenu/MenuListItem/index.ts"],"sourcesContent":["export * from './MenuListItemContainer'\n"],"mappings":"AAAA,cAAc;","names":[]}
|
1
|
+
{"version":3,"sources":["../../../../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx","../../../../../src/contexts/Collapsible/context.ts","../../../../../src/contexts/Collapsible/use.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx","../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx","../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx","../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { ListItemProps, ListItemText, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useState } from 'react'\n\nimport { useCollapsible } from '../../../contexts'\nimport { MenuListItemBase, NavListItemProps } from '../lib'\nimport { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components'\nimport { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav'\n\nexport interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {\n iconMenuTextSpacing?: string\n iconOnly?: boolean\n subNavListItems?: NavListItemProps[]\n subNavOpen?: boolean\n}\n\nexport const MenuListItemContainer: React.FC<MenuListItemProps> = ({\n style,\n icon,\n iconMenuTextSpacing,\n iconOnly,\n onButtonClick,\n primary,\n subNavListItems,\n sx,\n tooltip,\n to,\n ...props\n}) => {\n const { dense } = props\n const theme = useTheme()\n const { collapse } = useCollapsible()\n const [openSubNav, setOpenSubNav] = useState(false)\n const [hovered, setHovered] = useState(false)\n const resolvedIconMenuTextSpacing = iconMenuTextSpacing ? iconMenuTextSpacing : theme.spacing(1)\n\n return (\n <>\n <MenuListItem\n disableGutters\n iconOnly={iconOnly}\n onClick={onButtonClick}\n dense={dense}\n sx={{ justifyContent: 'space-between', ...sx }}\n style={{ whiteSpace: 'nowrap', ...style }}\n {...props}\n >\n <LinkEx\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n color=\"inherit\"\n to={to}\n sx={{\n '& :hover': {\n cursor: 'pointer',\n textDecoration: 'underline',\n },\n }}\n >\n <FlexRow>\n <MenuIcon icon={icon} paddingRight={resolvedIconMenuTextSpacing} color={hovered ? 'secondary' : 'inherit'} />\n <ListItemText primary={primary} />\n </FlexRow>\n </LinkEx>\n <FlexRow style={{ marginLeft: theme.spacing(1) }}>\n {subNavListItems ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} /> : null}\n {tooltip ? <ListItemTooltip title={tooltip} /> : null}\n </FlexRow>\n </MenuListItem>\n {subNavListItems ? (\n <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>\n {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}\n </SubNavListItemsCollapse>\n ) : null}\n </>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleState } from './State'\n\nexport const CollapsibleContext = createContextEx<CollapsibleState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleContext } from './context'\n\nexport const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)\n","import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n","import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n","import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n {children}\n </ListItem>\n )\n}\n","import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n","import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n"],"mappings":"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","names":["useTheme","jsx","jsx","jsx","jsx","jsx","useTheme"]}
|
package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
|
2
2
|
import { Tooltip } from "@mui/material";
|
3
3
|
import { FlexCol } from "@xylabs/react-flexbox";
|
4
4
|
import { VscInfo } from "react-icons/vsc/index.js";
|
5
|
-
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
6
|
+
var ListItemTooltip = ({ title, ...props }) => {
|
6
7
|
return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx(VscInfo, { color: "grey" }) }) }) });
|
7
8
|
};
|
8
9
|
export {
|
package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n"],"mappings":";AAAA,SAAS,eAA6B;AACtC,SAAS,eAAe;AAExB,SAAS,eAAe;AAYd;AANH,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,SACE,oBAAC,WAAQ,OAAc,WAAU,SAAS,GAAG,OAE3C,8BAAC,SACC,8BAAC,WAAQ,gBAAe,UACtB,8BAAC,WAAQ,OAAM,QAAO,GACxB,GACF,GACF;AAEJ;","names":[]}
|
@@ -1,6 +1,7 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
|
2
2
|
import { Typography } from "@mui/material";
|
3
|
-
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
4
|
+
var MenuIcon = ({ icon, ...props }) => {
|
4
5
|
return /* @__PURE__ */ jsx(Typography, { display: "flex", ...props, children: icon });
|
5
6
|
};
|
6
7
|
export {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n"],"mappings":";AAAA,SAAS,kBAAmC;AASxC;AAFG,IAAM,WAAoC,CAAC,EAAE,MAAM,GAAG,MAAM,MAAM;AACvE,SACE,oBAAC,cAAW,SAAQ,QAAQ,GAAG,OAC5B,gBACH;AAEJ;","names":[]}
|
@@ -1,6 +1,7 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
|
2
2
|
import { ListItem } from "@mui/material";
|
3
|
-
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
4
|
+
var MenuListItem = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
|
4
5
|
const listItemSx = iconOnly ? { borderRadius: "50%", display: "inline-flex", flexGrow: 0, width: "auto" } : { width: "100%" };
|
5
6
|
const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
|
6
7
|
const paddingSx = dense ? { px: "8px" } : { px: "12px" };
|
package/dist/browser/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx"],"sourcesContent":["import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n {children}\n </ListItem>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx"],"sourcesContent":["import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n {children}\n </ListItem>\n )\n}\n"],"mappings":";AAAA,SAAS,gBAA+B;AAapC;AAPG,IAAM,eAA0C,CAAC,EAAE,UAAU,aAAa,IAAI,UAAU,OAAO,GAAG,MAAM,MAAM;AACnH,QAAM,aAAa,WAAW,EAAE,cAAc,OAAO,SAAS,eAAe,UAAU,GAAG,OAAO,OAAO,IAAI,EAAE,OAAO,OAAO;AAE5H,QAAM,YAAY,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,IAAI;AAEpE,QAAM,YAAY,QAAQ,EAAE,IAAI,MAAM,IAAI,EAAE,IAAI,OAAO;AACvD,SACE,oBAAC,YAAS,IAAI,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,GAAG,GAAI,GAAG,OACrE,UACH;AAEJ;","names":[]}
|
@@ -1,4 +1,31 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx
|
2
|
+
import { Tooltip } from "@mui/material";
|
3
|
+
import { FlexCol } from "@xylabs/react-flexbox";
|
4
|
+
import { VscInfo } from "react-icons/vsc/index.js";
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
6
|
+
var ListItemTooltip = ({ title, ...props }) => {
|
7
|
+
return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", ...props, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FlexCol, { justifyContent: "center", children: /* @__PURE__ */ jsx(VscInfo, { color: "grey" }) }) }) });
|
8
|
+
};
|
9
|
+
|
10
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx
|
11
|
+
import { Typography } from "@mui/material";
|
12
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
13
|
+
var MenuIcon = ({ icon, ...props }) => {
|
14
|
+
return /* @__PURE__ */ jsx2(Typography, { display: "flex", ...props, children: icon });
|
15
|
+
};
|
16
|
+
|
17
|
+
// src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx
|
18
|
+
import { ListItem } from "@mui/material";
|
19
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
20
|
+
var MenuListItem = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
|
21
|
+
const listItemSx = iconOnly ? { borderRadius: "50%", display: "inline-flex", flexGrow: 0, width: "auto" } : { width: "100%" };
|
22
|
+
const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
|
23
|
+
const paddingSx = dense ? { px: "8px" } : { px: "12px" };
|
24
|
+
return /* @__PURE__ */ jsx3(ListItem, { sx: { ...listItemSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children });
|
25
|
+
};
|
26
|
+
export {
|
27
|
+
ListItemTooltip,
|
28
|
+
MenuIcon,
|
29
|
+
MenuListItem
|
30
|
+
};
|
4
31
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx","../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx","../../../../../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc/index.js'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n","import { Typography, TypographyProps } from '@mui/material'\nimport { ReactNode } from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n","import { ListItem, ListItemProps } from '@mui/material'\n\nimport { MenuListItemBase } from '../../lib'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {\n const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>\n {children}\n </ListItem>\n )\n}\n"],"mappings":";AAAA,SAAS,eAA6B;AACtC,SAAS,eAAe;AAExB,SAAS,eAAe;AAYd;AANH,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACtF,SACE,oBAAC,WAAQ,OAAc,WAAU,SAAS,GAAG,OAE3C,8BAAC,SACC,8BAAC,WAAQ,gBAAe,UACtB,8BAAC,WAAQ,OAAM,QAAO,GACxB,GACF,GACF;AAEJ;;;ACpBA,SAAS,kBAAmC;AASxC,gBAAAA,YAAA;AAFG,IAAM,WAAoC,CAAC,EAAE,MAAM,GAAG,MAAM,MAAM;AACvE,SACE,gBAAAA,KAAC,cAAW,SAAQ,QAAQ,GAAG,OAC5B,gBACH;AAEJ;;;ACbA,SAAS,gBAA+B;AAapC,gBAAAC,YAAA;AAPG,IAAM,eAA0C,CAAC,EAAE,UAAU,aAAa,IAAI,UAAU,OAAO,GAAG,MAAM,MAAM;AACnH,QAAM,aAAa,WAAW,EAAE,cAAc,OAAO,SAAS,eAAe,UAAU,GAAG,OAAO,OAAO,IAAI,EAAE,OAAO,OAAO;AAE5H,QAAM,YAAY,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,IAAI;AAEpE,QAAM,YAAY,QAAQ,EAAE,IAAI,MAAM,IAAI,EAAE,IAAI,OAAO;AACvD,SACE,gBAAAA,KAAC,YAAS,IAAI,EAAE,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,GAAG,GAAI,GAAG,OACrE,UACH;AAEJ;","names":["jsx","jsx"]}
|
@@ -1,6 +1,7 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
|
2
2
|
import { Collapse, List } from "@mui/material";
|
3
|
-
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
4
|
+
var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
|
4
5
|
return /* @__PURE__ */ jsx(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx(List, { children }) });
|
5
6
|
};
|
6
7
|
export {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx"],"sourcesContent":["import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx"],"sourcesContent":["import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n"],"mappings":";AAAA,SAAS,UAAyB,YAAY;AAcxC;AAHC,IAAM,0BAAkE,CAAC,EAAE,UAAU,YAAY,UAAU,GAAG,MAAM,MAAM;AAC/H,SACE,oBAAC,YAAS,IAAI,YAAY,OAAO,QAAQ,YAAa,GAAG,OACvD,8BAAC,QAAM,UAAS,GAClB;AAEJ;","names":[]}
|
@@ -1,7 +1,8 @@
|
|
1
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
|
2
2
|
import { IconButton, useTheme } from "@mui/material";
|
3
3
|
import { VscChevronDown } from "react-icons/vsc/index.js";
|
4
|
-
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
5
|
+
var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
|
5
6
|
const theme = useTheme();
|
6
7
|
return /* @__PURE__ */ jsx(
|
7
8
|
IconButton,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n"],"mappings":";AAAA,SAAS,YAA6B,gBAAgB;AAGtD,SAAS,sBAAsB;AAiBzB;AAVC,IAAM,yBAAgE,CAAC,EAAE,eAAe,WAAW,MAAM;AAC9G,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC,UAA0B;AAClC,cAAM,gBAAgB;AACtB,wBAAgB,CAAC,UAAU;AAAA,MAC7B;AAAA,MACA,IAAI,EAAE,aAAa,MAAM,QAAQ,GAAG,EAAE;AAAA,MAEtC,8BAAC,kBAAe,UAAS,QAAO;AAAA;AAAA,EAClC;AAEJ;","names":[]}
|
@@ -1,3 +1,30 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx
|
2
|
+
import { Collapse, List } from "@mui/material";
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
4
|
+
var SubNavListItemsCollapse = ({ collapse, openSubNav, children, ...props }) => {
|
5
|
+
return /* @__PURE__ */ jsx(Collapse, { in: collapse == true ? false : openSubNav, ...props, children: /* @__PURE__ */ jsx(List, { children }) });
|
6
|
+
};
|
7
|
+
|
8
|
+
// src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx
|
9
|
+
import { IconButton, useTheme } from "@mui/material";
|
10
|
+
import { VscChevronDown } from "react-icons/vsc/index.js";
|
11
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
12
|
+
var SubNavToggleIconButton = ({ setOpenSubNav, openSubNav }) => {
|
13
|
+
const theme = useTheme();
|
14
|
+
return /* @__PURE__ */ jsx2(
|
15
|
+
IconButton,
|
16
|
+
{
|
17
|
+
onClick: (event) => {
|
18
|
+
event.stopPropagation();
|
19
|
+
setOpenSubNav?.(!openSubNav);
|
20
|
+
},
|
21
|
+
sx: { marginRight: theme.spacing(0.5) },
|
22
|
+
children: /* @__PURE__ */ jsx2(VscChevronDown, { fontSize: "16px" })
|
23
|
+
}
|
24
|
+
);
|
25
|
+
};
|
26
|
+
export {
|
27
|
+
SubNavListItemsCollapse,
|
28
|
+
SubNavToggleIconButton
|
29
|
+
};
|
3
30
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/
|
1
|
+
{"version":3,"sources":["../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx","../../../../../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx"],"sourcesContent":["import { Collapse, CollapseProps, List } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nimport { NavListItemProps } from '../../lib'\n\nexport interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n","import { IconButton, IconButtonProps, useTheme } from '@mui/material'\nimport { Dispatch, SetStateAction, SyntheticEvent } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc/index.js'\n\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n"],"mappings":";AAAA,SAAS,UAAyB,YAAY;AAcxC;AAHC,IAAM,0BAAkE,CAAC,EAAE,UAAU,YAAY,UAAU,GAAG,MAAM,MAAM;AAC/H,SACE,oBAAC,YAAS,IAAI,YAAY,OAAO,QAAQ,YAAa,GAAG,OACvD,8BAAC,QAAM,UAAS,GAClB;AAEJ;;;ACjBA,SAAS,YAA6B,gBAAgB;AAGtD,SAAS,sBAAsB;AAiBzB,gBAAAA,YAAA;AAVC,IAAM,yBAAgE,CAAC,EAAE,eAAe,WAAW,MAAM;AAC9G,QAAM,QAAQ,SAAS;AACvB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC,UAA0B;AAClC,cAAM,gBAAgB;AACtB,wBAAgB,CAAC,UAAU;AAAA,MAC7B;AAAA,MACA,IAAI,EAAE,aAAa,MAAM,QAAQ,GAAG,EAAE;AAAA,MAEtC,0BAAAA,KAAC,kBAAe,UAAS,QAAO;AAAA;AAAA,EAClC;AAEJ;","names":["jsx"]}
|