@carbon/react 1.28.0 → 1.29.0-rc.0

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 (39) hide show
  1. package/es/components/Checkbox/Checkbox.d.ts +2 -2
  2. package/es/components/Heading/index.d.ts +51 -0
  3. package/es/components/Heading/index.js +5 -9
  4. package/es/components/StructuredList/StructuredList.Skeleton.js +2 -10
  5. package/es/components/StructuredList/StructuredList.js +2 -2
  6. package/es/components/Theme/index.d.ts +62 -0
  7. package/es/components/Theme/index.js +4 -4
  8. package/es/components/UIShell/HeaderContainer.js +8 -0
  9. package/es/components/UIShell/HeaderMenuButton.d.ts +38 -0
  10. package/es/components/UIShell/HeaderMenuButton.js +7 -12
  11. package/es/components/UIShell/HeaderNavigation.d.ts +24 -0
  12. package/es/components/UIShell/HeaderNavigation.js +8 -13
  13. package/es/components/UIShell/HeaderSideNavItems.d.ts +33 -0
  14. package/es/components/UIShell/HeaderSideNavItems.js +4 -9
  15. package/es/components/UIShell/SideNav.d.ts +21 -0
  16. package/es/components/UIShell/SideNav.js +37 -38
  17. package/es/index.js +1 -1
  18. package/es/internal/useEvent.js +20 -1
  19. package/es/types/common.d.ts +11 -0
  20. package/lib/components/Checkbox/Checkbox.d.ts +2 -2
  21. package/lib/components/Heading/index.d.ts +51 -0
  22. package/lib/components/Heading/index.js +5 -9
  23. package/lib/components/StructuredList/StructuredList.Skeleton.js +2 -10
  24. package/lib/components/StructuredList/StructuredList.js +2 -2
  25. package/lib/components/Theme/index.d.ts +62 -0
  26. package/lib/components/Theme/index.js +4 -4
  27. package/lib/components/UIShell/HeaderContainer.js +8 -0
  28. package/lib/components/UIShell/HeaderMenuButton.d.ts +38 -0
  29. package/lib/components/UIShell/HeaderMenuButton.js +7 -12
  30. package/lib/components/UIShell/HeaderNavigation.d.ts +24 -0
  31. package/lib/components/UIShell/HeaderNavigation.js +7 -13
  32. package/lib/components/UIShell/HeaderSideNavItems.d.ts +33 -0
  33. package/lib/components/UIShell/HeaderSideNavItems.js +4 -9
  34. package/lib/components/UIShell/SideNav.d.ts +21 -0
  35. package/lib/components/UIShell/SideNav.js +36 -37
  36. package/lib/index.js +2 -2
  37. package/lib/internal/useEvent.js +20 -0
  38. package/lib/types/common.d.ts +11 -0
  39. package/package.json +4 -4
@@ -44,7 +44,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
44
44
  /**
45
45
  * Provide the text that is displayed when the Checkbox is in an invalid state
46
46
  */
47
- invalidText: React.ReactNode;
47
+ invalidText?: React.ReactNode;
48
48
  /**
49
49
  * Specify whether the Checkbox is currently invalid
50
50
  */
@@ -52,7 +52,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
52
52
  /**
53
53
  * Provide the text that is displayed when the Checkbox is in an invalid state
54
54
  */
55
- warnText: React.ReactNode;
55
+ warnText?: React.ReactNode;
56
56
  /**
57
57
  * Provide an optional handler that is called when the internal state of
58
58
  * Checkbox changes. This handler is called with event and state info.
@@ -0,0 +1,51 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import PropTypes from 'prop-types';
8
+ import { type ElementType } from 'react';
9
+ import type { PolymorphicProps } from '../../types/common';
10
+ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
11
+ type SectionBaseProps = {
12
+ level?: HeadingLevel;
13
+ };
14
+ type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
15
+ export declare function Section<E extends ElementType = 'section'>({ as: BaseComponent, level: levelOverride, ...rest }: SectionProps<E>): JSX.Element;
16
+ export declare namespace Section {
17
+ var propTypes: {
18
+ /**
19
+ * Provide an alternative tag or component to use instead of the default
20
+ * <section> element
21
+ */
22
+ as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
23
+ /**
24
+ * Specify the content that will be placed in the component
25
+ */
26
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
27
+ /**
28
+ * Specify a class name for the outermost node of the component
29
+ */
30
+ className: PropTypes.Requireable<string>;
31
+ /**
32
+ * Overrides the level of the section
33
+ */
34
+ level: PropTypes.Requireable<number>;
35
+ };
36
+ }
37
+ type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
38
+ export declare function Heading(props: HeadingProps): JSX.Element;
39
+ export declare namespace Heading {
40
+ var propTypes: {
41
+ /**
42
+ * Specify the content that will be placed in the component
43
+ */
44
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
45
+ /**
46
+ * Specify a class name for the outermost node of the component
47
+ */
48
+ className: PropTypes.Requireable<string>;
49
+ };
50
+ }
51
+ export {};
@@ -9,21 +9,19 @@ import PropTypes from 'prop-types';
9
9
  import React__default from 'react';
