@carbon/ibm-products 2.18.1 → 2.19.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +460 -120
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +113 -49
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +141 -49
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +127 -50
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.js +1 -1
- package/es/components/Card/Card.js +11 -2
- package/es/components/Card/CardHeader.js +41 -3
- package/es/components/CreateSidePanel/CreateSidePanel.js +4 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +98 -47
- package/es/components/Datagrid/Datagrid/DatagridRow.js +14 -4
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +0 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +55 -30
- package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +1 -1
- package/es/components/Datagrid/useFiltering.js +2 -1
- package/es/components/EditSidePanel/EditSidePanel.js +4 -0
- package/es/components/ExpressiveCard/ExpressiveCard.js +5 -0
- package/es/components/Guidebanner/Guidebanner.js +12 -3
- package/es/components/InlineTip/InlineTip.js +17 -6
- package/es/components/InlineTip/InlineTipButton.js +2 -0
- package/es/components/InlineTip/InlineTipLink.js +2 -0
- package/es/components/ProductiveCard/ProductiveCard.js +5 -0
- package/es/components/SidePanel/SidePanel.js +7 -6
- package/es/components/index.js +4 -1
- package/es/global/js/package-settings.js +2 -0
- package/lib/components/APIKeyModal/APIKeyModal.js +1 -1
- package/lib/components/Card/Card.js +13 -4
- package/lib/components/Card/CardHeader.js +40 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +4 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +105 -53
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +14 -4
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +0 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +55 -30
- package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +1 -1
- package/lib/components/Datagrid/useFiltering.js +2 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +4 -0
- package/lib/components/ExpressiveCard/ExpressiveCard.js +5 -0
- package/lib/components/Guidebanner/Guidebanner.js +12 -3
- package/lib/components/InlineTip/InlineTip.js +17 -6
- package/lib/components/InlineTip/InlineTipButton.js +2 -0
- package/lib/components/InlineTip/InlineTipLink.js +2 -0
- package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
- package/lib/components/SidePanel/SidePanel.js +7 -6
- package/lib/components/index.js +52 -1
- package/lib/global/js/package-settings.js +2 -0
- package/package.json +5 -5
- package/scss/components/Card/_card.scss +89 -0
- package/scss/components/Guidebanner/_guidebanner.scss +25 -0
- package/scss/components/InlineTip/_inline-tip.scss +12 -0
- package/scss/components/ProductiveCard/_productive-card.scss +0 -5
- package/scss/components/SidePanel/_side-panel.scss +41 -23
@@ -1,8 +1,13 @@
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
2
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
|
+
import _extends from "@babel/runtime/helpers/extends";
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
+
var _excluded = ["role"],
|
6
|
+
_excluded2 = ["className", "role"],
|
7
|
+
_excluded3 = ["role", "className"];
|
4
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
9
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
10
|
+
/* eslint-disable react/prop-types */
|
6
11
|
/**
|
7
12
|
* Copyright IBM Corp. 2020, 2023
|
8
13
|
*
|
@@ -29,6 +34,57 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
|
|
29
34
|
}
|
30
35
|
return props;
|
31
36
|
};
|
37
|
+
var ResizeHeader = function ResizeHeader(_ref) {
|
38
|
+
var resizerProps = _ref.resizerProps,
|
39
|
+
header = _ref.header,
|
40
|
+
handleOnMouseDownResize = _ref.handleOnMouseDownResize,
|
41
|
+
originalCol = _ref.originalCol,
|
42
|
+
columnWidths = _ref.columnWidths,
|
43
|
+
datagridState = _ref.datagridState,
|
44
|
+
incrementAmount = _ref.incrementAmount,
|
45
|
+
minWidth = _ref.minWidth,
|
46
|
+
dispatch = _ref.dispatch,
|
47
|
+
onColResizeEnd = _ref.onColResizeEnd,
|
48
|
+
resizerAriaLabel = _ref.resizerAriaLabel;
|
49
|
+
var role = resizerProps.role,
|
50
|
+
headerProps = _objectWithoutProperties(resizerProps, _excluded);
|
51
|
+
var mouseDownHandler = function mouseDownHandler(evt) {
|
52
|
+
handleOnMouseDownResize(evt, resizerProps);
|
53
|
+
};
|
54
|
+
var keyDownHandler = function keyDownHandler(evt) {
|
55
|
+
var key = evt.key;
|
56
|
+
if (key === 'ArrowLeft' || key === 'ArrowRight') {
|
57
|
+
var originalColMinWidth = originalCol.minWidth || 90;
|
58
|
+
var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
|
59
|
+
if (key === 'ArrowLeft') {
|
60
|
+
if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
|
61
|
+
var newWidth = currentColumnWidth - incrementAmount;
|
62
|
+
handleColumnResizingEvent(dispatch, header, newWidth, true);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
if (key === 'ArrowRight') {
|
66
|
+
var _newWidth = currentColumnWidth + incrementAmount;
|
67
|
+
handleColumnResizingEvent(dispatch, header, _newWidth, true);
|
68
|
+
}
|
69
|
+
}
|
70
|
+
};
|
71
|
+
var keyUpHandler = function keyUpHandler() {
|
72
|
+
handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
|
73
|
+
};
|
74
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, headerProps, role === 'separator' && {
|
75
|
+
role: role
|
76
|
+
}, {
|
77
|
+
onMouseDown: mouseDownHandler,
|
78
|
+
onKeyDown: keyDownHandler,
|
79
|
+
onKeyUp: keyUpHandler,
|
80
|
+
className: "".concat(blockClass, "__col-resizer-range"),
|
81
|
+
type: "range",
|
82
|
+
defaultValue: originalCol.width,
|
83
|
+
"aria-label": resizerAriaLabel || 'Resize column'
|
84
|
+
})), /*#__PURE__*/React.createElement("span", {
|
85
|
+
className: "".concat(blockClass, "__col-resize-indicator")
|
86
|
+
}));
|
87
|
+
};
|
32
88
|
var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
33
89
|
var resizerAriaLabel = datagridState.resizerAriaLabel;
|
34
90
|
// Used to measure the height of the table and uses that value
|
@@ -42,9 +98,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
42
98
|
var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
|
43
99
|
var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
|
44
100
|
var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
|
45
|
-
var setCustomValues = function setCustomValues(
|
46
|
-
var rowHeight =
|
47
|
-
gridHeight =
|
101
|
+
var setCustomValues = function setCustomValues(_ref2) {
|
102
|
+
var rowHeight = _ref2.rowHeight,
|
103
|
+
gridHeight = _ref2.gridHeight;
|
48
104
|
headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), px(rowHeight));
|
49
105
|
headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
|
50
106
|
headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), px(headerRowElement.offsetHeight));
|
@@ -58,7 +114,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
58
114
|
_useState2 = _slicedToArray(_useState, 1),
|
59
115
|
incrementAmount = _useState2[0];
|
60
116
|
var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
|
61
|
-
var _resizeProps = _objectSpread({}, resizeProps
|
117
|
+
var _resizeProps = _objectSpread({}, resizeProps),
|
62
118
|
onMouseDown = _resizeProps.onMouseDown;
|
63
119
|
// When event.button is 2, that is a right click
|
64
120
|
// and we do not want to resize
|
@@ -68,65 +124,60 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
|
|
68
124
|
}
|
69
125
|
onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
|
70
126
|
};
|
71
|
-
|
72
|
-
|
127
|
+
var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
|
128
|
+
headerGroupClassName = _headerGroup$getHeade.className,
|
129
|
+
role = _headerGroup$getHeade.role,
|
130
|
+
headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
|
131
|
+
return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, role === 'row' && {
|
132
|
+
role: role
|
133
|
+
}, {
|
134
|
+
className: cx("".concat(blockClass, "__head"), headerGroupClassName),
|
73
135
|
ref: headRef
|
74
|
-
}), datagridState.headers.filter(function (
|
75
|
-
var isVisible =
|
136
|
+
}), datagridState.headers.filter(function (_ref3) {
|
137
|
+
var isVisible = _ref3.isVisible;
|
76
138
|
return isVisible;
|
77
139
|
}).map(function (header, index) {
|
78
|
-
var _cx;
|
140
|
+
var _header$getResizerPro, _cx;
|
79
141
|
if (header.id === selectionColumnId) {
|
80
142
|
// render directly without the wrapper TableHeader
|
81
143
|
return header.render('Header', {
|
82
144
|
key: header.id
|
83
145
|
});
|
84
146
|
}
|
85
|
-
var
|
86
|
-
minWidth =
|
147
|
+
var _ref4 = header || 50,
|
148
|
+
minWidth = _ref4.minWidth;
|
87
149
|
var visibleColumns = datagridState.visibleColumns,
|
88
150
|
state = datagridState.state,
|
89
151
|
dispatch = datagridState.dispatch,
|
90
152
|
onColResizeEnd = datagridState.onColResizeEnd;
|
91
153
|
var columnResizing = state.columnResizing;
|
92
|
-
var
|
93
|
-
columnWidths =
|
154
|
+
var _ref5 = columnResizing || {},
|
155
|
+
columnWidths = _ref5.columnWidths;
|
94
156
|
var originalCol = visibleColumns[index];
|
95
|
-
|
96
|
-
|
157
|
+
var _header$getHeaderProp = header.getHeaderProps(),
|
158
|
+
role = _header$getHeaderProp.role,
|
159
|
+
headerClassName = _header$getHeaderProp.className,
|
160
|
+
headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
|
161
|
+
var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
|
162
|
+
return /*#__PURE__*/React.createElement(TableHeader, _extends({}, headerProps, {
|
163
|
+
className: cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), resizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _defineProperty(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx)),
|
97
164
|
key: header.id,
|
98
165
|
"aria-hidden": header.id === 'spacer' && 'true'
|
99
|
-
}, getAccessibilityProps(header)
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
if (key === 'ArrowRight') {
|
115
|
-
var _newWidth = currentColumnWidth + incrementAmount;
|
116
|
-
handleColumnResizingEvent(dispatch, header, _newWidth, true);
|
117
|
-
}
|
118
|
-
}
|
119
|
-
},
|
120
|
-
onKeyUp: function onKeyUp() {
|
121
|
-
return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
|
122
|
-
},
|
123
|
-
className: cx("".concat(blockClass, "__col-resizer-range")),
|
124
|
-
type: "range",
|
125
|
-
defaultValue: originalCol.width,
|
126
|
-
"aria-label": resizerAriaLabel || 'Resize column'
|
127
|
-
})), /*#__PURE__*/React.createElement("span", {
|
128
|
-
className: "".concat(blockClass, "__col-resize-indicator")
|
129
|
-
})));
|
166
|
+
}, getAccessibilityProps(header), role === 'columnheader' && {
|
167
|
+
role: role
|
168
|
+
}), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
|
169
|
+
resizerProps: resizerProps,
|
170
|
+
header: header,
|
171
|
+
handleOnMouseDownResize: handleOnMouseDownResize,
|
172
|
+
originalCol: originalCol,
|
173
|
+
columnWidths: columnWidths,
|
174
|
+
datagridState: datagridState,
|
175
|
+
incrementAmount: incrementAmount,
|
176
|
+
minWidth: minWidth,
|
177
|
+
dispatch: dispatch,
|
178
|
+
onColResizeEnd: onColResizeEnd,
|
179
|
+
resizerAriaLabel: resizerAriaLabel
|
180
|
+
}));
|
130
181
|
}));
|
131
182
|
};
|
132
183
|
var useHeaderRow = function useHeaderRow(hooks) {
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4
|
-
var _excluded = ["
|
4
|
+
var _excluded = ["role"],
|
5
|
+
_excluded2 = ["children", "role"];
|
5
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
6
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
7
8
|
/**
|
@@ -101,22 +102,28 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
101
102
|
}
|
102
103
|
return {};
|
103
104
|
};
|
105
|
+
var _row$getRowProps = row.getRowProps(),
|
106
|
+
role = _row$getRowProps.role,
|
107
|
+
rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
|
104
108
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
105
109
|
key: key
|
106
110
|
}, /*#__PURE__*/React.createElement(TableRow, _extends({
|
107
111
|
className: rowClassNames
|
108
|
-
},
|
112
|
+
}, rowProps, {
|
109
113
|
key: row.id,
|
110
114
|
onMouseEnter: hoverHandler,
|
111
115
|
onMouseLeave: handleMouseLeave,
|
112
116
|
onFocus: hoverHandler,
|
113
117
|
onBlur: focusRemover,
|
114
118
|
onKeyUp: handleOnKeyUp
|
115
|
-
}, setAdditionalRowProps()
|
119
|
+
}, setAdditionalRowProps(), role === 'row' && {
|
120
|
+
role: role
|
121
|
+
}), row.cells.map(function (cell, index) {
|
116
122
|
var _cell$column;
|
117
123
|
var cellProps = cell.getCellProps();
|
118
124
|
var children = cellProps.children,
|
119
|
-
|
125
|
+
role = cellProps.role,
|
126
|
+
restProps = _objectWithoutProperties(cellProps, _excluded2);
|
120
127
|
var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));
|
121
128
|
if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === selectionColumnId) {
|
122
129
|
// directly render component without the wrapping TableCell
|
@@ -128,6 +135,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
128
135
|
className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
|
129
136
|
}, restProps, {
|
130
137
|
key: cell.column.id
|
138
|
+
// avoid unnecessary role assignment to cells
|
139
|
+
}, role === 'cell' && {
|
140
|
+
role: role
|
131
141
|
}), content);
|
132
142
|
})), renderExpandedRow());
|
133
143
|
};
|
@@ -16,8 +16,6 @@ import cx from 'classnames';
|
|
16
16
|
import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
|
17
17
|
import { CaretDown } from '@carbon/react/icons';
|
18
18
|
import { pkg } from '../../../settings';
|
19
|
-
// cspell:words columnheader
|
20
|
-
|
21
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
22
20
|
var SELECT_ALL_PAGE_ROWS = 'pageRows';
|
23
21
|
var SELECT_ALL_ROWS = 'allRows';
|
@@ -71,7 +69,6 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
71
69
|
var disabled = isFetching || selectProps.disabled;
|
72
70
|
var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
|
73
71
|
return /*#__PURE__*/React.createElement("th", {
|
74
|
-
role: "columnheader",
|
75
72
|
scope: "col",
|
76
73
|
className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
77
74
|
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {
|
@@ -156,8 +156,8 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
|
|
156
156
|
return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
|
157
157
|
ref: ref,
|
158
158
|
className: cx([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
|
159
|
-
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions
|
159
|
+
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
|
160
160
|
className: blockClass
|
161
|
-
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions
|
161
|
+
}, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
|
162
162
|
};
|
163
163
|
export default DatagridToolbar;
|
@@ -59,7 +59,9 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
59
59
|
_ref$reactTableFilter = _ref.reactTableFiltersState,
|
60
60
|
reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
|
61
61
|
_ref$autoHideFilters = _ref.autoHideFilters,
|
62
|
-
autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters
|
62
|
+
autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
|
63
|
+
_ref$isFetching = _ref.isFetching,
|
64
|
+
isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
|
63
65
|
/** State */
|
64
66
|
var _useState = useState(false),
|
65
67
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -78,7 +80,8 @@ var FilterPanel = function FilterPanel(_ref) {
|
|
78
80
|
reactTableFiltersState: reactTableFiltersState,
|
79
81
|
onCancel: onCancel,
|
80
82
|
panelOpen: panelOpen,
|
81
|
-
autoHideFilters: autoHideFilters
|
83
|
+
autoHideFilters: autoHideFilters,
|
84
|
+
isFetching: isFetching
|
82
85
|
}),
|
83
86
|
filtersState = _useFilters.filtersState,
|
84
87
|
prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
|
@@ -245,6 +248,7 @@ FilterPanel.propTypes = {
|
|
245
248
|
closeIconDescription: PropTypes.string,
|
246
249
|
filterPanelMinHeight: PropTypes.number,
|
247
250
|
filterSections: PropTypes.array,
|
251
|
+
isFetching: PropTypes.bool,
|
248
252
|
onApply: PropTypes.func,
|
249
253
|
onCancel: PropTypes.func,
|
250
254
|
onPanelClose: PropTypes.func,
|
@@ -53,16 +53,21 @@ var useFilters = function useFilters(_ref2) {
|
|
53
53
|
_ref2$onCancel = _ref2.onCancel,
|
54
54
|
onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
|
55
55
|
panelOpen = _ref2.panelOpen,
|
56
|
-
autoHideFilters = _ref2.autoHideFilters
|
56
|
+
autoHideFilters = _ref2.autoHideFilters,
|
57
|
+
isFetching = _ref2.isFetching;
|
57
58
|
/** State */
|
58
59
|
var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
|
59
60
|
_useState2 = _slicedToArray(_useState, 2),
|
60
61
|
filtersState = _useState2[0],
|
61
62
|
setFiltersState = _useState2[1];
|
62
|
-
var _useState3 = useState(
|
63
|
+
var _useState3 = useState(false),
|
63
64
|
_useState4 = _slicedToArray(_useState3, 2),
|
64
|
-
|
65
|
-
|
65
|
+
fetchingReset = _useState4[0],
|
66
|
+
setFetchingReset = _useState4[1];
|
67
|
+
var _useState5 = useState(reactTableFiltersState),
|
68
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
69
|
+
filtersObjectArray = _useState6[0],
|
70
|
+
setFiltersObjectArray = _useState6[1];
|
66
71
|
var previousState = usePreviousValue({
|
67
72
|
panelOpen: panelOpen
|
68
73
|
});
|
@@ -105,6 +110,7 @@ var useFilters = function useFilters(_ref2) {
|
|
105
110
|
// Update their respective refs so everything is in sync
|
106
111
|
prevFiltersRef.current = JSON.stringify(initialFiltersState);
|
107
112
|
prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
|
113
|
+
lastAppliedFilters.current = JSON.stringify([]);
|
108
114
|
}, [filters, setAllFilters, variation]);
|
109
115
|
var applyFilters = function applyFilters(_ref3) {
|
110
116
|
var column = _ref3.column,
|
@@ -195,7 +201,7 @@ var useFilters = function useFilters(_ref2) {
|
|
195
201
|
};
|
196
202
|
/** Render the individual filter component */
|
197
203
|
var renderFilter = function renderFilter(_ref4) {
|
198
|
-
var _filtersState$
|
204
|
+
var _filtersState$column3, _filtersState$column4;
|
199
205
|
var type = _ref4.type,
|
200
206
|
column = _ref4.column,
|
201
207
|
components = _ref4.props;
|
@@ -287,31 +293,36 @@ var useFilters = function useFilters(_ref2) {
|
|
287
293
|
filter = renderCheckboxes();
|
288
294
|
break;
|
289
295
|
case RADIO:
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
}, radio)
|
314
|
-
|
296
|
+
{
|
297
|
+
var _filtersState$column, _components$DefaultRa, _components$DefaultRa2, _filtersState$column2, _components$DefaultRa3, _components$DefaultRa4, _components$DefaultRa5, _components$DefaultRa6, _components$DefaultRa7, _components$DefaultRa8;
|
298
|
+
var _components$RadioButt = _objectSpread({}, components.RadioButtonGroup),
|
299
|
+
name = _components$RadioButt.name;
|
300
|
+
filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
|
301
|
+
valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? (_components$DefaultRa = (_components$DefaultRa2 = components.DefaultRadioButton) === null || _components$DefaultRa2 === void 0 ? void 0 : _components$DefaultRa2.value) !== null && _components$DefaultRa !== void 0 ? _components$DefaultRa : 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
|
302
|
+
onChange: function onChange(selected) {
|
303
|
+
var _components$RadioButt2, _components$RadioButt3;
|
304
|
+
setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
|
305
|
+
value: selected,
|
306
|
+
type: type
|
307
|
+
})));
|
308
|
+
applyFilters({
|
309
|
+
column: column,
|
310
|
+
value: selected,
|
311
|
+
type: type
|
312
|
+
});
|
313
|
+
(_components$RadioButt2 = (_components$RadioButt3 = components.RadioButtonGroup).onChange) === null || _components$RadioButt2 === void 0 || _components$RadioButt2.call(_components$RadioButt3, selected);
|
314
|
+
}
|
315
|
+
}), /*#__PURE__*/React.createElement(RadioButton, _extends({
|
316
|
+
id: (_components$DefaultRa3 = components === null || components === void 0 || (_components$DefaultRa4 = components.DefaultRadioButton) === null || _components$DefaultRa4 === void 0 ? void 0 : _components$DefaultRa4.id) !== null && _components$DefaultRa3 !== void 0 ? _components$DefaultRa3 : "any__".concat(name),
|
317
|
+
labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
|
318
|
+
value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
|
319
|
+
}, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
|
320
|
+
var _ref6, _radio$id;
|
321
|
+
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
322
|
+
key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
|
323
|
+
}, radio));
|
324
|
+
})));
|
325
|
+
}
|
315
326
|
break;
|
316
327
|
case DROPDOWN:
|
317
328
|
filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
|
@@ -363,6 +374,20 @@ var useFilters = function useFilters(_ref2) {
|
|
363
374
|
}
|
364
375
|
}
|
365
376
|
}, [panelOpen, previousState, previousState === null || previousState === void 0 ? void 0 : previousState.panelOpen, reset, setAllFilters, revertToPreviousFilters]);
|
377
|
+
|
378
|
+
// Re-applies filters if the Datagrid goes into a fetching state while panel is open
|
379
|
+
// and has had filters changed without applying
|
380
|
+
useEffect(function () {
|
381
|
+
if (isFetching && !fetchingReset) {
|
382
|
+
setFiltersState(JSON.parse(prevFiltersRef.current));
|
383
|
+
setFiltersObjectArray(JSON.parse(prevFiltersRef.current));
|
384
|
+
setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
|
385
|
+
setFetchingReset(true);
|
386
|
+
}
|
387
|
+
if (!isFetching) {
|
388
|
+
setFetchingReset(false);
|
389
|
+
}
|
390
|
+
}, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset]);
|
366
391
|
var cancel = function cancel() {
|
367
392
|
// Reverting to previous filters only applies when using batch actions
|
368
393
|
if (updateMethod === BATCH) {
|
@@ -36,7 +36,7 @@ export var DocsPage = function DocsPage() {
|
|
36
36
|
subTitle: 'Create your filters for flyout variant',
|
37
37
|
description: "To add filters to the flyout, you have to pass in an array of filters. These filters will be converted to it's respective component. Each filters has 3 important props, `type`, `column`, `props`.\n- `type`: the type of filter (this should be the same `filter` property in the headers)\n- `column`: the column that it should be filtered on\n- `props`: the props for the components needed to render the filter.\n\nPlease refer to all the available filters that you can use below.\n ",
|
38
38
|
source: {
|
39
|
-
code: "\nconst filters = [\n {\n type: 'date',\n column: 'joined',\n props: {\n DatePicker: {\n datePickerType: 'range',\n // Add any other Carbon DatePicker props here\n },\n DatePickerInput: {\n start: {\n id: 'date-picker-input-id-start',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined start date',\n // Add any other Carbon DatePickerInput props here\n },\n end: {\n id: 'date-picker-input-id-end',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined end date',\n // Add any other Carbon DatePickerInput props here\n },\n },\n },\n },\n {\n type: 'number',\n column: 'visits',\n props: {\n NumberInput: {\n min: 0,\n id: 'visits-number-input',\n invalidText: 'A valid value is required',\n label: 'Visits',\n placeholder: 'Type a number amount of visits',\n // Add any other Carbon NumberInput props here\n },\n },\n },\n {\n type: 'checkbox',\n column: 'passwordStrength',\n props: {\n FormGroup: {\n legendText: 'Password strength',\n // Add any other Carbon FormGroup props here\n },\n Checkbox: [\n {\n id: 'normal',\n labelText: 'Normal',\n value: 'normal',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'minor-warning',\n labelText: 'Minor warning',\n value: 'minor-warning',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'critical',\n labelText: 'Critical',\n value: 'critical',\n // Add any other Carbon Checkbox props here\n },\n ],\n },\n },\n {\n type: 'radio',\n column: 'role',\n props: {\n FormGroup: {\n legendText: 'Role',\n // Add any other Carbon FormGroup props here\n },\n RadioButtonGroup: {\n orientation: 'vertical',\n legend: 'Role legend',\n name: 'role-radio-button-group',\n // Add any other Carbon RadioButtonGroup props here\n },\n RadioButton: [\n {\n id: 'developer',\n labelText: 'Developer',\n value: 'developer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'designer',\n labelText: 'Designer',\n value: 'designer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'researcher',\n labelText: 'Researcher',\n value: 'researcher',\n // Add any other Carbon RadioButton props here\n },\n ],\n },\n },\n {\n type: 'dropdown',\n column: 'status',\n props: {\n Dropdown: {\n id: 'marital-status-dropdown',\n ariaLabel: 'Marital status dropdown',\n items: ['relationship', 'complicated', 'single'],\n label: 'Marital status',\n titleText: 'Marital status',\n // Add any other Carbon Dropdown props here\n },\n },\n },\n];\n "
|
39
|
+
code: "\nconst filters = [\n {\n type: 'date',\n column: 'joined',\n props: {\n DatePicker: {\n datePickerType: 'range',\n // Add any other Carbon DatePicker props here\n },\n DatePickerInput: {\n start: {\n id: 'date-picker-input-id-start',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined start date',\n // Add any other Carbon DatePickerInput props here\n },\n end: {\n id: 'date-picker-input-id-end',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined end date',\n // Add any other Carbon DatePickerInput props here\n },\n },\n },\n },\n {\n type: 'number',\n column: 'visits',\n props: {\n NumberInput: {\n min: 0,\n id: 'visits-number-input',\n invalidText: 'A valid value is required',\n label: 'Visits',\n placeholder: 'Type a number amount of visits',\n // Add any other Carbon NumberInput props here\n },\n },\n },\n {\n type: 'checkbox',\n column: 'passwordStrength',\n props: {\n FormGroup: {\n legendText: 'Password strength',\n // Add any other Carbon FormGroup props here\n },\n Checkbox: [\n {\n id: 'normal',\n labelText: 'Normal',\n value: 'normal',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'minor-warning',\n labelText: 'Minor warning',\n value: 'minor-warning',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'critical',\n labelText: 'Critical',\n value: 'critical',\n // Add any other Carbon Checkbox props here\n },\n ],\n },\n },\n {\n type: 'radio',\n column: 'role',\n props: {\n FormGroup: {\n legendText: 'Role',\n // Add any other Carbon FormGroup props here\n },\n RadioButtonGroup: {\n orientation: 'vertical',\n legend: 'Role legend',\n name: 'role-radio-button-group',\n // Add any other Carbon RadioButtonGroup props here\n },\n RadioButton: [\n {\n id: 'developer',\n labelText: 'Developer',\n value: 'developer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'designer',\n labelText: 'Designer',\n value: 'designer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'researcher',\n labelText: 'Researcher',\n value: 'researcher',\n // Add any other Carbon RadioButton props here\n },\n ],\n DefaultRadioButton: {\n id: 'any__unique-id-for-any-radio-button',\n labelText: 'Any',\n value: 'Any',\n // Add any other Carbon RadioButton props here\n }\n },\n },\n {\n type: 'dropdown',\n column: 'status',\n props: {\n Dropdown: {\n id: 'marital-status-dropdown',\n ariaLabel: 'Marital status dropdown',\n items: ['relationship', 'complicated', 'single'],\n label: 'Marital status',\n titleText: 'Marital status',\n // Add any other Carbon Dropdown props here\n },\n },\n },\n];\n "
|
40
40
|
}
|
41
41
|
}, {
|
42
42
|
subTitle: 'Create your filters for panel variant',
|
@@ -28,7 +28,8 @@ var useFiltering = function useFiltering(hooks) {
|
|
28
28
|
var rowValue = row.values[id];
|
29
29
|
var startDateObj = _typeof(startDate) === 'object' ? startDate : new Date(startDate);
|
30
30
|
var endDateObj = _typeof(endDate) === 'object' ? endDate : new Date(endDate);
|
31
|
-
|
31
|
+
var rowValueDateObj = _typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
|
32
|
+
if (rowValueDateObj.getTime() <= endDateObj.getTime() && rowValueDateObj.getTime() >= startDateObj.getTime()) {
|
32
33
|
// In date range
|
33
34
|
return true;
|
34
35
|
} else {
|
@@ -188,6 +188,10 @@ EditSidePanel.propTypes = {
|
|
188
188
|
* Specifies which DOM element in the form should be focused.
|
189
189
|
*/
|
190
190
|
slideIn: PropTypes.bool,
|
191
|
+
/**
|
192
|
+
* **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
|
193
|
+
*/
|
194
|
+
slug: PropTypes.node,
|
191
195
|
/**
|
192
196
|
* The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
|
193
197
|
*/
|
@@ -106,6 +106,11 @@ ExpressiveCard.propTypes = {
|
|
106
106
|
* The text that's displayed in the secondary button
|
107
107
|
*/
|
108
108
|
secondaryButtonText: PropTypes.string,
|
109
|
+
/**
|
110
|
+
* **Experimental:** For all cases a `Slug` component can be provided.
|
111
|
+
* Clickable tiles only accept a boolean value of true and display a hollow slug.
|
112
|
+
*/
|
113
|
+
slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
|
109
114
|
/**
|
110
115
|
* Title that's displayed at the top of the card
|
111
116
|
*/
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["children", "className", "collapsible", "onClose", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
|
4
|
+
var _excluded = ["children", "className", "collapsible", "onClose", "withLeftGutter", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
|
5
5
|
/**
|
6
6
|
* Copyright IBM Corp. 2023, 2023
|
7
7
|
*
|
@@ -25,6 +25,7 @@ var blockClass = "".concat(pkg.prefix, "--guidebanner");
|
|
25
25
|
var componentName = 'Guidebanner';
|
26
26
|
var defaults = {
|
27
27
|
collapsible: false,
|
28
|
+
withLeftGutter: false,
|
28
29
|
// Labels
|
29
30
|
closeIconDescription: 'Close',
|
30
31
|
collapseButtonLabel: 'Read less',
|
@@ -43,6 +44,8 @@ export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
43
44
|
_ref$collapsible = _ref.collapsible,
|
44
45
|
collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
|
45
46
|
onClose = _ref.onClose,
|
47
|
+
_ref$withLeftGutter = _ref.withLeftGutter,
|
48
|
+
withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
|
46
49
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
47
50
|
closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
|
48
51
|
_ref$collapseButtonLa = _ref.collapseButtonLabel,
|
@@ -76,7 +79,7 @@ export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
76
79
|
};
|
77
80
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
78
81
|
"aria-expanded": !isCollapsed,
|
79
|
-
className: cx(blockClass, className,
|
82
|
+
className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
|
80
83
|
ref: ref
|
81
84
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Idea, {
|
82
85
|
size: 20,
|
@@ -217,5 +220,11 @@ Guidebanner.propTypes = {
|
|
217
220
|
/**
|
218
221
|
* Title text.
|
219
222
|
*/
|
220
|
-
title: PropTypes.string.isRequired
|
223
|
+
title: PropTypes.string.isRequired,
|
224
|
+
/**
|
225
|
+
* If true, insert 1 rem of "space" on the left of the component.
|
226
|
+
* This will allow the component's content to line up with other
|
227
|
+
* content on the page under special circumstances.
|
228
|
+
*/
|
229
|
+
withLeftGutter: PropTypes.bool
|
221
230
|
};
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "
|
4
|
+
var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
|
5
5
|
/**
|
6
6
|
* Copyright IBM Corp. 2023, 2023
|
7
7
|
*
|
@@ -36,6 +36,7 @@ var defaults = {
|
|
36
36
|
collapseButtonLabel: 'Read less',
|
37
37
|
expandButtonLabel: 'Read more',
|
38
38
|
narrow: false,
|
39
|
+
withLeftGutter: false,
|
39
40
|
onClick: function onClick() {},
|
40
41
|
onClose: function onClose() {}
|
41
42
|
};
|
@@ -46,7 +47,8 @@ var defaults = {
|
|
46
47
|
* distracting the user from their flow.
|
47
48
|
*/
|
48
49
|
export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
49
|
-
var
|
50
|
+
var action = _ref.action,
|
51
|
+
children = _ref.children,
|
50
52
|
className = _ref.className,
|
51
53
|
_ref$closeIconDescrip = _ref.closeIconDescription,
|
52
54
|
closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
|
@@ -56,15 +58,16 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
56
58
|
collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
|
57
59
|
_ref$expandButtonLabe = _ref.expandButtonLabel,
|
58
60
|
expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
|
61
|
+
media = _ref.media,
|
59
62
|
_ref$narrow = _ref.narrow,
|
60
63
|
narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
|
61
64
|
onClick = _ref.onClick,
|
62
65
|
onClose = _ref.onClose,
|
63
66
|
tertiaryButtonLabel = _ref.tertiaryButtonLabel,
|
64
|
-
action = _ref.action,
|
65
67
|
_ref$title = _ref.title,
|
66
68
|
title = _ref$title === void 0 ? defaults.title : _ref$title,
|
67
|
-
|
69
|
+
_ref$withLeftGutter = _ref.withLeftGutter,
|
70
|
+
withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
|
68
71
|
rest = _objectWithoutProperties(_ref, _excluded);
|
69
72
|
var _useState = useState(collapsible),
|
70
73
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -87,7 +90,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
87
90
|
}, [collapsible]);
|
88
91
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
89
92
|
"aria-labelledby": labelId,
|
90
|
-
className: cx(blockClass, className,
|
93
|
+
className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
|
91
94
|
ref: ref,
|
92
95
|
role: "complementary"
|
93
96
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
|
@@ -213,5 +216,13 @@ InlineTip.propTypes = {
|
|
213
216
|
/**
|
214
217
|
* The title of the InlineTip.
|
215
218
|
*/
|
216
|
-
title: PropTypes.string.isRequired
|
219
|
+
title: PropTypes.string.isRequired,
|
220
|
+
/**
|
221
|
+
* If true, insert 1 rem of "space" on the left of the component.
|
222
|
+
* This will allow the component's content to line up with other
|
223
|
+
* content on the page under special circumstances.
|
224
|
+
*
|
225
|
+
* This will only be applied when `narrow` is false.
|
226
|
+
*/
|
227
|
+
withLeftGutter: PropTypes.bool
|
217
228
|
};
|
@@ -39,6 +39,8 @@ export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
39
39
|
kind: "ghost"
|
40
40
|
}), children);
|
41
41
|
});
|
42
|
+
InlineTipButton = pkg.checkComponentEnabled(InlineTipButton, componentName);
|
43
|
+
InlineTipButton.displayName = componentName;
|
42
44
|
InlineTipButton.propTypes = {
|
43
45
|
/**
|
44
46
|
* Provide the contents of the InlineTipButton.
|