@carbon/ibm-products 2.0.0-rc.18 → 2.0.0-rc.19
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +135 -20
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +135 -20
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +134 -20
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/Datagrid.js +4 -4
- package/es/components/Datagrid/Datagrid/DatagridContent.js +46 -16
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -21
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +120 -60
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +514 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +10 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +9 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +9 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +53 -19
- package/es/components/Datagrid/Datagrid.stories/index.js +0 -1
- package/es/components/Datagrid/useFiltering.js +11 -4
- package/es/components/Datagrid/utils/DatagridActions.js +41 -13
- package/es/components/OptionsTile/OptionsTile.js +3 -3
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/Datagrid/Datagrid/Datagrid.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +48 -15
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -23
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +113 -51
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +538 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +9 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +31 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +23 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +53 -18
- package/lib/components/Datagrid/Datagrid.stories/index.js +0 -8
- package/lib/components/Datagrid/useFiltering.js +11 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +41 -11
- package/lib/components/OptionsTile/OptionsTile.js +2 -2
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +16 -17
- package/scss/components/Datagrid/styles/_index.scss +1 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +3 -3
- package/scss/components/FilterSummary/_filter-summary.scss +1 -0
- package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -6
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +0 -13
@@ -0,0 +1,50 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
15
|
+
|
16
|
+
/**
|
17
|
+
* Copyright IBM Corp. 2023, 2023
|
18
|
+
*
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
21
|
+
*/
|
22
|
+
|
23
|
+
/* eslint-disable jsdoc/check-param-names */
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Keeps track of the button disabled state
|
27
|
+
* @param {string} initialValue - the initial value if the buttons should be enabled or disabled
|
28
|
+
* @param {object} filtersState - the filter state from the filter panel or flyout
|
29
|
+
* @param {object} prevFiltersRef - reference of the prev filterState
|
30
|
+
* @returns {Array} returns a tuple of the state and setter function
|
31
|
+
*/
|
32
|
+
var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
|
33
|
+
var _ref$initialValue = _ref.initialValue,
|
34
|
+
initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
|
35
|
+
filtersState = _ref.filtersState,
|
36
|
+
prevFiltersRef = _ref.prevFiltersRef;
|
37
|
+
|
38
|
+
var _useState = (0, _react.useState)(initialValue),
|
39
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
40
|
+
shouldDisableButtons = _useState2[0],
|
41
|
+
setShouldDisableButtons = _useState2[1];
|
42
|
+
|
43
|
+
(0, _react.useEffect)(function updateDisabledButtonsState() {
|
44
|
+
setShouldDisableButtons((0, _isEqual.default)(filtersState, JSON.parse(prevFiltersRef.current)));
|
45
|
+
}, [filtersState, prevFiltersRef]);
|
46
|
+
return [shouldDisableButtons, setShouldDisableButtons];
|
47
|
+
};
|
48
|
+
|
49
|
+
var _default = useShouldDisableButtons;
|
50
|
+
exports.default = _default;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _react = require("react");
|
9
|
+
|
10
|
+
var _FilterProvider = require("../FilterProvider");
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2022, 2023
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
|
19
|
+
/**
|
20
|
+
* Subscribes to the filter event emitter
|
21
|
+
* @param {string} type - the type of event to call
|
22
|
+
* @param {Function} callback - a callback to run when the event is dispatched
|
23
|
+
*/
|
24
|
+
var useSubscribeToEventEmitter = function useSubscribeToEventEmitter(type, callback) {
|
25
|
+
var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
|
26
|
+
EventEmitter = _useContext.EventEmitter;
|
27
|
+
|
28
|
+
(0, _react.useEffect)(function subscribeToEmitter() {
|
29
|
+
// This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
|
30
|
+
EventEmitter.subscribe(type, callback);
|
31
|
+
});
|
32
|
+
};
|
33
|
+
|
34
|
+
var _default = useSubscribeToEventEmitter;
|
35
|
+
exports.default = _default;
|
@@ -5,11 +5,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
+
Object.defineProperty(exports, "FilterContext", {
|
9
|
+
enumerable: true,
|
10
|
+
get: function get() {
|
11
|
+
return _FilterProvider.FilterContext;
|
12
|
+
}
|
13
|
+
});
|
8
14
|
Object.defineProperty(exports, "FilterFlyout", {
|
9
15
|
enumerable: true,
|
10
16
|
get: function get() {
|
11
17
|
return _FilterFlyout.default;
|
12
18
|
}
|
13
19
|
});
|
20
|
+
Object.defineProperty(exports, "FilterPanel", {
|
21
|
+
enumerable: true,
|
22
|
+
get: function get() {
|
23
|
+
return _FilterPanel.default;
|
24
|
+
}
|
25
|
+
});
|
26
|
+
Object.defineProperty(exports, "FilterProvider", {
|
27
|
+
enumerable: true,
|
28
|
+
get: function get() {
|
29
|
+
return _FilterProvider.FilterProvider;
|
30
|
+
}
|
31
|
+
});
|
32
|
+
|
33
|
+
var _FilterFlyout = _interopRequireDefault(require("./FilterFlyout"));
|
34
|
+
|
35
|
+
var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
|
14
36
|
|
15
|
-
var
|
37
|
+
var _FilterProvider = require("./FilterProvider");
|
@@ -0,0 +1,67 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.panelVariants = exports.innerContainerVariants = exports.actionSetVariants = void 0;
|
7
|
+
|
8
|
+
var _motionConstants = require("../../../../../../global/js/utils/motionConstants");
|
9
|
+
|
10
|
+
var _constants = require("../constants");
|
11
|
+
|
12
|
+
var panelVariants = {
|
13
|
+
hidden: {
|
14
|
+
width: 0,
|
15
|
+
overflow: 'hidden',
|
16
|
+
transition: {
|
17
|
+
duration: _motionConstants.DURATIONS.fast02,
|
18
|
+
ease: _motionConstants.EASINGS.productive.exit,
|
19
|
+
when: 'afterChildren'
|
20
|
+
}
|
21
|
+
},
|
22
|
+
visible: {
|
23
|
+
width: _constants.PANEL_WIDTH,
|
24
|
+
overflow: 'visible',
|
25
|
+
transition: {
|
26
|
+
duration: _motionConstants.DURATIONS.moderate02,
|
27
|
+
ease: _motionConstants.EASINGS.productive.entrance,
|
28
|
+
when: 'beforeChildren'
|
29
|
+
}
|
30
|
+
}
|
31
|
+
};
|
32
|
+
exports.panelVariants = panelVariants;
|
33
|
+
var innerContainerVariants = {
|
34
|
+
hidden: {
|
35
|
+
opacity: 0,
|
36
|
+
transition: {
|
37
|
+
duration: _motionConstants.DURATIONS.fast01,
|
38
|
+
ease: _motionConstants.EASINGS.productive.exit
|
39
|
+
}
|
40
|
+
},
|
41
|
+
visible: {
|
42
|
+
opacity: 1,
|
43
|
+
transition: {
|
44
|
+
duration: _motionConstants.DURATIONS.fast02,
|
45
|
+
ease: _motionConstants.EASINGS.productive.entrance,
|
46
|
+
when: 'beforeChildren'
|
47
|
+
}
|
48
|
+
}
|
49
|
+
};
|
50
|
+
exports.innerContainerVariants = innerContainerVariants;
|
51
|
+
var actionSetVariants = {
|
52
|
+
hidden: {
|
53
|
+
y: _constants.ACTION_SET_HEIGHT,
|
54
|
+
transition: {
|
55
|
+
duration: _motionConstants.DURATIONS.fast01,
|
56
|
+
ease: _motionConstants.EASINGS.productive.exit
|
57
|
+
}
|
58
|
+
},
|
59
|
+
visible: {
|
60
|
+
y: 0,
|
61
|
+
transition: {
|
62
|
+
duration: _motionConstants.DURATIONS.fast02,
|
63
|
+
ease: _motionConstants.EASINGS.productive.entrance
|
64
|
+
}
|
65
|
+
}
|
66
|
+
};
|
67
|
+
exports.actionSetVariants = actionSetVariants;
|
@@ -5,42 +5,77 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.getInitialStateFromFilters = void 0;
|
7
7
|
|
8
|
+
var _constants = require("./constants");
|
9
|
+
|
8
10
|
/**
|
9
|
-
* Copyright IBM Corp. 2022,
|
11
|
+
* Copyright IBM Corp. 2022, 2023
|
10
12
|
*
|
11
13
|
* This source code is licensed under the Apache-2.0 license found in the
|
12
14
|
* LICENSE file in the root directory of this source tree.
|
13
15
|
*/
|
14
16
|
// This functions takes the filters passed in and makes an object to track it's state
|
15
17
|
var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
|
18
|
+
var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
|
16
19
|
var initialFilterState = {};
|
17
|
-
|
20
|
+
|
21
|
+
var setInitialState = function setInitialState(_ref) {
|
18
22
|
var type = _ref.type,
|
19
23
|
column = _ref.column,
|
20
24
|
props = _ref.props;
|
21
25
|
|
22
26
|
if (type === 'checkbox') {
|
23
|
-
initialFilterState[column] =
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
27
|
+
initialFilterState[column] = {
|
28
|
+
value: props.Checkbox.map(function (_ref2) {
|
29
|
+
var id = _ref2.id,
|
30
|
+
labelText = _ref2.labelText,
|
31
|
+
value = _ref2.value;
|
32
|
+
return {
|
33
|
+
id: id,
|
34
|
+
labelText: labelText,
|
35
|
+
value: value,
|
36
|
+
selected: false
|
37
|
+
};
|
38
|
+
}),
|
39
|
+
type: type
|
40
|
+
};
|
34
41
|
} else if (type === 'date') {
|
35
|
-
initialFilterState[column] =
|
42
|
+
initialFilterState[column] = {
|
43
|
+
value: [null, null],
|
44
|
+
type: type
|
45
|
+
};
|
36
46
|
} else if (type === 'number') {
|
37
|
-
initialFilterState[column] =
|
47
|
+
initialFilterState[column] = {
|
48
|
+
value: '',
|
49
|
+
type: type
|
50
|
+
};
|
38
51
|
} else if (type === 'radio') {
|
39
|
-
initialFilterState[column] =
|
52
|
+
initialFilterState[column] = {
|
53
|
+
value: '',
|
54
|
+
type: type
|
55
|
+
};
|
40
56
|
} else if (type === 'dropdown') {
|
41
|
-
initialFilterState[column] =
|
57
|
+
initialFilterState[column] = {
|
58
|
+
value: '',
|
59
|
+
type: type
|
60
|
+
};
|
42
61
|
}
|
43
|
-
}
|
62
|
+
};
|
63
|
+
|
64
|
+
if (variation === _constants.FLYOUT) {
|
65
|
+
filters.forEach(setInitialState);
|
66
|
+
} else if (variation === _constants.PANEL) {
|
67
|
+
filters.forEach(function (_ref3) {
|
68
|
+
var _ref3$filters = _ref3.filters,
|
69
|
+
sections = _ref3$filters === void 0 ? [] : _ref3$filters;
|
70
|
+
sections.forEach(function (_ref4) {
|
71
|
+
var filter = _ref4.filter;
|
72
|
+
return setInitialState(filter);
|
73
|
+
});
|
74
|
+
});
|
75
|
+
} else {
|
76
|
+
console.error('No variation passed into useInitialStateFromFilters');
|
77
|
+
}
|
78
|
+
|
44
79
|
return initialFilterState;
|
45
80
|
};
|
46
81
|
|
@@ -11,12 +11,6 @@ Object.defineProperty(exports, "CustomizeColumnStoryNotes", {
|
|
11
11
|
return _CustomizeColumnStory.story;
|
12
12
|
}
|
13
13
|
});
|
14
|
-
Object.defineProperty(exports, "LeftPanelStory", {
|
15
|
-
enumerable: true,
|
16
|
-
get: function get() {
|
17
|
-
return _LeftPanelStory.story;
|
18
|
-
}
|
19
|
-
});
|
20
14
|
Object.defineProperty(exports, "RowSizeDropdownStory", {
|
21
15
|
enumerable: true,
|
22
16
|
get: function get() {
|
@@ -42,6 +36,4 @@ var _StickyActionsColumnStory = _interopRequireDefault(require("./StickyActionsC
|
|
42
36
|
|
43
37
|
var _RowSizeDropdownStory = require("./RowSizeDropdownStory");
|
44
38
|
|
45
|
-
var _LeftPanelStory = require("./LeftPanelStory");
|
46
|
-
|
47
39
|
var _SelectAllWithToggleStory = require("./SelectAllWithToggleStory");
|
@@ -15,6 +15,8 @@ var _react = require("react");
|
|
15
15
|
|
16
16
|
var _Filtering = require("./Datagrid/addons/Filtering");
|
17
17
|
|
18
|
+
var _constants = require("./Datagrid/addons/Filtering/constants");
|
19
|
+
|
18
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
19
21
|
|
20
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
@@ -72,15 +74,21 @@ var useFiltering = function useFiltering(hooks) {
|
|
72
74
|
hooks.useInstance.push(function (instance) {
|
73
75
|
var filterProps = instance.filterProps,
|
74
76
|
setAllFilters = instance.setAllFilters,
|
75
|
-
|
77
|
+
setFilter = instance.setFilter,
|
78
|
+
headers = instance.headers,
|
79
|
+
data = instance.data;
|
76
80
|
var defaultProps = {
|
77
|
-
variation: 'flyout'
|
81
|
+
variation: 'flyout',
|
82
|
+
updateMethod: _constants.BATCH,
|
83
|
+
panelIconDescription: 'Open filter panel'
|
78
84
|
};
|
79
85
|
|
80
86
|
var getFilterFlyoutProps = function getFilterFlyoutProps() {
|
81
87
|
return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
|
82
88
|
setAllFilters: setAllFilters,
|
83
|
-
|
89
|
+
setFilter: setFilter,
|
90
|
+
headers: headers,
|
91
|
+
data: data
|
84
92
|
});
|
85
93
|
};
|
86
94
|
|
@@ -11,6 +11,8 @@ exports.DatagridActions = void 0;
|
|
11
11
|
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
13
|
|
14
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15
|
+
|
14
16
|
var _react = _interopRequireWildcard(require("react"));
|
15
17
|
|
16
18
|
var _react2 = require("@carbon/react");
|
@@ -23,6 +25,8 @@ var _settings = require("../../../settings");
|
|
23
25
|
|
24
26
|
var _ButtonMenu = require("../../ButtonMenu");
|
25
27
|
|
28
|
+
var _Filtering = require("../Datagrid/addons/Filtering");
|
29
|
+
|
26
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
27
31
|
|
28
32
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -36,6 +40,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
36
40
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
37
41
|
|
38
42
|
var DatagridActions = function DatagridActions(datagridState) {
|
43
|
+
var _useContext = (0, _react.useContext)(_Filtering.FilterContext),
|
44
|
+
setLeftPanelOpen = _useContext.setLeftPanelOpen;
|
45
|
+
|
39
46
|
var selectedFlatRows = datagridState.selectedFlatRows,
|
40
47
|
setGlobalFilter = datagridState.setGlobalFilter,
|
41
48
|
CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
|
@@ -44,7 +51,8 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
44
51
|
useDenseHeader = datagridState.useDenseHeader,
|
45
52
|
filterProps = datagridState.filterProps,
|
46
53
|
getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
|
47
|
-
FilterFlyout = datagridState.FilterFlyout
|
54
|
+
FilterFlyout = datagridState.FilterFlyout,
|
55
|
+
data = datagridState.data;
|
48
56
|
|
49
57
|
var downloadCsv = function downloadCsv() {
|
50
58
|
alert('Downloading...');
|
@@ -66,6 +74,28 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
66
74
|
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
|
67
75
|
};
|
68
76
|
|
77
|
+
var renderFilterPanelButton = function renderFilterPanelButton() {
|
78
|
+
return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
79
|
+
kind: "ghost",
|
80
|
+
hasIconOnly: true,
|
81
|
+
tooltipPosition: "bottom",
|
82
|
+
renderIcon: function renderIcon(props) {
|
83
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
|
84
|
+
size: 16
|
85
|
+
}, props));
|
86
|
+
},
|
87
|
+
iconDescription: filterProps.panelIconDescription,
|
88
|
+
className: "".concat(blockClass, "-filter-panel-open-button"),
|
89
|
+
onClick: function onClick() {
|
90
|
+
return setLeftPanelOpen(function (open) {
|
91
|
+
return !open;
|
92
|
+
});
|
93
|
+
},
|
94
|
+
disabled: data.length === 0,
|
95
|
+
tooltipAlignment: "start"
|
96
|
+
});
|
97
|
+
};
|
98
|
+
|
69
99
|
var _useState = (0, _react.useState)(false),
|
70
100
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
71
101
|
modalOpen = _useState2[0],
|
@@ -90,7 +120,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
90
120
|
var items = ['Option 1', 'Option 2', 'Option 3'];
|
91
121
|
return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, {
|
92
122
|
size: "sm"
|
93
|
-
}, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
123
|
+
}, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement("div", {
|
94
124
|
style: style
|
95
125
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
96
126
|
kind: "ghost",
|
@@ -99,16 +129,16 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
99
129
|
renderIcon: _icons.Download,
|
100
130
|
iconDescription: 'Download CSV',
|
101
131
|
onClick: downloadCsv
|
102
|
-
})), renderFilterFlyout(),
|
132
|
+
})), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
|
133
|
+
style: style
|
134
|
+
}, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
|
103
135
|
style: style,
|
104
136
|
className: "".concat(blockClass, "__toolbar-divider")
|
105
137
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
106
138
|
kind: "ghost",
|
107
139
|
renderIcon: _icons.Add,
|
108
140
|
iconDescription: 'Action'
|
109
|
-
}, "Ghost button"))
|
110
|
-
style: style
|
111
|
-
}, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
141
|
+
}, "Ghost button"))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
112
142
|
ariaLabel: "Tools",
|
113
143
|
size: "md",
|
114
144
|
flipped: true
|
@@ -135,7 +165,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
135
165
|
itemText: "Create",
|
136
166
|
hasDivider: true,
|
137
167
|
requireTitle: true
|
138
|
-
}))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
|
168
|
+
}))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
|
139
169
|
size: "xl",
|
140
170
|
id: "columnSearch",
|
141
171
|
persistent: true,
|
@@ -143,7 +173,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
143
173
|
onChange: function onChange(e) {
|
144
174
|
return setGlobalFilter(e.target.value);
|
145
175
|
}
|
146
|
-
}), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(
|
176
|
+
}), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement("div", {
|
147
177
|
style: style
|
148
178
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
149
179
|
kind: "ghost",
|
@@ -163,7 +193,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
163
193
|
onClick: downloadCsv
|
164
194
|
})), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
|
165
195
|
style: style
|
166
|
-
}, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
|
196
|
+
}, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
|
167
197
|
label: "Primary button",
|
168
198
|
renderIcon: _icons.ChevronDown,
|
169
199
|
menuOptionsClass: "".concat(blockClass, "__toolbar-options")
|
@@ -176,7 +206,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
176
206
|
}), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
|
177
207
|
itemText: "Option 3",
|
178
208
|
onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
|
179
|
-
}))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
|
209
|
+
}))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
|
180
210
|
size: "xl",
|
181
211
|
id: "columnSearch",
|
182
212
|
persistent: true,
|
@@ -184,7 +214,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
184
214
|
onChange: function onChange(e) {
|
185
215
|
return setGlobalFilter(e.target.value);
|
186
216
|
}
|
187
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
217
|
+
}), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
188
218
|
ariaLabel: "Tools",
|
189
219
|
size: "lg",
|
190
220
|
flipped: true,
|
@@ -273,11 +273,11 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
273
273
|
}), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
|
274
274
|
className: "".concat(blockClass, "__content"),
|
275
275
|
ref: contentRef
|
276
|
-
}, isLocked && /*#__PURE__*/_react.default.createElement("p", {
|
276
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Layer, null, isLocked && /*#__PURE__*/_react.default.createElement("p", {
|
277
277
|
className: "".concat(blockClass, "__locked-text")
|
278
278
|
}, /*#__PURE__*/_react.default.createElement(_icons.Locked, {
|
279
279
|
size: 16
|
280
|
-
}), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
|
280
|
+
}), lockedText), children))) : /*#__PURE__*/_react.default.createElement("div", {
|
281
281
|
className: "".concat(blockClass, "__static-content")
|
282
282
|
}, renderTitle()));
|
283
283
|
}); // Return a placeholder if not released and not enabled by feature flag
|
@@ -194,6 +194,11 @@ Tearsheet.propTypes = _objectSpread({
|
|
194
194
|
*/
|
195
195
|
open: _propTypes.default.bool,
|
196
196
|
|
197
|
+
/**
|
198
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
199
|
+
*/
|
200
|
+
portalTarget: _propTypes.default.node,
|
201
|
+
|
197
202
|
/**
|
198
203
|
* The main title of the tearsheet, displayed in the header area.
|
199
204
|
*/
|
@@ -156,6 +156,11 @@ TearsheetNarrow.propTypes = _objectSpread({
|
|
156
156
|
*/
|
157
157
|
open: _propTypes.default.bool,
|
158
158
|
|
159
|
+
/**
|
160
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
161
|
+
*/
|
162
|
+
portalTarget: _propTypes.default.node,
|
163
|
+
|
159
164
|
/**
|
160
165
|
* The main title of the tearsheet, displayed in the header area.
|
161
166
|
*/
|
@@ -430,7 +430,7 @@ TearsheetShell.propTypes = _objectSpread({
|
|
430
430
|
open: _propTypes.default.bool,
|
431
431
|
|
432
432
|
/**
|
433
|
-
*
|
433
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
434
434
|
*/
|
435
435
|
portalTarget: _propTypes.default.node,
|
436
436
|
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.0.0-rc.
|
4
|
+
"version": "2.0.0-rc.19",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -94,5 +94,5 @@
|
|
94
94
|
"react": "^16.8.6 || ^17.0.1",
|
95
95
|
"react-dom": "^16.8.6 || ^17.0.1"
|
96
96
|
},
|
97
|
-
"gitHead": "
|
97
|
+
"gitHead": "383f81a5557b5dc2608685de4b4454beabb755c5"
|
98
98
|
}
|
@@ -368,26 +368,20 @@
|
|
368
368
|
flex-direction: row;
|
369
369
|
}
|
370
370
|
|
371
|
-
.#{$block-class}
|
372
|
-
|
373
|
-
|
374
|
-
background-color: $layer-01;
|
375
|
-
}
|
376
|
-
|
377
|
-
.#{$block-class}__leftPanel-position {
|
378
|
-
display: inherit;
|
371
|
+
.#{$block-class}__table-container-inner {
|
372
|
+
overflow: hidden;
|
373
|
+
flex: 1;
|
379
374
|
}
|
380
375
|
|
381
376
|
.#{$block-class}__datagridWithPanel {
|
382
377
|
position: relative;
|
383
378
|
display: flex;
|
384
|
-
width: 100%;
|
385
379
|
height: 100%;
|
386
380
|
flex-direction: column;
|
387
381
|
|
388
382
|
.#{$block-class}__grid-container {
|
389
383
|
display: flex;
|
390
|
-
overflow:
|
384
|
+
overflow: visible;
|
391
385
|
flex-direction: column;
|
392
386
|
}
|
393
387
|
|
@@ -395,15 +389,18 @@
|
|
395
389
|
width: 100%;
|
396
390
|
}
|
397
391
|
|
398
|
-
.#{$block-class}
|
399
|
-
|
392
|
+
.#{$block-class}__table-container {
|
393
|
+
display: flex;
|
394
|
+
overflow: visible;
|
395
|
+
background-color: $layer-01;
|
400
396
|
}
|
401
397
|
|
402
|
-
.#{
|
403
|
-
|
398
|
+
.#{$block-class}__table-container .#{$block-class}__filter-summary {
|
399
|
+
border-bottom: 1px solid $layer-03;
|
404
400
|
}
|
405
|
-
|
406
|
-
|
401
|
+
|
402
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-simple {
|
403
|
+
height: 100%;
|
407
404
|
}
|
408
405
|
}
|
409
406
|
|
@@ -413,6 +410,7 @@
|
|
413
410
|
overflow: auto;
|
414
411
|
width: 100%;
|
415
412
|
max-height: 100%;
|
413
|
+
overflow-y: auto;
|
416
414
|
}
|
417
415
|
|
418
416
|
.#{$block-class}__carbon-row-expanded {
|
@@ -447,8 +445,9 @@
|
|
447
445
|
}
|
448
446
|
|
449
447
|
.#{$block-class}__table-toolbar {
|
450
|
-
flex:
|
448
|
+
flex: 1 0 auto;
|
451
449
|
}
|
450
|
+
|
452
451
|
.#{c4p-settings.$carbon-prefix}--table-toolbar {
|
453
452
|
background: transparent;
|
454
453
|
}
|