10
10
 
11
11
  const HeadingContext = /*#__PURE__*/React__default.createContext(1);
12
-
13
12
  function Section(_ref) {
14
13
  let {
15
14
  as: BaseComponent = 'section',
16
15
  level: levelOverride,
17
- children,
18
16
  ...rest
19
17
  } = _ref;
20
18
  const parentLevel = React__default.useContext(HeadingContext);
21
- const level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
19
+ const level = levelOverride ?? parentLevel + 1;
20
+ const BaseComponentAsAny = BaseComponent;
22
21
  return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
23
22
  value: Math.min(level, 6)
24
- }, /*#__PURE__*/React__default.createElement(BaseComponent, rest, children));
23
+ }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, rest));
25
24
  }
26
-
27
25
  Section.propTypes = {
28
26
  /**
29
27
  * Provide an alternative tag or component to use instead of the default
@@ -46,12 +44,10 @@ Section.propTypes = {
46
44
  */
47
45
  level: PropTypes.number
48
46
  };
49
-
50
47
  function Heading(props) {
51
- const level = React__default.useContext(HeadingContext);
52
- return /*#__PURE__*/React__default.createElement(`h${level}`, props);
48
+ const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
49
+ return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, props);
53
50
  }
54
-
55
51
  Heading.propTypes = {
56
52
  /**
57
53
  * Specify the content that will be placed in the component
@@ -16,15 +16,13 @@ var _span, _span2, _span3;
16
16
  const StructuredListSkeleton = _ref => {
17
17
  let {
18
18
  rowCount,
19
- border,
20
19
  className,
21
20
  ...rest
22
21
  } = _ref;
23
22
  const prefix = usePrefix();
24
23
  const StructuredListSkeletonClasses = cx(className, {
25
24
  [`${prefix}--skeleton`]: true,
26
- [`${prefix}--structured-list`]: true,
27
- [`${prefix}--structured-list--border`]: border
25
+ [`${prefix}--structured-list`]: true
28
26
  });
29
27
  const rows = [];
30
28
 
@@ -59,11 +57,6 @@ const StructuredListSkeleton = _ref => {
59
57
  };
60
58
 
61
59
  StructuredListSkeleton.propTypes = {
62
- /**
63
- * Specify whether a border should be added to your StructuredListSkeleton
64
- */
65
- border: PropTypes.bool,
66
-
67
60
  /**
68
61
  * Specify an optional className to add.
69
62
  */
@@ -75,8 +68,7 @@ StructuredListSkeleton.propTypes = {
75
68
  rowCount: PropTypes.number
76
69
  };
77
70
  StructuredListSkeleton.defaultProps = {
78
- rowCount: 5,
79
- border: false
71
+ rowCount: 5
80
72
  };
81
73
  var StructuredListSkeleton$1 = StructuredListSkeleton;
82
74
 
@@ -30,7 +30,7 @@ function StructuredListWrapper(props) {
30
30
  const classes = cx(`${prefix}--structured-list`, className, {
31
31
  [`${prefix}--structured-list--selection`]: selection,
32
32
  [`${prefix}--structured-list--condensed`]: isCondensed,
33
- [`${prefix}--structured-list--flush`]: isFlush
33
+ [`${prefix}--structured-list--flush`]: isFlush && !selection
34
34
  });
35
35
  const [selectedRow, setSelectedRow] = React__default.useState(null);
36
36
  return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
@@ -72,7 +72,7 @@ StructuredListWrapper.propTypes = {
72
72
  isCondensed: PropTypes.bool,
73
73
 
74
74
  /**
75
- * Specify if structured list is flush, default is false
75
+ * Specify if structured list is flush, not valid for selection variant, default is false
76
76
  */
77
77
  isFlush: PropTypes.bool,
78
78
 
@@ -0,0 +1,62 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import PropTypes from 'prop-types';
8
+ import React, { ElementType, type PropsWithChildren } from 'react';
9
+ import { PolymorphicProps } from '../../types/common';
10
+ interface GlobalThemeProps {
11
+ theme?: 'white' | 'g10' | 'g90' | 'g100';
12
+ }
13
+ export declare const ThemeContext: React.Context<GlobalThemeProps>;
14
+ export declare function GlobalTheme({ children, theme, }: PropsWithChildren<GlobalThemeProps>): JSX.Element;
15
+ export declare namespace GlobalTheme {
16
+ var propTypes: {
17
+ /**
18
+ * Provide child elements to be rendered inside of `GlobalTheme`, this is
19
+ * typically the root of your app
20
+ */
21
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
22
+ /**
23
+ * Specify the global theme for your app
24
+ */
25
+ theme: PropTypes.Requireable<string>;
26
+ };
27
+ }
28
+ type ThemeBaseProps = GlobalThemeProps & {
29
+ className?: string;
30
+ };
31
+ type ThemeProps<E extends ElementType> = PolymorphicProps<E, ThemeBaseProps>;
32
+ /**
33
+ * Specify the theme to be applied to a page, or a region in a page
34
+ */
35
+ export declare function Theme<E extends ElementType = 'div'>({ as: BaseComponent, className: customClassName, theme, ...rest }: ThemeProps<E>): JSX.Element;
36
+ export declare namespace Theme {
37
+ var propTypes: {
38
+ /**
39
+ * Specify a custom component or element to be rendered as the top-level
40
+ * element in the component
41
+ */
42
+ as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
43
+ /**
44
+ * Provide child elements to be rendered inside of `Theme`
45
+ */
46
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
47
+ /**
48
+ * Provide a custom class name to be used on the outermost element rendered by
49
+ * the component
50
+ */
51
+ className: PropTypes.Requireable<string>;
52
+ /**
53
+ * Specify the theme
54
+ */
55
+ theme: PropTypes.Requireable<string>;
56
+ };
57
+ }
58
+ /**
59
+ * Get access to the current theme
60
+ */
61
+ export declare function useTheme(): GlobalThemeProps;
62
+ export {};
@@ -41,14 +41,13 @@ GlobalTheme.propTypes = {
41
41
  */
42
42
  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100'])
43
43
  };
44
+
44
45
  /**
45
46
  * Specify the theme to be applied to a page, or a region in a page
46
47
  */
47
-
48
48
  function Theme(_ref2) {
49
49
  let {
50
50
  as: BaseComponent = 'div',
51
- children,
52
51
  className: customClassName,
53
52
  theme,
54
53
  ...rest
@@ -66,13 +65,14 @@ function Theme(_ref2) {
66
65
  theme
67
66
  };
68
67
  }, [theme]);
68
+ const BaseComponentAsAny = BaseComponent;
69
69
  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
70
70
  value: value
71
71
  }, /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
72
72
  value: 1
73
- }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
73
+ }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
74
74
  className: className
