@xyo-network/react-appbar 2.25.44 → 2.25.45
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/cjs/components/SiteMenu/Menu.js +1 -1
- package/dist/cjs/components/SiteMenu/Menu.js.map +1 -1
- package/dist/cjs/components/SiteMenu/MenuItems.d.ts +2 -2
- package/dist/cjs/components/SiteMenu/MenuItems.js +5 -5
- package/dist/cjs/components/SiteMenu/MenuItems.js.map +1 -1
- package/dist/docs.json +23508 -23508
- package/dist/esm/components/SiteMenu/Menu.js +2 -2
- package/dist/esm/components/SiteMenu/Menu.js.map +1 -1
- package/dist/esm/components/SiteMenu/MenuItems.d.ts +2 -2
- package/dist/esm/components/SiteMenu/MenuItems.js +2 -2
- package/dist/esm/components/SiteMenu/MenuItems.js.map +1 -1
- package/package.json +7 -7
- package/src/components/SiteMenu/Menu.tsx +2 -2
- package/src/components/SiteMenu/MenuItem.stories.tsx +39 -0
- package/src/components/SiteMenu/MenuItems.tsx +3 -3
|
@@ -4,11 +4,11 @@ import SettingsIcon from '@mui/icons-material/Settings';
|
|
|
4
4
|
import { Box, IconButton, List, SwipeableDrawer } from '@mui/material';
|
|
5
5
|
import { FlexRow } from '@xylabs/sdk-react';
|
|
6
6
|
import { useState } from 'react';
|
|
7
|
-
import {
|
|
7
|
+
import { SiteMenuListItem } from './MenuItems';
|
|
8
8
|
export const SiteMenu = ({ side = 'right', children, ...props }) => {
|
|
9
9
|
const [open, setOpen] = useState(false);
|
|
10
10
|
return (_jsxs(FlexRow, { alignItems: "stretch", ...props, children: [_jsx(IconButton, { size: "small", color: "inherit", onClick: () => {
|
|
11
11
|
setOpen(!open);
|
|
12
|
-
}, children: _jsx(MenuIcon, { fontSize: "large" }) }), _jsx(SwipeableDrawer, { anchor: side, open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), children: _jsx(Box, { width: "auto", role: "presentation", onClick: () => setOpen(false), onKeyDown: () => setOpen(false), children: children ?? (_jsx(List, { children: _jsx(
|
|
12
|
+
}, children: _jsx(MenuIcon, { fontSize: "large" }) }), _jsx(SwipeableDrawer, { anchor: side, open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), children: _jsx(Box, { width: "auto", role: "presentation", onClick: () => setOpen(false), onKeyDown: () => setOpen(false), children: children ?? (_jsx(List, { children: _jsx(SiteMenuListItem, { primary: "Settings", icon: _jsx(SettingsIcon, {}), to: "/settings" }) })) }) })] }));
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,EAAgB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,EAAgB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1F,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC,YAED,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,GAClB,EACb,KAAC,eAAe,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACnG,KAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YACjG,QAAQ,IAAI,CACX,KAAC,IAAI,cACH,KAAC,gBAAgB,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAE,KAAC,YAAY,KAAG,EAAE,EAAE,EAAC,WAAW,GAAG,GACzE,CACR,GACG,GACU,IACV,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -2,10 +2,10 @@ import { ListItemProps, ListItemTextProps } from '@mui/material';
|
|
|
2
2
|
import { ListItemButtonExProps } from '@xyo-network/react-shared';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { To } from 'react-router-dom';
|
|
5
|
-
export interface
|
|
5
|
+
export interface SiteMenuListItemProps extends ListItemProps {
|
|
6
6
|
primary: ListItemTextProps['primary'];
|
|
7
7
|
to?: To;
|
|
8
8
|
icon?: ReactNode;
|
|
9
9
|
onButtonClick?: ListItemButtonExProps['onClick'];
|
|
10
10
|
}
|
|
11
|
-
export declare const
|
|
11
|
+
export declare const SiteMenuListItem: React.FC<SiteMenuListItemProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ListItem, ListItemIcon, ListItemText } from '@mui/material';
|
|
3
3
|
import { ListItemButtonEx } from '@xyo-network/react-shared';
|
|
4
|
-
export const
|
|
5
|
-
return (_jsxs(ListItem, { ...props, children: [_jsxs(ListItemButtonEx, { to: to, onClick: onButtonClick, children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: primary })] }), children] }));
|
|
4
|
+
export const SiteMenuListItem = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
|
|
5
|
+
return (_jsxs(ListItem, { style: { display: 'block', ...style }, ...props, children: [_jsxs(ListItemButtonEx, { to: to, onClick: onButtonClick, children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: primary })] }), children] }));
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=MenuItems.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAiB,YAAY,EAAqB,MAAM,eAAe,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAWnF,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAiB,YAAY,EAAqB,MAAM,eAAe,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAWnF,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnI,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACxD,MAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,aAC9C,KAAC,YAAY,cAAE,IAAI,GAAgB,EACnC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,IACjB,EAClB,QAAQ,IACA,CACZ,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
"@mui/material": "^5.8.3",
|
|
17
17
|
"@xylabs/sdk-react": "^2.13.7",
|
|
18
18
|
"@xyo-network/core": "^2.20.44",
|
|
19
|
-
"@xyo-network/react-archive": "^2.25.
|
|
20
|
-
"@xyo-network/react-archivist-api": "^2.25.
|
|
21
|
-
"@xyo-network/react-auth": "^2.25.
|
|
22
|
-
"@xyo-network/react-network": "^2.25.
|
|
23
|
-
"@xyo-network/react-shared": "^2.25.
|
|
24
|
-
"@xyo-network/react-theme": "^2.25.
|
|
19
|
+
"@xyo-network/react-archive": "^2.25.45",
|
|
20
|
+
"@xyo-network/react-archivist-api": "^2.25.45",
|
|
21
|
+
"@xyo-network/react-auth": "^2.25.45",
|
|
22
|
+
"@xyo-network/react-network": "^2.25.45",
|
|
23
|
+
"@xyo-network/react-shared": "^2.25.45",
|
|
24
|
+
"@xyo-network/react-theme": "^2.25.45",
|
|
25
25
|
"lodash": "^4.17.21",
|
|
26
26
|
"react": "^18.1.0",
|
|
27
27
|
"react-dom": "^18.1.0",
|
|
@@ -105,6 +105,6 @@
|
|
|
105
105
|
},
|
|
106
106
|
"sideEffects": false,
|
|
107
107
|
"types": "dist/esm/index.d.ts",
|
|
108
|
-
"version": "2.25.
|
|
108
|
+
"version": "2.25.45",
|
|
109
109
|
"packageManager": "yarn@3.1.1"
|
|
110
110
|
}
|
|
@@ -4,7 +4,7 @@ import { Box, IconButton, List, SwipeableDrawer } from '@mui/material'
|
|
|
4
4
|
import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
|
|
5
5
|
import { useState } from 'react'
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { SiteMenuListItem } from './MenuItems'
|
|
8
8
|
|
|
9
9
|
export interface SiteMenuProps extends FlexBoxProps {
|
|
10
10
|
hideSettingsMenuItem?: boolean
|
|
@@ -29,7 +29,7 @@ export const SiteMenu: React.FC<SiteMenuProps> = ({ side = 'right', children, ..
|
|
|
29
29
|
<Box width="auto" role="presentation" onClick={() => setOpen(false)} onKeyDown={() => setOpen(false)}>
|
|
30
30
|
{children ?? (
|
|
31
31
|
<List>
|
|
32
|
-
<
|
|
32
|
+
<SiteMenuListItem primary="Settings" icon={<SettingsIcon />} to="/settings" />
|
|
33
33
|
</List>
|
|
34
34
|
)}
|
|
35
35
|
</Box>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { List } from '@mui/material'
|
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
3
|
+
|
|
4
|
+
import { SiteMenuListItem } from './MenuItems'
|
|
5
|
+
|
|
6
|
+
const StorybookEntry = {
|
|
7
|
+
argTypes: {},
|
|
8
|
+
component: SiteMenuListItem,
|
|
9
|
+
parameters: {
|
|
10
|
+
docs: {
|
|
11
|
+
page: null,
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
title: 'appbar/SiteMenuListItem',
|
|
15
|
+
} as ComponentMeta<typeof SiteMenuListItem>
|
|
16
|
+
|
|
17
|
+
const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
|
|
18
|
+
return (
|
|
19
|
+
<List>
|
|
20
|
+
<SiteMenuListItem {...args} />
|
|
21
|
+
</List>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const Default = Template.bind({})
|
|
26
|
+
Default.args = {
|
|
27
|
+
primary: 'Test',
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const WithChildren = Template.bind({})
|
|
31
|
+
WithChildren.args = {
|
|
32
|
+
children: <SiteMenuListItem primary="Test Child" />,
|
|
33
|
+
primary: 'Test',
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export { Default, WithChildren }
|
|
37
|
+
|
|
38
|
+
// eslint-disable-next-line import/no-default-export
|
|
39
|
+
export default StorybookEntry
|
|
@@ -3,16 +3,16 @@ import { ListItemButtonEx, ListItemButtonExProps } from '@xyo-network/react-shar
|
|
|
3
3
|
import { ReactNode } from 'react'
|
|
4
4
|
import { To } from 'react-router-dom'
|
|
5
5
|
|
|
6
|
-
export interface
|
|
6
|
+
export interface SiteMenuListItemProps extends ListItemProps {
|
|
7
7
|
primary: ListItemTextProps['primary']
|
|
8
8
|
to?: To
|
|
9
9
|
icon?: ReactNode
|
|
10
10
|
onButtonClick?: ListItemButtonExProps['onClick']
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export const
|
|
13
|
+
export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
|
|
14
14
|
return (
|
|
15
|
-
<ListItem {...props}>
|
|
15
|
+
<ListItem style={{ display: 'block', ...style }} {...props}>
|
|
16
16
|
<ListItemButtonEx to={to} onClick={onButtonClick}>
|
|
17
17
|
<ListItemIcon>{icon}</ListItemIcon>
|
|
18
18
|
<ListItemText primary={primary} />
|