@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +65 -13
- package/build-storybook.log +4691 -0
- package/lib/app/app.js +137 -102
- package/lib/app/app.module.css +11 -4
- package/lib/app/header/header.js +1 -10
- package/lib/components/asset-info/asset-info.module.css +1 -0
- package/lib/components/bundle-assets/bundle-assets.js +104 -52
- package/lib/components/bundle-assets/bundle-assets.module.css +24 -26
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +13 -3
- package/lib/components/bundle-modules/bundle-modules.js +68 -68
- package/lib/components/bundle-modules/bundle-modules.module.css +11 -2
- package/lib/components/bundle-modules/bundle-modules.utils.js +14 -10
- package/lib/components/bundle-modules/index.js +4 -4
- package/lib/components/bundle-packages/bundle-packages.js +100 -44
- package/lib/components/bundle-packages/bundle-packages.module.css +17 -21
- package/lib/components/delta/delta.module.css +1 -0
- package/lib/components/job-header/job-header.js +3 -1
- package/lib/components/job-header/job-header.module.css +6 -8
- package/lib/components/jobs-header/jobs-header.module.css +5 -0
- package/lib/components/metrics-table/metrics-table.js +72 -59
- package/lib/components/metrics-table/metrics-table.module.css +18 -7
- package/lib/components/metrics-table-search/metrics-table-search.module.css +5 -4
- package/lib/components/metrics-table-title/metrics-table-title.js +9 -7
- package/lib/components/metrics-table-title/metrics-table-title.module.css +2 -0
- package/lib/components/module-info/module-info.js +2 -2
- package/lib/components/module-info/module-info.module.css +1 -0
- package/lib/components/summary/summary.js +1 -1
- package/lib/components/summary-item/summary-item.js +15 -18
- package/lib/components/summary-item/summary-item.module.css +1 -23
- package/lib/components/total-size-type-title/total-size-type-title.js +7 -3
- package/lib/constants.js +1 -1
- package/lib/css/default.css +14 -3
- package/lib/css/variables.css +17 -17
- package/lib/hooks/search-params.js +31 -31
- package/lib/layout/box/box.module.css +9 -0
- package/lib/layout/footer/footer.module.css +1 -1
- package/lib/layout/index.js +8 -0
- package/lib/layout/separator.js +48 -0
- package/lib/layout/separator.module.css +5 -0
- package/lib/ui/dropdown/dropdown.js +21 -26
- package/lib/ui/dropdown/dropdown.module.css +11 -12
- package/lib/ui/dropdown/dropdown.stories.js +2 -9
- package/lib/ui/empty-set/empty-set.js +5 -4
- package/lib/ui/empty-set/empty-set.module.css +2 -2
- package/lib/ui/filters/filters.container.js +1 -1
- package/lib/ui/filters/filters.js +22 -7
- package/lib/ui/filters/filters.module.css +3 -3
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +1 -1
- package/lib/ui/hover-card/hover-card.js +102 -0
- package/lib/ui/hover-card/hover-card.module.css +29 -0
- package/lib/ui/hover-card/hover-card.stories.js +56 -0
- package/lib/ui/hover-card/index.js +18 -0
- package/lib/ui/icon/icon.js +6 -6
- package/lib/ui/icon/icon.module.css +1 -0
- package/lib/ui/index.js +8 -8
- package/lib/ui/table/table.js +5 -74
- package/lib/ui/table/table.module.css +41 -25
- package/lib/ui/table/table.stories.js +1 -1
- package/lib/ui/{popover → tag}/index.js +4 -4
- package/lib/ui/tag/tag.js +72 -0
- package/lib/ui/tag/tag.module.css +55 -0
- package/lib/ui/tag/tag.stories.js +38 -0
- package/lib/ui/tooltip/tooltip.js +10 -9
- package/lib/ui/tooltip/tooltip.module.css +2 -1
- package/lib-esm/app/app.js +132 -102
- package/lib-esm/app/app.module.css +11 -4
- package/lib-esm/app/header/header.js +1 -9
- package/lib-esm/components/asset-info/asset-info.module.css +1 -0
- package/lib-esm/components/bundle-assets/bundle-assets.js +97 -56
- package/lib-esm/components/bundle-assets/bundle-assets.module.css +24 -26
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +7 -3
- package/lib-esm/components/bundle-modules/bundle-modules.js +50 -51
- package/lib-esm/components/bundle-modules/bundle-modules.module.css +11 -2
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js +14 -6
- package/lib-esm/components/bundle-modules/index.js +5 -3
- package/lib-esm/components/bundle-packages/bundle-packages.js +88 -41
- package/lib-esm/components/bundle-packages/bundle-packages.module.css +17 -21
- package/lib-esm/components/delta/delta.module.css +1 -0
- package/lib-esm/components/job-header/job-header.js +2 -1
- package/lib-esm/components/job-header/job-header.module.css +6 -8
- package/lib-esm/components/jobs-header/jobs-header.module.css +5 -0
- package/lib-esm/components/metrics-table/metrics-table.js +61 -53
- package/lib-esm/components/metrics-table/metrics-table.module.css +18 -7
- package/lib-esm/components/metrics-table-search/metrics-table-search.module.css +5 -4
- package/lib-esm/components/metrics-table-title/metrics-table-title.js +8 -7
- package/lib-esm/components/metrics-table-title/metrics-table-title.module.css +2 -0
- package/lib-esm/components/module-info/module-info.js +2 -2
- package/lib-esm/components/module-info/module-info.module.css +1 -0
- package/lib-esm/components/summary/summary.js +1 -1
- package/lib-esm/components/summary-item/summary-item.js +14 -18
- package/lib-esm/components/summary-item/summary-item.module.css +1 -23
- package/lib-esm/components/total-size-type-title/total-size-type-title.js +6 -3
- package/lib-esm/constants.js +1 -1
- package/lib-esm/css/default.css +14 -3
- package/lib-esm/css/variables.css +17 -17
- package/lib-esm/hooks/search-params.js +27 -28
- package/lib-esm/layout/box/box.module.css +9 -0
- package/lib-esm/layout/footer/footer.module.css +1 -1
- package/lib-esm/layout/index.js +1 -0
- package/lib-esm/layout/separator.js +28 -0
- package/lib-esm/layout/separator.module.css +5 -0
- package/lib-esm/ui/dropdown/dropdown.js +20 -25
- package/lib-esm/ui/dropdown/dropdown.module.css +11 -12
- package/lib-esm/ui/dropdown/dropdown.stories.js +2 -7
- package/lib-esm/ui/empty-set/empty-set.js +4 -4
- package/lib-esm/ui/empty-set/empty-set.module.css +2 -2
- package/lib-esm/ui/filters/filters.js +20 -5
- package/lib-esm/ui/filters/filters.module.css +3 -3
- package/lib-esm/ui/hover-card/hover-card.js +83 -0
- package/lib-esm/ui/hover-card/hover-card.module.css +29 -0
- package/lib-esm/ui/hover-card/hover-card.stories.js +35 -0
- package/lib-esm/ui/hover-card/index.js +1 -0
- package/lib-esm/ui/icon/icon.js +3 -3
- package/lib-esm/ui/icon/icon.module.css +1 -0
- package/lib-esm/ui/index.js +1 -1
- package/lib-esm/ui/table/table.js +5 -65
- package/lib-esm/ui/table/table.module.css +41 -25
- package/lib-esm/ui/table/table.stories.js +1 -1
- package/lib-esm/ui/tag/index.js +1 -0
- package/lib-esm/ui/tag/tag.js +45 -0
- package/lib-esm/ui/tag/tag.module.css +55 -0
- package/lib-esm/ui/tag/tag.stories.js +23 -0
- package/lib-esm/ui/tooltip/tooltip.js +10 -9
- package/lib-esm/ui/tooltip/tooltip.module.css +2 -1
- package/package.json +33 -31
- package/src/app/app.jsx +136 -146
- package/src/app/app.module.css +11 -4
- package/src/app/header/header.jsx +1 -11
- package/src/assets/icons.svg +0 -8
- package/src/components/asset-info/asset-info.module.css +1 -0
- package/src/components/bundle-assets/bundle-assets.jsx +85 -31
- package/src/components/bundle-assets/bundle-assets.module.css +24 -26
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +13 -25
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
- package/src/components/bundle-modules/bundle-modules.jsx +53 -36
- package/src/components/bundle-modules/bundle-modules.module.css +11 -2
- package/src/components/bundle-modules/bundle-modules.utils.js +16 -4
- package/src/components/bundle-modules/index.jsx +3 -0
- package/src/components/bundle-packages/bundle-packages.jsx +89 -39
- package/src/components/bundle-packages/bundle-packages.module.css +17 -21
- package/src/components/delta/delta.module.css +1 -0
- package/src/components/index.js +0 -1
- package/src/components/job-header/job-header.jsx +2 -1
- package/src/components/job-header/job-header.module.css +6 -8
- package/src/components/jobs-header/jobs-header.module.css +5 -0
- package/src/components/metrics-table/metrics-table.jsx +53 -44
- package/src/components/metrics-table/metrics-table.module.css +18 -7
- package/src/components/metrics-table-search/metrics-table-search.module.css +5 -4
- package/src/components/metrics-table-title/metrics-table-title.jsx +20 -21
- package/src/components/metrics-table-title/metrics-table-title.module.css +2 -0
- package/src/components/module-info/module-info.jsx +3 -7
- package/src/components/module-info/module-info.module.css +1 -0
- package/src/components/summary/summary.jsx +7 -8
- package/src/components/summary/summary.module.css +1 -1
- package/src/components/summary-item/summary-item.jsx +23 -40
- package/src/components/summary-item/summary-item.module.css +1 -34
- package/src/components/total-size-type-title/total-size-type-title.jsx +6 -9
- package/src/constants.js +11 -7
- package/src/css/default.css +14 -3
- package/src/css/variables.css +17 -17
- package/src/hooks/search-params.js +42 -33
- package/src/layout/box/box.module.css +9 -0
- package/src/layout/footer/footer.module.css +1 -1
- package/src/layout/index.js +1 -0
- package/src/layout/separator.jsx +25 -0
- package/src/layout/separator.module.css +5 -0
- package/src/ui/alert/alert.jsx +2 -7
- package/src/ui/dropdown/dropdown.jsx +16 -22
- package/src/ui/dropdown/dropdown.module.css +11 -12
- package/src/ui/empty-set/empty-set.jsx +25 -21
- package/src/ui/empty-set/empty-set.module.css +2 -2
- package/src/ui/filters/filters.jsx +64 -53
- package/src/ui/filters/filters.module.css +3 -3
- package/src/ui/hover-card/hover-card.jsx +73 -0
- package/src/ui/hover-card/hover-card.module.css +29 -0
- package/src/ui/hover-card/index.js +1 -0
- package/src/ui/icon/icon.jsx +11 -9
- package/src/ui/icon/icon.module.css +1 -0
- package/src/ui/index.js +1 -1
- package/src/ui/table/table.jsx +5 -52
- package/src/ui/table/table.module.css +41 -25
- package/src/ui/tag/index.js +1 -0
- package/src/ui/tag/tag.jsx +49 -0
- package/src/ui/tag/tag.module.css +55 -0
- package/src/ui/tooltip/tooltip.jsx +10 -14
- package/src/ui/tooltip/tooltip.module.css +2 -1
- package/storybook-static/favicon.ico +0 -0
- package/lib/ui/popover/popover.js +0 -92
- package/lib/ui/popover/popover.module.css +0 -66
- package/lib/ui/popover/popover.stories.js +0 -26
- package/lib-esm/ui/popover/index.js +0 -1
- package/lib-esm/ui/popover/popover.js +0 -71
- package/lib-esm/ui/popover/popover.module.css +0 -66
- package/lib-esm/ui/popover/popover.stories.js +0 -14
- package/src/assets/icons/alert-circle.svg +0 -1
- package/src/assets/icons/check-circle.svg +0 -1
- package/src/components/budget-info/budget-info.jsx +0 -65
- package/src/components/budget-info/budget-info.module.css +0 -40
- package/src/components/budget-info/index.js +0 -1
- package/src/components/budget-insights/budget-insights.jsx +0 -157
- package/src/components/budget-insights/budget-insights.module.css +0 -53
- package/src/components/budget-insights/index.js +0 -1
- package/src/ui/popover/index.js +0 -1
- package/src/ui/popover/popover.jsx +0 -79
- package/src/ui/popover/popover.module.css +0 -66
|
@@ -36,9 +36,11 @@ var ACTION_SET_SEARCH = 'SET_SEARCH';
|
|
|
36
36
|
var ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
|
|
37
37
|
var ACTION_RESET_ALL = 'RESET_ALL';
|
|
38
38
|
var ACTION_SET = 'SET';
|
|
39
|
+
var SEARCH_DEFAULT = '';
|
|
40
|
+
var SEARCH_DEFAULT_PATTERN = /.*/;
|
|
39
41
|
|
|
40
42
|
var getSearchPattern = function getSearchPattern(search) {
|
|
41
|
-
var searchPattern =
|
|
43
|
+
var searchPattern = SEARCH_DEFAULT_PATTERN;
|
|
42
44
|
|
|
43
45
|
if (!search || !search.trim()) {
|
|
44
46
|
return searchPattern;
|
|
@@ -65,51 +67,48 @@ var getSearchReducer = function getSearchReducer(_ref) {
|
|
|
65
67
|
switch (type) {
|
|
66
68
|
case ACTION_SET_FILTERS:
|
|
67
69
|
{
|
|
68
|
-
|
|
70
|
+
var newState = {
|
|
69
71
|
filters: payload,
|
|
70
72
|
search: state.search
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
});
|
|
73
|
+
};
|
|
74
|
+
setParentState(newState);
|
|
75
|
+
return newState;
|
|
75
76
|
}
|
|
76
77
|
|
|
77
78
|
case ACTION_SET_SEARCH:
|
|
78
79
|
{
|
|
79
|
-
|
|
80
|
+
var _newState = {
|
|
80
81
|
filters: state.filters,
|
|
81
82
|
search: payload
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
};
|
|
84
|
+
setParentState(_newState);
|
|
85
|
+
return _objectSpread(_objectSpread({}, _newState), {}, {
|
|
85
86
|
searchPattern: getSearchPattern(payload)
|
|
86
87
|
});
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
case ACTION_RESET_DEFAULT:
|
|
90
91
|
{
|
|
91
|
-
|
|
92
|
-
filters: defaultFilters,
|
|
93
|
-
search: ''
|
|
94
|
-
});
|
|
95
|
-
return {
|
|
92
|
+
var _newState2 = {
|
|
96
93
|
filters: defaultFilters,
|
|
97
|
-
search:
|
|
98
|
-
searchPattern: getSearchPattern()
|
|
94
|
+
search: SEARCH_DEFAULT
|
|
99
95
|
};
|
|
96
|
+
setParentState(_newState2);
|
|
97
|
+
return _objectSpread(_objectSpread({}, _newState2), {}, {
|
|
98
|
+
searchPattern: getSearchPattern()
|
|
99
|
+
});
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
case ACTION_RESET_ALL:
|
|
103
103
|
{
|
|
104
|
-
|
|
105
|
-
filters: allEntriesFilters,
|
|
106
|
-
search: ''
|
|
107
|
-
});
|
|
108
|
-
return {
|
|
104
|
+
var _newState3 = {
|
|
109
105
|
filters: allEntriesFilters,
|
|
110
|
-
search:
|
|
111
|
-
searchPattern: getSearchPattern()
|
|
106
|
+
search: SEARCH_DEFAULT
|
|
112
107
|
};
|
|
108
|
+
setParentState(_newState3);
|
|
109
|
+
return _objectSpread(_objectSpread({}, _newState3), {}, {
|
|
110
|
+
searchPattern: getSearchPattern()
|
|
111
|
+
});
|
|
113
112
|
}
|
|
114
113
|
|
|
115
114
|
case ACTION_SET:
|
|
@@ -134,7 +133,8 @@ var generateState = function generateState(filters, search) {
|
|
|
134
133
|
exports.generateState = generateState;
|
|
135
134
|
|
|
136
135
|
var useSearchParams = function useSearchParams(_ref2) {
|
|
137
|
-
var
|
|
136
|
+
var _ref2$search = _ref2.search,
|
|
137
|
+
parentSearch = _ref2$search === void 0 ? SEARCH_DEFAULT : _ref2$search,
|
|
138
138
|
parentFilters = _ref2.filters,
|
|
139
139
|
defaultFilters = _ref2.defaultFilters,
|
|
140
140
|
allEntriesFilters = _ref2.allEntriesFilters,
|
|
@@ -157,7 +157,7 @@ var useSearchParams = function useSearchParams(_ref2) {
|
|
|
157
157
|
|
|
158
158
|
(0, _react.useLayoutEffect)(function () {
|
|
159
159
|
// Run a deep comparison to prevent circular setState triggering
|
|
160
|
-
if (parentSearch === search
|
|
160
|
+
if (parentSearch === search && (0, _isEqual2["default"])(initialFilters, filters)) {
|
|
161
161
|
return;
|
|
162
162
|
}
|
|
163
163
|
|
|
@@ -165,7 +165,7 @@ var useSearchParams = function useSearchParams(_ref2) {
|
|
|
165
165
|
type: ACTION_SET,
|
|
166
166
|
payload: generateState(initialFilters, parentSearch)
|
|
167
167
|
});
|
|
168
|
-
}, [search, filters,
|
|
168
|
+
}, [dispatch, search, filters, parentSearch, initialFilters]);
|
|
169
169
|
/** Callbacks */
|
|
170
170
|
|
|
171
171
|
var handleUpdateSearch = (0, _react.useCallback)(function (newValue) {
|
|
@@ -173,23 +173,23 @@ var useSearchParams = function useSearchParams(_ref2) {
|
|
|
173
173
|
type: ACTION_SET_SEARCH,
|
|
174
174
|
payload: newValue
|
|
175
175
|
});
|
|
176
|
-
}, []);
|
|
176
|
+
}, [dispatch]);
|
|
177
177
|
var handleUpdateFilters = (0, _react.useCallback)(function (newFilters) {
|
|
178
178
|
dispatch({
|
|
179
179
|
type: ACTION_SET_FILTERS,
|
|
180
180
|
payload: newFilters
|
|
181
181
|
});
|
|
182
|
-
}, []);
|
|
182
|
+
}, [dispatch]);
|
|
183
183
|
var handleResetFilters = (0, _react.useCallback)(function () {
|
|
184
184
|
dispatch({
|
|
185
185
|
type: ACTION_RESET_DEFAULT
|
|
186
186
|
});
|
|
187
|
-
}, []);
|
|
187
|
+
}, [dispatch]);
|
|
188
188
|
var handleResetAllFilters = (0, _react.useCallback)(function () {
|
|
189
189
|
dispatch({
|
|
190
190
|
type: ACTION_RESET_ALL
|
|
191
191
|
});
|
|
192
|
-
}, []);
|
|
192
|
+
}, [dispatch]);
|
|
193
193
|
return {
|
|
194
194
|
search: search,
|
|
195
195
|
searchPattern: searchPattern,
|
|
@@ -4,6 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
.outline {
|
|
6
6
|
border: 1px solid var(--color-outline);
|
|
7
|
+
border-radius: var(--radius-medium);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.outline > :first-child {
|
|
11
|
+
border-radius: var(--radius-medium) var(--radius-medium) 0 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.outline > :last-child {
|
|
15
|
+
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
|
|
7
16
|
}
|
|
8
17
|
|
|
9
18
|
.padding-xxxsmall {
|
package/lib/layout/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "Header", {
|
|
|
27
27
|
return _header.Header;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "Separator", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function get() {
|
|
33
|
+
return _separator.Separator;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "Stack", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function get() {
|
|
@@ -46,6 +52,8 @@ var _footer = require("./footer");
|
|
|
46
52
|
|
|
47
53
|
var _header = require("./header");
|
|
48
54
|
|
|
55
|
+
var _separator = require("./separator");
|
|
56
|
+
|
|
49
57
|
var _subHeader = require("./sub-header");
|
|
50
58
|
|
|
51
59
|
var _stack = require("./stack");
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Separator = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _separatorModule = _interopRequireDefault(require("./separator.module.css"));
|
|
15
|
+
|
|
16
|
+
var _excluded = ["className"];
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
23
|
+
|
|
24
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
+
|
|
26
|
+
var propTypes = {
|
|
27
|
+
className: _propTypes["default"].string
|
|
28
|
+
};
|
|
29
|
+
var defaultProps = {
|
|
30
|
+
className: ''
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* @param {PropTypes.InferProps<typeof propTypes>} props
|
|
34
|
+
* @return {React.FunctionComponentElement}
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
var Separator = function Separator(props) {
|
|
38
|
+
var className = props.className,
|
|
39
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
40
|
+
|
|
41
|
+
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
42
|
+
className: (0, _classnames["default"])(_separatorModule["default"].root, className)
|
|
43
|
+
}, restProps));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.Separator = Separator;
|
|
47
|
+
Separator.propTypes = propTypes;
|
|
48
|
+
Separator.defaultProps = defaultProps;
|
|
@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
11
11
|
|
|
12
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _menu = require("ariakit/menu");
|
|
15
15
|
|
|
16
16
|
var _flexStack = require("../../layout/flex-stack");
|
|
17
17
|
|
|
@@ -21,35 +21,33 @@ var _dropdownModule = _interopRequireDefault(require("./dropdown.module.css"));
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
23
|
|
|
24
|
-
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); }
|
|
25
|
-
|
|
26
24
|
var Dropdown = function Dropdown(props) {
|
|
27
25
|
var className = props.className,
|
|
26
|
+
buttonClassName = props.buttonClassName,
|
|
28
27
|
label = props.label,
|
|
29
28
|
ariaLabel = props.ariaLabel,
|
|
30
29
|
glyph = props.glyph,
|
|
31
|
-
activeLabel = props.activeLabel,
|
|
32
30
|
children = props.children;
|
|
33
|
-
var rootClassName = (0, _classnames["default"])(_dropdownModule["default"].root,
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
className:
|
|
31
|
+
var rootClassName = (0, _classnames["default"])(_dropdownModule["default"].root, className);
|
|
32
|
+
var menuState = (0, _menu.useMenuState)();
|
|
33
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
34
|
+
className: rootClassName
|
|
35
|
+
}, /*#__PURE__*/_react["default"].createElement(_menu.MenuButton, {
|
|
36
|
+
state: menuState,
|
|
37
|
+
className: (0, _classnames["default"])(_dropdownModule["default"].button, buttonClassName),
|
|
40
38
|
tabIndex: null
|
|
41
|
-
}
|
|
42
|
-
space: "xxxsmall"
|
|
43
|
-
className: _dropdownModule["default"].label
|
|
39
|
+
}, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
|
|
40
|
+
space: "xxxsmall"
|
|
44
41
|
}, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
|
|
45
42
|
className: _dropdownModule["default"].labelIcon,
|
|
46
43
|
glyph: glyph
|
|
47
|
-
}), label)), /*#__PURE__*/_react["default"].createElement(
|
|
44
|
+
}), label)), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
|
|
45
|
+
state: menuState,
|
|
48
46
|
"aria-label": ariaLabel || label,
|
|
49
47
|
className: _dropdownModule["default"].dropdown
|
|
50
|
-
}
|
|
51
|
-
MenuItem:
|
|
52
|
-
menu:
|
|
48
|
+
}, typeof children === 'function' ? children({
|
|
49
|
+
MenuItem: _menu.MenuItem,
|
|
50
|
+
menu: menuState,
|
|
53
51
|
menuItemClassName: _dropdownModule["default"].menuItem,
|
|
54
52
|
menuItemActiveClassName: _dropdownModule["default"].menuItemActive
|
|
55
53
|
}) : children));
|
|
@@ -58,15 +56,18 @@ var Dropdown = function Dropdown(props) {
|
|
|
58
56
|
exports.Dropdown = Dropdown;
|
|
59
57
|
Dropdown.defaultProps = {
|
|
60
58
|
className: '',
|
|
59
|
+
buttonClassName: '',
|
|
61
60
|
label: null,
|
|
62
61
|
ariaLabel: '',
|
|
63
|
-
glyph: null
|
|
64
|
-
activeLabel: false
|
|
62
|
+
glyph: null
|
|
65
63
|
};
|
|
66
64
|
Dropdown.propTypes = {
|
|
67
65
|
/** Adopted child class name */
|
|
68
66
|
className: _propTypes["default"].string,
|
|
69
67
|
|
|
68
|
+
/** Button adopted child class name */
|
|
69
|
+
buttonClassName: _propTypes["default"].string,
|
|
70
|
+
|
|
70
71
|
/** Button label */
|
|
71
72
|
label: _propTypes["default"].node,
|
|
72
73
|
|
|
@@ -76,12 +77,6 @@ Dropdown.propTypes = {
|
|
|
76
77
|
/** Icon glyph */
|
|
77
78
|
glyph: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
|
|
78
79
|
|
|
79
|
-
/** Dropdown open state */
|
|
80
|
-
open: _propTypes["default"].bool.isRequired,
|
|
81
|
-
|
|
82
|
-
/** Active label flag */
|
|
83
|
-
activeLabel: _propTypes["default"].bool,
|
|
84
|
-
|
|
85
80
|
/** Content */
|
|
86
81
|
children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired
|
|
87
82
|
};
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
.root {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.button {
|
|
2
6
|
background: none;
|
|
3
7
|
border: none;
|
|
4
8
|
padding: 0;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.root:focus {
|
|
8
|
-
outline: none;
|
|
9
|
-
box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
|
|
10
|
-
}
|
|
11
9
|
|
|
12
|
-
.label {
|
|
13
10
|
border: 1px solid var(--color-outline);
|
|
11
|
+
border-radius: var(--radius-small);
|
|
14
12
|
padding: calc(var(--space-xxsmall) - 1px);
|
|
15
13
|
display: flex;
|
|
16
14
|
align-items: center;
|
|
@@ -24,7 +22,11 @@
|
|
|
24
22
|
color: var(--color-text-light);
|
|
25
23
|
}
|
|
26
24
|
|
|
27
|
-
.
|
|
25
|
+
.button:hover,
|
|
26
|
+
.button:focus,
|
|
27
|
+
.button:active {
|
|
28
|
+
outline: none;
|
|
29
|
+
box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
|
|
28
30
|
border-color: var(--color-outline-dark);
|
|
29
31
|
color: var(--color-text);
|
|
30
32
|
}
|
|
@@ -33,6 +35,7 @@
|
|
|
33
35
|
position: absolute;
|
|
34
36
|
left: 0;
|
|
35
37
|
top: 100%;
|
|
38
|
+
border-radius: var(--radius-medium);
|
|
36
39
|
box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
|
|
37
40
|
background: var(--color-background);
|
|
38
41
|
min-width: 180px;
|
|
@@ -45,10 +48,6 @@
|
|
|
45
48
|
box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
|
|
46
49
|
}
|
|
47
50
|
|
|
48
|
-
.activeLabel .label {
|
|
49
|
-
color: var(--color-text);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
51
|
.menuItem {
|
|
53
52
|
display: block;
|
|
54
53
|
appearance: none;
|
|
@@ -18,22 +18,15 @@ stories.add('default', function () {
|
|
|
18
18
|
label: "Toggle"
|
|
19
19
|
}, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Option 2")));
|
|
20
20
|
});
|
|
21
|
-
stories.add('with right alignement', function () {
|
|
22
|
-
return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
|
|
23
|
-
glyph: "filter",
|
|
24
|
-
label: "Toggle",
|
|
25
|
-
align: "right"
|
|
26
|
-
}, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Option 2")));
|
|
27
|
-
});
|
|
28
21
|
stories.add('with render function', function () {
|
|
29
22
|
return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
|
|
30
23
|
glyph: "filter",
|
|
31
24
|
label: "Toggle"
|
|
32
25
|
}, function (_ref) {
|
|
33
|
-
var
|
|
26
|
+
var menu = _ref.menu;
|
|
34
27
|
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
35
28
|
type: "button",
|
|
36
|
-
onClick:
|
|
29
|
+
onClick: menu.toggle
|
|
37
30
|
}, "Toggle dropdown");
|
|
38
31
|
});
|
|
39
32
|
});
|
|
@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
+
var _stack = require("../../layout/stack");
|
|
13
|
+
|
|
12
14
|
var _i18n = _interopRequireDefault(require("../../i18n"));
|
|
13
15
|
|
|
14
16
|
var _emptySetModule = _interopRequireDefault(require("./empty-set.module.css"));
|
|
@@ -42,11 +44,10 @@ var EmptySet = function EmptySet(props) {
|
|
|
42
44
|
type: "button",
|
|
43
45
|
onClick: handleViewAll
|
|
44
46
|
}, _i18n["default"].VIEW_ALL)] : []));
|
|
45
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
47
|
+
return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
|
|
48
|
+
space: "xxsmall",
|
|
46
49
|
className: _emptySetModule["default"].root
|
|
47
|
-
}, /*#__PURE__*/_react["default"].createElement("p", {
|
|
48
|
-
className: _emptySetModule["default"].text
|
|
49
|
-
}, message), filtered && actions.map(function (action, index) {
|
|
50
|
+
}, /*#__PURE__*/_react["default"].createElement("p", null, message), filtered && actions.map(function (action, index) {
|
|
50
51
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, index > 0 && ' or ', action);
|
|
51
52
|
}));
|
|
52
53
|
};
|
|
@@ -27,7 +27,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
|
|
|
27
27
|
|
|
28
28
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
29
29
|
|
|
30
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); }
|
|
30
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
31
31
|
|
|
32
32
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
33
33
|
|
|
@@ -21,7 +21,7 @@ var _filters = require("./filters.utils");
|
|
|
21
21
|
|
|
22
22
|
var _filtersModule = _interopRequireDefault(require("./filters.module.css"));
|
|
23
23
|
|
|
24
|
-
var _excluded = ["className", "label", "name", "getOnOnlyClick"],
|
|
24
|
+
var _excluded = ["className", "buttonClassName", "label", "name", "getOnOnlyClick"],
|
|
25
25
|
_excluded2 = ["label"];
|
|
26
26
|
|
|
27
27
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -52,6 +52,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
52
52
|
|
|
53
53
|
var Filter = function Filter(props) {
|
|
54
54
|
var className = props.className,
|
|
55
|
+
buttonClassName = props.buttonClassName,
|
|
55
56
|
label = props.label,
|
|
56
57
|
name = props.name,
|
|
57
58
|
getOnOnlyClick = props.getOnOnlyClick,
|
|
@@ -64,7 +65,7 @@ var Filter = function Filter(props) {
|
|
|
64
65
|
}, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
|
|
65
66
|
space: "xxxsmall",
|
|
66
67
|
as: "label",
|
|
67
|
-
className: _filtersModule["default"].filterCheckbox
|
|
68
|
+
className: (0, _classnames["default"])(_filtersModule["default"].filterCheckbox, buttonClassName)
|
|
68
69
|
}, /*#__PURE__*/_react["default"].createElement("input", _extends({
|
|
69
70
|
className: _filtersModule["default"].filterInput,
|
|
70
71
|
type: "checkbox",
|
|
@@ -82,17 +83,21 @@ var Filter = function Filter(props) {
|
|
|
82
83
|
|
|
83
84
|
Filter.propTypes = {
|
|
84
85
|
className: _propTypes["default"].string,
|
|
86
|
+
buttonClassName: _propTypes["default"].string,
|
|
85
87
|
name: _propTypes["default"].string.isRequired,
|
|
86
88
|
label: _propTypes["default"].string.isRequired,
|
|
87
89
|
getOnOnlyClick: _propTypes["default"].func
|
|
88
90
|
};
|
|
89
91
|
Filter.defaultProps = {
|
|
90
92
|
className: '',
|
|
93
|
+
buttonClassName: '',
|
|
91
94
|
getOnOnlyClick: null
|
|
92
95
|
};
|
|
93
96
|
|
|
94
97
|
var FilterGroup = function FilterGroup(props) {
|
|
95
|
-
var
|
|
98
|
+
var className = props.className,
|
|
99
|
+
buttonClassName = props.buttonClassName,
|
|
100
|
+
groupKey = props.groupKey,
|
|
96
101
|
data = props.data,
|
|
97
102
|
values = props.values,
|
|
98
103
|
onCheckboxChange = props.onCheckboxChange,
|
|
@@ -138,6 +143,8 @@ var FilterGroup = function FilterGroup(props) {
|
|
|
138
143
|
};
|
|
139
144
|
|
|
140
145
|
return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
|
|
146
|
+
className: className,
|
|
147
|
+
buttonClassName: buttonClassName,
|
|
141
148
|
label: dropdownLabel,
|
|
142
149
|
ariaLabel: "".concat(groupLabel, ": ").concat(filterSuffix)
|
|
143
150
|
}, function (_ref7) {
|
|
@@ -188,6 +195,8 @@ var FilterGroup = function FilterGroup(props) {
|
|
|
188
195
|
};
|
|
189
196
|
|
|
190
197
|
FilterGroup.propTypes = {
|
|
198
|
+
className: _propTypes["default"].string,
|
|
199
|
+
buttonClassName: _propTypes["default"].string,
|
|
191
200
|
groupKey: _propTypes["default"].string.isRequired,
|
|
192
201
|
data: _propTypes["default"].object.isRequired,
|
|
193
202
|
// eslint-disable-line react/forbid-prop-types
|
|
@@ -196,6 +205,10 @@ FilterGroup.propTypes = {
|
|
|
196
205
|
onCheckboxChange: _propTypes["default"].func.isRequired,
|
|
197
206
|
toggleFilters: _propTypes["default"].func.isRequired
|
|
198
207
|
};
|
|
208
|
+
FilterGroup.defaultProps = {
|
|
209
|
+
className: '',
|
|
210
|
+
buttonClassName: ''
|
|
211
|
+
};
|
|
199
212
|
|
|
200
213
|
var Filters = function Filters(props) {
|
|
201
214
|
var className = props.className,
|
|
@@ -213,6 +226,7 @@ var Filters = function Filters(props) {
|
|
|
213
226
|
return /*#__PURE__*/_react["default"].createElement("form", {
|
|
214
227
|
className: rootClassName
|
|
215
228
|
}, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
|
|
229
|
+
space: "xxsmall",
|
|
216
230
|
className: _filtersModule["default"].items
|
|
217
231
|
}, Object.entries(filters).map(function (_ref11) {
|
|
218
232
|
var _ref12 = _slicedToArray(_ref11, 2),
|
|
@@ -223,6 +237,7 @@ var Filters = function Filters(props) {
|
|
|
223
237
|
return /*#__PURE__*/_react["default"].createElement(Filter, {
|
|
224
238
|
key: name,
|
|
225
239
|
className: (0, _classnames["default"])(_filtersModule["default"].item, _filtersModule["default"].filterStandalone),
|
|
240
|
+
buttonClassName: _filtersModule["default"].itemButton,
|
|
226
241
|
name: name,
|
|
227
242
|
label: data.label,
|
|
228
243
|
onChange: onCheckboxChange,
|
|
@@ -231,16 +246,16 @@ var Filters = function Filters(props) {
|
|
|
231
246
|
});
|
|
232
247
|
}
|
|
233
248
|
|
|
234
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
235
|
-
className: _filtersModule["default"].item
|
|
236
|
-
|
|
249
|
+
return /*#__PURE__*/_react["default"].createElement(FilterGroup, {
|
|
250
|
+
className: _filtersModule["default"].item,
|
|
251
|
+
buttonClassName: _filtersModule["default"].itemButton,
|
|
237
252
|
key: name,
|
|
238
253
|
groupKey: name,
|
|
239
254
|
data: data,
|
|
240
255
|
values: values,
|
|
241
256
|
onCheckboxChange: onCheckboxChange,
|
|
242
257
|
toggleFilters: toggleFilters
|
|
243
|
-
})
|
|
258
|
+
});
|
|
244
259
|
})));
|
|
245
260
|
};
|
|
246
261
|
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.filterInput {
|
|
14
|
+
border-radius: var(--radius-small) 0 0 var(--radius-small);
|
|
14
15
|
flex: 0 0 auto;
|
|
15
16
|
height: 1em;
|
|
16
17
|
cursor: pointer;
|
|
@@ -131,9 +132,8 @@
|
|
|
131
132
|
.item {
|
|
132
133
|
position: relative;
|
|
133
134
|
flex: 0 0 auto;
|
|
134
|
-
margin-right: -1px;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.
|
|
138
|
-
|
|
137
|
+
.itemButton {
|
|
138
|
+
border-radius: var(--radius-small);
|
|
139
139
|
}
|
|
@@ -45,7 +45,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
|
|
|
45
45
|
|
|
46
46
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
47
47
|
|
|
48
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); }
|
|
48
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
49
49
|
|
|
50
50
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
51
51
|
|