@neo4j-ndl/react 2.8.11 → 2.8.12
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/CHANGELOG.md +9 -0
- package/lib/cjs/side-navigation/SideNavigation.js +19 -9
- package/lib/cjs/side-navigation/SideNavigation.js.map +1 -1
- package/lib/esm/side-navigation/SideNavigation.js +19 -9
- package/lib/esm/side-navigation/SideNavigation.js.map +1 -1
- package/lib/types/side-navigation/SideNavigation.d.ts +3 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 2.8.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#759](https://github.com/neo4j/needle/pull/759) [`01e99da7382862b24e90f4fc3a649cdb2d1e3e94`](https://github.com/neo4j/needle/commit/01e99da7382862b24e90f4fc3a649cdb2d1e3e94) Thanks [@basickarl](https://github.com/basickarl)! - Added small size variant to side navigation component
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`01e99da7382862b24e90f4fc3a649cdb2d1e3e94`](https://github.com/neo4j/needle/commit/01e99da7382862b24e90f4fc3a649cdb2d1e3e94)]:
|
|
10
|
+
- @neo4j-ndl/base@2.7.8
|
|
11
|
+
|
|
3
12
|
## 2.8.11
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -46,7 +46,9 @@ const getExpandIconName = (position, expanded) => {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const SideNavigationComponent = (0, react_1.forwardRef)(function SideNavigationComponent(_a, ref) {
|
|
49
|
-
var { expanded, children, className, onExpandedChange, iconMenu = false, position = 'left' } = _a, restProps = __rest(_a, ["expanded", "children", "className", "onExpandedChange", "iconMenu", "position"]);
|
|
49
|
+
var { expanded, children, className, onExpandedChange, iconMenu = false, position = 'left', size: defaultSize = 'small' } = _a, restProps = __rest(_a, ["expanded", "children", "className", "onExpandedChange", "iconMenu", "position", "size"]);
|
|
50
|
+
// Typescript unable to infer the default value correctly in the parameter.
|
|
51
|
+
const size = defaultSize;
|
|
50
52
|
const setOnExpandedChange = (0, react_1.useCallback)(() => {
|
|
51
53
|
if (onExpandedChange !== undefined) {
|
|
52
54
|
onExpandedChange(!expanded);
|
|
@@ -54,14 +56,15 @@ const SideNavigationComponent = (0, react_1.forwardRef)(function SideNavigationC
|
|
|
54
56
|
}, [expanded, onExpandedChange]);
|
|
55
57
|
const classes = (0, defaultImports_1.classNames)('ndl-side-navigation', className, {
|
|
56
58
|
'ndl-expanded': expanded,
|
|
59
|
+
'ndl-side-navigation-minimized-small': !expanded && size === 'small',
|
|
57
60
|
[`ndl-${position}`]: position,
|
|
58
61
|
});
|
|
59
62
|
const icon = getExpandIconName(position, expanded);
|
|
60
|
-
return ((0, jsx_runtime_1.jsx)(SideNavigationContext.Provider, { value: { expanded, iconMenu }, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, restProps, { className: classes, ref: ref }, (!expanded &&
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)(SideNavigationContext.Provider, { value: { expanded, iconMenu, size }, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, restProps, { className: classes, ref: ref }, (!expanded &&
|
|
61
64
|
!iconMenu && {
|
|
62
65
|
'aria-label': 'open-side-navigation',
|
|
63
66
|
onClick: setOnExpandedChange,
|
|
64
|
-
}), { children: [(0, jsx_runtime_1.jsx)("nav", { className: "ndl-side-navigation-nav", children: children }), onExpandedChange !== undefined && ((0, jsx_runtime_1.jsx)(button_1.IconButton, { className: "ndl-side-navigation-drawer-button", onClick: setOnExpandedChange, "aria-label": expanded ? 'collapse-navigation' : 'expand-navigation', size:
|
|
67
|
+
}), { children: [(0, jsx_runtime_1.jsx)("nav", { className: "ndl-side-navigation-nav", children: children }), onExpandedChange !== undefined && ((0, jsx_runtime_1.jsx)(button_1.IconButton, { className: "ndl-side-navigation-drawer-button", onClick: setOnExpandedChange, "aria-label": expanded ? 'collapse-navigation' : 'expand-navigation', size: size === 'small' ? 'medium' : 'large', "data-testid": "ndl-side-nav-expand-btn", title: `${expanded ? 'Collapse' : 'Expand'} side navigation`, clean: true, children: icon }))] })) }));
|
|
65
68
|
});
|
|
66
69
|
SideNavigationComponent.displayName = 'SideNavigation';
|
|
67
70
|
const SideNavigationContext = (0, react_1.createContext)(null);
|
|
@@ -75,13 +78,14 @@ const SideNavigationList = (0, react_1.forwardRef)(function SideNavigationList(_
|
|
|
75
78
|
const { level } = (_b = useSideNavigationListContext()) !== null && _b !== void 0 ? _b : {
|
|
76
79
|
level: -1,
|
|
77
80
|
};
|
|
78
|
-
const { expanded, iconMenu } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
81
|
+
const { expanded, iconMenu, size } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
79
82
|
expanded: true,
|
|
80
83
|
iconMenu: false,
|
|
84
|
+
size: 'small',
|
|
81
85
|
};
|
|
82
86
|
if (!expanded && !iconMenu)
|
|
83
87
|
return null;
|
|
84
|
-
return ((0, jsx_runtime_1.jsx)(SideNavigationListContext.Provider, { value: { level: level + 1 }, children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: classes, ref: ref }, restProps, { children: children })) }));
|
|
88
|
+
return ((0, jsx_runtime_1.jsx)(SideNavigationListContext.Provider, { value: { level: level + 1, size }, children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: classes, ref: ref }, restProps, { children: children })) }));
|
|
85
89
|
});
|
|
86
90
|
SideNavigationList.displayName = 'SideNavigation.List';
|
|
87
91
|
const SideNavigationItem = (0, react_1.forwardRef)(function SideNavigationItem(_a, ref) {
|
|
@@ -89,13 +93,16 @@ const SideNavigationItem = (0, react_1.forwardRef)(function SideNavigationItem(_
|
|
|
89
93
|
var { className, children, icon, as, selected = false, selectable = true, style = {} } = _a, restProps = __rest(_a, ["className", "children", "icon", "as", "selected", "selectable", "style"]);
|
|
90
94
|
const Component = as || 'a';
|
|
91
95
|
const { level } = (_b = useSideNavigationListContext()) !== null && _b !== void 0 ? _b : { level: 0 };
|
|
92
|
-
const { expanded, iconMenu } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
96
|
+
const { expanded, iconMenu, size } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
93
97
|
expanded: true,
|
|
94
98
|
iconMenu: false,
|
|
99
|
+
size: 'small',
|
|
95
100
|
};
|
|
96
101
|
const defaultIndent = level ? 0 : 12;
|
|
97
102
|
const indent = expanded ? defaultIndent + level * 32 : 0;
|
|
98
|
-
const itemClasses = (0, defaultImports_1.classNames)(
|
|
103
|
+
const itemClasses = (0, defaultImports_1.classNames)(className, {
|
|
104
|
+
'ndl-side-navigation-nav-item': size === 'large',
|
|
105
|
+
'ndl-side-navigation-nav-item-small': size === 'small',
|
|
99
106
|
'ndl-expanded': expanded,
|
|
100
107
|
});
|
|
101
108
|
const innerClasses = (0, defaultImports_1.classNames)('ndl-side-navigation-inner-item', {
|
|
@@ -117,11 +124,14 @@ const SideNavigationGroupHeader = (0, react_1.forwardRef)(function SideNavigatio
|
|
|
117
124
|
var _b;
|
|
118
125
|
var { children, className, as, style } = _a, restProps = __rest(_a, ["children", "className", "as", "style"]);
|
|
119
126
|
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
120
|
-
const { expanded, iconMenu } = (_b = useSideNavigationContext()) !== null && _b !== void 0 ? _b : {
|
|
127
|
+
const { expanded, iconMenu, size } = (_b = useSideNavigationContext()) !== null && _b !== void 0 ? _b : {
|
|
121
128
|
expanded: true,
|
|
122
129
|
iconMenu: false,
|
|
123
130
|
};
|
|
124
|
-
const classes = (0, defaultImports_1.classNames)(
|
|
131
|
+
const classes = (0, defaultImports_1.classNames)(className, {
|
|
132
|
+
'ndl-side-navigation-nav-item': size === 'large',
|
|
133
|
+
'ndl-side-navigation-nav-item-small': size === 'small',
|
|
134
|
+
});
|
|
125
135
|
const indent = expanded ? '12px' : '0';
|
|
126
136
|
return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: classes, role: "presentation", style: Object.assign({ paddingLeft: indent }, style) }, restProps, { children: (0, jsx_runtime_1.jsxs)(Component, { className: "ndl-side-navigation-inner-item ndl-side-navigation-group-header", ref: ref, children: [!expanded && iconMenu && (0, jsx_runtime_1.jsx)(Divider, {}), expanded && children] }) })));
|
|
127
137
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,9 @@ const getExpandIconName = (position, expanded) => {
|
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
const SideNavigationComponent = forwardRef(function SideNavigationComponent(_a, ref) {
|
|
46
|
-
var { expanded, children, className, onExpandedChange, iconMenu = false, position = 'left' } = _a, restProps = __rest(_a, ["expanded", "children", "className", "onExpandedChange", "iconMenu", "position"]);
|
|
46
|
+
var { expanded, children, className, onExpandedChange, iconMenu = false, position = 'left', size: defaultSize = 'small' } = _a, restProps = __rest(_a, ["expanded", "children", "className", "onExpandedChange", "iconMenu", "position", "size"]);
|
|
47
|
+
// Typescript unable to infer the default value correctly in the parameter.
|
|
48
|
+
const size = defaultSize;
|
|
47
49
|
const setOnExpandedChange = useCallback(() => {
|
|
48
50
|
if (onExpandedChange !== undefined) {
|
|
49
51
|
onExpandedChange(!expanded);
|
|
@@ -51,14 +53,15 @@ const SideNavigationComponent = forwardRef(function SideNavigationComponent(_a,
|
|
|
51
53
|
}, [expanded, onExpandedChange]);
|
|
52
54
|
const classes = classNames('ndl-side-navigation', className, {
|
|
53
55
|
'ndl-expanded': expanded,
|
|
56
|
+
'ndl-side-navigation-minimized-small': !expanded && size === 'small',
|
|
54
57
|
[`ndl-${position}`]: position,
|
|
55
58
|
});
|
|
56
59
|
const icon = getExpandIconName(position, expanded);
|
|
57
|
-
return (_jsx(SideNavigationContext.Provider, { value: { expanded, iconMenu }, children: _jsxs("div", Object.assign({}, restProps, { className: classes, ref: ref }, (!expanded &&
|
|
60
|
+
return (_jsx(SideNavigationContext.Provider, { value: { expanded, iconMenu, size }, children: _jsxs("div", Object.assign({}, restProps, { className: classes, ref: ref }, (!expanded &&
|
|
58
61
|
!iconMenu && {
|
|
59
62
|
'aria-label': 'open-side-navigation',
|
|
60
63
|
onClick: setOnExpandedChange,
|
|
61
|
-
}), { children: [_jsx("nav", { className: "ndl-side-navigation-nav", children: children }), onExpandedChange !== undefined && (_jsx(IconButton, { className: "ndl-side-navigation-drawer-button", onClick: setOnExpandedChange, "aria-label": expanded ? 'collapse-navigation' : 'expand-navigation', size:
|
|
64
|
+
}), { children: [_jsx("nav", { className: "ndl-side-navigation-nav", children: children }), onExpandedChange !== undefined && (_jsx(IconButton, { className: "ndl-side-navigation-drawer-button", onClick: setOnExpandedChange, "aria-label": expanded ? 'collapse-navigation' : 'expand-navigation', size: size === 'small' ? 'medium' : 'large', "data-testid": "ndl-side-nav-expand-btn", title: `${expanded ? 'Collapse' : 'Expand'} side navigation`, clean: true, children: icon }))] })) }));
|
|
62
65
|
});
|
|
63
66
|
SideNavigationComponent.displayName = 'SideNavigation';
|
|
64
67
|
const SideNavigationContext = createContext(null);
|
|
@@ -72,13 +75,14 @@ const SideNavigationList = forwardRef(function SideNavigationList(_a, ref) {
|
|
|
72
75
|
const { level } = (_b = useSideNavigationListContext()) !== null && _b !== void 0 ? _b : {
|
|
73
76
|
level: -1,
|
|
74
77
|
};
|
|
75
|
-
const { expanded, iconMenu } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
78
|
+
const { expanded, iconMenu, size } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
76
79
|
expanded: true,
|
|
77
80
|
iconMenu: false,
|
|
81
|
+
size: 'small',
|
|
78
82
|
};
|
|
79
83
|
if (!expanded && !iconMenu)
|
|
80
84
|
return null;
|
|
81
|
-
return (_jsx(SideNavigationListContext.Provider, { value: { level: level + 1 }, children: _jsx("ul", Object.assign({ className: classes, ref: ref }, restProps, { children: children })) }));
|
|
85
|
+
return (_jsx(SideNavigationListContext.Provider, { value: { level: level + 1, size }, children: _jsx("ul", Object.assign({ className: classes, ref: ref }, restProps, { children: children })) }));
|
|
82
86
|
});
|
|
83
87
|
SideNavigationList.displayName = 'SideNavigation.List';
|
|
84
88
|
const SideNavigationItem = forwardRef(function SideNavigationItem(_a, ref) {
|
|
@@ -86,13 +90,16 @@ const SideNavigationItem = forwardRef(function SideNavigationItem(_a, ref) {
|
|
|
86
90
|
var { className, children, icon, as, selected = false, selectable = true, style = {} } = _a, restProps = __rest(_a, ["className", "children", "icon", "as", "selected", "selectable", "style"]);
|
|
87
91
|
const Component = as || 'a';
|
|
88
92
|
const { level } = (_b = useSideNavigationListContext()) !== null && _b !== void 0 ? _b : { level: 0 };
|
|
89
|
-
const { expanded, iconMenu } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
93
|
+
const { expanded, iconMenu, size } = (_c = useSideNavigationContext()) !== null && _c !== void 0 ? _c : {
|
|
90
94
|
expanded: true,
|
|
91
95
|
iconMenu: false,
|
|
96
|
+
size: 'small',
|
|
92
97
|
};
|
|
93
98
|
const defaultIndent = level ? 0 : 12;
|
|
94
99
|
const indent = expanded ? defaultIndent + level * 32 : 0;
|
|
95
|
-
const itemClasses = classNames(
|
|
100
|
+
const itemClasses = classNames(className, {
|
|
101
|
+
'ndl-side-navigation-nav-item': size === 'large',
|
|
102
|
+
'ndl-side-navigation-nav-item-small': size === 'small',
|
|
96
103
|
'ndl-expanded': expanded,
|
|
97
104
|
});
|
|
98
105
|
const innerClasses = classNames('ndl-side-navigation-inner-item', {
|
|
@@ -114,11 +121,14 @@ const SideNavigationGroupHeader = forwardRef(function SideNavigationGroupHeader(
|
|
|
114
121
|
var _b;
|
|
115
122
|
var { children, className, as, style } = _a, restProps = __rest(_a, ["children", "className", "as", "style"]);
|
|
116
123
|
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
117
|
-
const { expanded, iconMenu } = (_b = useSideNavigationContext()) !== null && _b !== void 0 ? _b : {
|
|
124
|
+
const { expanded, iconMenu, size } = (_b = useSideNavigationContext()) !== null && _b !== void 0 ? _b : {
|
|
118
125
|
expanded: true,
|
|
119
126
|
iconMenu: false,
|
|
120
127
|
};
|
|
121
|
-
const classes = classNames(
|
|
128
|
+
const classes = classNames(className, {
|
|
129
|
+
'ndl-side-navigation-nav-item': size === 'large',
|
|
130
|
+
'ndl-side-navigation-nav-item-small': size === 'small',
|
|
131
|
+
});
|
|
122
132
|
const indent = expanded ? '12px' : '0';
|
|
123
133
|
return (_jsx("li", Object.assign({ className: classes, role: "presentation", style: Object.assign({ paddingLeft: indent }, style) }, restProps, { children: _jsxs(Component, { className: "ndl-side-navigation-inner-item ndl-side-navigation-group-header", ref: ref, children: [!expanded && iconMenu && _jsx(Divider, {}), expanded && children] }) })));
|
|
124
134
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import { type ElementBase } from '../helpers';
|
|
23
23
|
type SideNavigationPosition = 'left' | 'right';
|
|
24
|
+
type SideNavigationSize = 'small' | 'large';
|
|
24
25
|
interface SideNavigationProps extends ElementBase<HTMLDivElement> {
|
|
25
26
|
/** True if the menu is expanded. */
|
|
26
27
|
expanded: boolean;
|
|
@@ -30,6 +31,8 @@ interface SideNavigationProps extends ElementBase<HTMLDivElement> {
|
|
|
30
31
|
iconMenu?: boolean;
|
|
31
32
|
/** Position. */
|
|
32
33
|
position?: SideNavigationPosition;
|
|
34
|
+
/** Size of the component */
|
|
35
|
+
size?: SideNavigationSize;
|
|
33
36
|
}
|
|
34
37
|
export type SideNavigationListProps = ElementBase<HTMLUListElement>;
|
|
35
38
|
export interface SideNavigationItemProps extends ElementBase<HTMLAnchorElement> {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "React implementation of Neo4j Design System",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"@floating-ui/react": "0.25.1",
|
|
98
98
|
"@heroicons/react": "2.0.13",
|
|
99
99
|
"@neo4j-cypher/react-codemirror": "^1.0.1",
|
|
100
|
-
"@neo4j-ndl/base": "^2.7.
|
|
100
|
+
"@neo4j-ndl/base": "^2.7.8",
|
|
101
101
|
"@table-nav/core": "0.0.7",
|
|
102
102
|
"@table-nav/react": "0.0.7",
|
|
103
103
|
"@tanstack/react-table": "^8.9.3",
|