@zendeskgarden/react-chrome 9.0.0-next.2 → 9.0.0-next.21
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/README.md +26 -27
- package/dist/esm/elements/Chrome.js +95 -0
- package/dist/esm/elements/SkipNav.js +65 -0
- package/dist/esm/elements/body/Body.js +57 -0
- package/dist/esm/elements/body/Content.js +54 -0
- package/dist/esm/elements/body/Main.js +47 -0
- package/dist/esm/elements/footer/Footer.js +67 -0
- package/dist/esm/elements/footer/FooterItem.js +47 -0
- package/dist/esm/elements/header/Header.js +60 -0
- package/dist/esm/elements/header/HeaderItem.js +69 -0
- package/dist/esm/elements/header/HeaderItemIcon.js +51 -0
- package/dist/esm/elements/header/HeaderItemText.js +51 -0
- package/dist/esm/elements/header/HeaderItemWrapper.js +47 -0
- package/dist/esm/elements/nav/Nav.js +84 -0
- package/dist/esm/elements/nav/NavItem.js +95 -0
- package/dist/esm/elements/nav/NavItemIcon.js +51 -0
- package/dist/esm/elements/nav/NavItemText.js +58 -0
- package/dist/esm/elements/nav/NavList.js +55 -0
- package/dist/esm/elements/sheet/Sheet.js +128 -0
- package/dist/esm/elements/sheet/components/Body.js +50 -0
- package/dist/esm/elements/sheet/components/Close.js +60 -0
- package/dist/esm/elements/sheet/components/Description.js +59 -0
- package/dist/esm/elements/sheet/components/Footer.js +50 -0
- package/dist/esm/elements/sheet/components/FooterItem.js +50 -0
- package/dist/esm/elements/sheet/components/Header.js +55 -0
- package/dist/esm/elements/sheet/components/Title.js +59 -0
- package/dist/esm/index.js +24 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
- package/dist/esm/styled/StyledChrome.js +22 -0
- package/dist/esm/styled/StyledSkipNav.js +67 -0
- package/dist/esm/styled/StyledSkipNavIcon.js +34 -0
- package/dist/esm/styled/body/StyledBody.js +25 -0
- package/dist/esm/styled/body/StyledContent.js +37 -0
- package/dist/esm/styled/body/StyledMain.js +25 -0
- package/dist/esm/styled/footer/StyledFooter.js +46 -0
- package/dist/esm/styled/footer/StyledFooterItem.js +22 -0
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +44 -0
- package/dist/esm/styled/header/StyledHeader.js +58 -0
- package/dist/esm/styled/header/StyledHeaderItem.js +69 -0
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +30 -0
- package/dist/esm/styled/header/StyledHeaderItemText.js +23 -0
- package/dist/esm/styled/header/StyledHeaderItemWrapper.js +24 -0
- package/dist/esm/styled/header/StyledLogoHeaderItem.js +55 -0
- package/dist/esm/styled/nav/StyledBaseNavItem.js +33 -0
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +23 -0
- package/dist/esm/styled/nav/StyledLogoNavItem.js +37 -0
- package/dist/esm/styled/nav/StyledNav.js +54 -0
- package/dist/esm/styled/nav/StyledNavButton.js +94 -0
- package/dist/esm/styled/nav/StyledNavItemIcon.js +29 -0
- package/dist/esm/styled/nav/StyledNavItemText.js +39 -0
- package/dist/esm/styled/nav/StyledNavList.js +22 -0
- package/dist/esm/styled/nav/StyledNavListItem.js +22 -0
- package/dist/esm/styled/sheet/StyledSheet.js +56 -0
- package/dist/esm/styled/sheet/StyledSheetBody.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetClose.js +31 -0
- package/dist/esm/styled/sheet/StyledSheetDescription.js +25 -0
- package/dist/esm/styled/sheet/StyledSheetFooter.js +41 -0
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetHeader.js +45 -0
- package/dist/esm/styled/sheet/StyledSheetTitle.js +25 -0
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +40 -0
- package/dist/esm/styled/utils.js +20 -0
- package/dist/esm/types/index.js +10 -0
- package/dist/esm/utils/useBodyContext.js +14 -0
- package/dist/esm/utils/useChromeContext.js +16 -0
- package/dist/esm/utils/useFocusableMount.js +31 -0
- package/dist/esm/utils/useNavContext.js +16 -0
- package/dist/esm/utils/useNavListContext.js +14 -0
- package/dist/esm/utils/useSheetContext.js +16 -0
- package/dist/index.cjs.js +888 -887
- package/dist/typings/elements/body/Body.d.ts +1 -2
- package/dist/typings/elements/footer/Footer.d.ts +8 -1
- package/dist/typings/elements/footer/FooterItem.d.ts +2 -0
- package/dist/typings/elements/header/Header.d.ts +11 -1
- package/dist/typings/elements/header/HeaderItem.d.ts +2 -0
- package/dist/typings/elements/header/HeaderItemIcon.d.ts +8 -3
- package/dist/typings/elements/header/HeaderItemText.d.ts +2 -0
- package/dist/typings/elements/header/HeaderItemWrapper.d.ts +2 -0
- package/dist/typings/elements/nav/Nav.d.ts +11 -1
- package/dist/typings/elements/nav/NavItem.d.ts +2 -0
- package/dist/typings/elements/nav/NavItemIcon.d.ts +8 -3
- package/dist/typings/elements/nav/NavItemText.d.ts +2 -0
- package/dist/typings/elements/{body/Sidebar.d.ts → nav/NavList.d.ts} +2 -2
- package/dist/typings/index.d.ts +9 -16
- package/dist/typings/styled/StyledSkipNav.d.ts +0 -3
- package/dist/typings/styled/StyledSkipNavIcon.d.ts +2 -2
- package/dist/typings/styled/body/StyledContent.d.ts +2 -1
- package/dist/typings/styled/footer/StyledFooter.d.ts +1 -2
- package/dist/typings/styled/header/StyledBaseHeaderItem.d.ts +1 -6
- package/dist/typings/styled/header/StyledHeader.d.ts +1 -2
- package/dist/typings/styled/header/StyledHeaderItem.d.ts +0 -3
- package/dist/typings/styled/header/StyledHeaderItemIcon.d.ts +3 -4
- package/dist/typings/styled/header/StyledHeaderItemText.d.ts +0 -1
- package/dist/typings/styled/header/StyledLogoHeaderItem.d.ts +2 -4
- package/dist/typings/styled/index.d.ts +3 -8
- package/dist/typings/styled/nav/StyledBaseNavItem.d.ts +2 -7
- package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts +1 -5
- package/dist/typings/styled/nav/StyledLogoNavItem.d.ts +4 -9
- package/dist/typings/styled/nav/StyledNav.d.ts +2 -6
- package/dist/typings/styled/nav/StyledNavButton.d.ts +17 -0
- package/dist/typings/styled/nav/StyledNavItemIcon.d.ts +3 -4
- package/dist/typings/styled/nav/StyledNavItemText.d.ts +2 -1
- package/dist/typings/styled/{body/StyledSidebar.d.ts → nav/StyledNavList.d.ts} +1 -1
- package/dist/typings/styled/nav/StyledNavListItem.d.ts +10 -0
- package/dist/typings/styled/sheet/StyledSheetClose.d.ts +4 -8
- package/dist/typings/styled/sheet/StyledSheetDescription.d.ts +2 -3
- package/dist/typings/styled/sheet/StyledSheetFooter.d.ts +2 -2
- package/dist/typings/styled/sheet/StyledSheetFooterItem.d.ts +2 -3
- package/dist/typings/styled/sheet/StyledSheetHeader.d.ts +2 -6
- package/dist/typings/styled/sheet/StyledSheetTitle.d.ts +2 -3
- package/dist/typings/styled/sheet/StyledSheetWrapper.d.ts +2 -2
- package/dist/typings/styled/utils.d.ts +15 -0
- package/dist/typings/types/index.d.ts +3 -30
- package/dist/typings/utils/useBodyContext.d.ts +3 -2
- package/dist/typings/utils/useChromeContext.d.ts +0 -1
- package/dist/typings/utils/useNavListContext.d.ts +13 -0
- package/package.json +9 -10
- package/dist/index.esm.js +0 -1449
- package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +0 -12
- package/dist/typings/elements/subnav/SubNav.d.ts +0 -11
- package/dist/typings/elements/subnav/SubNavItem.d.ts +0 -12
- package/dist/typings/elements/subnav/SubNavItemText.d.ts +0 -12
- package/dist/typings/styled/nav/StyledNavItem.d.ts +0 -26
- package/dist/typings/styled/subnav/StyledSubNav.d.ts +0 -17
- package/dist/typings/styled/subnav/StyledSubNavItem.d.ts +0 -21
- package/dist/typings/styled/subnav/StyledSubNavItemHeader.d.ts +0 -14
- package/dist/typings/styled/subnav/StyledSubNavItemIcon.d.ts +0 -14
- package/dist/typings/styled/subnav/StyledSubNavItemText.d.ts +0 -11
- package/dist/typings/styled/subnav/StyledSubNavPanel.d.ts +0 -12
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { math } from 'polished';
|
|
9
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
|
+
import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
11
|
+
import { StyledNavItemIcon } from './StyledNavItemIcon.js';
|
|
12
|
+
import { getNavWidth } from '../utils.js';
|
|
13
|
+
|
|
14
|
+
const COMPONENT_ID = 'chrome.nav_button';
|
|
15
|
+
const colorStyles = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
theme,
|
|
18
|
+
hue
|
|
19
|
+
} = _ref;
|
|
20
|
+
const activeBackgroundColor = getColor({
|
|
21
|
+
theme,
|
|
22
|
+
dark: {
|
|
23
|
+
hue: 'white'
|
|
24
|
+
},
|
|
25
|
+
light: {
|
|
26
|
+
hue: 'black'
|
|
27
|
+
},
|
|
28
|
+
transparency: theme.opacity[100]
|
|
29
|
+
});
|
|
30
|
+
const currentBackgroundColor = hue === 'chromeHue' ? getColor({
|
|
31
|
+
theme,
|
|
32
|
+
hue,
|
|
33
|
+
shade: 700
|
|
34
|
+
}) : getColor({
|
|
35
|
+
theme,
|
|
36
|
+
dark: {
|
|
37
|
+
hue: 'white'
|
|
38
|
+
},
|
|
39
|
+
light: {
|
|
40
|
+
hue: 'black'
|
|
41
|
+
},
|
|
42
|
+
transparency: theme.opacity[500]
|
|
43
|
+
});
|
|
44
|
+
const focusOutlineColor = getColor({
|
|
45
|
+
theme,
|
|
46
|
+
dark: {
|
|
47
|
+
hue: 'white'
|
|
48
|
+
},
|
|
49
|
+
light: {
|
|
50
|
+
hue: 'black'
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
const focusOutlineOffset = `-${theme.borderWidths.md}`;
|
|
54
|
+
const hoverBackgroundColor = getColor({
|
|
55
|
+
theme,
|
|
56
|
+
dark: {
|
|
57
|
+
hue: 'black'
|
|
58
|
+
},
|
|
59
|
+
light: {
|
|
60
|
+
hue: 'white'
|
|
61
|
+
},
|
|
62
|
+
transparency: theme.opacity[100]
|
|
63
|
+
});
|
|
64
|
+
return css(["opacity:", ";outline-color:transparent;background-color:transparent;color:inherit;&:hover{opacity:1;background-color:", ";}&:hover,&:focus{color:inherit;}", " &:active{background-color:", ";}&[aria-current='true']{opacity:1;background-color:", ";}"], theme.opacity[700], hoverBackgroundColor, focusStyles({
|
|
65
|
+
theme,
|
|
66
|
+
condition: false,
|
|
67
|
+
styles: {
|
|
68
|
+
opacity: 1,
|
|
69
|
+
outlineColor: focusOutlineColor,
|
|
70
|
+
outlineOffset: focusOutlineOffset
|
|
71
|
+
}
|
|
72
|
+
}), activeBackgroundColor, currentBackgroundColor);
|
|
73
|
+
};
|
|
74
|
+
const sizeStyles = _ref2 => {
|
|
75
|
+
let {
|
|
76
|
+
theme,
|
|
77
|
+
isExpanded
|
|
78
|
+
} = _ref2;
|
|
79
|
+
const iconMargin = isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
|
|
80
|
+
return css(["margin:0;border:none;box-sizing:border-box;min-width:0;font-size:inherit;", "{margin:", ";}"], StyledNavItemIcon, iconMargin);
|
|
81
|
+
};
|
|
82
|
+
const StyledNavButton = styled(StyledBaseNavItem).attrs({
|
|
83
|
+
'data-garden-id': COMPONENT_ID,
|
|
84
|
+
'data-garden-version': '9.0.0-next.21',
|
|
85
|
+
as: 'button'
|
|
86
|
+
}).withConfig({
|
|
87
|
+
displayName: "StyledNavButton",
|
|
88
|
+
componentId: "sc-f5ux3-0"
|
|
89
|
+
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.isExpanded && 'start', props => props.isExpanded && 'inherit', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
90
|
+
StyledNavButton.defaultProps = {
|
|
91
|
+
theme: DEFAULT_THEME
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export { StyledNavButton };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.nav_item_icon';
|
|
11
|
+
const sizeStyles = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
const size = theme.iconSizes.lg;
|
|
16
|
+
return css(["width:", ";height:", ";"], size, size);
|
|
17
|
+
};
|
|
18
|
+
const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
|
|
19
|
+
'data-garden-id': COMPONENT_ID,
|
|
20
|
+
'data-garden-version': '9.0.0-next.21'
|
|
21
|
+
}).withConfig({
|
|
22
|
+
displayName: "StyledNavItemIcon",
|
|
23
|
+
componentId: "sc-7w9rpt-0"
|
|
24
|
+
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
25
|
+
StyledNavItemIcon.defaultProps = {
|
|
26
|
+
theme: DEFAULT_THEME
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { StyledNavItemIcon };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { math } from 'polished';
|
|
9
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
|
+
import { StyledNavButton } from './StyledNavButton.js';
|
|
11
|
+
import { getNavWidth } from '../utils.js';
|
|
12
|
+
|
|
13
|
+
const COMPONENT_ID = 'chrome.nav_item_text';
|
|
14
|
+
const sizeStyles = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
theme,
|
|
17
|
+
isExpanded,
|
|
18
|
+
isWrapped
|
|
19
|
+
} = _ref;
|
|
20
|
+
const clip = isExpanded ? 'auto' : undefined;
|
|
21
|
+
const lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
|
|
22
|
+
const margin = isExpanded ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}` : undefined;
|
|
23
|
+
const width = isExpanded ? 'auto' : undefined;
|
|
24
|
+
const height = isExpanded ? 'auto' : undefined;
|
|
25
|
+
const whiteSpace = isWrapped ? undefined : 'nowrap';
|
|
26
|
+
return css(["clip:rect(1px,1px,1px,1px);margin:", ";width:1px;height:1px;line-height:", ";white-space:", ";", " > &&{clip:", ";width:", ";height:", ";}"], margin, lineHeight, whiteSpace, StyledNavButton, clip, width, height);
|
|
27
|
+
};
|
|
28
|
+
const StyledNavItemText = styled.span.attrs({
|
|
29
|
+
'data-garden-id': COMPONENT_ID,
|
|
30
|
+
'data-garden-version': '9.0.0-next.21'
|
|
31
|
+
}).withConfig({
|
|
32
|
+
displayName: "StyledNavItemText",
|
|
33
|
+
componentId: "sc-13m84xl-0"
|
|
34
|
+
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.isExpanded ? 'static' : undefined, props => props.isExpanded ? 1 : undefined, props => props.isExpanded ? 'ellipsis' : undefined, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
35
|
+
StyledNavItemText.defaultProps = {
|
|
36
|
+
theme: DEFAULT_THEME
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { StyledNavItemText };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.nav_list';
|
|
11
|
+
const StyledNavList = styled.ul.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledNavList",
|
|
16
|
+
componentId: "sc-1s0nkfb-0"
|
|
17
|
+
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledNavList.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledNavList };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.nav_list_item';
|
|
11
|
+
const StyledNavListItem = styled.li.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledNavListItem",
|
|
16
|
+
componentId: "sc-18cj2v7-0"
|
|
17
|
+
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledNavListItem.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledNavListItem };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet';
|
|
11
|
+
const colorStyles = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme,
|
|
14
|
+
isOpen
|
|
15
|
+
} = _ref;
|
|
16
|
+
const backgroundColor = getColor({
|
|
17
|
+
theme,
|
|
18
|
+
variable: 'background.default'
|
|
19
|
+
});
|
|
20
|
+
const borderColor = isOpen ? getColor({
|
|
21
|
+
theme,
|
|
22
|
+
variable: 'border.default'
|
|
23
|
+
}) : 'transparent';
|
|
24
|
+
return css(["border-color:", ";background-color:", ";"], borderColor, backgroundColor);
|
|
25
|
+
};
|
|
26
|
+
const sizeStyles = _ref2 => {
|
|
27
|
+
let {
|
|
28
|
+
theme,
|
|
29
|
+
isOpen,
|
|
30
|
+
placement,
|
|
31
|
+
size
|
|
32
|
+
} = _ref2;
|
|
33
|
+
const width = isOpen ? size : 0;
|
|
34
|
+
const fontSize = theme.fontSizes.md;
|
|
35
|
+
const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
|
|
36
|
+
const border = isOpen ? theme.borders.sm : 'none';
|
|
37
|
+
let borderProperty;
|
|
38
|
+
if (placement === 'start') {
|
|
39
|
+
borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
|
|
40
|
+
} else {
|
|
41
|
+
borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
|
|
42
|
+
}
|
|
43
|
+
return css(["box-sizing:border-box;width:", ";height:100%;", ":", ";line-height:", ";font-size:", ";"], width, borderProperty, border, lineHeight, fontSize);
|
|
44
|
+
};
|
|
45
|
+
const StyledSheet = styled.aside.attrs({
|
|
46
|
+
'data-garden-id': COMPONENT_ID,
|
|
47
|
+
'data-garden-version': '9.0.0-next.21'
|
|
48
|
+
}).withConfig({
|
|
49
|
+
displayName: "StyledSheet",
|
|
50
|
+
componentId: "sc-dx8ijk-0"
|
|
51
|
+
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
52
|
+
StyledSheet.defaultProps = {
|
|
53
|
+
theme: DEFAULT_THEME
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export { StyledSheet };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_body';
|
|
11
|
+
const StyledSheetBody = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledSheetBody",
|
|
16
|
+
componentId: "sc-bt4eoj-0"
|
|
17
|
+
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledSheetBody.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledSheetBody };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'chrome.sheet_close';
|
|
12
|
+
const positionStyles = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
theme
|
|
15
|
+
} = _ref;
|
|
16
|
+
const top = `${theme.space.base * 2.5}px`;
|
|
17
|
+
const position = `${theme.space.base * 2}px`;
|
|
18
|
+
return css(["top:", ";", ":", ";"], top, theme.rtl ? 'left' : 'right', position);
|
|
19
|
+
};
|
|
20
|
+
const StyledSheetClose = styled(IconButton).attrs({
|
|
21
|
+
'data-garden-id': COMPONENT_ID,
|
|
22
|
+
'data-garden-version': '9.0.0-next.21'
|
|
23
|
+
}).withConfig({
|
|
24
|
+
displayName: "StyledSheetClose",
|
|
25
|
+
componentId: "sc-1ab02oq-0"
|
|
26
|
+
})(["position:absolute;", ";", ";"], positionStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
27
|
+
StyledSheetClose.defaultProps = {
|
|
28
|
+
theme: DEFAULT_THEME
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { StyledSheetClose };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_description';
|
|
11
|
+
const StyledSheetDescription = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledSheetDescription",
|
|
16
|
+
componentId: "sc-1puglb6-0"
|
|
17
|
+
})(["line-height:", ";color:", ";", ";"], p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => getColor({
|
|
18
|
+
theme: p.theme,
|
|
19
|
+
variable: 'foreground.subtle'
|
|
20
|
+
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
+
StyledSheetDescription.defaultProps = {
|
|
22
|
+
theme: DEFAULT_THEME
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { StyledSheetDescription };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_footer';
|
|
11
|
+
const colorStyles = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
const borderColor = getColor({
|
|
16
|
+
theme,
|
|
17
|
+
variable: 'border.subtle'
|
|
18
|
+
});
|
|
19
|
+
return css(["border-top-color:", ";"], borderColor);
|
|
20
|
+
};
|
|
21
|
+
const sizeStyles = _ref2 => {
|
|
22
|
+
let {
|
|
23
|
+
theme,
|
|
24
|
+
isCompact
|
|
25
|
+
} = _ref2;
|
|
26
|
+
const border = theme.borders.sm;
|
|
27
|
+
const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
|
|
28
|
+
return css(["border-top:", ";padding:", ";"], border, padding);
|
|
29
|
+
};
|
|
30
|
+
const StyledSheetFooter = styled.footer.attrs({
|
|
31
|
+
'data-garden-id': COMPONENT_ID,
|
|
32
|
+
'data-garden-version': '9.0.0-next.21'
|
|
33
|
+
}).withConfig({
|
|
34
|
+
displayName: "StyledSheetFooter",
|
|
35
|
+
componentId: "sc-2cktos-0"
|
|
36
|
+
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
37
|
+
StyledSheetFooter.defaultProps = {
|
|
38
|
+
theme: DEFAULT_THEME
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { StyledSheetFooter };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_footer_item';
|
|
11
|
+
const StyledSheetFooterItem = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledSheetFooterItem",
|
|
16
|
+
componentId: "sc-r9ixh-0"
|
|
17
|
+
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledSheetFooterItem.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledSheetFooterItem };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_header';
|
|
11
|
+
const colorStyles = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
const borderColor = getColor({
|
|
16
|
+
theme,
|
|
17
|
+
variable: 'border.subtle'
|
|
18
|
+
});
|
|
19
|
+
return css(["border-bottom-color:", ";"], borderColor);
|
|
20
|
+
};
|
|
21
|
+
const sizeStyles = _ref2 => {
|
|
22
|
+
let {
|
|
23
|
+
theme,
|
|
24
|
+
isCloseButtonPresent
|
|
25
|
+
} = _ref2;
|
|
26
|
+
const border = theme.borders.sm;
|
|
27
|
+
let padding = `${theme.space.base * 5}px`;
|
|
28
|
+
if (isCloseButtonPresent) {
|
|
29
|
+
const paddingSide = `${theme.space.base * 14}px`;
|
|
30
|
+
padding = theme.rtl ? `${padding} ${padding} ${padding} ${paddingSide}` : `${padding} ${paddingSide} ${padding} ${padding}`;
|
|
31
|
+
}
|
|
32
|
+
return css(["border-bottom:", ";padding:", ";"], border, padding);
|
|
33
|
+
};
|
|
34
|
+
const StyledSheetHeader = styled.header.attrs({
|
|
35
|
+
'data-garden-id': COMPONENT_ID,
|
|
36
|
+
'data-garden-version': '9.0.0-next.21'
|
|
37
|
+
}).withConfig({
|
|
38
|
+
displayName: "StyledSheetHeader",
|
|
39
|
+
componentId: "sc-o2ry8i-0"
|
|
40
|
+
})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
41
|
+
StyledSheetHeader.defaultProps = {
|
|
42
|
+
theme: DEFAULT_THEME
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { StyledSheetHeader };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_title';
|
|
11
|
+
const StyledSheetTitle = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.21'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledSheetTitle",
|
|
16
|
+
componentId: "sc-1gogk75-0"
|
|
17
|
+
})(["color:", ";font-weight:", ";", ";"], p => getColor({
|
|
18
|
+
theme: p.theme,
|
|
19
|
+
variable: 'foreground.default'
|
|
20
|
+
}), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
+
StyledSheetTitle.defaultProps = {
|
|
22
|
+
theme: DEFAULT_THEME
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { StyledSheetTitle };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'chrome.sheet_wrapper';
|
|
11
|
+
const transformStyles = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme,
|
|
14
|
+
isAnimated,
|
|
15
|
+
isOpen,
|
|
16
|
+
placement
|
|
17
|
+
} = _ref;
|
|
18
|
+
const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
|
|
19
|
+
let transform;
|
|
20
|
+
if (isOpen) {
|
|
21
|
+
transform = 'translateX(0)';
|
|
22
|
+
} else if (placement === 'start') {
|
|
23
|
+
transform = `translateX(${theme.rtl ? 100 : -100}%)`;
|
|
24
|
+
} else {
|
|
25
|
+
transform = `translateX(${theme.rtl ? -100 : 100}%)`;
|
|
26
|
+
}
|
|
27
|
+
return css(["transform:", ";transition:", ";"], transform, transition);
|
|
28
|
+
};
|
|
29
|
+
const StyledSheetWrapper = styled.div.attrs({
|
|
30
|
+
'data-garden-id': COMPONENT_ID,
|
|
31
|
+
'data-garden-version': '9.0.0-next.21'
|
|
32
|
+
}).withConfig({
|
|
33
|
+
displayName: "StyledSheetWrapper",
|
|
34
|
+
componentId: "sc-f6x9zb-0"
|
|
35
|
+
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
36
|
+
StyledSheetWrapper.defaultProps = {
|
|
37
|
+
theme: DEFAULT_THEME
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { StyledSheetWrapper };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { PALETTE } from '@zendeskgarden/react-theming';
|
|
8
|
+
|
|
9
|
+
const getFooterHeight = theme => `${theme.space.base * 20}px`;
|
|
10
|
+
const getHeaderHeight = theme => `${theme.space.base * 13}px`;
|
|
11
|
+
const getHeaderItemSize = theme => `${theme.space.base * 7.5}px`;
|
|
12
|
+
const getNavItemHeight = theme => getHeaderHeight(theme);
|
|
13
|
+
const getNavWidth = theme => `${theme.space.base * 15}px`;
|
|
14
|
+
const getNavWidthExpanded = () => `200px`;
|
|
15
|
+
const getProductColor = function (product) {
|
|
16
|
+
let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inherit';
|
|
17
|
+
return product ? PALETTE.product[product] || fallback : fallback;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { getFooterHeight, getHeaderHeight, getHeaderItemSize, getNavItemHeight, getNavWidth, getNavWidthExpanded, getProductColor };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
const PLACEMENT = ['end', 'start'];
|
|
8
|
+
const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
|
|
9
|
+
|
|
10
|
+
export { PLACEMENT, PRODUCTS };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const BodyContext = React__default.createContext(undefined);
|
|
10
|
+
const useBodyContext = () => {
|
|
11
|
+
return useContext(BodyContext);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { BodyContext, useBodyContext };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const ChromeContext = React__default.createContext({
|
|
10
|
+
hue: 'chromeHue'
|
|
11
|
+
});
|
|
12
|
+
const useChromeContext = () => {
|
|
13
|
+
return useContext(ChromeContext);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { ChromeContext, useChromeContext };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { useRef, useEffect } from 'react';
|
|
8
|
+
import activeElement from 'dom-helpers/activeElement';
|
|
9
|
+
|
|
10
|
+
function useFocusableMount(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
isMounted,
|
|
13
|
+
focusOnMount,
|
|
14
|
+
restoreFocus,
|
|
15
|
+
targetRef
|
|
16
|
+
} = _ref;
|
|
17
|
+
const triggerRef = useRef();
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (isMounted && focusOnMount && targetRef.current) {
|
|
20
|
+
triggerRef.current = activeElement();
|
|
21
|
+
targetRef.current.focus();
|
|
22
|
+
}
|
|
23
|
+
}, [isMounted, focusOnMount, targetRef]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (!isMounted && restoreFocus && triggerRef.current) {
|
|
26
|
+
triggerRef.current.focus();
|
|
27
|
+
}
|
|
28
|
+
}, [isMounted, restoreFocus, triggerRef]);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { useFocusableMount };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const NavContext = React__default.createContext({
|
|
10
|
+
isExpanded: false
|
|
11
|
+
});
|
|
12
|
+
const useNavContext = () => {
|
|
13
|
+
return useContext(NavContext);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { NavContext, useNavContext };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useContext } from 'react';
|
|
8
|
+
|
|
9
|
+
const NavListContext = React__default.createContext(undefined);
|
|
10
|
+
const useNavListContext = () => {
|
|
11
|
+
return useContext(NavListContext);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { NavListContext, useNavListContext };
|