@dhis2-ui/menu 8.16.0-alpha.2 → 8.16.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/build/cjs/menu-item/features/accepts_suffix/index.js +11 -0
- package/build/cjs/menu-item/features/accepts_suffix.feature +5 -0
- package/build/cjs/menu-item/menu-item.js +8 -2
- package/build/cjs/menu-item/menu-item.stories.e2e.js +9 -2
- package/build/cjs/menu-item/menu-item.stories.js +23 -1
- package/build/cjs/menu-item/menu-item.styles.js +2 -2
- package/build/es/menu-item/features/accepts_suffix/index.js +8 -0
- package/build/es/menu-item/features/accepts_suffix.feature +5 -0
- package/build/es/menu-item/menu-item.js +8 -2
- package/build/es/menu-item/menu-item.stories.e2e.js +4 -0
- package/build/es/menu-item/menu-item.stories.js +19 -1
- package/build/es/menu-item/menu-item.styles.js +2 -2
- package/package.json +10 -13
- package/types/index.d.ts +0 -103
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
4
|
+
|
|
5
|
+
(0, _steps.Given)('a MenuItem supplied with a suffix is rendered', () => {
|
|
6
|
+
cy.visitStory('MenuItem', 'With Suffix');
|
|
7
|
+
cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible');
|
|
8
|
+
});
|
|
9
|
+
(0, _steps.Then)('the suffix will be visible', () => {
|
|
10
|
+
cy.contains('Suffix').should('be.visible');
|
|
11
|
+
});
|
|
@@ -69,7 +69,8 @@ const MenuItem = _ref2 => {
|
|
|
69
69
|
value,
|
|
70
70
|
label,
|
|
71
71
|
showSubMenu,
|
|
72
|
-
toggleSubMenu
|
|
72
|
+
toggleSubMenu,
|
|
73
|
+
suffix
|
|
73
74
|
} = _ref2;
|
|
74
75
|
const menuItemRef = (0, _react.useRef)();
|
|
75
76
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
|
|
@@ -96,7 +97,9 @@ const MenuItem = _ref2 => {
|
|
|
96
97
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "icon"
|
|
97
98
|
}, icon), /*#__PURE__*/_react.default.createElement("span", {
|
|
98
99
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "label"
|
|
99
|
-
}, label),
|
|
100
|
+
}, label), suffix && /*#__PURE__*/_react.default.createElement("span", {
|
|
101
|
+
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "suffix"
|
|
102
|
+
}, suffix), (chevron || children) && /*#__PURE__*/_react.default.createElement("span", {
|
|
100
103
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "chevron"
|
|
101
104
|
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight24, null))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
102
105
|
id: _menuItemStyles.default.__hash
|
|
@@ -139,6 +142,9 @@ MenuItem.propTypes = {
|
|
|
139
142
|
/** When true, nested menu items are shown in a Popper */
|
|
140
143
|
showSubMenu: _propTypes.default.bool,
|
|
141
144
|
|
|
145
|
+
/** A supporting element shown at the end of the menu item */
|
|
146
|
+
suffix: _propTypes.default.node,
|
|
147
|
+
|
|
142
148
|
/** For using menu item as a link */
|
|
143
149
|
target: _propTypes.default.string,
|
|
144
150
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithTarget = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
|
|
6
|
+
exports.default = exports.WithTarget = exports.WithSuffix = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -55,4 +55,11 @@ const WithIcon = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuI
|
|
|
55
55
|
label: "Menu item"
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
exports.WithIcon = WithIcon;
|
|
58
|
+
exports.WithIcon = WithIcon;
|
|
59
|
+
|
|
60
|
+
const WithSuffix = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
|
|
61
|
+
suffix: "Suffix",
|
|
62
|
+
label: "Menu item"
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
exports.WithSuffix = WithSuffix;
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.ToggleMenuItem = exports.SubMenus = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
|
|
6
|
+
exports.default = exports.ToggleMenuItem = exports.SuffixAndChevron = exports.Suffix = exports.SubMenus = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
|
|
7
|
+
|
|
8
|
+
var _ui = require("@dhis2/ui");
|
|
9
|
+
|
|
10
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
7
11
|
|
|
8
12
|
var _uiIcons = require("@dhis2/ui-icons");
|
|
9
13
|
|
|
@@ -110,6 +114,24 @@ Icon.parameters = {
|
|
|
110
114
|
}
|
|
111
115
|
}
|
|
112
116
|
};
|
|
117
|
+
const Suffix = Template.bind({});
|
|
118
|
+
exports.Suffix = Suffix;
|
|
119
|
+
Suffix.args = {
|
|
120
|
+
label: 'Open in Data Visualizer',
|
|
121
|
+
icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconVisualizationColumn24, {
|
|
122
|
+
color: _uiConstants.colors.grey600
|
|
123
|
+
}),
|
|
124
|
+
suffix: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLaunch16, {
|
|
125
|
+
color: _uiConstants.colors.grey600
|
|
126
|
+
})
|
|
127
|
+
};
|
|
128
|
+
const SuffixAndChevron = Template.bind({});
|
|
129
|
+
exports.SuffixAndChevron = SuffixAndChevron;
|
|
130
|
+
SuffixAndChevron.args = {
|
|
131
|
+
label: 'Security notifications',
|
|
132
|
+
chevron: true,
|
|
133
|
+
suffix: /*#__PURE__*/_react.default.createElement(_ui.Tag, null, "3")
|
|
134
|
+
};
|
|
113
135
|
|
|
114
136
|
const OnClick = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({
|
|
115
137
|
onClick: (payload, event) => {
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["li.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["li.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:".concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";fill:").concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "li.jsx-1930534478:active,li.active.jsx-1930534478{background-color:".concat(_uiConstants.colors.grey300, ";}"), "li.destructive.jsx-1930534478{color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red600, ";}"), "li.destructive.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.red050, ";}"), "li.destructive.jsx-1930534478:active,li.destructive.active.jsx-1930534478{background-color:".concat(_uiConstants.colors.red100, ";}"), "li.disabled.jsx-1930534478{cursor:not-allowed;color:".concat(_uiConstants.colors.grey500, ";fill:").concat(_uiConstants.colors.grey500, ";}"), "li.disabled.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.white, ";}"), "a.jsx-1930534478{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ".concat(_uiConstants.spacers.dp16, ";min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-1930534478:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "a.jsx-1930534478:focus.jsx-1930534478:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(_uiConstants.spacers.dp8, ";}"), "li.dense.jsx-1930534478 a.jsx-1930534478{padding:0 ".concat(_uiConstants.spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(_uiConstants.spacers.dp4, ";}"), ".label.jsx-1930534478{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp12, " 0;}"), "li.dense.jsx-1930534478 .label.jsx-1930534478{padding:".concat(_uiConstants.spacers.dp8, " 0;}"), ".icon.jsx-1930534478{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(_uiConstants.spacers.dp12, ";width:24px;height:24px;}"), ".suffix.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:".concat(_uiConstants.spacers.dp8, ";}"), ".chevron.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(_uiConstants.spacers.dp24, ";}"), "li.dense.jsx-1930534478 .icon.jsx-1930534478{margin-right:".concat(_uiConstants.spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-1930534478 .icon.jsx-1930534478>svg{width:24px;height:24px;}", "li.dense.jsx-1930534478 .icon.jsx-1930534478>svg,li.jsx-1930534478 .chevron.jsx-1930534478>svg{width:16px;height:16px;}"];
|
|
11
|
+
_defaultExport.__hash = "1930534478";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
|
|
2
|
+
Given('a MenuItem supplied with a suffix is rendered', () => {
|
|
3
|
+
cy.visitStory('MenuItem', 'With Suffix');
|
|
4
|
+
cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible');
|
|
5
|
+
});
|
|
6
|
+
Then('the suffix will be visible', () => {
|
|
7
|
+
cy.contains('Suffix').should('be.visible');
|
|
8
|
+
});
|
|
@@ -48,7 +48,8 @@ const MenuItem = _ref2 => {
|
|
|
48
48
|
value,
|
|
49
49
|
label,
|
|
50
50
|
showSubMenu,
|
|
51
|
-
toggleSubMenu
|
|
51
|
+
toggleSubMenu,
|
|
52
|
+
suffix
|
|
52
53
|
} = _ref2;
|
|
53
54
|
const menuItemRef = useRef();
|
|
54
55
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
|
|
@@ -75,7 +76,9 @@ const MenuItem = _ref2 => {
|
|
|
75
76
|
className: "jsx-".concat(styles.__hash) + " " + "icon"
|
|
76
77
|
}, icon), /*#__PURE__*/React.createElement("span", {
|
|
77
78
|
className: "jsx-".concat(styles.__hash) + " " + "label"
|
|
78
|
-
}, label),
|
|
79
|
+
}, label), suffix && /*#__PURE__*/React.createElement("span", {
|
|
80
|
+
className: "jsx-".concat(styles.__hash) + " " + "suffix"
|
|
81
|
+
}, suffix), (chevron || children) && /*#__PURE__*/React.createElement("span", {
|
|
79
82
|
className: "jsx-".concat(styles.__hash) + " " + "chevron"
|
|
80
83
|
}, /*#__PURE__*/React.createElement(IconChevronRight24, null))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
81
84
|
id: styles.__hash
|
|
@@ -117,6 +120,9 @@ MenuItem.propTypes = {
|
|
|
117
120
|
/** When true, nested menu items are shown in a Popper */
|
|
118
121
|
showSubMenu: PropTypes.bool,
|
|
119
122
|
|
|
123
|
+
/** A supporting element shown at the end of the menu item */
|
|
124
|
+
suffix: PropTypes.node,
|
|
125
|
+
|
|
120
126
|
/** For using menu item as a link */
|
|
121
127
|
target: PropTypes.string,
|
|
122
128
|
|
|
@@ -27,4 +27,8 @@ export const WithTarget = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
|
27
27
|
export const WithIcon = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
28
28
|
icon: /*#__PURE__*/React.createElement("div", null, "Icon"),
|
|
29
29
|
label: "Menu item"
|
|
30
|
+
});
|
|
31
|
+
export const WithSuffix = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
32
|
+
suffix: "Suffix",
|
|
33
|
+
label: "Menu item"
|
|
30
34
|
});
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { Tag } from '@dhis2/ui';
|
|
4
|
+
import { colors } from '@dhis2/ui-constants';
|
|
5
|
+
import { IconApps24, IconVisualizationColumn24, IconLaunch16 } from '@dhis2/ui-icons';
|
|
4
6
|
import React, { useState } from 'react';
|
|
5
7
|
import { Menu } from '../index.js';
|
|
6
8
|
import { MenuItem } from './menu-item.js';
|
|
@@ -84,6 +86,22 @@ Icon.parameters = {
|
|
|
84
86
|
}
|
|
85
87
|
}
|
|
86
88
|
};
|
|
89
|
+
export const Suffix = Template.bind({});
|
|
90
|
+
Suffix.args = {
|
|
91
|
+
label: 'Open in Data Visualizer',
|
|
92
|
+
icon: /*#__PURE__*/React.createElement(IconVisualizationColumn24, {
|
|
93
|
+
color: colors.grey600
|
|
94
|
+
}),
|
|
95
|
+
suffix: /*#__PURE__*/React.createElement(IconLaunch16, {
|
|
96
|
+
color: colors.grey600
|
|
97
|
+
})
|
|
98
|
+
};
|
|
99
|
+
export const SuffixAndChevron = Template.bind({});
|
|
100
|
+
SuffixAndChevron.args = {
|
|
101
|
+
label: 'Security notifications',
|
|
102
|
+
chevron: true,
|
|
103
|
+
suffix: /*#__PURE__*/React.createElement(Tag, null, "3")
|
|
104
|
+
};
|
|
87
105
|
export const OnClick = args => /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, _extends({
|
|
88
106
|
onClick: (payload, event) => {
|
|
89
107
|
console.log(payload.value, event.target);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors, spacers, theme } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["li.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["li.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:".concat(colors.white, ";color:").concat(colors.grey900, ";fill:").concat(colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-1930534478:hover{background-color:".concat(colors.grey200, ";}"), "li.jsx-1930534478:active,li.active.jsx-1930534478{background-color:".concat(colors.grey300, ";}"), "li.destructive.jsx-1930534478{color:".concat(colors.red700, ";fill:").concat(colors.red600, ";}"), "li.destructive.jsx-1930534478:hover{background-color:".concat(colors.red050, ";}"), "li.destructive.jsx-1930534478:active,li.destructive.active.jsx-1930534478{background-color:".concat(colors.red100, ";}"), "li.disabled.jsx-1930534478{cursor:not-allowed;color:".concat(colors.grey500, ";fill:").concat(colors.grey500, ";}"), "li.disabled.jsx-1930534478:hover{background-color:".concat(colors.white, ";}"), "a.jsx-1930534478{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ".concat(spacers.dp16, ";min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-1930534478:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "a.jsx-1930534478:focus.jsx-1930534478:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(spacers.dp8, ";}"), "li.dense.jsx-1930534478 a.jsx-1930534478{padding:0 ".concat(spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(spacers.dp4, ";}"), ".label.jsx-1930534478{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp12, " 0;}"), "li.dense.jsx-1930534478 .label.jsx-1930534478{padding:".concat(spacers.dp8, " 0;}"), ".icon.jsx-1930534478{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(spacers.dp12, ";width:24px;height:24px;}"), ".suffix.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:".concat(spacers.dp8, ";}"), ".chevron.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(spacers.dp24, ";}"), "li.dense.jsx-1930534478 .icon.jsx-1930534478{margin-right:".concat(spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-1930534478 .icon.jsx-1930534478>svg{width:24px;height:24px;}", "li.dense.jsx-1930534478 .icon.jsx-1930534478>svg,li.jsx-1930534478 .chevron.jsx-1930534478>svg{width:16px;height:16px;}"];
|
|
3
|
+
_defaultExport.__hash = "1930534478";
|
|
4
4
|
export default _defaultExport;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/menu",
|
|
3
|
-
"version": "8.16.0
|
|
3
|
+
"version": "8.16.0",
|
|
4
4
|
"description": "UI Menu",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
"main": "./build/cjs/index.js",
|
|
14
14
|
"module": "./build/es/index.js",
|
|
15
15
|
"exports": {
|
|
16
|
-
"types": "./types/index.d.ts",
|
|
17
16
|
"import": "./build/es/index.js",
|
|
18
17
|
"require": "./build/cjs/index.js"
|
|
19
18
|
},
|
|
@@ -33,24 +32,22 @@
|
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/card": "8.16.0
|
|
37
|
-
"@dhis2-ui/divider": "8.16.0
|
|
38
|
-
"@dhis2-ui/layer": "8.16.0
|
|
39
|
-
"@dhis2-ui/popper": "8.16.0
|
|
40
|
-
"@dhis2-ui/portal": "8.16.0
|
|
41
|
-
"@dhis2/ui-constants": "8.16.0
|
|
42
|
-
"@dhis2/ui-icons": "8.16.0
|
|
35
|
+
"@dhis2-ui/card": "8.16.0",
|
|
36
|
+
"@dhis2-ui/divider": "8.16.0",
|
|
37
|
+
"@dhis2-ui/layer": "8.16.0",
|
|
38
|
+
"@dhis2-ui/popper": "8.16.0",
|
|
39
|
+
"@dhis2-ui/portal": "8.16.0",
|
|
40
|
+
"@dhis2/ui-constants": "8.16.0",
|
|
41
|
+
"@dhis2/ui-icons": "8.16.0",
|
|
43
42
|
"classnames": "^2.3.1",
|
|
44
43
|
"prop-types": "^15.7.2"
|
|
45
44
|
},
|
|
46
45
|
"files": [
|
|
47
|
-
"build"
|
|
48
|
-
"types"
|
|
46
|
+
"build"
|
|
49
47
|
],
|
|
50
48
|
"devDependencies": {
|
|
51
49
|
"react": "16.13",
|
|
52
50
|
"react-dom": "16.13",
|
|
53
51
|
"styled-jsx": "^4.0.1"
|
|
54
|
-
}
|
|
55
|
-
"types": "types"
|
|
52
|
+
}
|
|
56
53
|
}
|
package/types/index.d.ts
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
|
|
3
|
-
export interface FlyoutMenuProps {
|
|
4
|
-
/**
|
|
5
|
-
* Typically, but not limited to, `MenuItem` components
|
|
6
|
-
*/
|
|
7
|
-
children?: React.ReactNode
|
|
8
|
-
className?: string
|
|
9
|
-
dataTest?: string
|
|
10
|
-
/**
|
|
11
|
-
* Menu uses smaller dimensions
|
|
12
|
-
*/
|
|
13
|
-
dense?: boolean
|
|
14
|
-
maxHeight?: string
|
|
15
|
-
maxWidth?: string
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const FlyoutMenu: React.FC<FlyoutMenuProps>
|
|
19
|
-
|
|
20
|
-
export interface MenuProps {
|
|
21
|
-
/**
|
|
22
|
-
* Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader`
|
|
23
|
-
*/
|
|
24
|
-
children?: React.ReactNode
|
|
25
|
-
className?: string
|
|
26
|
-
dataTest?: string
|
|
27
|
-
/**
|
|
28
|
-
* Applies `dense` property to all child components unless already specified
|
|
29
|
-
*/
|
|
30
|
-
dense?: boolean
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const Menu: React.FC<MenuProps>
|
|
34
|
-
|
|
35
|
-
export interface MenuDividerProps {
|
|
36
|
-
className?: string
|
|
37
|
-
dataTest?: string
|
|
38
|
-
dense?: boolean
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export const MenuDivider: React.FC<MenuDividerProps>
|
|
42
|
-
|
|
43
|
-
export interface MenuItemProps {
|
|
44
|
-
active?: boolean
|
|
45
|
-
chevron?: boolean
|
|
46
|
-
/**
|
|
47
|
-
* Nested menu items can become submenus.
|
|
48
|
-
* See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo
|
|
49
|
-
*/
|
|
50
|
-
children?: React.ReactNode
|
|
51
|
-
className?: string
|
|
52
|
-
dataTest?: string
|
|
53
|
-
dense?: boolean
|
|
54
|
-
destructive?: boolean
|
|
55
|
-
disabled?: boolean
|
|
56
|
-
/**
|
|
57
|
-
* For using menu item as a link
|
|
58
|
-
*/
|
|
59
|
-
href?: string
|
|
60
|
-
/**
|
|
61
|
-
* An icon for the left side of the menu item
|
|
62
|
-
*/
|
|
63
|
-
icon?: React.ReactNode
|
|
64
|
-
/**
|
|
65
|
-
* Text in the menu item
|
|
66
|
-
*/
|
|
67
|
-
label?: React.ReactNode
|
|
68
|
-
/**
|
|
69
|
-
* When true, nested menu items are shown in a Popper
|
|
70
|
-
*/
|
|
71
|
-
showSubMenu?: boolean
|
|
72
|
-
/**
|
|
73
|
-
* For using menu item as a link
|
|
74
|
-
*/
|
|
75
|
-
target?: string
|
|
76
|
-
/**
|
|
77
|
-
* On click, this function is called (without args)
|
|
78
|
-
*/
|
|
79
|
-
toggleSubMenu?: () => void
|
|
80
|
-
/**
|
|
81
|
-
* Value associated with item. Passed as an argument to onClick handler.
|
|
82
|
-
*/
|
|
83
|
-
value?: string
|
|
84
|
-
/**
|
|
85
|
-
* Click handler called with signature `({ value: string }, event)`
|
|
86
|
-
*/
|
|
87
|
-
onClick?: (
|
|
88
|
-
payload: { value: string | undefined },
|
|
89
|
-
event: React.MouseEvent<HTMLAnchorElement>
|
|
90
|
-
) => void
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export const MenuItem: React.FC<MenuItemProps>
|
|
94
|
-
|
|
95
|
-
export interface MenuSectionHeaderProps {
|
|
96
|
-
className?: string
|
|
97
|
-
dataTest?: string
|
|
98
|
-
dense?: boolean
|
|
99
|
-
hideDivider?: boolean
|
|
100
|
-
label?: React.ReactNode
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export const MenuSectionHeader: React.FC<MenuSectionHeaderProps>
|