@zendeskgarden/react-chrome 9.0.0-next.6 → 9.0.0-next.8

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.
Files changed (94) hide show
  1. package/README.md +13 -10
  2. package/dist/esm/elements/Chrome.js +94 -0
  3. package/dist/esm/elements/SkipNav.js +65 -0
  4. package/dist/esm/elements/body/Body.js +57 -0
  5. package/dist/esm/elements/body/Content.js +54 -0
  6. package/dist/esm/elements/body/Main.js +47 -0
  7. package/dist/esm/elements/footer/Footer.js +67 -0
  8. package/dist/esm/elements/footer/FooterItem.js +47 -0
  9. package/dist/esm/elements/header/Header.js +60 -0
  10. package/dist/esm/elements/header/HeaderItem.js +69 -0
  11. package/dist/esm/elements/header/HeaderItemIcon.js +66 -0
  12. package/dist/esm/elements/header/HeaderItemText.js +51 -0
  13. package/dist/esm/elements/header/HeaderItemWrapper.js +47 -0
  14. package/dist/esm/elements/nav/Nav.js +78 -0
  15. package/dist/esm/elements/nav/NavItem.js +101 -0
  16. package/dist/esm/elements/nav/NavItemIcon.js +66 -0
  17. package/dist/esm/elements/nav/NavItemText.js +58 -0
  18. package/dist/esm/elements/nav/NavList.js +55 -0
  19. package/dist/esm/elements/sheet/Sheet.js +128 -0
  20. package/dist/esm/elements/sheet/components/Body.js +50 -0
  21. package/dist/esm/elements/sheet/components/Close.js +60 -0
  22. package/dist/esm/elements/sheet/components/Description.js +59 -0
  23. package/dist/esm/elements/sheet/components/Footer.js +50 -0
  24. package/dist/esm/elements/sheet/components/FooterItem.js +50 -0
  25. package/dist/esm/elements/sheet/components/Header.js +55 -0
  26. package/dist/esm/elements/sheet/components/Title.js +59 -0
  27. package/dist/esm/index.js +24 -0
  28. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js +25 -0
  29. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
  30. package/dist/esm/styled/StyledChrome.js +22 -0
  31. package/dist/esm/styled/StyledSkipNav.js +46 -0
  32. package/dist/esm/styled/StyledSkipNavIcon.js +28 -0
  33. package/dist/esm/styled/body/StyledBody.js +22 -0
  34. package/dist/esm/styled/body/StyledContent.js +25 -0
  35. package/dist/esm/styled/body/StyledMain.js +22 -0
  36. package/dist/esm/styled/footer/StyledFooter.js +25 -0
  37. package/dist/esm/styled/footer/StyledFooterItem.js +22 -0
  38. package/dist/esm/styled/header/StyledBaseHeaderItem.js +35 -0
  39. package/dist/esm/styled/header/StyledHeader.js +31 -0
  40. package/dist/esm/styled/header/StyledHeaderItem.js +37 -0
  41. package/dist/esm/styled/header/StyledHeaderItemIcon.js +22 -0
  42. package/dist/esm/styled/header/StyledHeaderItemText.js +23 -0
  43. package/dist/esm/styled/header/StyledHeaderItemWrapper.js +24 -0
  44. package/dist/esm/styled/header/StyledLogoHeaderItem.js +47 -0
  45. package/dist/esm/styled/nav/StyledBaseNavItem.js +32 -0
  46. package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +23 -0
  47. package/dist/esm/styled/nav/StyledLogoNavItem.js +48 -0
  48. package/dist/esm/styled/nav/StyledNav.js +34 -0
  49. package/dist/esm/styled/nav/StyledNavButton.js +65 -0
  50. package/dist/esm/styled/nav/StyledNavItemIcon.js +22 -0
  51. package/dist/esm/styled/nav/StyledNavItemText.js +34 -0
  52. package/dist/esm/styled/nav/StyledNavList.js +22 -0
  53. package/dist/esm/styled/nav/StyledNavListItem.js +22 -0
  54. package/dist/esm/styled/sheet/StyledSheet.js +41 -0
  55. package/dist/esm/styled/sheet/StyledSheetBody.js +22 -0
  56. package/dist/esm/styled/sheet/StyledSheetClose.js +34 -0
  57. package/dist/esm/styled/sheet/StyledSheetDescription.js +22 -0
  58. package/dist/esm/styled/sheet/StyledSheetFooter.js +22 -0
  59. package/dist/esm/styled/sheet/StyledSheetFooterItem.js +22 -0
  60. package/dist/esm/styled/sheet/StyledSheetHeader.js +23 -0
  61. package/dist/esm/styled/sheet/StyledSheetTitle.js +22 -0
  62. package/dist/esm/styled/sheet/StyledSheetWrapper.js +37 -0
  63. package/dist/esm/types/index.js +10 -0
  64. package/dist/esm/utils/useBodyContext.js +14 -0
  65. package/dist/esm/utils/useChromeContext.js +16 -0
  66. package/dist/esm/utils/useFocusableMount.js +31 -0
  67. package/dist/esm/utils/useNavContext.js +16 -0
  68. package/dist/esm/utils/useNavListContext.js +14 -0
  69. package/dist/esm/utils/useSheetContext.js +16 -0
  70. package/dist/index.cjs.js +209 -471
  71. package/dist/typings/elements/nav/Nav.d.ts +2 -0
  72. package/dist/typings/elements/{body/Sidebar.d.ts → nav/NavList.d.ts} +2 -2
  73. package/dist/typings/index.d.ts +1 -6
  74. package/dist/typings/styled/index.d.ts +3 -8
  75. package/dist/typings/styled/nav/StyledBaseNavItem.d.ts +1 -5
  76. package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts +4 -5
  77. package/dist/typings/styled/nav/StyledLogoNavItem.d.ts +4 -5
  78. package/dist/typings/styled/nav/{StyledNavItem.d.ts → StyledNavButton.d.ts} +3 -1
  79. package/dist/typings/styled/{body/StyledSidebar.d.ts → nav/StyledNavList.d.ts} +1 -1
  80. package/dist/typings/styled/nav/StyledNavListItem.d.ts +10 -0
  81. package/dist/typings/types/index.d.ts +1 -24
  82. package/dist/typings/utils/useNavListContext.d.ts +13 -0
  83. package/package.json +5 -7
  84. package/dist/index.esm.js +0 -1473
  85. package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +0 -14
  86. package/dist/typings/elements/subnav/SubNav.d.ts +0 -19
  87. package/dist/typings/elements/subnav/SubNavItem.d.ts +0 -14
  88. package/dist/typings/elements/subnav/SubNavItemText.d.ts +0 -14
  89. package/dist/typings/styled/subnav/StyledSubNav.d.ts +0 -17
  90. package/dist/typings/styled/subnav/StyledSubNavItem.d.ts +0 -21
  91. package/dist/typings/styled/subnav/StyledSubNavItemHeader.d.ts +0 -14
  92. package/dist/typings/styled/subnav/StyledSubNavItemIcon.d.ts +0 -14
  93. package/dist/typings/styled/subnav/StyledSubNavItemText.d.ts +0 -11
  94. 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.8'}`), [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 };