75
- }), children)));
75
+ }))));
76
76
  }
77
77
  Theme.propTypes = {
78
78
  /**
@@ -7,6 +7,9 @@
7
7
 
8
8
  import PropTypes from 'prop-types';
9
9
  import React__default, { useState, useCallback } from 'react';
10
+ import { useEvent } from '../../internal/useEvent.js';
11
+ import { match } from '../../internal/keyboard/match.js';
12
+ import { Escape } from '../../internal/keyboard/keys.js';
10
13
 
11
14
  const HeaderContainer = _ref => {
12
15
  let {
@@ -15,6 +18,11 @@ const HeaderContainer = _ref => {
15
18
  } = _ref;
16
19
  //state for expandable sidenav
17
20
  const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
21
+ useEvent(window, 'keydown', event => {
22
+ if (match(event, Escape)) {
23
+ setIsSideNavExpandedState(false);
24
+ }
25
+ });
18
26
  const handleHeaderMenuButtonClick = useCallback(() => {
19
27
  setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
20
28
  }, [setIsSideNavExpandedState]);
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { type ComponentProps } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
10
+ interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
11
+ 'aria-label'?: string;
12
+ 'aria-labelledby'?: string;
13
+ className?: string;
14
+ renderMenuIcon?: JSX.Element;
15
+ renderCloseIcon?: JSX.Element;
16
+ isActive?: boolean;
17
+ isCollapsible?: boolean;
18
+ }
19
+ declare function HeaderMenuButton({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className: customClassName, renderMenuIcon, renderCloseIcon, isActive, isCollapsible, ...rest }: HeaderMenuButtonProps): JSX.Element;
20
+ declare namespace HeaderMenuButton {
21
+ var propTypes: {
22
+ /**
23
+ * Optionally provide a custom class name that is applied to the underlying
24
+ * button
25
+ */
26
+ className: PropTypes.Requireable<string>;
27
+ /**
28
+ * Specify whether the menu button is "active".
29
+ */
30
+ isActive: PropTypes.Requireable<boolean>;
31
+ /**
32
+ * Optionally provide an onClick handler that is called when the underlying
33
+ * button fires it's onclick event
34
+ */
35
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
36
+ };
37
+ }
38
+ export default HeaderMenuButton;
@@ -14,7 +14,6 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
14
14
  import { usePrefix } from '../../internal/usePrefix.js';
