@zendeskgarden/react-chrome 9.0.0-next.7 → 9.0.0-next.9
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 +17 -14
- package/dist/esm/elements/Chrome.js +94 -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 +66 -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 +78 -0
- package/dist/esm/elements/nav/NavItem.js +101 -0
- package/dist/esm/elements/nav/NavItemIcon.js +66 -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 +46 -0
- package/dist/esm/styled/StyledSkipNavIcon.js +28 -0
- package/dist/esm/styled/body/StyledBody.js +22 -0
- package/dist/esm/styled/body/StyledContent.js +25 -0
- package/dist/esm/styled/body/StyledMain.js +22 -0
- package/dist/esm/styled/footer/StyledFooter.js +25 -0
- package/dist/esm/styled/footer/StyledFooterItem.js +22 -0
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +35 -0
- package/dist/esm/styled/header/StyledHeader.js +31 -0
- package/dist/esm/styled/header/StyledHeaderItem.js +37 -0
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +22 -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 +43 -0
- package/dist/esm/styled/nav/StyledBaseNavItem.js +32 -0
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +23 -0
- package/dist/esm/styled/nav/StyledLogoNavItem.js +44 -0
- package/dist/esm/styled/nav/StyledNav.js +34 -0
- package/dist/esm/styled/nav/StyledNavButton.js +65 -0
- package/dist/esm/styled/nav/StyledNavItemIcon.js +22 -0
- package/dist/esm/styled/nav/StyledNavItemText.js +34 -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 +41 -0
- package/dist/esm/styled/sheet/StyledSheetBody.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetClose.js +34 -0
- package/dist/esm/styled/sheet/StyledSheetDescription.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetFooter.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetHeader.js +23 -0
- package/dist/esm/styled/sheet/StyledSheetTitle.js +22 -0
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +37 -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 +209 -461
- package/dist/typings/elements/nav/Nav.d.ts +2 -0
- package/dist/typings/elements/nav/NavList.d.ts +11 -0
- package/dist/typings/index.d.ts +1 -5
- package/dist/typings/styled/index.d.ts +3 -7
- package/dist/typings/styled/nav/StyledBaseNavItem.d.ts +1 -5
- package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts +4 -5
- package/dist/typings/styled/nav/StyledLogoNavItem.d.ts +4 -5
- package/dist/typings/styled/nav/{StyledNavItem.d.ts → StyledNavButton.d.ts} +3 -1
- package/dist/typings/styled/nav/StyledNavList.d.ts +10 -0
- package/dist/typings/styled/nav/StyledNavListItem.d.ts +10 -0
- package/dist/typings/types/index.d.ts +2 -25
- package/dist/typings/utils/useNavListContext.d.ts +13 -0
- package/package.json +5 -7
- package/dist/index.esm.js +0 -1456
- package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +0 -14
- package/dist/typings/elements/subnav/SubNav.d.ts +0 -19
- package/dist/typings/elements/subnav/SubNavItem.d.ts +0 -14
- package/dist/typings/elements/subnav/SubNavItemText.d.ts +0 -14
- 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,66 @@
|
|
|
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, { Children, isValidElement, cloneElement } from 'react';
|
|
8
|
+
import '../../styled/StyledChrome.js';
|
|
9
|
+
import '../../styled/StyledSkipNav.js';
|
|
10
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
11
|
+
import '../../styled/body/StyledBody.js';
|
|
12
|
+
import '../../styled/body/StyledContent.js';
|
|
13
|
+
import '../../styled/body/StyledMain.js';
|
|
14
|
+
import '../../styled/footer/StyledFooter.js';
|
|
15
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
16
|
+
import '../../styled/header/StyledHeader.js';
|
|
17
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
18
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
19
|
+
import { StyledHeaderItemIcon } from '../../styled/header/StyledHeaderItemIcon.js';
|
|
20
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
23
|
+
import '../../styled/nav/StyledNav.js';
|
|
24
|
+
import '../../styled/nav/StyledNavList.js';
|
|
25
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
26
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
27
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
30
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
32
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
41
|
+
|
|
42
|
+
const HeaderItemIcon = _ref => {
|
|
43
|
+
let {
|
|
44
|
+
children,
|
|
45
|
+
...props
|
|
46
|
+
} = _ref;
|
|
47
|
+
const element = Children.only(children);
|
|
48
|
+
if ( isValidElement(element)) {
|
|
49
|
+
const Icon = _ref2 => {
|
|
50
|
+
let {
|
|
51
|
+
theme,
|
|
52
|
+
...iconProps
|
|
53
|
+
} = _ref2;
|
|
54
|
+
return cloneElement(element, {
|
|
55
|
+
...props,
|
|
56
|
+
...iconProps
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
return React__default.createElement(StyledHeaderItemIcon, Object.assign({
|
|
60
|
+
as: Icon
|
|
61
|
+
}, props));
|
|
62
|
+
}
|
|
63
|
+
return null;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export { HeaderItemIcon };
|
|
@@ -0,0 +1,51 @@
|
|
|
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 from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import '../../styled/StyledChrome.js';
|
|
10
|
+
import '../../styled/StyledSkipNav.js';
|
|
11
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
12
|
+
import '../../styled/body/StyledBody.js';
|
|
13
|
+
import '../../styled/body/StyledContent.js';
|
|
14
|
+
import '../../styled/body/StyledMain.js';
|
|
15
|
+
import '../../styled/footer/StyledFooter.js';
|
|
16
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
17
|
+
import '../../styled/header/StyledHeader.js';
|
|
18
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
20
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
21
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
22
|
+
import { StyledHeaderItemText } from '../../styled/header/StyledHeaderItemText.js';
|
|
23
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
24
|
+
import '../../styled/nav/StyledNav.js';
|
|
25
|
+
import '../../styled/nav/StyledNavList.js';
|
|
26
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
27
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
30
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
32
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
41
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
42
|
+
|
|
43
|
+
const HeaderItemText = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemText, Object.assign({
|
|
44
|
+
ref: ref
|
|
45
|
+
}, props)));
|
|
46
|
+
HeaderItemText.displayName = 'HeaderItemText';
|
|
47
|
+
HeaderItemText.propTypes = {
|
|
48
|
+
isClipped: PropTypes.bool
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export { HeaderItemText };
|
|
@@ -0,0 +1,47 @@
|
|
|
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 from 'react';
|
|
8
|
+
import '../../styled/StyledChrome.js';
|
|
9
|
+
import '../../styled/StyledSkipNav.js';
|
|
10
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
11
|
+
import '../../styled/body/StyledBody.js';
|
|
12
|
+
import '../../styled/body/StyledContent.js';
|
|
13
|
+
import '../../styled/body/StyledMain.js';
|
|
14
|
+
import '../../styled/footer/StyledFooter.js';
|
|
15
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
16
|
+
import '../../styled/header/StyledHeader.js';
|
|
17
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
18
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
20
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
22
|
+
import { StyledHeaderItemWrapper } from '../../styled/header/StyledHeaderItemWrapper.js';
|
|
23
|
+
import '../../styled/nav/StyledNav.js';
|
|
24
|
+
import '../../styled/nav/StyledNavList.js';
|
|
25
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
26
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
27
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
30
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
32
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
41
|
+
|
|
42
|
+
const HeaderItemWrapper = React__default.forwardRef((props, ref) => React__default.createElement(StyledHeaderItemWrapper, Object.assign({
|
|
43
|
+
ref: ref
|
|
44
|
+
}, props)));
|
|
45
|
+
HeaderItemWrapper.displayName = 'HeaderItemWrapper';
|
|
46
|
+
|
|
47
|
+
export { HeaderItemWrapper };
|
|
@@ -0,0 +1,78 @@
|
|
|
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, { useMemo } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { useChromeContext } from '../../utils/useChromeContext.js';
|
|
10
|
+
import { NavContext } from '../../utils/useNavContext.js';
|
|
11
|
+
import '../../styled/StyledChrome.js';
|
|
12
|
+
import '../../styled/StyledSkipNav.js';
|
|
13
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
14
|
+
import '../../styled/body/StyledBody.js';
|
|
15
|
+
import '../../styled/body/StyledContent.js';
|
|
16
|
+
import '../../styled/body/StyledMain.js';
|
|
17
|
+
import '../../styled/footer/StyledFooter.js';
|
|
18
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeader.js';
|
|
20
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
23
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
24
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
25
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
26
|
+
import { StyledNav } from '../../styled/nav/StyledNav.js';
|
|
27
|
+
import '../../styled/nav/StyledNavList.js';
|
|
28
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
29
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
30
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
31
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
32
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
33
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
34
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
41
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
42
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
43
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
44
|
+
import { NavItem } from './NavItem.js';
|
|
45
|
+
import { NavItemIcon } from './NavItemIcon.js';
|
|
46
|
+
import { NavItemText } from './NavItemText.js';
|
|
47
|
+
import { NavList } from './NavList.js';
|
|
48
|
+
|
|
49
|
+
const NavComponent = React__default.forwardRef((props, ref) => {
|
|
50
|
+
const {
|
|
51
|
+
hue,
|
|
52
|
+
isLight,
|
|
53
|
+
isDark
|
|
54
|
+
} = useChromeContext();
|
|
55
|
+
const navContextValue = useMemo(() => ({
|
|
56
|
+
isExpanded: !!props.isExpanded
|
|
57
|
+
}), [props.isExpanded]);
|
|
58
|
+
return React__default.createElement(NavContext.Provider, {
|
|
59
|
+
value: navContextValue
|
|
60
|
+
}, React__default.createElement(StyledNav, Object.assign({
|
|
61
|
+
ref: ref
|
|
62
|
+
}, props, {
|
|
63
|
+
hue: hue,
|
|
64
|
+
isLight: isLight,
|
|
65
|
+
isDark: isDark
|
|
66
|
+
})));
|
|
67
|
+
});
|
|
68
|
+
NavComponent.displayName = 'Nav';
|
|
69
|
+
NavComponent.propTypes = {
|
|
70
|
+
isExpanded: PropTypes.bool
|
|
71
|
+
};
|
|
72
|
+
const Nav = NavComponent;
|
|
73
|
+
Nav.List = NavList;
|
|
74
|
+
Nav.Item = NavItem;
|
|
75
|
+
Nav.ItemIcon = NavItemIcon;
|
|
76
|
+
Nav.ItemText = NavItemText;
|
|
77
|
+
|
|
78
|
+
export { Nav, NavComponent };
|
|
@@ -0,0 +1,101 @@
|
|
|
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 from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { PRODUCTS } from '../../types/index.js';
|
|
10
|
+
import '../../styled/StyledChrome.js';
|
|
11
|
+
import '../../styled/StyledSkipNav.js';
|
|
12
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
13
|
+
import '../../styled/body/StyledBody.js';
|
|
14
|
+
import '../../styled/body/StyledContent.js';
|
|
15
|
+
import '../../styled/body/StyledMain.js';
|
|
16
|
+
import '../../styled/footer/StyledFooter.js';
|
|
17
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
18
|
+
import '../../styled/header/StyledHeader.js';
|
|
19
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
20
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
22
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
23
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
24
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
25
|
+
import '../../styled/nav/StyledNav.js';
|
|
26
|
+
import '../../styled/nav/StyledNavList.js';
|
|
27
|
+
import { StyledNavListItem } from '../../styled/nav/StyledNavListItem.js';
|
|
28
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
29
|
+
import { StyledLogoNavItem } from '../../styled/nav/StyledLogoNavItem.js';
|
|
30
|
+
import { StyledBrandmarkNavItem } from '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
31
|
+
import { StyledNavButton } from '../../styled/nav/StyledNavButton.js';
|
|
32
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
33
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
41
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
42
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
43
|
+
import { useNavContext } from '../../utils/useNavContext.js';
|
|
44
|
+
import { useChromeContext } from '../../utils/useChromeContext.js';
|
|
45
|
+
import { useNavListContext } from '../../utils/useNavListContext.js';
|
|
46
|
+
|
|
47
|
+
const NavItem = React__default.forwardRef((_ref, ref) => {
|
|
48
|
+
let {
|
|
49
|
+
hasLogo,
|
|
50
|
+
hasBrandmark,
|
|
51
|
+
product,
|
|
52
|
+
...other
|
|
53
|
+
} = _ref;
|
|
54
|
+
const {
|
|
55
|
+
hue,
|
|
56
|
+
isLight,
|
|
57
|
+
isDark
|
|
58
|
+
} = useChromeContext();
|
|
59
|
+
const {
|
|
60
|
+
isExpanded
|
|
61
|
+
} = useNavContext();
|
|
62
|
+
const navListContext = useNavListContext();
|
|
63
|
+
const ariaCurrent = other.isCurrent || undefined;
|
|
64
|
+
const hasList = navListContext?.hasList;
|
|
65
|
+
let retVal;
|
|
66
|
+
if (hasLogo) {
|
|
67
|
+
retVal = React__default.createElement(StyledLogoNavItem, Object.assign({
|
|
68
|
+
ref: ref,
|
|
69
|
+
isDark: isDark,
|
|
70
|
+
isLight: isLight,
|
|
71
|
+
product: product,
|
|
72
|
+
"aria-current": ariaCurrent
|
|
73
|
+
}, other));
|
|
74
|
+
} else if (hasBrandmark) {
|
|
75
|
+
retVal = React__default.createElement(StyledBrandmarkNavItem, Object.assign({
|
|
76
|
+
ref: ref
|
|
77
|
+
}, other));
|
|
78
|
+
} else {
|
|
79
|
+
retVal = React__default.createElement(StyledNavButton, Object.assign({
|
|
80
|
+
tabIndex: 0,
|
|
81
|
+
ref: ref,
|
|
82
|
+
isExpanded: isExpanded,
|
|
83
|
+
hue: hue,
|
|
84
|
+
isDark: isDark,
|
|
85
|
+
isLight: isLight,
|
|
86
|
+
"aria-current": ariaCurrent
|
|
87
|
+
}, other));
|
|
88
|
+
}
|
|
89
|
+
if (hasList) {
|
|
90
|
+
retVal = React__default.createElement(StyledNavListItem, null, retVal);
|
|
91
|
+
}
|
|
92
|
+
return retVal;
|
|
93
|
+
});
|
|
94
|
+
NavItem.displayName = 'NavItem';
|
|
95
|
+
NavItem.propTypes = {
|
|
96
|
+
product: PropTypes.oneOf(PRODUCTS),
|
|
97
|
+
hasLogo: PropTypes.bool,
|
|
98
|
+
hasBrandmark: PropTypes.bool
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export { NavItem };
|
|
@@ -0,0 +1,66 @@
|
|
|
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, { Children, isValidElement, cloneElement } from 'react';
|
|
8
|
+
import '../../styled/StyledChrome.js';
|
|
9
|
+
import '../../styled/StyledSkipNav.js';
|
|
10
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
11
|
+
import '../../styled/body/StyledBody.js';
|
|
12
|
+
import '../../styled/body/StyledContent.js';
|
|
13
|
+
import '../../styled/body/StyledMain.js';
|
|
14
|
+
import '../../styled/footer/StyledFooter.js';
|
|
15
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
16
|
+
import '../../styled/header/StyledHeader.js';
|
|
17
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
18
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
20
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
23
|
+
import '../../styled/nav/StyledNav.js';
|
|
24
|
+
import '../../styled/nav/StyledNavList.js';
|
|
25
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
26
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
27
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
30
|
+
import { StyledNavItemIcon } from '../../styled/nav/StyledNavItemIcon.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
32
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
41
|
+
|
|
42
|
+
const NavItemIcon = _ref => {
|
|
43
|
+
let {
|
|
44
|
+
children,
|
|
45
|
+
...props
|
|
46
|
+
} = _ref;
|
|
47
|
+
const element = Children.only(children);
|
|
48
|
+
if ( isValidElement(element)) {
|
|
49
|
+
const Icon = _ref2 => {
|
|
50
|
+
let {
|
|
51
|
+
theme,
|
|
52
|
+
...iconProps
|
|
53
|
+
} = _ref2;
|
|
54
|
+
return cloneElement(element, {
|
|
55
|
+
...props,
|
|
56
|
+
...iconProps
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
return React__default.createElement(StyledNavItemIcon, Object.assign({
|
|
60
|
+
as: Icon
|
|
61
|
+
}, props));
|
|
62
|
+
}
|
|
63
|
+
return null;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export { NavItemIcon };
|
|
@@ -0,0 +1,58 @@
|
|
|
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 from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import '../../styled/StyledChrome.js';
|
|
10
|
+
import '../../styled/StyledSkipNav.js';
|
|
11
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
12
|
+
import '../../styled/body/StyledBody.js';
|
|
13
|
+
import '../../styled/body/StyledContent.js';
|
|
14
|
+
import '../../styled/body/StyledMain.js';
|
|
15
|
+
import '../../styled/footer/StyledFooter.js';
|
|
16
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
17
|
+
import '../../styled/header/StyledHeader.js';
|
|
18
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
20
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
21
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
23
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
24
|
+
import '../../styled/nav/StyledNav.js';
|
|
25
|
+
import '../../styled/nav/StyledNavList.js';
|
|
26
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
27
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
30
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
32
|
+
import { StyledNavItemText } from '../../styled/nav/StyledNavItemText.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
41
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
42
|
+
import { useNavContext } from '../../utils/useNavContext.js';
|
|
43
|
+
|
|
44
|
+
const NavItemText = React__default.forwardRef((props, ref) => {
|
|
45
|
+
const {
|
|
46
|
+
isExpanded
|
|
47
|
+
} = useNavContext();
|
|
48
|
+
return React__default.createElement(StyledNavItemText, Object.assign({
|
|
49
|
+
ref: ref,
|
|
50
|
+
isExpanded: isExpanded
|
|
51
|
+
}, props));
|
|
52
|
+
});
|
|
53
|
+
NavItemText.displayName = 'NavItemText';
|
|
54
|
+
NavItemText.propTypes = {
|
|
55
|
+
isWrapped: PropTypes.bool
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export { NavItemText };
|
|
@@ -0,0 +1,55 @@
|
|
|
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, { useMemo } from 'react';
|
|
8
|
+
import '../../styled/StyledChrome.js';
|
|
9
|
+
import '../../styled/StyledSkipNav.js';
|
|
10
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
11
|
+
import '../../styled/body/StyledBody.js';
|
|
12
|
+
import '../../styled/body/StyledContent.js';
|
|
13
|
+
import '../../styled/body/StyledMain.js';
|
|
14
|
+
import '../../styled/footer/StyledFooter.js';
|
|
15
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
16
|
+
import '../../styled/header/StyledHeader.js';
|
|
17
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
18
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
19
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
20
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
21
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
23
|
+
import '../../styled/nav/StyledNav.js';
|
|
24
|
+
import { StyledNavList } from '../../styled/nav/StyledNavList.js';
|
|
25
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
26
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
27
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
28
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
29
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
30
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
31
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
32
|
+
import '../../styled/sheet/StyledSheet.js';
|
|
33
|
+
import '../../styled/sheet/StyledSheetWrapper.js';
|
|
34
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
35
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
36
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
37
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
41
|
+
import { NavListContext } from '../../utils/useNavListContext.js';
|
|
42
|
+
|
|
43
|
+
const NavList = React__default.forwardRef((props, ref) => {
|
|
44
|
+
const contextValue = useMemo(() => ({
|
|
45
|
+
hasList: true
|
|
46
|
+
}), []);
|
|
47
|
+
return React__default.createElement(NavListContext.Provider, {
|
|
48
|
+
value: contextValue
|
|
49
|
+
}, React__default.createElement(StyledNavList, Object.assign({
|
|
50
|
+
ref: ref
|
|
51
|
+
}, props)));
|
|
52
|
+
});
|
|
53
|
+
NavList.displayName = 'Nav';
|
|
54
|
+
|
|
55
|
+
export { NavList };
|
|
@@ -0,0 +1,128 @@
|
|
|
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, { useRef, useState, useMemo } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { useUIDSeed } from 'react-uid';
|
|
10
|
+
import { mergeRefs } from 'react-merge-refs';
|
|
11
|
+
import { PLACEMENT } from '../../types/index.js';
|
|
12
|
+
import '../../styled/StyledChrome.js';
|
|
13
|
+
import '../../styled/StyledSkipNav.js';
|
|
14
|
+
import '../../styled/StyledSkipNavIcon.js';
|
|
15
|
+
import '../../styled/body/StyledBody.js';
|
|
16
|
+
import '../../styled/body/StyledContent.js';
|
|
17
|
+
import '../../styled/body/StyledMain.js';
|
|
18
|
+
import '../../styled/footer/StyledFooter.js';
|
|
19
|
+
import '../../styled/footer/StyledFooterItem.js';
|
|
20
|
+
import '../../styled/header/StyledHeader.js';
|
|
21
|
+
import '../../styled/header/StyledBaseHeaderItem.js';
|
|
22
|
+
import '../../styled/header/StyledHeaderItem.js';
|
|
23
|
+
import '../../styled/header/StyledHeaderItemIcon.js';
|
|
24
|
+
import '../../styled/header/StyledLogoHeaderItem.js';
|
|
25
|
+
import '../../styled/header/StyledHeaderItemText.js';
|
|
26
|
+
import '../../styled/header/StyledHeaderItemWrapper.js';
|
|
27
|
+
import '../../styled/nav/StyledNav.js';
|
|
28
|
+
import '../../styled/nav/StyledNavList.js';
|
|
29
|
+
import '../../styled/nav/StyledNavListItem.js';
|
|
30
|
+
import '../../styled/nav/StyledBaseNavItem.js';
|
|
31
|
+
import '../../styled/nav/StyledLogoNavItem.js';
|
|
32
|
+
import '../../styled/nav/StyledBrandmarkNavItem.js';
|
|
33
|
+
import '../../styled/nav/StyledNavButton.js';
|
|
34
|
+
import '../../styled/nav/StyledNavItemIcon.js';
|
|
35
|
+
import '../../styled/nav/StyledNavItemText.js';
|
|
36
|
+
import { StyledSheet } from '../../styled/sheet/StyledSheet.js';
|
|
37
|
+
import { StyledSheetWrapper } from '../../styled/sheet/StyledSheetWrapper.js';
|
|
38
|
+
import '../../styled/sheet/StyledSheetTitle.js';
|
|
39
|
+
import '../../styled/sheet/StyledSheetDescription.js';
|
|
40
|
+
import '../../styled/sheet/StyledSheetBody.js';
|
|
41
|
+
import '../../styled/sheet/StyledSheetClose.js';
|
|
42
|
+
import '../../styled/sheet/StyledSheetFooter.js';
|
|
43
|
+
import '../../styled/sheet/StyledSheetFooterItem.js';
|
|
44
|
+
import '../../styled/sheet/StyledSheetHeader.js';
|
|
45
|
+
import { SheetContext } from '../../utils/useSheetContext.js';
|
|
46
|
+
import { useFocusableMount } from '../../utils/useFocusableMount.js';
|
|
47
|
+
import { Title } from './components/Title.js';
|
|
48
|
+
import { Description } from './components/Description.js';
|
|
49
|
+
import { Header } from './components/Header.js';
|
|
50
|
+
import { Body } from './components/Body.js';
|
|
51
|
+
import { Footer } from './components/Footer.js';
|
|
52
|
+
import { FooterItem } from './components/FooterItem.js';
|
|
53
|
+
import { Close } from './components/Close.js';
|
|
54
|
+
|
|
55
|
+
const SheetComponent = React__default.forwardRef((_ref, ref) => {
|
|
56
|
+
let {
|
|
57
|
+
id,
|
|
58
|
+
isOpen,
|
|
59
|
+
isAnimated,
|
|
60
|
+
focusOnMount,
|
|
61
|
+
restoreFocus,
|
|
62
|
+
placement,
|
|
63
|
+
size,
|
|
64
|
+
children,
|
|
65
|
+
...props
|
|
66
|
+
} = _ref;
|
|
67
|
+
const sheetRef = useRef(null);
|
|
68
|
+
const seed = useUIDSeed();
|
|
69
|
+
const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
|
|
70
|
+
const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.9'}`), [id, seed]);
|
|
71
|
+
const titleId = `${idPrefix}--title`;
|
|
72
|
+
const descriptionId = `${idPrefix}--description`;
|
|
73
|
+
const sheetContext = useMemo(() => ({
|
|
74
|
+
titleId,
|
|
75
|
+
descriptionId,
|
|
76
|
+
isCloseButtonPresent,
|
|
77
|
+
setIsCloseButtonPresent
|
|
78
|
+
}), [titleId, descriptionId, isCloseButtonPresent]);
|
|
79
|
+
useFocusableMount({
|
|
80
|
+
targetRef: sheetRef,
|
|
81
|
+
isMounted: isOpen,
|
|
82
|
+
focusOnMount,
|
|
83
|
+
restoreFocus
|
|
84
|
+
});
|
|
85
|
+
return React__default.createElement(SheetContext.Provider, {
|
|
86
|
+
value: sheetContext
|
|
87
|
+
}, React__default.createElement(StyledSheet, Object.assign({
|
|
88
|
+
isOpen: isOpen,
|
|
89
|
+
isAnimated: isAnimated,
|
|
90
|
+
placement: placement,
|
|
91
|
+
size: size,
|
|
92
|
+
tabIndex: -1,
|
|
93
|
+
id: idPrefix,
|
|
94
|
+
"aria-labelledby": titleId,
|
|
95
|
+
"aria-describedby": descriptionId,
|
|
96
|
+
ref: mergeRefs([sheetRef, ref])
|
|
97
|
+
}, props), React__default.createElement(StyledSheetWrapper, {
|
|
98
|
+
isOpen: isOpen,
|
|
99
|
+
isAnimated: isAnimated,
|
|
100
|
+
placement: placement,
|
|
101
|
+
size: size
|
|
102
|
+
}, children)));
|
|
103
|
+
});
|
|
104
|
+
SheetComponent.displayName = 'Sheet';
|
|
105
|
+
SheetComponent.propTypes = {
|
|
106
|
+
id: PropTypes.string,
|
|
107
|
+
isOpen: PropTypes.bool,
|
|
108
|
+
isAnimated: PropTypes.bool,
|
|
109
|
+
focusOnMount: PropTypes.bool,
|
|
110
|
+
restoreFocus: PropTypes.bool,
|
|
111
|
+
placement: PropTypes.oneOf(PLACEMENT),
|
|
112
|
+
size: PropTypes.string
|
|
113
|
+
};
|
|
114
|
+
SheetComponent.defaultProps = {
|
|
115
|
+
isAnimated: true,
|
|
116
|
+
placement: 'end',
|
|
117
|
+
size: '380px'
|
|
118
|
+
};
|
|
119
|
+
const Sheet = SheetComponent;
|
|
120
|
+
Sheet.Body = Body;
|
|
121
|
+
Sheet.Close = Close;
|
|
122
|
+
Sheet.Description = Description;
|
|
123
|
+
Sheet.Footer = Footer;
|
|
124
|
+
Sheet.FooterItem = FooterItem;
|
|
125
|
+
Sheet.Header = Header;
|
|
126
|
+
Sheet.Title = Title;
|
|
127
|
+
|
|
128
|
+
export { Sheet };
|