@carbon/ibm-products 1.13.0 → 1.16.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/components/Datagrid/styles/addons/CustomizeColumnsModal.css +47 -0
- package/css/components/Datagrid/styles/addons/CustomizeColumnsModal.css.map +1 -0
- package/css/components/Datagrid/styles/addons/RowSizeDropdown.css +20 -0
- package/css/components/Datagrid/styles/addons/RowSizeDropdown.css.map +1 -0
- package/css/components/Datagrid/styles/datagrid.css +268 -0
- package/css/components/Datagrid/styles/datagrid.css.map +1 -0
- package/css/components/Datagrid/styles/index.css +513 -0
- package/css/components/Datagrid/styles/index.css.map +1 -0
- package/css/components/Datagrid/styles/useActionsColumn.css +23 -0
- package/css/components/Datagrid/styles/useActionsColumn.css.map +1 -0
- package/css/components/Datagrid/styles/useColumnRightAlign.css +28 -0
- package/css/components/Datagrid/styles/useColumnRightAlign.css.map +1 -0
- package/css/components/Datagrid/styles/useNestedRows.css +15 -0
- package/css/components/Datagrid/styles/useNestedRows.css.map +1 -0
- package/css/components/Datagrid/styles/useNestedTable.css +25 -0
- package/css/components/Datagrid/styles/useNestedTable.css.map +1 -0
- package/css/components/Datagrid/styles/useSelectAllToggle.css +28 -0
- package/css/components/Datagrid/styles/useSelectAllToggle.css.map +1 -0
- package/css/components/Datagrid/styles/useSortableColumns.css +50 -0
- package/css/components/Datagrid/styles/useSortableColumns.css.map +1 -0
- package/css/components/Datagrid/styles/useStickyColumn.css +35 -0
- package/css/components/Datagrid/styles/useStickyColumn.css.map +1 -0
- package/css/index-full-carbon.css +611 -10
- 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-released-only.css +7 -4
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +611 -10
- 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 +611 -10
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +106 -43
- package/es/components/AddSelect/AddSelectFilter.js +172 -0
- package/es/components/AddSelect/add-select-utils.js +30 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +255 -175
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +78 -17
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +65 -20
- package/es/components/DataSpreadsheet/hooks/index.js +11 -0
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +139 -0
- package/es/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +2 -4
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +68 -0
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +1 -3
- package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +20 -8
- package/es/components/DataSpreadsheet/utils/generateData.js +17 -9
- package/es/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +18 -0
- package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +30 -0
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +121 -0
- package/es/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +108 -0
- package/es/components/DataSpreadsheet/utils/handleEditSubmit.js +87 -0
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +42 -8
- package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +225 -13
- package/es/components/DataSpreadsheet/utils/selectAllCells.js +53 -0
- package/es/components/Datagrid/Datagrid/Datagrid.js +70 -0
- package/es/components/Datagrid/Datagrid/DatagridBody.js +36 -0
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +19 -0
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +26 -0
- package/es/components/Datagrid/Datagrid/DatagridHead.js +31 -0
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +57 -0
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +37 -0
- package/es/components/Datagrid/Datagrid/DatagridRow.js +60 -0
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +50 -0
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +122 -0
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +36 -0
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +22 -0
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +87 -0
- package/es/components/Datagrid/Datagrid/DraggableElement.js +188 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +78 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +51 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +140 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +157 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +62 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +13 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +9 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +62 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +139 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/index.js +8 -0
- package/es/components/Datagrid/Datagrid/index.js +8 -0
- package/es/components/Datagrid/Datagrid.stories/CustomizeColumnStory.js +6 -0
- package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js +6 -0
- package/es/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.js +6 -0
- package/es/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.js +6 -0
- package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +92 -0
- package/es/components/Datagrid/Datagrid.stories/common.js +199 -0
- package/es/components/Datagrid/Datagrid.stories/index.js +5 -0
- package/es/components/Datagrid/common-column-ids.js +8 -0
- package/es/components/Datagrid/index.js +22 -0
- package/es/components/Datagrid/useActionsColumn.js +86 -0
- package/es/components/Datagrid/useColumnRightAlign.js +52 -0
- package/es/components/Datagrid/useCustomizeColumns.js +45 -0
- package/es/components/Datagrid/useDatagrid.js +44 -0
- package/es/components/Datagrid/useDefaultStringRenderer.js +48 -0
- package/es/components/Datagrid/useDisableSelectRows.js +84 -0
- package/es/components/Datagrid/useExpandedRow.js +52 -0
- package/es/components/Datagrid/useFlexResize.js +51 -0
- package/es/components/Datagrid/useFloatingScroll.js +88 -0
- package/es/components/Datagrid/useInfiniteScroll.js +54 -0
- package/es/components/Datagrid/useNestedRows.js +53 -0
- package/es/components/Datagrid/useOnRowClick.js +37 -0
- package/es/components/Datagrid/useParentDimensions.js +65 -0
- package/es/components/Datagrid/useResizeTable.js +40 -0
- package/es/components/Datagrid/useRowExpander.js +34 -0
- package/es/components/Datagrid/useRowIsMouseOver.js +61 -0
- package/es/components/Datagrid/useRowRenderer.js +30 -0
- package/es/components/Datagrid/useRowSize.js +56 -0
- package/es/components/Datagrid/useSelectAllToggle.js +74 -0
- package/es/components/Datagrid/useSelectRows.js +107 -0
- package/es/components/Datagrid/useSkeletonRows.js +32 -0
- package/es/components/Datagrid/useSortableColumns.js +110 -0
- package/es/components/Datagrid/useStickyColumn.js +183 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +150 -3
- package/es/components/PageHeader/PageHeader.js +3 -1
- package/es/components/SingleAddSelect/SingleAddSelect.js +90 -4
- package/es/components/TagSet/TagSet.js +13 -6
- package/es/components/Tearsheet/TearsheetShell.js +34 -10
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +4 -2
- package/lib/components/AddSelect/AddSelect.js +105 -41
- package/lib/components/AddSelect/AddSelectFilter.js +190 -0
- package/lib/components/AddSelect/add-select-utils.js +35 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +261 -177
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +79 -23
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +67 -21
- package/lib/components/DataSpreadsheet/hooks/index.js +45 -0
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +151 -0
- package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js +2 -4
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +79 -0
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +1 -3
- package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +21 -8
- package/lib/components/DataSpreadsheet/utils/generateData.js +17 -9
- package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js +27 -0
- package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +40 -0
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js +127 -0
- package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js +118 -0
- package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js +94 -0
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +44 -8
- package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +235 -20
- package/lib/components/DataSpreadsheet/utils/selectAllCells.js +60 -0
- package/lib/components/Datagrid/Datagrid/Datagrid.js +86 -0
- package/lib/components/Datagrid/Datagrid/DatagridBody.js +50 -0
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +31 -0
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +38 -0
- package/lib/components/Datagrid/Datagrid/DatagridHead.js +43 -0
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +73 -0
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +44 -0
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +68 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +55 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +139 -0
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +44 -0
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +35 -0
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +101 -0
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +210 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +92 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +65 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +166 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +173 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +73 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js +25 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +23 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +80 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +160 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/index.js +15 -0
- package/lib/components/Datagrid/Datagrid/index.js +15 -0
- package/lib/components/Datagrid/Datagrid.stories/CustomizeColumnStory.js +13 -0
- package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js +13 -0
- package/lib/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.js +13 -0
- package/lib/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.js +13 -0
- package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +112 -0
- package/lib/components/Datagrid/Datagrid.stories/common.js +215 -0
- package/lib/components/Datagrid/Datagrid.stories/index.js +47 -0
- package/lib/components/Datagrid/common-column-ids.js +16 -0
- package/lib/components/Datagrid/index.js +127 -0
- package/lib/components/Datagrid/useActionsColumn.js +94 -0
- package/lib/components/Datagrid/useColumnRightAlign.js +59 -0
- package/lib/components/Datagrid/useCustomizeColumns.js +55 -0
- package/lib/components/Datagrid/useDatagrid.js +58 -0
- package/lib/components/Datagrid/useDefaultStringRenderer.js +54 -0
- package/lib/components/Datagrid/useDisableSelectRows.js +92 -0
- package/lib/components/Datagrid/useExpandedRow.js +58 -0
- package/lib/components/Datagrid/useFlexResize.js +61 -0
- package/lib/components/Datagrid/useFloatingScroll.js +101 -0
- package/lib/components/Datagrid/useInfiniteScroll.js +67 -0
- package/lib/components/Datagrid/useNestedRows.js +65 -0
- package/lib/components/Datagrid/useOnRowClick.js +45 -0
- package/lib/components/Datagrid/useParentDimensions.js +75 -0
- package/lib/components/Datagrid/useResizeTable.js +48 -0
- package/lib/components/Datagrid/useRowExpander.js +45 -0
- package/lib/components/Datagrid/useRowIsMouseOver.js +66 -0
- package/lib/components/Datagrid/useRowRenderer.js +40 -0
- package/lib/components/Datagrid/useRowSize.js +67 -0
- package/lib/components/Datagrid/useSelectAllToggle.js +88 -0
- package/lib/components/Datagrid/useSelectRows.js +119 -0
- package/lib/components/Datagrid/useSkeletonRows.js +42 -0
- package/lib/components/Datagrid/useSortableColumns.js +117 -0
- package/lib/components/Datagrid/useStickyColumn.js +190 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +150 -2
- package/lib/components/PageHeader/PageHeader.js +3 -1
- package/lib/components/SingleAddSelect/SingleAddSelect.js +91 -3
- package/lib/components/TagSet/TagSet.js +13 -6
- package/lib/components/Tearsheet/TearsheetShell.js +36 -10
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +4 -2
- package/package.json +16 -12
- package/scss/components/AboutModal/_about-modal.scss +4 -0
- package/scss/components/AddSelect/_add-select.scss +46 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +41 -4
- package/scss/components/Datagrid/_datagrid.scss +66 -0
- package/scss/components/Datagrid/_index.scss +8 -0
- package/scss/components/Datagrid/_storybook-styles.scss +26 -0
- package/scss/components/Datagrid/styles/_variables.scss +9 -0
- package/scss/components/Datagrid/styles/addons/CustomizeColumnsModal.scss +48 -0
- package/scss/components/Datagrid/styles/addons/RowSizeDropdown.scss +23 -0
- package/scss/components/Datagrid/styles/datagrid.scss +326 -0
- package/scss/components/Datagrid/styles/index.scss +17 -0
- package/scss/components/Datagrid/styles/useActionsColumn.scss +24 -0
- package/scss/components/Datagrid/styles/useColumnRightAlign.scss +29 -0
- package/scss/components/Datagrid/styles/useNestedRows.scss +17 -0
- package/scss/components/Datagrid/styles/useNestedTable.scss +28 -0
- package/scss/components/Datagrid/styles/useSelectAllToggle.scss +28 -0
- package/scss/components/Datagrid/styles/useSortableColumns.scss +55 -0
- package/scss/components/Datagrid/styles/useStickyColumn.scss +38 -0
- package/scss/components/ExportModal/_export-modal.scss +0 -4
- package/scss/components/Tearsheet/_tearsheet.scss +4 -0
- package/scss/components/_index.scss +1 -0
@@ -0,0 +1,117 @@
|
|
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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
|
+
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
|
+
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
15
|
+
|
16
|
+
var _carbonComponentsReact = require("carbon-components-react");
|
17
|
+
|
18
|
+
var _iconsReact = require("@carbon/icons-react");
|
19
|
+
|
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; }
|
21
|
+
|
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; }
|
23
|
+
|
24
|
+
var ordering = {
|
25
|
+
ASC: 'ASC',
|
26
|
+
DESC: 'DESC',
|
27
|
+
NONE: 'NONE'
|
28
|
+
};
|
29
|
+
|
30
|
+
var useSortableColumns = function useSortableColumns(hooks) {
|
31
|
+
var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
|
32
|
+
var instance = _ref.instance;
|
33
|
+
var onSort = instance.onSort;
|
34
|
+
|
35
|
+
var onSortClick = function onSortClick(column) {
|
36
|
+
var key = column.id;
|
37
|
+
var sortDesc = column.isSortedDesc;
|
38
|
+
|
39
|
+
var _getNewSortOrder = getNewSortOrder(sortDesc),
|
40
|
+
newSortDesc = _getNewSortOrder.newSortDesc,
|
41
|
+
newOrder = _getNewSortOrder.newOrder;
|
42
|
+
|
43
|
+
if (onSort) {
|
44
|
+
onSort(key, newOrder);
|
45
|
+
}
|
46
|
+
|
47
|
+
instance.toggleSortBy(key, newSortDesc, false);
|
48
|
+
};
|
49
|
+
|
50
|
+
var sortableColumns = visibleColumns.map(function (column) {
|
51
|
+
var icon = function icon(col) {
|
52
|
+
if (col.isSorted) {
|
53
|
+
switch (col.isSortedDesc) {
|
54
|
+
case false:
|
55
|
+
return _iconsReact.ArrowUp16;
|
56
|
+
|
57
|
+
case true:
|
58
|
+
return _iconsReact.ArrowDown16;
|
59
|
+
|
60
|
+
default:
|
61
|
+
return _iconsReact.Arrows16;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
return _iconsReact.Arrows16;
|
66
|
+
};
|
67
|
+
|
68
|
+
var Header = function Header(headerProp) {
|
69
|
+
return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
|
70
|
+
onClick: function onClick() {
|
71
|
+
return onSortClick(headerProp.column);
|
72
|
+
},
|
73
|
+
kind: "ghost",
|
74
|
+
renderIcon: icon(headerProp.column)
|
75
|
+
}, column.Header);
|
76
|
+
};
|
77
|
+
|
78
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
79
|
+
Header: Header
|
80
|
+
});
|
81
|
+
});
|
82
|
+
return (0, _toConsumableArray2.default)(sortableColumns);
|
83
|
+
};
|
84
|
+
|
85
|
+
var sortInstanceProps = function sortInstanceProps(instance) {
|
86
|
+
var onSort = instance.onSort;
|
87
|
+
Object.assign(instance, {
|
88
|
+
manualSortBy: !!onSort,
|
89
|
+
isTableSortable: true
|
90
|
+
});
|
91
|
+
};
|
92
|
+
|
93
|
+
var getNewSortOrder = function getNewSortOrder(sortOrder) {
|
94
|
+
var order = {
|
95
|
+
newSortDesc: undefined,
|
96
|
+
newOrder: ordering.NONE
|
97
|
+
};
|
98
|
+
|
99
|
+
if (sortOrder === false) {
|
100
|
+
order.newOrder = ordering.DESC;
|
101
|
+
order.newSortDesc = true;
|
102
|
+
}
|
103
|
+
|
104
|
+
if (sortOrder === undefined) {
|
105
|
+
order.newOrder = ordering.ASC;
|
106
|
+
order.newSortDesc = false;
|
107
|
+
}
|
108
|
+
|
109
|
+
return order;
|
110
|
+
};
|
111
|
+
|
112
|
+
hooks.visibleColumns.push(sortableVisibleColumns);
|
113
|
+
hooks.useInstance.push(sortInstanceProps);
|
114
|
+
};
|
115
|
+
|
116
|
+
var _default = useSortableColumns;
|
117
|
+
exports.default = _default;
|
@@ -0,0 +1,190 @@
|
|
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
15
|
+
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
17
|
+
|
18
|
+
var _settings = require("../../settings");
|
19
|
+
|
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; }
|
21
|
+
|
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; }
|
23
|
+
|
24
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
25
|
+
var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
|
26
|
+
var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
|
27
|
+
|
28
|
+
var useStickyColumn = function useStickyColumn(hooks) {
|
29
|
+
var tableBodyRef = (0, _react.useRef)();
|
30
|
+
var stickyHeaderCellRef = (0, _react.useRef)();
|
31
|
+
hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
|
32
|
+
hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
|
33
|
+
hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
|
34
|
+
hooks.getHeaderGroupProps.push(function (props) {
|
35
|
+
return [props, {
|
36
|
+
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
37
|
+
minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
|
38
|
+
|
39
|
+
})
|
40
|
+
}];
|
41
|
+
});
|
42
|
+
|
43
|
+
var useEventListener = function useEventListener(instance) {
|
44
|
+
(0, _react.useEffect)(function () {
|
45
|
+
var tableBodyElement = tableBodyRef.current;
|
46
|
+
var headerCellElement = stickyHeaderCellRef.current;
|
47
|
+
|
48
|
+
if (hasVertScroll(tableBodyElement) && headerCellElement) {
|
49
|
+
headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
|
50
|
+
}
|
51
|
+
|
52
|
+
var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
|
53
|
+
window.addEventListener('resize', boundListener);
|
54
|
+
return function () {
|
55
|
+
window.removeEventListener('resize', boundListener);
|
56
|
+
};
|
57
|
+
}, [instance.rows, instance.isFetching]);
|
58
|
+
(0, _react.useEffect)(function () {
|
59
|
+
var tableBodyElement = tableBodyRef.current;
|
60
|
+
var headerCellElement = stickyHeaderCellRef.current;
|
61
|
+
|
62
|
+
var listener = function listener(evt) {
|
63
|
+
toggleStickyShadow(evt.target, headerCellElement);
|
64
|
+
};
|
65
|
+
|
66
|
+
toggleStickyShadow(tableBodyElement, headerCellElement);
|
67
|
+
|
68
|
+
if (tableBodyElement) {
|
69
|
+
tableBodyElement.addEventListener('scroll', listener);
|
70
|
+
}
|
71
|
+
|
72
|
+
return function () {
|
73
|
+
if (tableBodyElement) {
|
74
|
+
tableBodyElement.removeEventListener('scroll', listener);
|
75
|
+
}
|
76
|
+
};
|
77
|
+
}, [instance.rows, instance.isFetching]);
|
78
|
+
};
|
79
|
+
|
80
|
+
var useCheckScroll = function useCheckScroll(instance) {
|
81
|
+
var tableBodyElement = tableBodyRef.current;
|
82
|
+
var headerCellElement = stickyHeaderCellRef.current;
|
83
|
+
(0, _react.useEffect)(function () {
|
84
|
+
onBodyResize(tableBodyElement, headerCellElement);
|
85
|
+
}, [instance.rows, headerCellElement, tableBodyElement]);
|
86
|
+
};
|
87
|
+
|
88
|
+
hooks.useInstance.push(useEventListener);
|
89
|
+
hooks.useInstance.push(useCheckScroll);
|
90
|
+
hooks.useInstance.push(function (instance) {
|
91
|
+
Object.assign(instance, {
|
92
|
+
withStickyColumn: true
|
93
|
+
});
|
94
|
+
});
|
95
|
+
hooks.useInstance.push(function (instance) {
|
96
|
+
// sticky column is defined by consumer
|
97
|
+
// it will always comes after the spacer which is defined by useFlexResize
|
98
|
+
// swap them here to use the spacer to push
|
99
|
+
// sticky column to the right when there are few
|
100
|
+
// columns defined
|
101
|
+
var newColumns = instance.visibleColumns;
|
102
|
+
var spacerIdx = newColumns.findIndex(function (col) {
|
103
|
+
return col.id === 'spacer';
|
104
|
+
});
|
105
|
+
var stickyIdx = newColumns.findIndex(function (col) {
|
106
|
+
return col.sticky === 'right';
|
107
|
+
});
|
108
|
+
|
109
|
+
if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
|
110
|
+
var temp = newColumns[spacerIdx];
|
111
|
+
newColumns[spacerIdx] = newColumns[stickyIdx];
|
112
|
+
newColumns[stickyIdx] = temp;
|
113
|
+
}
|
114
|
+
|
115
|
+
var newHeaders = instance.headers;
|
116
|
+
spacerIdx = newHeaders.findIndex(function (col) {
|
117
|
+
return col.id === 'spacer';
|
118
|
+
});
|
119
|
+
stickyIdx = newHeaders.findIndex(function (col) {
|
120
|
+
return col.sticky === 'right';
|
121
|
+
});
|
122
|
+
|
123
|
+
if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
|
124
|
+
var _temp = newHeaders[spacerIdx];
|
125
|
+
newHeaders[spacerIdx] = newHeaders[stickyIdx];
|
126
|
+
newHeaders[stickyIdx] = _temp;
|
127
|
+
}
|
128
|
+
});
|
129
|
+
};
|
130
|
+
|
131
|
+
var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
|
132
|
+
return [props, {
|
133
|
+
ref: tableBodyRef
|
134
|
+
}];
|
135
|
+
};
|
136
|
+
|
137
|
+
var changeProps = function changeProps(elementName, headerCellRef, props, data) {
|
138
|
+
var column = data.column || data.cell.column;
|
139
|
+
|
140
|
+
if (column.sticky === 'right') {
|
141
|
+
var _cx;
|
142
|
+
|
143
|
+
return [props, _objectSpread({
|
144
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
|
145
|
+
}, headerCellRef && {
|
146
|
+
ref: headerCellRef
|
147
|
+
})];
|
148
|
+
}
|
149
|
+
|
150
|
+
return [props];
|
151
|
+
};
|
152
|
+
|
153
|
+
var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
|
154
|
+
if (headerCellEle) {
|
155
|
+
if (hasVertScroll(tableBodyEle)) {
|
156
|
+
headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
|
157
|
+
} else {
|
158
|
+
headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
|
159
|
+
}
|
160
|
+
|
161
|
+
toggleStickyShadow(tableBodyEle, headerCellEle);
|
162
|
+
}
|
163
|
+
};
|
164
|
+
|
165
|
+
var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
|
166
|
+
if (tableBodyEle && headerCellEle) {
|
167
|
+
var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
|
168
|
+
|
169
|
+
if (isScrolledToRight) {
|
170
|
+
headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
|
171
|
+
tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
|
172
|
+
} else {
|
173
|
+
headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
|
174
|
+
tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
|
175
|
+
}
|
176
|
+
}
|
177
|
+
};
|
178
|
+
|
179
|
+
var hasVertScroll = function hasVertScroll(element) {
|
180
|
+
if (!element) {
|
181
|
+
return false;
|
182
|
+
}
|
183
|
+
|
184
|
+
var scrollHeight = element.scrollHeight,
|
185
|
+
clientHeight = element.clientHeight;
|
186
|
+
return scrollHeight > clientHeight;
|
187
|
+
};
|
188
|
+
|
189
|
+
var _default = useStickyColumn;
|
190
|
+
exports.default = _default;
|
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
13
13
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
15
15
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
|
+
|
16
18
|
var _AddSelect = require("../AddSelect");
|
17
19
|
|
18
20
|
var _devtools = require("../../global/js/utils/devtools");
|
@@ -23,7 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
23
25
|
|
24
26
|
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; }
|
25
27
|
|
26
|
-
// import PropTypes from 'prop-types';
|
27
28
|
var componentName = 'MultiAddSelect';
|
28
29
|
var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
29
30
|
return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
|
@@ -33,5 +34,152 @@ var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
33
34
|
});
|
34
35
|
exports.MultiAddSelect = MultiAddSelect;
|
35
36
|
exports.MultiAddSelect = MultiAddSelect = _settings.pkg.checkComponentEnabled(MultiAddSelect, componentName);
|
36
|
-
MultiAddSelect.propTypes = {
|
37
|
+
MultiAddSelect.propTypes = {
|
38
|
+
/**
|
39
|
+
* optional class name
|
40
|
+
*/
|
41
|
+
className: _propTypes.default.string,
|
42
|
+
|
43
|
+
/**
|
44
|
+
* placeholder for column input filter
|
45
|
+
*/
|
46
|
+
columnInputPlaceholder: _propTypes.default.string,
|
47
|
+
|
48
|
+
/**
|
49
|
+
* text description that appears under the title
|
50
|
+
*/
|
51
|
+
description: _propTypes.default.string,
|
52
|
+
|
53
|
+
/**
|
54
|
+
* options to display in the global filter box. values are generated
|
55
|
+
* from the id which should correlate with a specific property in an
|
56
|
+
* item entry
|
57
|
+
*/
|
58
|
+
globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
|
59
|
+
id: _propTypes.default.string,
|
60
|
+
label: _propTypes.default.string
|
61
|
+
})),
|
62
|
+
globalFiltersIconDescription: _propTypes.default.string,
|
63
|
+
|
64
|
+
/**
|
65
|
+
* placeholder text for the global filter dropdown
|
66
|
+
*/
|
67
|
+
globalFiltersPlaceholderText: _propTypes.default.string,
|
68
|
+
|
69
|
+
/**
|
70
|
+
* text for the global filter primary button
|
71
|
+
*/
|
72
|
+
globalFiltersPrimaryButtonText: _propTypes.default.string,
|
73
|
+
|
74
|
+
/**
|
75
|
+
* text for the global filter secondary button
|
76
|
+
*/
|
77
|
+
globalFiltersSecondaryButtonText: _propTypes.default.string,
|
78
|
+
|
79
|
+
/**
|
80
|
+
* label for global search input
|
81
|
+
*/
|
82
|
+
globalSearchLabel: _propTypes.default.string,
|
83
|
+
|
84
|
+
/**
|
85
|
+
* placeholder for global search input
|
86
|
+
*/
|
87
|
+
globalSearchPlaceholder: _propTypes.default.string,
|
88
|
+
|
89
|
+
/**
|
90
|
+
* title that displays in the sidebar / influencer
|
91
|
+
*/
|
92
|
+
influencerTitle: _propTypes.default.string,
|
93
|
+
|
94
|
+
/**
|
95
|
+
* object that contains the item data. for more information reference the
|
96
|
+
* "Structuring items" section in the docs tab
|
97
|
+
*/
|
98
|
+
items: _propTypes.default.shape({
|
99
|
+
modifiers: _propTypes.default.shape({
|
100
|
+
label: _propTypes.default.string,
|
101
|
+
options: _propTypes.default.array
|
102
|
+
}),
|
103
|
+
sortBy: _propTypes.default.array,
|
104
|
+
filterBy: _propTypes.default.array,
|
105
|
+
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
106
|
+
avatar: _propTypes.default.shape({
|
107
|
+
alt: _propTypes.default.string,
|
108
|
+
icon: _propTypes.default.object,
|
109
|
+
src: _propTypes.default.string
|
110
|
+
}),
|
111
|
+
children: _propTypes.default.object,
|
112
|
+
icon: _propTypes.default.object,
|
113
|
+
id: _propTypes.default.string.isRequired,
|
114
|
+
subtitle: _propTypes.default.string,
|
115
|
+
title: _propTypes.default.string.isRequired,
|
116
|
+
value: _propTypes.default.string.isRequired
|
117
|
+
}))
|
118
|
+
}),
|
119
|
+
|
120
|
+
/**
|
121
|
+
* label that display above the list of items
|
122
|
+
*/
|
123
|
+
itemsLabel: _propTypes.default.string,
|
124
|
+
|
125
|
+
/**
|
126
|
+
* text to display when no results are found from the global search
|
127
|
+
*/
|
128
|
+
noResultsDescription: _propTypes.default.string,
|
129
|
+
|
130
|
+
/**
|
131
|
+
* title to display when no results are found from the global search
|
132
|
+
*/
|
133
|
+
noResultsTitle: _propTypes.default.string,
|
134
|
+
|
135
|
+
/**
|
136
|
+
* text body that displays in the sidebar when nothing is selected
|
137
|
+
*/
|
138
|
+
noSelectionDescription: _propTypes.default.string,
|
139
|
+
|
140
|
+
/**
|
141
|
+
* title that displays in the sidebar when nothing is selected
|
142
|
+
*/
|
143
|
+
noSelectionTitle: _propTypes.default.string,
|
144
|
+
|
145
|
+
/**
|
146
|
+
* function to call when the close button clicked
|
147
|
+
*/
|
148
|
+
onClose: _propTypes.default.func,
|
149
|
+
|
150
|
+
/**
|
151
|
+
* text for close button
|
152
|
+
*/
|
153
|
+
onCloseButtonText: _propTypes.default.string,
|
154
|
+
|
155
|
+
/**
|
156
|
+
* function to call when the submit button is clicked. returns a selection
|
157
|
+
*/
|
158
|
+
onSubmit: _propTypes.default.func,
|
159
|
+
|
160
|
+
/**
|
161
|
+
* text for the submit button
|
162
|
+
*/
|
163
|
+
onSubmitButtonText: _propTypes.default.string,
|
164
|
+
|
165
|
+
/**
|
166
|
+
* specifies if the component is open or not
|
167
|
+
*/
|
168
|
+
open: _propTypes.default.bool,
|
169
|
+
|
170
|
+
/**
|
171
|
+
* description for the remove item icon
|
172
|
+
*/
|
173
|
+
removeIconDescription: _propTypes.default.string,
|
174
|
+
|
175
|
+
/**
|
176
|
+
* text that displays when displaying filtered items
|
177
|
+
*/
|
178
|
+
searchResultsLabel: _propTypes.default.string,
|
179
|
+
|
180
|
+
/**
|
181
|
+
* header text
|
182
|
+
*/
|
183
|
+
title: _propTypes.default.string
|
184
|
+
};
|
37
185
|
MultiAddSelect.displayName = componentName;
|
@@ -530,7 +530,8 @@ var TYPES = {
|
|
530
530
|
gray: 'Gray',
|
531
531
|
'cool-gray': 'Cool-Gray',
|
532
532
|
'warm-gray': 'Warm-Gray',
|
533
|
-
'high-contrast': 'High-Contrast'
|
533
|
+
'high-contrast': 'High-Contrast',
|
534
|
+
outline: 'Outline'
|
534
535
|
};
|
535
536
|
var tagTypes = Object.keys(TYPES);
|
536
537
|
var deprecatedProps = {
|
@@ -545,6 +546,7 @@ var deprecatedProps = {
|
|
545
546
|
hasBackgroundAlways: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `withoutBackground`')
|
546
547
|
};
|
547
548
|
exports.deprecatedProps = deprecatedProps;
|
549
|
+
PageHeader.tagTypes = tagTypes;
|
548
550
|
PageHeader.propTypes = _objectSpread({
|
549
551
|
/**
|
550
552
|
* Specifies the action bar items which are the final items in the row top of the PageHeader.
|
@@ -13,24 +13,112 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
13
13
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
15
15
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
|
+
|
16
18
|
var _AddSelect = require("../AddSelect");
|
17
19
|
|
18
20
|
var _devtools = require("../../global/js/utils/devtools");
|
19
21
|
|
20
22
|
var _settings = require("../../settings");
|
21
23
|
|
24
|
+
var _propsHelper = require("../../global/js/utils/props-helper");
|
25
|
+
|
22
26
|
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); }
|
23
27
|
|
24
28
|
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; }
|
25
29
|
|
26
|
-
// import PropTypes from 'prop-types';
|
27
30
|
var componentName = 'SingleAddSelect';
|
28
31
|
var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
29
|
-
|
32
|
+
// remove multi add select specific props
|
33
|
+
var validProps = (0, _propsHelper.prepareProps)(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, validProps, {
|
30
35
|
ref: ref
|
31
36
|
}, (0, _devtools.getDevtoolsProps)(componentName)));
|
32
37
|
});
|
33
38
|
exports.SingleAddSelect = SingleAddSelect;
|
34
39
|
exports.SingleAddSelect = SingleAddSelect = _settings.pkg.checkComponentEnabled(SingleAddSelect, componentName);
|
35
|
-
SingleAddSelect.propTypes = {
|
40
|
+
SingleAddSelect.propTypes = {
|
41
|
+
/**
|
42
|
+
* optional class name
|
43
|
+
*/
|
44
|
+
className: _propTypes.default.string,
|
45
|
+
|
46
|
+
/**
|
47
|
+
* text description that appears under the title
|
48
|
+
*/
|
49
|
+
description: _propTypes.default.string,
|
50
|
+
|
51
|
+
/**
|
52
|
+
* label for global search input
|
53
|
+
*/
|
54
|
+
globalSearchLabel: _propTypes.default.string,
|
55
|
+
|
56
|
+
/**
|
57
|
+
* placeholder for global search input
|
58
|
+
*/
|
59
|
+
globalSearchPlaceholder: _propTypes.default.string,
|
60
|
+
|
61
|
+
/**
|
62
|
+
* object that contains the item data. for more information reference the
|
63
|
+
* "Structuring items" section in the docs tab
|
64
|
+
*/
|
65
|
+
items: _propTypes.default.shape({
|
66
|
+
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
67
|
+
children: _propTypes.default.object,
|
68
|
+
id: _propTypes.default.string.isRequired,
|
69
|
+
title: _propTypes.default.string.isRequired,
|
70
|
+
value: _propTypes.default.string.isRequired
|
71
|
+
}))
|
72
|
+
}),
|
73
|
+
|
74
|
+
/**
|
75
|
+
* label that display above the list of items
|
76
|
+
*/
|
77
|
+
itemsLabel: _propTypes.default.string,
|
78
|
+
|
79
|
+
/**
|
80
|
+
* text to display when no results are found from the global search
|
81
|
+
*/
|
82
|
+
noResultsDescription: _propTypes.default.string,
|
83
|
+
|
84
|
+
/**
|
85
|
+
* title to display when no results are found from the global search
|
86
|
+
*/
|
87
|
+
noResultsTitle: _propTypes.default.string,
|
88
|
+
|
89
|
+
/**
|
90
|
+
* function to call when the close button clicked
|
91
|
+
*/
|
92
|
+
onClose: _propTypes.default.func,
|
93
|
+
|
94
|
+
/**
|
95
|
+
* text for close button
|
96
|
+
*/
|
97
|
+
onCloseButtonText: _propTypes.default.string,
|
98
|
+
|
99
|
+
/**
|
100
|
+
* function to call when the submit button is clicked. returns a selection
|
101
|
+
*/
|
102
|
+
onSubmit: _propTypes.default.func,
|
103
|
+
|
104
|
+
/**
|
105
|
+
* text for the submit button
|
106
|
+
*/
|
107
|
+
onSubmitButtonText: _propTypes.default.string,
|
108
|
+
|
109
|
+
/**
|
110
|
+
* specifies if the component is open or not
|
111
|
+
*/
|
112
|
+
open: _propTypes.default.bool,
|
113
|
+
|
114
|
+
/**
|
115
|
+
* text that displays when displaying filtered items
|
116
|
+
*/
|
117
|
+
searchResultsLabel: _propTypes.default.string,
|
118
|
+
|
119
|
+
/**
|
120
|
+
* header text
|
121
|
+
*/
|
122
|
+
title: _propTypes.default.string
|
123
|
+
};
|
36
124
|
SingleAddSelect.displayName = componentName;
|
@@ -122,9 +122,13 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
122
122
|
};
|
123
123
|
|
124
124
|
(0, _react.useEffect)(function () {
|
125
|
-
|
126
|
-
|
127
|
-
|
125
|
+
if (allTagsModalTargetIn) {
|
126
|
+
setAllTagsModalTarget(allTagsModalTargetIn);
|
127
|
+
} else {
|
128
|
+
if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
|
129
|
+
setAllTagsModalTarget(document.body);
|
130
|
+
}
|
131
|
+
}
|
128
132
|
}, [allTagsModalTargetIn]);
|
129
133
|
(0, _react.useEffect)(function () {
|
130
134
|
var newSizingTags = []; // create sizing tags
|
@@ -260,14 +264,16 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
260
264
|
}, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
|
261
265
|
className: "".concat(blockClass, "__tag-container"),
|
262
266
|
ref: displayedArea
|
263
|
-
}, displayedTags)), allTagsModalTarget
|
267
|
+
}, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
|
268
|
+
return children;
|
269
|
+
})( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
|
264
270
|
allTags: tags,
|
265
271
|
open: showAllModalOpen,
|
266
272
|
title: allTagsModalTitle,
|
267
273
|
onClose: handleModalClose,
|
268
274
|
searchLabel: allTagsModalSearchLabel,
|
269
275
|
searchPlaceholder: allTagsModalSearchPlaceholderText
|
270
|
-
}), allTagsModalTarget)
|
276
|
+
}), allTagsModalTarget));
|
271
277
|
}); // Return a placeholder if not released and not enabled by feature flag
|
272
278
|
|
273
279
|
|
@@ -295,7 +301,8 @@ var TYPES = {
|
|
295
301
|
gray: 'Gray',
|
296
302
|
'cool-gray': 'Cool-Gray',
|
297
303
|
'warm-gray': 'Warm-Gray',
|
298
|
-
'high-contrast': 'High-Contrast'
|
304
|
+
'high-contrast': 'High-Contrast',
|
305
|
+
outline: 'Outline'
|
299
306
|
};
|
300
307
|
var tagTypes = Object.keys(TYPES);
|
301
308
|
TagSet.types = tagTypes;
|