@commercetools-uikit/data-table-manager 12.2.3 → 12.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -83,7 +83,7 @@ var UPDATE_ACTIONS = {
|
|
|
83
83
|
var COLUMN_MANAGER = 'columnManager';
|
|
84
84
|
var DISPLAY_SETTINGS = 'displaySettings';
|
|
85
85
|
|
|
86
|
-
var HeaderContainer = _styled__default[
|
|
86
|
+
var HeaderContainer = _styled__default["default"]("div", {
|
|
87
87
|
target: "e16v1mgb0"
|
|
88
88
|
} )({
|
|
89
89
|
name: "1bhm8h2",
|
|
@@ -92,30 +92,30 @@ var HeaderContainer = _styled__default['default']("div", {
|
|
|
92
92
|
|
|
93
93
|
var SettingsContainer = function SettingsContainer(props) {
|
|
94
94
|
var intl = reactIntl.useIntl();
|
|
95
|
-
return jsxRuntime.jsx(CollapsibleMotion__default[
|
|
95
|
+
return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
|
|
96
96
|
isDefaultClosed: false,
|
|
97
97
|
children: function children(_ref) {
|
|
98
98
|
var registerContentNode = _ref.registerContentNode,
|
|
99
99
|
containerStyles = _ref.containerStyles;
|
|
100
|
-
return jsxRuntime.jsx(Card__default[
|
|
100
|
+
return jsxRuntime.jsx(Card__default["default"], {
|
|
101
101
|
type: "flat",
|
|
102
102
|
theme: props.containerTheme,
|
|
103
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
103
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
104
104
|
scale: "xs",
|
|
105
105
|
children: [jsxRuntime.jsxs(HeaderContainer, {
|
|
106
|
-
children: [jsxRuntime.jsx(Text__default[
|
|
106
|
+
children: [jsxRuntime.jsx(Text__default["default"].Headline, {
|
|
107
107
|
as: "h3",
|
|
108
108
|
intlMessage: props.title
|
|
109
|
-
}), jsxRuntime.jsx(AccessibleButton__default[
|
|
109
|
+
}), jsxRuntime.jsx(AccessibleButton__default["default"], {
|
|
110
110
|
onClick: props.onClose,
|
|
111
111
|
label: intl.formatMessage(props.closeButtonLabel),
|
|
112
112
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
113
113
|
size: "medium"
|
|
114
114
|
})
|
|
115
115
|
})]
|
|
116
|
-
}), jsxRuntime.jsxs(Spacings__default[
|
|
116
|
+
}), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
117
117
|
scale: "xs",
|
|
118
|
-
children: [jsxRuntime.jsx(Spacings__default[
|
|
118
|
+
children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
119
119
|
scale: "s",
|
|
120
120
|
children: jsxRuntime.jsx("div", {
|
|
121
121
|
style: containerStyles,
|
|
@@ -124,7 +124,7 @@ var SettingsContainer = function SettingsContainer(props) {
|
|
|
124
124
|
children: props.children
|
|
125
125
|
})
|
|
126
126
|
})
|
|
127
|
-
}), (props.secondaryButton || props.primaryButton) && jsxRuntime.jsxs(Spacings__default[
|
|
127
|
+
}), (props.secondaryButton || props.primaryButton) && jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
128
128
|
justifyContent: "flex-end",
|
|
129
129
|
children: [props.secondaryButton, props.primaryButton]
|
|
130
130
|
})]
|
|
@@ -201,15 +201,15 @@ var DensityManager = function DensityManager(props) {
|
|
|
201
201
|
primaryButton: props.primaryButton,
|
|
202
202
|
secondaryButton: props.secondaryButton,
|
|
203
203
|
containerTheme: props.managerTheme,
|
|
204
|
-
children: jsxRuntime.jsxs(Grid__default[
|
|
204
|
+
children: jsxRuntime.jsxs(Grid__default["default"], {
|
|
205
205
|
gridGap: designSystem.customProperties.spacingM,
|
|
206
206
|
gridTemplateColumns: "repeat(2, 1fr)",
|
|
207
|
-
children: [jsxRuntime.jsx(Grid__default[
|
|
208
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
207
|
+
children: [jsxRuntime.jsx(Grid__default["default"].Item, {
|
|
208
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
209
209
|
scale: "s",
|
|
210
|
-
children: [jsxRuntime.jsx(FieldLabel__default[
|
|
210
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
211
211
|
title: intl.formatMessage(messages$3.textWrappingSubtitle)
|
|
212
|
-
}), jsxRuntime.jsxs(AccessibleHiden__default[
|
|
212
|
+
}), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
|
|
213
213
|
children: [jsxRuntime.jsx("label", {
|
|
214
214
|
htmlFor: "text-wrapping-0",
|
|
215
215
|
children: "Select radio option: display full text"
|
|
@@ -217,26 +217,26 @@ var DensityManager = function DensityManager(props) {
|
|
|
217
217
|
htmlFor: "text-wrapping-1",
|
|
218
218
|
children: "Select radio option: display full previews"
|
|
219
219
|
})]
|
|
220
|
-
}), jsxRuntime.jsxs(RadioInput__default[
|
|
220
|
+
}), jsxRuntime.jsxs(RadioInput__default["default"].Group, {
|
|
221
221
|
id: "text-wrapping",
|
|
222
222
|
name: "text-wrapping",
|
|
223
223
|
value: textWrappingOption,
|
|
224
224
|
onChange: props.onTextWrappingChange,
|
|
225
|
-
children: [jsxRuntime.jsx(RadioInput__default[
|
|
225
|
+
children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
226
226
|
value: WRAPPED_TEXT_VISIBLE,
|
|
227
227
|
children: intl.formatMessage(messages$3.textWrappingAllWrapVisibleOption)
|
|
228
|
-
}), jsxRuntime.jsx(RadioInput__default[
|
|
228
|
+
}), jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
229
229
|
value: SHOW_HIDE_ON_DEMAND,
|
|
230
230
|
children: intl.formatMessage(messages$3.textWrappingShowHideOnDemandOption)
|
|
231
231
|
})]
|
|
232
232
|
})]
|
|
233
233
|
})
|
|
234
|
-
}), jsxRuntime.jsx(Grid__default[
|
|
235
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
234
|
+
}), jsxRuntime.jsx(Grid__default["default"].Item, {
|
|
235
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
236
236
|
scale: "s",
|
|
237
|
-
children: [jsxRuntime.jsx(FieldLabel__default[
|
|
237
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
238
238
|
title: intl.formatMessage(messages$3.densityDisplaySubtitle)
|
|
239
|
-
}), jsxRuntime.jsxs(AccessibleHiden__default[
|
|
239
|
+
}), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
|
|
240
240
|
children: [jsxRuntime.jsx("label", {
|
|
241
241
|
htmlFor: "density-display-0",
|
|
242
242
|
children: "Select radio option: density default"
|
|
@@ -244,15 +244,15 @@ var DensityManager = function DensityManager(props) {
|
|
|
244
244
|
htmlFor: "density-display-1",
|
|
245
245
|
children: "Select radio option: density compact"
|
|
246
246
|
})]
|
|
247
|
-
}), jsxRuntime.jsxs(RadioInput__default[
|
|
247
|
+
}), jsxRuntime.jsxs(RadioInput__default["default"].Group, {
|
|
248
248
|
id: "density-display",
|
|
249
249
|
name: "density-display",
|
|
250
250
|
value: densityDisplayOption,
|
|
251
251
|
onChange: props.onDensityDisplayChange,
|
|
252
|
-
children: [jsxRuntime.jsx(RadioInput__default[
|
|
252
|
+
children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
253
253
|
value: DENSITY_DEFAULT,
|
|
254
254
|
children: intl.formatMessage(messages$3.densityDisplayDefaultOption)
|
|
255
|
-
}), jsxRuntime.jsx(RadioInput__default[
|
|
255
|
+
}), jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
256
256
|
value: DENSITY_COMPACT,
|
|
257
257
|
children: intl.formatMessage(messages$3.densityDisplayCompactOption)
|
|
258
258
|
})]
|
|
@@ -271,22 +271,22 @@ DensityManager.defaultProps = {
|
|
|
271
271
|
DensityManager.propTypes = {};
|
|
272
272
|
var DisplaySettingsManager = DensityManager;
|
|
273
273
|
|
|
274
|
-
var DraggingSmall = _styled__default[
|
|
274
|
+
var DraggingSmall = _styled__default["default"]("small", {
|
|
275
275
|
target: "ed3a5rx1"
|
|
276
276
|
} )({
|
|
277
277
|
name: "1fhyj3b",
|
|
278
278
|
styles: "&:hover{cursor:grab;}"
|
|
279
279
|
} );
|
|
280
280
|
|
|
281
|
-
var DraggingContainer = _styled__default[
|
|
281
|
+
var DraggingContainer = _styled__default["default"]("div", {
|
|
282
282
|
target: "ed3a5rx0"
|
|
283
283
|
} )(DraggingSmall, ";" + ("" ));
|
|
284
284
|
|
|
285
285
|
var DraggingContainer$1 = DraggingContainer;
|
|
286
286
|
|
|
287
|
-
function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
287
|
+
function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
288
288
|
|
|
289
|
-
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default[
|
|
289
|
+
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
290
290
|
|
|
291
291
|
var DraggableTag = function DraggableTag(props) {
|
|
292
292
|
var handleRemoveColumn = function handleRemoveColumn() {
|
|
@@ -298,15 +298,15 @@ var DraggableTag = function DraggableTag(props) {
|
|
|
298
298
|
index: props.index,
|
|
299
299
|
isDragDisabled: props.isDisabled,
|
|
300
300
|
children: function children(provided) {
|
|
301
|
-
return jsxRuntime.jsxs(Spacings__default[
|
|
301
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Inset, {
|
|
302
302
|
scale: "xs",
|
|
303
303
|
children: [jsxRuntime.jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
|
|
304
304
|
ref: provided.innerRef
|
|
305
305
|
}, provided.draggableProps), provided.dragHandleProps), {}, {
|
|
306
|
-
children: jsxRuntime.jsx(Tag__default[
|
|
306
|
+
children: jsxRuntime.jsx(Tag__default["default"], {
|
|
307
307
|
onRemove: props.onRemove ? handleRemoveColumn : undefined,
|
|
308
308
|
isDisabled: props.isDisabled,
|
|
309
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
309
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
310
310
|
alignItems: "center",
|
|
311
311
|
children: [jsxRuntime.jsx(icons.DragIcon, {
|
|
312
312
|
"data-testid": "drag-icon",
|
|
@@ -324,7 +324,7 @@ DraggableTag.displayName = 'DraggableTag';
|
|
|
324
324
|
DraggableTag.propTypes = {};
|
|
325
325
|
var DraggableTag$1 = DraggableTag;
|
|
326
326
|
|
|
327
|
-
var TagContainerEditable = _styled__default[
|
|
327
|
+
var TagContainerEditable = _styled__default["default"]("div", {
|
|
328
328
|
target: "ecy2q1d0"
|
|
329
329
|
} )("background-color:", designSystem.customProperties.backgroundColorForInput, ";border:", designSystem.customProperties.borderRadius1, " solid ", designSystem.customProperties.colorNeutral60, ";border-radius:", designSystem.customProperties.borderRadius6, ";padding:", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.constraint7, ";overflow:auto;" + ("" ));
|
|
330
330
|
|
|
@@ -347,14 +347,14 @@ var DroppablePanel = function DroppablePanel(props) {
|
|
|
347
347
|
return jsxRuntime.jsxs(TagContainerEditable$1, {
|
|
348
348
|
"data-testid": props.droppableId,
|
|
349
349
|
ref: provided.innerRef,
|
|
350
|
-
children: [props.columns.length === 0 ? jsxRuntime.jsx(Spacings__default[
|
|
350
|
+
children: [props.columns.length === 0 ? jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
351
351
|
scale: "s",
|
|
352
|
-
children: jsxRuntime.jsx(Text__default[
|
|
352
|
+
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
353
353
|
tone: "secondary",
|
|
354
354
|
children: props.noColumnsText
|
|
355
355
|
})
|
|
356
356
|
}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
357
|
-
children: [_mapInstanceProperty__default[
|
|
357
|
+
children: [_mapInstanceProperty__default["default"](_context = props.columns).call(_context, function (column, index) {
|
|
358
358
|
var _context2;
|
|
359
359
|
|
|
360
360
|
return jsxRuntime.jsx(DraggableTag$1, {
|
|
@@ -363,13 +363,13 @@ var DroppablePanel = function DroppablePanel(props) {
|
|
|
363
363
|
onRemove: props.onRemove ? function () {
|
|
364
364
|
var _context3, _context4, _context5;
|
|
365
365
|
|
|
366
|
-
return props.onRemove(_concatInstanceProperty__default[
|
|
366
|
+
return props.onRemove(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](_context4 = props.columns).call(_context4, 0, index)), _toConsumableArray(_sliceInstanceProperty__default["default"](_context5 = props.columns).call(_context5, index + 1))));
|
|
367
367
|
} : undefined,
|
|
368
368
|
isDisabled: props.isDisabled
|
|
369
|
-
}, _concatInstanceProperty__default[
|
|
370
|
-
}), props.isSearchable && jsxRuntime.jsx(Spacings__default[
|
|
369
|
+
}, _concatInstanceProperty__default["default"](_context2 = "".concat(column.key, "-")).call(_context2, index));
|
|
370
|
+
}), props.isSearchable && jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
371
371
|
scale: "xs",
|
|
372
|
-
children: jsxRuntime.jsx(Text__default[
|
|
372
|
+
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
373
373
|
tone: "secondary",
|
|
374
374
|
intlMessage: messages$2.loadMoreAttributesHint
|
|
375
375
|
})
|
|
@@ -420,11 +420,11 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
420
420
|
var HIDDEN_COLUMNS_PANEL = 'hidden-columns-panel';
|
|
421
421
|
var SELECTED_COLUMNS_PANEL = 'selected-columns-panel';
|
|
422
422
|
|
|
423
|
-
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
423
|
+
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
424
424
|
|
|
425
|
-
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default[
|
|
425
|
+
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys$2(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
426
426
|
|
|
427
|
-
var DroppableContainer = _styled__default[
|
|
427
|
+
var DroppableContainer = _styled__default["default"]("div", {
|
|
428
428
|
target: "e6ge22w0"
|
|
429
429
|
} )("width:100%;position:relative;max-width:", designSystem.customProperties.constraint10, ";cursor:", function (props) {
|
|
430
430
|
return props.isDragging ? 'grabbing' : 'auto';
|
|
@@ -439,7 +439,7 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
|
|
|
439
439
|
var _context;
|
|
440
440
|
|
|
441
441
|
if (dragResult.source.droppableId === HIDDEN_COLUMNS_PANEL) return;
|
|
442
|
-
onUpdateColumns(_concatInstanceProperty__default[
|
|
442
|
+
onUpdateColumns(_concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index)), _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1))));
|
|
443
443
|
} else {
|
|
444
444
|
var _context2, _context3;
|
|
445
445
|
|
|
@@ -448,20 +448,20 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
|
|
|
448
448
|
var isSwap = dragResult.source.droppableId === SELECTED_COLUMNS_PANEL;
|
|
449
449
|
var items = isSwap ? // remove the dragged item from its position if it is not coming from
|
|
450
450
|
// the hidden section (it is a swap)
|
|
451
|
-
_concatInstanceProperty__default[
|
|
451
|
+
_concatInstanceProperty__default["default"](_context2 = []).call(_context2, _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index)), _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1))) : selectedColumns;
|
|
452
452
|
var columns = isSwap ? selectedColumns : availableColumns;
|
|
453
453
|
|
|
454
|
-
var draggedColumn = _findInstanceProperty__default[
|
|
454
|
+
var draggedColumn = _findInstanceProperty__default["default"](columns).call(columns, function (col) {
|
|
455
455
|
return col.key === dragResult.draggableId;
|
|
456
456
|
}); // push the column in the new position
|
|
457
457
|
|
|
458
458
|
|
|
459
|
-
onUpdateColumns(_concatInstanceProperty__default[
|
|
459
|
+
onUpdateColumns(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, 0, dragResult.destination.index)), [draggedColumn], _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, dragResult.destination.index))));
|
|
460
460
|
}
|
|
461
461
|
};
|
|
462
462
|
|
|
463
463
|
var DropdownIndicator = function DropdownIndicator() {
|
|
464
|
-
return jsxRuntime.jsx(Spacings__default[
|
|
464
|
+
return jsxRuntime.jsx(Spacings__default["default"].Inline, {
|
|
465
465
|
alignItems: "center",
|
|
466
466
|
children: jsxRuntime.jsx(icons.SearchIcon, {
|
|
467
467
|
scale: "medium",
|
|
@@ -496,7 +496,7 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
|
496
496
|
};
|
|
497
497
|
|
|
498
498
|
var hiddenColumns = react.useMemo(function () {
|
|
499
|
-
return differenceWith__default[
|
|
499
|
+
return differenceWith__default["default"](props.availableColumns, props.selectedColumns, function (a, b) {
|
|
500
500
|
return a.key === b.key;
|
|
501
501
|
});
|
|
502
502
|
}, [props.availableColumns, props.selectedColumns]);
|
|
@@ -518,22 +518,22 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
|
518
518
|
children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, {
|
|
519
519
|
onDragEnd: handleDragEnd,
|
|
520
520
|
onDragStart: handleDragStart,
|
|
521
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
521
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
522
522
|
scale: "m",
|
|
523
523
|
children: [jsxRuntime.jsx(DroppableContainer, {
|
|
524
524
|
isDragging: isDragging,
|
|
525
525
|
"aria-labelledby": "hidden-columns",
|
|
526
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
527
|
-
children: [jsxRuntime.jsxs(Spacings__default[
|
|
526
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
527
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
528
528
|
scale: "xs",
|
|
529
529
|
alignItems: "center",
|
|
530
530
|
children: [jsxRuntime.jsx(icons.EyeCrossedIcon, {
|
|
531
531
|
size: "medium"
|
|
532
|
-
}), jsxRuntime.jsx(FieldLabel__default[
|
|
532
|
+
}), jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
533
533
|
id: "hidden-columns",
|
|
534
534
|
title: intl.formatMessage(messages$1.hiddenColumns)
|
|
535
535
|
})]
|
|
536
|
-
}), props.areHiddenColumnsSearchable && jsxRuntime.jsx(AsyncSelectInput__default[
|
|
536
|
+
}), props.areHiddenColumnsSearchable && jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread$2(_objectSpread$2({}, props.searchHiddenColumnsPlaceholder ? {
|
|
537
537
|
placeholder: props.searchHiddenColumnsPlaceholder
|
|
538
538
|
} : undefined), {}, {
|
|
539
539
|
cacheOptions: false,
|
|
@@ -544,7 +544,7 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
|
544
544
|
// because the loading indicator is displayed
|
|
545
545
|
// only when loadOptions is invoked
|
|
546
546
|
,
|
|
547
|
-
loadOptions: debounce__default[
|
|
547
|
+
loadOptions: debounce__default["default"](searchHiddenColumns, 300),
|
|
548
548
|
onInputChange: handleInputChange,
|
|
549
549
|
components: selectInputComponents
|
|
550
550
|
})), jsxRuntime.jsx(DroppablePanel$1, {
|
|
@@ -558,13 +558,13 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
|
558
558
|
}), jsxRuntime.jsx(DroppableContainer, {
|
|
559
559
|
isDragging: isDragging,
|
|
560
560
|
"aria-labelledby": "visible-columns",
|
|
561
|
-
children: jsxRuntime.jsxs(Spacings__default[
|
|
562
|
-
children: [jsxRuntime.jsxs(Spacings__default[
|
|
561
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
562
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
563
563
|
scale: "xs",
|
|
564
564
|
alignItems: "center",
|
|
565
565
|
children: [jsxRuntime.jsx(icons.EyeIcon, {
|
|
566
566
|
size: "medium"
|
|
567
|
-
}), jsxRuntime.jsx(FieldLabel__default[
|
|
567
|
+
}), jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
568
568
|
id: "visible-columns",
|
|
569
569
|
title: intl.formatMessage(messages$1.visibleColumns)
|
|
570
570
|
})]
|
|
@@ -606,15 +606,15 @@ var messages = reactIntl.defineMessages({
|
|
|
606
606
|
}
|
|
607
607
|
});
|
|
608
608
|
|
|
609
|
-
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
609
|
+
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
610
610
|
|
|
611
|
-
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default[
|
|
611
|
+
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
612
612
|
|
|
613
|
-
var SelectContainer = _styled__default[
|
|
613
|
+
var SelectContainer = _styled__default["default"]("div", {
|
|
614
614
|
target: "eh8k7x01"
|
|
615
615
|
} )("width:", designSystem.customProperties.constraint4, ";" + ("" ));
|
|
616
616
|
|
|
617
|
-
var TopBarContainer = _styled__default[
|
|
617
|
+
var TopBarContainer = _styled__default["default"]("div", {
|
|
618
618
|
target: "eh8k7x00"
|
|
619
619
|
} )({
|
|
620
620
|
name: "1ff36h2",
|
|
@@ -627,7 +627,7 @@ var getDropdownOptions = function getDropdownOptions(_ref) {
|
|
|
627
627
|
var areColumnSettingsEnabled = _ref.areColumnSettingsEnabled,
|
|
628
628
|
areDisplaySettingsEnabled = _ref.areDisplaySettingsEnabled,
|
|
629
629
|
formatMessage = _ref.formatMessage;
|
|
630
|
-
return _concatInstanceProperty__default[
|
|
630
|
+
return _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(areColumnSettingsEnabled ? [{
|
|
631
631
|
value: COLUMN_MANAGER,
|
|
632
632
|
label: formatMessage(messages.columnManagerOption)
|
|
633
633
|
}] : []), _toConsumableArray(areDisplaySettingsEnabled ? [{
|
|
@@ -637,13 +637,13 @@ var getDropdownOptions = function getDropdownOptions(_ref) {
|
|
|
637
637
|
};
|
|
638
638
|
var getMappedColumns = function getMappedColumns() {
|
|
639
639
|
var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
640
|
-
return _reduceInstanceProperty__default[
|
|
640
|
+
return _reduceInstanceProperty__default["default"](columns).call(columns, function (mappedColumns, column) {
|
|
641
641
|
return _objectSpread$1(_objectSpread$1({}, mappedColumns), {}, _defineProperty({}, column.key, column));
|
|
642
642
|
}, {});
|
|
643
643
|
};
|
|
644
644
|
var getSelectedColumns = function getSelectedColumns(mappedColumns) {
|
|
645
645
|
var visibleColumnsKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
646
|
-
return _mapInstanceProperty__default[
|
|
646
|
+
return _mapInstanceProperty__default["default"](visibleColumnsKeys).call(visibleColumnsKeys, function (columnKey) {
|
|
647
647
|
return mappedColumns[columnKey];
|
|
648
648
|
});
|
|
649
649
|
};
|
|
@@ -675,19 +675,19 @@ var DataTableSettings = function DataTableSettings(props) {
|
|
|
675
675
|
return setOpenedPanelId(null);
|
|
676
676
|
};
|
|
677
677
|
|
|
678
|
-
return jsxRuntime.jsxs(Spacings__default[
|
|
679
|
-
children: [jsxRuntime.jsxs(Spacings__default[
|
|
678
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
679
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
680
680
|
justifyContent: "space-between",
|
|
681
681
|
alignItems: "center",
|
|
682
682
|
children: [jsxRuntime.jsx(TopBarContainer, {
|
|
683
683
|
children: props.topBar
|
|
684
684
|
}), dropdownOptions.length > 0 && jsxRuntime.jsxs(SelectContainer, {
|
|
685
|
-
children: [jsxRuntime.jsx(AccessibleHiden__default[
|
|
685
|
+
children: [jsxRuntime.jsx(AccessibleHiden__default["default"], {
|
|
686
686
|
children: jsxRuntime.jsx("label", {
|
|
687
687
|
htmlFor: "table-settings-dropdown",
|
|
688
688
|
children: "Open table manager dropdown"
|
|
689
689
|
})
|
|
690
|
-
}), jsxRuntime.jsx(SelectInput__default[
|
|
690
|
+
}), jsxRuntime.jsx(SelectInput__default["default"], {
|
|
691
691
|
id: "table-settings-dropdown" // the dropdown always shows the placeholder as selecting an option
|
|
692
692
|
// will open the corresponding panel (column manager or display settings)
|
|
693
693
|
,
|
|
@@ -712,7 +712,7 @@ var DataTableSettings = function DataTableSettings(props) {
|
|
|
712
712
|
selectedColumns: selectedColumns,
|
|
713
713
|
onClose: handleSettingsPanelChange,
|
|
714
714
|
onUpdateColumns: function onUpdateColumns(nextVisibleColumns) {
|
|
715
|
-
var keysOfVisibleColumns = _mapInstanceProperty__default[
|
|
715
|
+
var keysOfVisibleColumns = _mapInstanceProperty__default["default"](nextVisibleColumns).call(nextVisibleColumns, function (visibleColumn) {
|
|
716
716
|
return visibleColumn.key;
|
|
717
717
|
});
|
|
718
718
|
|
|
@@ -727,9 +727,9 @@ DataTableSettings.displayName = 'DataTableSettings';
|
|
|
727
727
|
DataTableSettings.propTypes = {};
|
|
728
728
|
var DataTableSettings$1 = DataTableSettings;
|
|
729
729
|
|
|
730
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
730
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
731
731
|
|
|
732
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default[
|
|
732
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
733
733
|
|
|
734
734
|
var DataTableManager = function DataTableManager(props) {
|
|
735
735
|
var areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
|
|
@@ -737,13 +737,13 @@ var DataTableManager = function DataTableManager(props) {
|
|
|
737
737
|
var columns = react.useMemo(function () {
|
|
738
738
|
var _context;
|
|
739
739
|
|
|
740
|
-
return _mapInstanceProperty__default[
|
|
740
|
+
return _mapInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
|
|
741
741
|
return _objectSpread(_objectSpread({}, column), {}, {
|
|
742
742
|
isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
|
|
743
743
|
});
|
|
744
744
|
});
|
|
745
745
|
}, [areDisplaySettingsEnabled, props.columns, isWrappingText]);
|
|
746
|
-
return jsxRuntime.jsxs(Spacings__default[
|
|
746
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
747
747
|
children: [jsxRuntime.jsx(DataTableSettings$1, {
|
|
748
748
|
topBar: props.topBar,
|
|
749
749
|
onSettingsChange: props.onSettingsChange,
|
|
@@ -761,21 +761,17 @@ DataTableManager.propTypes = {};
|
|
|
761
761
|
DataTableManager.displayName = 'DataTableManager';
|
|
762
762
|
var DataTableManager$1 = DataTableManager;
|
|
763
763
|
|
|
764
|
-
// NOTE: This string will be replaced
|
|
765
|
-
var version =
|
|
764
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
765
|
+
var version = "12.2.7";
|
|
766
766
|
|
|
767
767
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
768
768
|
enumerable: true,
|
|
769
|
-
get: function () {
|
|
770
|
-
return hooks.useRowSelection;
|
|
771
|
-
}
|
|
769
|
+
get: function () { return hooks.useRowSelection; }
|
|
772
770
|
});
|
|
773
771
|
Object.defineProperty(exports, 'useSorting', {
|
|
774
772
|
enumerable: true,
|
|
775
|
-
get: function () {
|
|
776
|
-
return hooks.useSorting;
|
|
777
|
-
}
|
|
773
|
+
get: function () { return hooks.useSorting; }
|
|
778
774
|
});
|
|
779
775
|
exports.UPDATE_ACTIONS = UPDATE_ACTIONS;
|
|
780
|
-
exports[
|
|
776
|
+
exports["default"] = DataTableManager$1;
|
|
781
777
|
exports.version = version;
|
|
@@ -1075,7 +1075,7 @@ DataTableManager.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1075
1075
|
DataTableManager.displayName = 'DataTableManager';
|
|
1076
1076
|
var DataTableManager$1 = DataTableManager;
|
|
1077
1077
|
|
|
1078
|
-
// NOTE: This string will be replaced
|
|
1079
|
-
var version =
|
|
1078
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
1079
|
+
var version = "12.2.7";
|
|
1080
1080
|
|
|
1081
1081
|
export { UPDATE_ACTIONS, DataTableManager$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/data-table-manager",
|
|
3
3
|
"description": "This component enhances the DataTable component and additionally provides a UI and state management to handle configuration of the table such as column manager.",
|
|
4
|
-
"version": "12.2.
|
|
4
|
+
"version": "12.2.7",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
12
|
"keywords": ["javascript", "design system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"private": false,
|
|
15
14
|
"publishConfig": {
|
|
16
15
|
"access": "public"
|
|
17
16
|
},
|
|
@@ -19,31 +18,28 @@
|
|
|
19
18
|
"main": "dist/commercetools-uikit-data-table-manager.cjs.js",
|
|
20
19
|
"module": "dist/commercetools-uikit-data-table-manager.esm.js",
|
|
21
20
|
"files": ["dist"],
|
|
22
|
-
"scripts": {
|
|
23
|
-
"prepare": "../../../scripts/version.js replace"
|
|
24
|
-
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "7.
|
|
27
|
-
"@babel/runtime-corejs3": "7.
|
|
28
|
-
"@commercetools-uikit/accessible-button": "12.2.
|
|
29
|
-
"@commercetools-uikit/accessible-hidden": "12.2.
|
|
30
|
-
"@commercetools-uikit/async-select-input": "12.2.
|
|
31
|
-
"@commercetools-uikit/card": "12.2.
|
|
32
|
-
"@commercetools-uikit/collapsible-motion": "12.2.
|
|
33
|
-
"@commercetools-uikit/design-system": "12.2.
|
|
34
|
-
"@commercetools-uikit/field-label": "12.2.
|
|
35
|
-
"@commercetools-uikit/grid": "12.2.
|
|
36
|
-
"@commercetools-uikit/hooks": "12.2.
|
|
37
|
-
"@commercetools-uikit/icons": "12.2.
|
|
38
|
-
"@commercetools-uikit/primary-button": "12.2.
|
|
39
|
-
"@commercetools-uikit/radio-input": "12.2.
|
|
40
|
-
"@commercetools-uikit/secondary-button": "12.2.
|
|
41
|
-
"@commercetools-uikit/secondary-icon-button": "12.2.
|
|
42
|
-
"@commercetools-uikit/select-input": "12.2.
|
|
43
|
-
"@commercetools-uikit/spacings": "12.2.
|
|
44
|
-
"@commercetools-uikit/tag": "12.2.
|
|
45
|
-
"@commercetools-uikit/text": "12.2.
|
|
46
|
-
"@commercetools-uikit/utils": "12.2.
|
|
22
|
+
"@babel/runtime": "7.16.3",
|
|
23
|
+
"@babel/runtime-corejs3": "7.16.3",
|
|
24
|
+
"@commercetools-uikit/accessible-button": "12.2.5",
|
|
25
|
+
"@commercetools-uikit/accessible-hidden": "12.2.5",
|
|
26
|
+
"@commercetools-uikit/async-select-input": "12.2.7",
|
|
27
|
+
"@commercetools-uikit/card": "12.2.5",
|
|
28
|
+
"@commercetools-uikit/collapsible-motion": "12.2.5",
|
|
29
|
+
"@commercetools-uikit/design-system": "12.2.5",
|
|
30
|
+
"@commercetools-uikit/field-label": "12.2.7",
|
|
31
|
+
"@commercetools-uikit/grid": "12.2.5",
|
|
32
|
+
"@commercetools-uikit/hooks": "12.2.5",
|
|
33
|
+
"@commercetools-uikit/icons": "12.2.7",
|
|
34
|
+
"@commercetools-uikit/primary-button": "12.2.5",
|
|
35
|
+
"@commercetools-uikit/radio-input": "12.2.7",
|
|
36
|
+
"@commercetools-uikit/secondary-button": "12.2.5",
|
|
37
|
+
"@commercetools-uikit/secondary-icon-button": "12.2.5",
|
|
38
|
+
"@commercetools-uikit/select-input": "12.2.7",
|
|
39
|
+
"@commercetools-uikit/spacings": "12.2.5",
|
|
40
|
+
"@commercetools-uikit/tag": "12.2.7",
|
|
41
|
+
"@commercetools-uikit/text": "12.2.5",
|
|
42
|
+
"@commercetools-uikit/utils": "12.2.5",
|
|
47
43
|
"@emotion/react": "^11.4.0",
|
|
48
44
|
"@emotion/styled": "^11.3.0",
|
|
49
45
|
"debounce-promise": "^3.1.2",
|
|
@@ -56,7 +52,7 @@
|
|
|
56
52
|
"formik": "^2.2.9",
|
|
57
53
|
"react": "17.0.2",
|
|
58
54
|
"react-dom": "17.0.2",
|
|
59
|
-
"react-intl": "5.
|
|
55
|
+
"react-intl": "5.21.2"
|
|
60
56
|
},
|
|
61
57
|
"peerDependencies": {
|
|
62
58
|
"react": "17.x",
|