15
15
 
16
16
  var _Menu, _Close;
17
-
18
17
  function HeaderMenuButton(_ref) {
19
18
  let {
20
19
  'aria-label': ariaLabel,
@@ -22,38 +21,34 @@ function HeaderMenuButton(_ref) {
22
21
  className: customClassName,
23
22
  renderMenuIcon,
24
23
  renderCloseIcon,
25
- onClick,
26
24
  isActive,
27
25
  isCollapsible,
28
26
  ...rest
29
27
  } = _ref;
30
28
  const prefix = usePrefix();
31
- const className = cx({
32
- [customClassName]: !!customClassName,
29
+ const className = cx({ ...(typeof customClassName === 'string' && {
30
+ [customClassName]: !!customClassName
31
+ }),
33
32
  [`${prefix}--header__action`]: true,
34
33
  [`${prefix}--header__menu-trigger`]: true,
35
34
  [`${prefix}--header__action--active`]: isActive,
36
35
  [`${prefix}--header__menu-toggle`]: true,
37
36
  [`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
38
37
  });
39
- const accessibilityLabel = {
40
- 'aria-label': ariaLabel,
41
- 'aria-labelledby': ariaLabelledBy
42
- };
43
38
  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default.createElement(Menu, {
44
39
  size: 20
45
40
  }));
46
41
  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
47
42
  size: 20
48
43
  }));
49
- return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, accessibilityLabel, {
44
+ return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
45
+ "aria-label": ariaLabel,
46
+ "aria-labelledby": ariaLabelledBy,
50
47
  className: className,
51
48
  title: ariaLabel,
52
- type: "button",
53
- onClick: onClick
49
+ type: "button"
54
50
  }), isActive ? closeIcon : menuIcon);
55
51
  }
56
-
57
52
  HeaderMenuButton.propTypes = {
58
53
  /**
59
54
  * Required props for accessibility label on the underlying menu button
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { type ComponentProps } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ type HeaderNavigationProps = ComponentProps<'nav'>;
10
+ declare function HeaderNavigation({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className: customClassName, ...rest }: HeaderNavigationProps): JSX.Element;
11
+ declare namespace HeaderNavigation {
12
+ var propTypes: {
13
+ /**
14
+ * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
15
+ * or `HeaderMenu`
16
+ */
17
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
18
+ /**
19
+ * Optionally provide a custom class to apply to the underlying <nav> node
20
+ */
21
+ className: PropTypes.Requireable<string>;
22
+ };
23
+ }
24
+ export default HeaderNavigation;
@@ -12,29 +12,24 @@ import PropTypes from 'prop-types';
12
12
  import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
13
13
  import { usePrefix } from '../../internal/usePrefix.js';
14
14
 
15
- function HeaderNavigation(props) {
16
- const {
15
+ function HeaderNavigation(_ref) {
16
+ let {
17
17
  'aria-label': ariaLabel,
18
18
  'aria-labelledby': ariaLabelledBy,
19
19
  children,
20
20
  className: customClassName,
21
21
  ...rest
22
- } = props;
22
+ } = _ref;
23
23
  const prefix = usePrefix();
24
- const className = cx(`${prefix}--header__nav`, customClassName); // Assign both label strategies in this option, only one should be defined
25
- // so when we spread that should be the one that is applied to the node
26
-
27
- const accessibilityLabel = {
28
- 'aria-label': ariaLabel,
29
- 'aria-labelledby': ariaLabelledBy
30
- };
31
- return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
24
+ const className = cx(`${prefix}--header__nav`, customClassName);
25
+ return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, {
26
+ "aria-label": ariaLabel,
27
+ "aria-labelledby": ariaLabelledBy,
32
28
  className: className
33
29
  }), /*#__PURE__*/React__default.createElement("ul", {
34
30
  className: `${prefix}--header__menu-bar`
35
31
  }, children));
36
32
  }
37
-
38
33
  HeaderNavigation.propTypes = {
39
34
  /**
40
35
  * Required props for accessibility label on the underlying menu
@@ -53,4 +48,4 @@ HeaderNavigation.propTypes = {
53
48
  className: PropTypes.string
54
49
  };
55
50
 
56
- export { HeaderNavigation, HeaderNavigation as default };
51
+ export { HeaderNavigation as default };
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { type ReactNode } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ interface HeaderSideNavItemsProps {
10
+ className?: string | undefined;
11
+ children?: ReactNode;
12
+ hasDivider?: boolean | undefined;
13
+ }
14
+ declare function HeaderSideNavItems({ className: customClassName, children, hasDivider, }: HeaderSideNavItemsProps): JSX.Element;
15
+ declare namespace HeaderSideNavItems {
16
+ var propTypes: {
17
+ /**
18
+ * The child nodes to be rendered
19
+ */
20
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
21
+ /**
22
+ * Optionally provide a custom class name that is applied to the underlying
23
+ * button
24
+ */
25
+ className: PropTypes.Requireable<string>;
26
+ /**
27
+ * Optionally specify if container will have a bottom divider to differentiate
28
+ * between original sidenav items and header menu items. False by default.
29
+ */
30
+ hasDivider: PropTypes.Requireable<boolean>;
31
+ };
32
+ }
33
+ export default HeaderSideNavItems;
@@ -10,11 +10,11 @@ import React__default from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import { usePrefix } from '../../internal/usePrefix.js';
12
12
 
13
- const HeaderSideNavItems = _ref => {
13
+ function HeaderSideNavItems(_ref) {
14
14
  let {
15
15
  className: customClassName,
16
16
  children,
17
- hasDivider
17
+ hasDivider = false
18
18
  } = _ref;
19
19
  const prefix = usePrefix();
20
20
  const className = cx({
@@ -24,8 +24,7 @@ const HeaderSideNavItems = _ref => {
24
24
  return /*#__PURE__*/React__default.createElement("ul", {
25
25
  className: className
26
26
  }, children);
27
- };
28
-
27
+ }
29
28
  HeaderSideNavItems.propTypes = {
30
29
  /**
31
30
  * The child nodes to be rendered
@@ -44,9 +43,5 @@ HeaderSideNavItems.propTypes = {
44
43
  */
45
44
  hasDivider: PropTypes.bool
46
45
  };
47
- HeaderSideNavItems.defaultProps = {
48
- hasDivider: false
49
- };
50
- var HeaderSideNavItems$1 = HeaderSideNavItems;
51
46
 
52
- export { HeaderSideNavItems$1 as default };
47
+ export { HeaderSideNavItems as default };
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
8
+ interface SideNavProps extends ComponentProps<'nav'> {
9
+ expanded?: boolean | undefined;
10
+ defaultExpanded?: boolean | undefined;
11
+ isChildOfHeader?: boolean | undefined;
12
+ onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void | undefined;
13
+ isFixedNav?: boolean | undefined;
14
+ isRail?: boolean | undefined;
15
+ isPersistent?: boolean | undefined;
16
+ addFocusListeners?: boolean | undefined;
17
+ addMouseListeners?: boolean | undefined;
18
+ onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
19
+ }
20
+ declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "className" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "expanded" | "defaultExpanded" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addFocusListeners" | "addMouseListeners" | "onOverlayClick"> & React.RefAttributes<HTMLElement>>;
21
+ export default SideNav;