@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.
- package/es/components/Checkbox/Checkbox.d.ts +2 -2
- package/es/components/Heading/index.d.ts +51 -0
- package/es/components/Heading/index.js +5 -9
- package/es/components/StructuredList/StructuredList.Skeleton.js +2 -10
- package/es/components/StructuredList/StructuredList.js +2 -2
- package/es/components/Theme/index.d.ts +62 -0
- package/es/components/Theme/index.js +4 -4
- package/es/components/UIShell/HeaderContainer.js +8 -0
- package/es/components/UIShell/HeaderMenuButton.d.ts +38 -0
- package/es/components/UIShell/HeaderMenuButton.js +7 -12
- package/es/components/UIShell/HeaderNavigation.d.ts +24 -0
- package/es/components/UIShell/HeaderNavigation.js +8 -13
- package/es/components/UIShell/HeaderSideNavItems.d.ts +33 -0
- package/es/components/UIShell/HeaderSideNavItems.js +4 -9
- package/es/components/UIShell/SideNav.d.ts +21 -0
- package/es/components/UIShell/SideNav.js +37 -38
- package/es/index.js +1 -1
- package/es/internal/useEvent.js +20 -1
- package/es/types/common.d.ts +11 -0
- package/lib/components/Checkbox/Checkbox.d.ts +2 -2
- package/lib/components/Heading/index.d.ts +51 -0
- package/lib/components/Heading/index.js +5 -9
- package/lib/components/StructuredList/StructuredList.Skeleton.js +2 -10
- package/lib/components/StructuredList/StructuredList.js +2 -2
- package/lib/components/Theme/index.d.ts +62 -0
- package/lib/components/Theme/index.js +4 -4
- package/lib/components/UIShell/HeaderContainer.js +8 -0
- package/lib/components/UIShell/HeaderMenuButton.d.ts +38 -0
- package/lib/components/UIShell/HeaderMenuButton.js +7 -12
- package/lib/components/UIShell/HeaderNavigation.d.ts +24 -0
- package/lib/components/UIShell/HeaderNavigation.js +7 -13
- package/lib/components/UIShell/HeaderSideNavItems.d.ts +33 -0
- package/lib/components/UIShell/HeaderSideNavItems.js +4 -9
- package/lib/components/UIShell/SideNav.d.ts +21 -0
- package/lib/components/UIShell/SideNav.js +36 -37
- package/lib/index.js +2 -2
- package/lib/internal/useEvent.js +20 -0
- package/lib/types/common.d.ts +11 -0
- 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
|
|
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
|
|
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 =
|
|
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(
|
|
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
|
|
52
|
-
return /*#__PURE__*/React__default.createElement(
|
|
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(
|
|
73
|
+
}, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
|
|
74
74
|
className: className
|
|
75
|
-
})
|
|
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
|
-
|
|
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,
|
|
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(
|
|
16
|
-
|
|
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
|
-
} =
|
|
22
|
+
} = _ref;
|
|
23
23
|
const prefix = usePrefix();
|
|
24
|
-
const className = cx(`${prefix}--header__nav`, customClassName);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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;
|