@react-spectrum/table 3.12.10-nightly.4624 → 3.12.11-nightly.4629
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DragPreview.main.js +5 -5
- package/dist/DragPreview.mjs +5 -5
- package/dist/DragPreview.module.js +5 -5
- package/dist/InsertionIndicator.main.js +6 -6
- package/dist/InsertionIndicator.mjs +6 -6
- package/dist/InsertionIndicator.module.js +6 -6
- package/dist/Resizer.main.js +20 -20
- package/dist/Resizer.mjs +20 -20
- package/dist/Resizer.module.js +20 -20
- package/dist/RootDropIndicator.main.js +4 -4
- package/dist/RootDropIndicator.mjs +4 -4
- package/dist/RootDropIndicator.module.js +4 -4
- package/dist/TableView.main.js +3 -3
- package/dist/TableView.mjs +3 -3
- package/dist/TableView.module.js +3 -3
- package/dist/TableViewBase.main.js +191 -191
- package/dist/TableViewBase.mjs +191 -191
- package/dist/TableViewBase.module.js +191 -191
- package/dist/TreeGridTableView.main.js +3 -3
- package/dist/TreeGridTableView.mjs +3 -3
- package/dist/TreeGridTableView.module.js +3 -3
- package/package.json +29 -29
|
@@ -136,9 +136,9 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
136
136
|
let dragHooksProvided = (0, $idLTj$react.useRef)(isTableDraggable);
|
|
137
137
|
let dropHooksProvided = (0, $idLTj$react.useRef)(isTableDroppable);
|
|
138
138
|
(0, $idLTj$react.useEffect)(()=>{
|
|
139
|
-
if (dragHooksProvided.current !== isTableDraggable) console.warn(
|
|
140
|
-
if (dropHooksProvided.current !== isTableDroppable) console.warn(
|
|
141
|
-
if (
|
|
139
|
+
if (dragHooksProvided.current !== isTableDraggable) console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
|
|
140
|
+
if (dropHooksProvided.current !== isTableDroppable) console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
|
|
141
|
+
if ('expandedKeys' in state && (isTableDraggable || isTableDroppable)) console.warn('Drag and drop is not yet fully supported with expandable rows and may produce unexpected results.');
|
|
142
142
|
}, [
|
|
143
143
|
isTableDraggable,
|
|
144
144
|
isTableDroppable,
|
|
@@ -176,8 +176,8 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
176
176
|
let domRef = (0, $idLTj$reactspectrumutils.useDOMRef)(ref);
|
|
177
177
|
let headerRef = (0, $idLTj$react.useRef)();
|
|
178
178
|
let bodyRef = (0, $idLTj$react.useRef)();
|
|
179
|
-
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))),
|
|
180
|
-
let density = props.density ||
|
|
179
|
+
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
|
|
180
|
+
let density = props.density || 'regular';
|
|
181
181
|
let columnLayout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelytable.TableColumnLayout)({
|
|
182
182
|
getDefaultWidth: getDefaultWidth,
|
|
183
183
|
getDefaultMinWidth: getDefaultMinWidth
|
|
@@ -187,10 +187,10 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
187
187
|
]);
|
|
188
188
|
let tableLayout = (0, $idLTj$react.useMemo)(()=>new (0, $idLTj$reactstatelylayout.TableLayout)({
|
|
189
189
|
// If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
|
|
190
|
-
rowHeight: props.overflowMode ===
|
|
191
|
-
estimatedRowHeight: props.overflowMode ===
|
|
192
|
-
headingHeight: props.overflowMode ===
|
|
193
|
-
estimatedHeadingHeight: props.overflowMode ===
|
|
190
|
+
rowHeight: props.overflowMode === 'wrap' ? null : $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale],
|
|
191
|
+
estimatedRowHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$ROW_HEIGHTS[density][scale] : null,
|
|
192
|
+
headingHeight: props.overflowMode === 'wrap' ? null : $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale],
|
|
193
|
+
estimatedHeadingHeight: props.overflowMode === 'wrap' ? $e39c6de4eb69450d$var$DEFAULT_HEADER_HEIGHT[scale] : null,
|
|
194
194
|
columnLayout: columnLayout,
|
|
195
195
|
initialCollection: state.collection
|
|
196
196
|
}), // don't recompute when state.collection changes, only used for initial value
|
|
@@ -206,7 +206,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
206
206
|
let layout = (0, $idLTj$react.useMemo)(()=>{
|
|
207
207
|
let proxy = new Proxy(tableLayout, {
|
|
208
208
|
get (target, prop, receiver) {
|
|
209
|
-
return prop ===
|
|
209
|
+
return prop === 'tableState' ? state : Reflect.get(target, prop, receiver);
|
|
210
210
|
}
|
|
211
211
|
});
|
|
212
212
|
return proxy;
|
|
@@ -238,7 +238,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
238
238
|
dropTargetDelegate: layout
|
|
239
239
|
}, dropState, domRef);
|
|
240
240
|
isRootDropTarget = dropState.isDropTarget({
|
|
241
|
-
type:
|
|
241
|
+
type: 'root'
|
|
242
242
|
});
|
|
243
243
|
}
|
|
244
244
|
let { gridProps: gridProps } = (0, $idLTj$reactariatable.useTable)({
|
|
@@ -251,18 +251,18 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
251
251
|
let [headerRowHovered, setHeaderRowHovered] = (0, $idLTj$react.useState)(false);
|
|
252
252
|
let renderWrapper = (parent, reusableView, children, renderChildren)=>{
|
|
253
253
|
let style = (0, $idLTj$reactariavirtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
|
|
254
|
-
if (style.overflow ===
|
|
255
|
-
if (reusableView.viewType ===
|
|
254
|
+
if (style.overflow === 'hidden') style.overflow = 'visible'; // needed to support position: sticky
|
|
255
|
+
if (reusableView.viewType === 'rowgroup') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowGroup, {
|
|
256
256
|
key: reusableView.key,
|
|
257
257
|
style: style
|
|
258
258
|
}, isTableDroppable && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $4a98adf416b1ae5d$exports.RootDropIndicator), {
|
|
259
259
|
key: "root"
|
|
260
260
|
}), renderChildren(children));
|
|
261
|
-
if (reusableView.viewType ===
|
|
261
|
+
if (reusableView.viewType === 'header') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableHeader, {
|
|
262
262
|
key: reusableView.key,
|
|
263
263
|
style: style
|
|
264
264
|
}, renderChildren(children));
|
|
265
|
-
if (reusableView.viewType ===
|
|
265
|
+
if (reusableView.viewType === 'row') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRow, {
|
|
266
266
|
key: reusableView.key,
|
|
267
267
|
item: reusableView.content,
|
|
268
268
|
style: style,
|
|
@@ -270,7 +270,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
270
270
|
isTableDroppable: isTableDroppable,
|
|
271
271
|
isTableDraggable: isTableDraggable
|
|
272
272
|
}, renderChildren(children));
|
|
273
|
-
if (reusableView.viewType ===
|
|
273
|
+
if (reusableView.viewType === 'headerrow') return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableHeaderRow, {
|
|
274
274
|
onHoverChange: setHeaderRowHovered,
|
|
275
275
|
key: reusableView.key,
|
|
276
276
|
style: style,
|
|
@@ -280,12 +280,12 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
280
280
|
let isRootDroptarget;
|
|
281
281
|
if (isTableDroppable) {
|
|
282
282
|
if (parent.content) isDropTarget = dropState.isDropTarget({
|
|
283
|
-
type:
|
|
284
|
-
dropPosition:
|
|
283
|
+
type: 'item',
|
|
284
|
+
dropPosition: 'on',
|
|
285
285
|
key: parent.content.key
|
|
286
286
|
});
|
|
287
287
|
isRootDroptarget = dropState.isDropTarget({
|
|
288
|
-
type:
|
|
288
|
+
type: 'root'
|
|
289
289
|
});
|
|
290
290
|
}
|
|
291
291
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.VirtualizerItem), {
|
|
@@ -293,21 +293,21 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
293
293
|
layoutInfo: reusableView.layoutInfo,
|
|
294
294
|
virtualizer: reusableView.virtualizer,
|
|
295
295
|
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
|
|
296
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
297
|
-
|
|
298
|
-
|
|
296
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cellWrapper', (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), {
|
|
297
|
+
'react-spectrum-Table-cellWrapper': !reusableView.layoutInfo.estimatedSize,
|
|
298
|
+
'react-spectrum-Table-cellWrapper--dropTarget': isDropTarget || isRootDroptarget
|
|
299
299
|
}))
|
|
300
300
|
}, reusableView.rendered);
|
|
301
301
|
};
|
|
302
302
|
let renderView = (type, item)=>{
|
|
303
303
|
switch(type){
|
|
304
|
-
case
|
|
305
|
-
case
|
|
306
|
-
case
|
|
307
|
-
case
|
|
308
|
-
case
|
|
304
|
+
case 'header':
|
|
305
|
+
case 'rowgroup':
|
|
306
|
+
case 'section':
|
|
307
|
+
case 'row':
|
|
308
|
+
case 'headerrow':
|
|
309
309
|
return null;
|
|
310
|
-
case
|
|
310
|
+
case 'cell':
|
|
311
311
|
if (item.props.isSelectionCell) return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableCheckboxCell, {
|
|
312
312
|
cell: item
|
|
313
313
|
});
|
|
@@ -317,14 +317,14 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
317
317
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableCell, {
|
|
318
318
|
cell: item
|
|
319
319
|
});
|
|
320
|
-
case
|
|
320
|
+
case 'placeholder':
|
|
321
321
|
// TODO: move to react-aria?
|
|
322
322
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
323
323
|
role: "gridcell",
|
|
324
324
|
"aria-colindex": item.index + 1,
|
|
325
325
|
"aria-colspan": item.colspan > 1 ? item.colspan : null
|
|
326
326
|
});
|
|
327
|
-
case
|
|
327
|
+
case 'column':
|
|
328
328
|
if (item.props.isSelectionCell) return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableSelectAllCell, {
|
|
329
329
|
column: item
|
|
330
330
|
});
|
|
@@ -347,12 +347,12 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
347
347
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableColumnHeader, {
|
|
348
348
|
column: item
|
|
349
349
|
});
|
|
350
|
-
case
|
|
350
|
+
case 'loader':
|
|
351
351
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$CenteredWrapper, null, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrumprogress.ProgressCircle), {
|
|
352
352
|
isIndeterminate: true,
|
|
353
|
-
"aria-label": state.collection.size > 0 ? stringFormatter.format(
|
|
353
|
+
"aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
|
|
354
354
|
}));
|
|
355
|
-
case
|
|
355
|
+
case 'empty':
|
|
356
356
|
{
|
|
357
357
|
let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
|
|
358
358
|
if (emptyState == null) return null;
|
|
@@ -398,7 +398,7 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
398
398
|
setIsResizing
|
|
399
399
|
]);
|
|
400
400
|
let focusedKey = state.selectionManager.focusedKey;
|
|
401
|
-
if ((dropState === null || dropState === void 0 ? void 0 : (_dropState_target = dropState.target) === null || _dropState_target === void 0 ? void 0 : _dropState_target.type) ===
|
|
401
|
+
if ((dropState === null || dropState === void 0 ? void 0 : (_dropState_target = dropState.target) === null || _dropState_target === void 0 ? void 0 : _dropState_target.type) === 'item') focusedKey = dropState.target.key;
|
|
402
402
|
let mergedProps = (0, $idLTj$reactariautils.mergeProps)(isTableDroppable && (droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps), gridProps, focusProps, (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.isVirtualDragging()) && {
|
|
403
403
|
tabIndex: null
|
|
404
404
|
});
|
|
@@ -425,13 +425,13 @@ function $e39c6de4eb69450d$var$TableViewBase(props, ref) {
|
|
|
425
425
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableVirtualizer, {
|
|
426
426
|
...mergedProps,
|
|
427
427
|
...styleProps,
|
|
428
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
428
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table', `spectrum-Table--${density}`, {
|
|
429
|
+
'spectrum-Table--quiet': isQuiet,
|
|
430
|
+
'spectrum-Table--wrap': props.overflowMode === 'wrap',
|
|
431
|
+
'spectrum-Table--loadingMore': state.collection.body.props.loadingState === 'loadingMore',
|
|
432
|
+
'spectrum-Table--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
|
|
433
|
+
'spectrum-Table--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible
|
|
434
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table'), styleProps.className),
|
|
435
435
|
layout: layout,
|
|
436
436
|
collection: state.collection,
|
|
437
437
|
focusedKey: focusedKey,
|
|
@@ -466,7 +466,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
466
466
|
let { layout: layout, collection: collection, focusedKey: focusedKey, renderView: renderView, renderWrapper: renderWrapper, domRef: domRef, bodyRef: bodyRef, headerRef: headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible: isFocusVisible, isVirtualDragging: isVirtualDragging, isRootDropTarget: isRootDropTarget, ...otherProps } = props;
|
|
467
467
|
let { direction: direction } = (0, $idLTj$reactariai18n.useLocale)();
|
|
468
468
|
let loadingState = collection.body.props.loadingState;
|
|
469
|
-
let isLoading = loadingState ===
|
|
469
|
+
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
470
470
|
let onLoadMore = collection.body.props.onLoadMore;
|
|
471
471
|
let transitionDuration = 220;
|
|
472
472
|
if (isLoading) transitionDuration = 160;
|
|
@@ -490,7 +490,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
490
490
|
virtualizer.scrollToItem(key, {
|
|
491
491
|
duration: 0,
|
|
492
492
|
// Prevent scrolling to the top when clicking on column headers.
|
|
493
|
-
shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !==
|
|
493
|
+
shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !== 'column',
|
|
494
494
|
// Offset scroll position by width of selection cell
|
|
495
495
|
// (which is sticky and will overlap the cell we're scrolling to).
|
|
496
496
|
offsetX: column.props.isSelectionCell || column.props.isDragButtonCell ? layout.getColumnWidth(column.key) : 0
|
|
@@ -523,7 +523,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
523
523
|
// only that it changes in a resize, and when that happens, we want to sync the body to the
|
|
524
524
|
// header scroll position
|
|
525
525
|
(0, $idLTj$react.useEffect)(()=>{
|
|
526
|
-
if ((0, $idLTj$reactariainteractions.getInteractionModality)() ===
|
|
526
|
+
if ((0, $idLTj$reactariainteractions.getInteractionModality)() === 'keyboard' && headerRef.current.contains(document.activeElement)) {
|
|
527
527
|
(0, $idLTj$reactariautils.scrollIntoView)(headerRef.current, document.activeElement);
|
|
528
528
|
(0, $idLTj$reactariautils.scrollIntoViewport)(document.activeElement, {
|
|
529
529
|
containingElement: domRef.current
|
|
@@ -536,7 +536,7 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
536
536
|
bodyRef,
|
|
537
537
|
domRef
|
|
538
538
|
]);
|
|
539
|
-
let headerHeight = ((_layout_getLayoutInfo = layout.getLayoutInfo(
|
|
539
|
+
let headerHeight = ((_layout_getLayoutInfo = layout.getLayoutInfo('header')) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) || 0;
|
|
540
540
|
// Sync the scroll position from the table body to the header container.
|
|
541
541
|
let onScroll = (0, $idLTj$react.useCallback)(()=>{
|
|
542
542
|
headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
|
|
@@ -569,29 +569,29 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
569
569
|
ref: domRef
|
|
570
570
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
571
571
|
role: "presentation",
|
|
572
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
572
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headWrapper'),
|
|
573
573
|
style: {
|
|
574
574
|
height: headerHeight,
|
|
575
|
-
overflow:
|
|
576
|
-
position:
|
|
577
|
-
willChange: state.isScrolling ?
|
|
575
|
+
overflow: 'hidden',
|
|
576
|
+
position: 'relative',
|
|
577
|
+
willChange: state.isScrolling ? 'scroll-position' : undefined,
|
|
578
578
|
transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
|
|
579
579
|
},
|
|
580
580
|
ref: headerRef
|
|
581
581
|
}, state.visibleViews[0]), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavirtualizer.ScrollView), {
|
|
582
582
|
role: "presentation",
|
|
583
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
587
|
-
|
|
583
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-body', {
|
|
584
|
+
'focus-ring': isFocusVisible,
|
|
585
|
+
'spectrum-Table-body--resizerAtTableEdge': shouldHardCornerResizeCorner
|
|
586
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-body', {
|
|
587
|
+
'react-spectrum-Table-body--dropTarget': !!isRootDropTarget
|
|
588
588
|
})),
|
|
589
589
|
tabIndex: isVirtualDragging ? null : -1,
|
|
590
590
|
style: {
|
|
591
591
|
flex: 1
|
|
592
592
|
},
|
|
593
593
|
innerStyle: {
|
|
594
|
-
overflow:
|
|
594
|
+
overflow: 'visible',
|
|
595
595
|
transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
|
|
596
596
|
},
|
|
597
597
|
ref: bodyRef,
|
|
@@ -601,11 +601,11 @@ function $e39c6de4eb69450d$var$TableVirtualizer(props) {
|
|
|
601
601
|
onScrollEnd: state.endScrolling,
|
|
602
602
|
onScroll: onScroll
|
|
603
603
|
}, state.visibleViews[1], /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
604
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
604
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-bodyResizeIndicator'),
|
|
605
605
|
style: {
|
|
606
|
-
[direction ===
|
|
606
|
+
[direction === 'ltr' ? 'left' : 'right']: `${resizerPosition}px`,
|
|
607
607
|
height: `${Math.max(state.virtualizer.contentSize.height, state.virtualizer.visibleRect.height)}px`,
|
|
608
|
-
display: layout.resizingColumn ?
|
|
608
|
+
display: layout.resizingColumn ? 'block' : 'none'
|
|
609
609
|
}
|
|
610
610
|
})))));
|
|
611
611
|
}
|
|
@@ -614,7 +614,7 @@ function $e39c6de4eb69450d$var$TableHeader({ children: children, ...otherProps }
|
|
|
614
614
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
615
615
|
...rowGroupProps,
|
|
616
616
|
...otherProps,
|
|
617
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
617
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-head')
|
|
618
618
|
}, children);
|
|
619
619
|
}
|
|
620
620
|
function $e39c6de4eb69450d$var$TableColumnHeader(props) {
|
|
@@ -647,25 +647,25 @@ function $e39c6de4eb69450d$var$TableColumnHeader(props) {
|
|
|
647
647
|
pressProps
|
|
648
648
|
];
|
|
649
649
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
650
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
650
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
651
651
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
652
652
|
...(0, $idLTj$reactariautils.mergeProps)(...allProps),
|
|
653
653
|
ref: ref,
|
|
654
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
662
|
-
|
|
663
|
-
|
|
654
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCell', {
|
|
655
|
+
'is-active': isPressed,
|
|
656
|
+
'is-sortable': columnProps.allowsSorting,
|
|
657
|
+
'is-sorted-desc': ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === column.key && ((_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction) === 'descending',
|
|
658
|
+
'is-sorted-asc': ((_state_sortDescriptor2 = state.sortDescriptor) === null || _state_sortDescriptor2 === void 0 ? void 0 : _state_sortDescriptor2.column) === column.key && ((_state_sortDescriptor3 = state.sortDescriptor) === null || _state_sortDescriptor3 === void 0 ? void 0 : _state_sortDescriptor3.direction) === 'ascending',
|
|
659
|
+
'is-hovered': isHovered,
|
|
660
|
+
'spectrum-Table-cell--hideHeader': columnProps.hideHeader
|
|
661
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-cell', {
|
|
662
|
+
'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center' || column.colspan > 1,
|
|
663
|
+
'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
|
|
664
664
|
}))
|
|
665
665
|
}, columnProps.allowsSorting && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiArrowDownSmall))), {
|
|
666
|
-
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
666
|
+
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-sortedIcon')
|
|
667
667
|
}), columnProps.hideHeader ? /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, column.rendered) : /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
668
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
668
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCellContents')
|
|
669
669
|
}, column.rendered)));
|
|
670
670
|
}
|
|
671
671
|
let $e39c6de4eb69450d$var$_TableColumnHeaderButton = (props, ref)=>{
|
|
@@ -674,7 +674,7 @@ let $e39c6de4eb69450d$var$_TableColumnHeaderButton = (props, ref)=>{
|
|
|
674
674
|
let domRef = (0, $idLTj$reactspectrumutils.useFocusableRef)(ref);
|
|
675
675
|
let { buttonProps: buttonProps } = (0, $idLTj$reactariabutton.useButton)({
|
|
676
676
|
...otherProps,
|
|
677
|
-
elementType:
|
|
677
|
+
elementType: 'div',
|
|
678
678
|
isDisabled: isEmpty
|
|
679
679
|
}, domRef);
|
|
680
680
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $idLTj$reactariainteractions.useHover)({
|
|
@@ -682,15 +682,15 @@ let $e39c6de4eb69450d$var$_TableColumnHeaderButton = (props, ref)=>{
|
|
|
682
682
|
isDisabled: isEmpty
|
|
683
683
|
});
|
|
684
684
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
685
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
686
|
-
|
|
685
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCellContents', {
|
|
686
|
+
'is-hovered': isHovered
|
|
687
687
|
}),
|
|
688
688
|
...hoverProps
|
|
689
689
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
690
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
690
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCellButton', {
|
|
691
|
+
'spectrum-Table-headCellButton--alignStart': alignment === 'start',
|
|
692
|
+
'spectrum-Table-headCellButton--alignCenter': alignment === 'center',
|
|
693
|
+
'spectrum-Table-headCellButton--alignEnd': alignment === 'end'
|
|
694
694
|
}),
|
|
695
695
|
...(0, $idLTj$reactariautils.mergeProps)(buttonProps, focusProps),
|
|
696
696
|
ref: domRef
|
|
@@ -704,7 +704,7 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
704
704
|
let triggerRef = (0, $idLTj$react.useRef)(null);
|
|
705
705
|
let resizingRef = (0, $idLTj$react.useRef)(null);
|
|
706
706
|
let { state: state, layout: layout, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, headerRowHovered: headerRowHovered, setIsInResizeMode: setIsInResizeMode, isEmpty: isEmpty, isInResizeMode: isInResizeMode, headerMenuOpen: headerMenuOpen, setHeaderMenuOpen: setHeaderMenuOpen } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
707
|
-
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))),
|
|
707
|
+
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
|
|
708
708
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $idLTj$reactariainteractions.usePress)({
|
|
709
709
|
isDisabled: isEmpty
|
|
710
710
|
});
|
|
@@ -725,13 +725,13 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
725
725
|
let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $idLTj$reactariafocus.useFocusRing)();
|
|
726
726
|
const onMenuSelect = (key)=>{
|
|
727
727
|
switch(key){
|
|
728
|
-
case
|
|
729
|
-
state.sort(column.key,
|
|
728
|
+
case 'sort-asc':
|
|
729
|
+
state.sort(column.key, 'ascending');
|
|
730
730
|
break;
|
|
731
|
-
case
|
|
732
|
-
state.sort(column.key,
|
|
731
|
+
case 'sort-desc':
|
|
732
|
+
state.sort(column.key, 'descending');
|
|
733
733
|
break;
|
|
734
|
-
case
|
|
734
|
+
case 'resize':
|
|
735
735
|
layout.startResize(column.key);
|
|
736
736
|
setIsInResizeMode(true);
|
|
737
737
|
state.setKeyboardNavigationDisabled(true);
|
|
@@ -742,16 +742,16 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
742
742
|
let items = (0, $idLTj$react.useMemo)(()=>{
|
|
743
743
|
let options = [
|
|
744
744
|
allowsSorting ? {
|
|
745
|
-
label: stringFormatter.format(
|
|
746
|
-
id:
|
|
745
|
+
label: stringFormatter.format('sortAscending'),
|
|
746
|
+
id: 'sort-asc'
|
|
747
747
|
} : undefined,
|
|
748
748
|
allowsSorting ? {
|
|
749
|
-
label: stringFormatter.format(
|
|
750
|
-
id:
|
|
749
|
+
label: stringFormatter.format('sortDescending'),
|
|
750
|
+
id: 'sort-desc'
|
|
751
751
|
} : undefined,
|
|
752
752
|
{
|
|
753
|
-
label: stringFormatter.format(
|
|
754
|
-
id:
|
|
753
|
+
label: stringFormatter.format('resizeColumn'),
|
|
754
|
+
id: 'resize'
|
|
755
755
|
}
|
|
756
756
|
];
|
|
757
757
|
return options;
|
|
@@ -760,31 +760,31 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
760
760
|
allowsSorting
|
|
761
761
|
]);
|
|
762
762
|
let resizingColumn = layout.resizingColumn;
|
|
763
|
-
let showResizer = !isEmpty && (headerRowHovered && (0, $idLTj$reactariainteractions.getInteractionModality)() !==
|
|
764
|
-
let alignment =
|
|
765
|
-
let menuAlign =
|
|
766
|
-
if (columnProps.align ===
|
|
767
|
-
else if (columnProps.align ===
|
|
768
|
-
alignment =
|
|
769
|
-
menuAlign =
|
|
763
|
+
let showResizer = !isEmpty && (headerRowHovered && (0, $idLTj$reactariainteractions.getInteractionModality)() !== 'keyboard' || resizingColumn != null);
|
|
764
|
+
let alignment = 'start';
|
|
765
|
+
let menuAlign = 'start';
|
|
766
|
+
if (columnProps.align === 'center' || column.colspan > 1) alignment = 'center';
|
|
767
|
+
else if (columnProps.align === 'end') {
|
|
768
|
+
alignment = 'end';
|
|
769
|
+
menuAlign = 'end';
|
|
770
770
|
}
|
|
771
771
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
772
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
772
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
773
773
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
774
774
|
...(0, $idLTj$reactariautils.mergeProps)(...allProps),
|
|
775
775
|
ref: ref,
|
|
776
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
786
|
-
|
|
787
|
-
|
|
776
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCell', {
|
|
777
|
+
'is-active': isPressed,
|
|
778
|
+
'is-resizable': columnProps.allowsResizing,
|
|
779
|
+
'is-sortable': columnProps.allowsSorting,
|
|
780
|
+
'is-sorted-desc': ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === column.key && ((_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction) === 'descending',
|
|
781
|
+
'is-sorted-asc': ((_state_sortDescriptor2 = state.sortDescriptor) === null || _state_sortDescriptor2 === void 0 ? void 0 : _state_sortDescriptor2.column) === column.key && ((_state_sortDescriptor3 = state.sortDescriptor) === null || _state_sortDescriptor3 === void 0 ? void 0 : _state_sortDescriptor3.direction) === 'ascending',
|
|
782
|
+
'is-hovered': isHovered,
|
|
783
|
+
'focus-ring': isFocusVisible,
|
|
784
|
+
'spectrum-Table-cell--hideHeader': columnProps.hideHeader
|
|
785
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-cell', {
|
|
786
|
+
'react-spectrum-Table-cell--alignCenter': alignment === 'center',
|
|
787
|
+
'react-spectrum-Table-cell--alignEnd': alignment === 'end'
|
|
788
788
|
}))
|
|
789
789
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrummenu.MenuTrigger), {
|
|
790
790
|
onOpenChange: setHeaderMenuOpen,
|
|
@@ -794,11 +794,11 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
794
794
|
ref: triggerRef,
|
|
795
795
|
focusProps: focusProps
|
|
796
796
|
}, columnProps.allowsSorting && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiArrowDownSmall))), {
|
|
797
|
-
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
797
|
+
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-sortedIcon')
|
|
798
798
|
}), columnProps.hideHeader ? /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, column.rendered) : /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
799
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
799
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headerCellText')
|
|
800
800
|
}, column.rendered), columnProps.allowsResizing && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiChevronDownMedium))), {
|
|
801
|
-
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
801
|
+
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-menuChevron')
|
|
802
802
|
})), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrummenu.Menu), {
|
|
803
803
|
onAction: onMenuSelect,
|
|
804
804
|
minWidth: "size-2000",
|
|
@@ -813,20 +813,20 @@ function $e39c6de4eb69450d$var$ResizableTableColumnHeader(props) {
|
|
|
813
813
|
triggerRef: (0, $idLTj$reactspectrumutils.useUnwrapDOMRef)(triggerRef)
|
|
814
814
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
815
815
|
"aria-hidden": true,
|
|
816
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
817
|
-
|
|
818
|
-
|
|
816
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-colResizeIndicator', {
|
|
817
|
+
'spectrum-Table-colResizeIndicator--visible': resizingColumn != null,
|
|
818
|
+
'spectrum-Table-colResizeIndicator--resizing': resizingColumn === column.key
|
|
819
819
|
})
|
|
820
820
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
821
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
822
|
-
|
|
821
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-colResizeNubbin', {
|
|
822
|
+
'spectrum-Table-colResizeNubbin--visible': isInResizeMode && resizingColumn === column.key
|
|
823
823
|
})
|
|
824
824
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $18b3deb5c431fa13$exports.Nubbin), null)))));
|
|
825
825
|
}
|
|
826
826
|
function $e39c6de4eb69450d$var$TableSelectAllCell({ column: column }) {
|
|
827
827
|
let ref = (0, $idLTj$react.useRef)();
|
|
828
828
|
let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
829
|
-
let isSingleSelectionMode = state.selectionManager.selectionMode ===
|
|
829
|
+
let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
|
|
830
830
|
let { columnHeaderProps: columnHeaderProps } = (0, $idLTj$reactariatable.useTableColumnHeader)({
|
|
831
831
|
node: column,
|
|
832
832
|
isVirtualized: true
|
|
@@ -834,25 +834,25 @@ function $e39c6de4eb69450d$var$TableSelectAllCell({ column: column }) {
|
|
|
834
834
|
let { checkboxProps: checkboxProps } = (0, $idLTj$reactariatable.useTableSelectAllCheckbox)(state);
|
|
835
835
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $idLTj$reactariainteractions.useHover)({});
|
|
836
836
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
837
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
837
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
838
838
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
839
839
|
...(0, $idLTj$reactariautils.mergeProps)(columnHeaderProps, hoverProps),
|
|
840
840
|
ref: ref,
|
|
841
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
842
|
-
|
|
841
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCell', 'spectrum-Table-checkboxCell', {
|
|
842
|
+
'is-hovered': isHovered
|
|
843
843
|
})
|
|
844
844
|
}, /*
|
|
845
845
|
In single selection mode, the checkbox will be hidden.
|
|
846
846
|
So to avoid leaving a column header with no accessible content,
|
|
847
847
|
we use a VisuallyHidden component to include the aria-label from the checkbox,
|
|
848
848
|
which for single selection will be "Select."
|
|
849
|
-
*/ isSingleSelectionMode && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, checkboxProps[
|
|
849
|
+
*/ isSingleSelectionMode && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, checkboxProps['aria-label']), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrumcheckbox.Checkbox), {
|
|
850
850
|
...checkboxProps,
|
|
851
851
|
isEmphasized: true,
|
|
852
852
|
UNSAFE_style: isSingleSelectionMode ? {
|
|
853
|
-
visibility:
|
|
853
|
+
visibility: 'hidden'
|
|
854
854
|
} : undefined,
|
|
855
|
-
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
855
|
+
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-checkbox')
|
|
856
856
|
})));
|
|
857
857
|
}
|
|
858
858
|
function $e39c6de4eb69450d$var$TableDragHeaderCell({ column: column }) {
|
|
@@ -862,14 +862,14 @@ function $e39c6de4eb69450d$var$TableDragHeaderCell({ column: column }) {
|
|
|
862
862
|
node: column,
|
|
863
863
|
isVirtualized: true
|
|
864
864
|
}, state, ref);
|
|
865
|
-
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))),
|
|
865
|
+
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
|
|
866
866
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
867
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
867
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
868
868
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
869
869
|
...columnHeaderProps,
|
|
870
870
|
ref: ref,
|
|
871
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
872
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, stringFormatter.format(
|
|
871
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-headCell', (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-headCell', 'react-spectrum-Table-dragButtonHeadCell'))
|
|
872
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariavisuallyhidden.VisuallyHidden), null, stringFormatter.format('drag'))));
|
|
873
873
|
}
|
|
874
874
|
function $e39c6de4eb69450d$var$TableRowGroup({ children: children, ...otherProps }) {
|
|
875
875
|
let { rowGroupProps: rowGroupProps } = (0, $idLTj$reactariatable.useTableRowGroup)();
|
|
@@ -882,10 +882,10 @@ function $e39c6de4eb69450d$var$DragButton() {
|
|
|
882
882
|
let { dragButtonProps: dragButtonProps, dragButtonRef: dragButtonRef, isFocusVisibleWithin: isFocusVisibleWithin } = $e39c6de4eb69450d$export$cd7c5802f9e21187();
|
|
883
883
|
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $idLTj$reactariavisuallyhidden.useVisuallyHidden)();
|
|
884
884
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
885
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
885
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'focus-ring')
|
|
886
886
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
887
887
|
...dragButtonProps,
|
|
888
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
888
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-dragButton'),
|
|
889
889
|
style: !isFocusVisibleWithin ? {
|
|
890
890
|
...visuallyHiddenProps.style
|
|
891
891
|
} : {},
|
|
@@ -903,7 +903,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
903
903
|
var _state_collection_rows_find, _layout_getContentSize, _layout_virtualizer;
|
|
904
904
|
let ref = (0, $idLTj$react.useRef)();
|
|
905
905
|
let { state: state, layout: layout, dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
906
|
-
let allowsInteraction = state.selectionManager.selectionMode !==
|
|
906
|
+
let allowsInteraction = state.selectionManager.selectionMode !== 'none' || hasActions;
|
|
907
907
|
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
908
908
|
let isDroppable = isTableDroppable && !isDisabled;
|
|
909
909
|
let isSelected = state.selectionManager.isSelected(item.key);
|
|
@@ -947,9 +947,9 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
947
947
|
let dropIndicatorRef = (0, $idLTj$react.useRef)();
|
|
948
948
|
if (isTableDroppable) {
|
|
949
949
|
let target = {
|
|
950
|
-
type:
|
|
950
|
+
type: 'item',
|
|
951
951
|
key: item.key,
|
|
952
|
-
dropPosition:
|
|
952
|
+
dropPosition: 'on'
|
|
953
953
|
};
|
|
954
954
|
isDropTarget = dropState.isDropTarget(target);
|
|
955
955
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
@@ -960,7 +960,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
960
960
|
let dragButtonRef = (0, ($parcel$interopDefault($idLTj$react))).useRef();
|
|
961
961
|
let { buttonProps: dragButtonProps } = (0, $idLTj$reactariabutton.useButton)({
|
|
962
962
|
...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
|
|
963
|
-
elementType:
|
|
963
|
+
elementType: 'div'
|
|
964
964
|
}, dragButtonRef);
|
|
965
965
|
let props = (0, $idLTj$reactariautils.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps, hoverProps, pressProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
|
|
966
966
|
// allowing for single swipe navigation between row drop indicator
|
|
@@ -968,7 +968,7 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
968
968
|
tabIndex: null
|
|
969
969
|
});
|
|
970
970
|
let dropProps = isDroppable ? droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps : {
|
|
971
|
-
|
|
971
|
+
'aria-hidden': droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps['aria-hidden']
|
|
972
972
|
};
|
|
973
973
|
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $idLTj$reactariavisuallyhidden.useVisuallyHidden)();
|
|
974
974
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$TableRowContext.Provider, {
|
|
@@ -982,8 +982,8 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
982
982
|
key: `${item.key}-before`,
|
|
983
983
|
target: {
|
|
984
984
|
key: item.key,
|
|
985
|
-
type:
|
|
986
|
-
dropPosition:
|
|
985
|
+
type: 'item',
|
|
986
|
+
dropPosition: 'before'
|
|
987
987
|
}
|
|
988
988
|
}), isTableDroppable && !(dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isHidden) && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
989
989
|
role: "row",
|
|
@@ -997,28 +997,28 @@ function $e39c6de4eb69450d$var$TableRow({ item: item, children: children, hasAct
|
|
|
997
997
|
}))), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
998
998
|
...(0, $idLTj$reactariautils.mergeProps)(props, dropProps),
|
|
999
999
|
ref: ref,
|
|
1000
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
1013
|
-
|
|
1000
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-row', {
|
|
1001
|
+
'is-active': isPressed,
|
|
1002
|
+
'is-selected': isSelected,
|
|
1003
|
+
'spectrum-Table-row--highlightSelection': state.selectionManager.selectionBehavior === 'replace',
|
|
1004
|
+
'is-next-selected': state.selectionManager.isSelected(item.nextKey),
|
|
1005
|
+
'is-focused': isFocusVisibleWithin,
|
|
1006
|
+
'focus-ring': isFocusVisible,
|
|
1007
|
+
'is-hovered': isHovered,
|
|
1008
|
+
'is-disabled': isDisabled,
|
|
1009
|
+
'spectrum-Table-row--firstRow': isFirstRow,
|
|
1010
|
+
'spectrum-Table-row--lastRow': isLastRow,
|
|
1011
|
+
'spectrum-Table-row--isFlushBottom': isFlushWithContainerBottom
|
|
1012
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-row', {
|
|
1013
|
+
'react-spectrum-Table-row--dropTarget': isDropTarget
|
|
1014
1014
|
}))
|
|
1015
1015
|
}, children), isTableDroppable && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $c44674ca7612e997$exports.InsertionIndicator), {
|
|
1016
1016
|
rowProps: props,
|
|
1017
1017
|
key: `${item.key}-after`,
|
|
1018
1018
|
target: {
|
|
1019
1019
|
key: item.key,
|
|
1020
|
-
type:
|
|
1021
|
-
dropPosition:
|
|
1020
|
+
type: 'item',
|
|
1021
|
+
dropPosition: 'after'
|
|
1022
1022
|
}
|
|
1023
1023
|
}));
|
|
1024
1024
|
}
|
|
@@ -1048,13 +1048,13 @@ function $e39c6de4eb69450d$var$TableDragCell({ cell: cell }) {
|
|
|
1048
1048
|
isVirtualized: true
|
|
1049
1049
|
}, state, ref);
|
|
1050
1050
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
1051
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1051
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
1052
1052
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
1053
1053
|
...gridCellProps,
|
|
1054
1054
|
ref: ref,
|
|
1055
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1056
|
-
|
|
1057
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
1055
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cell', {
|
|
1056
|
+
'is-disabled': isDisabled
|
|
1057
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-cell', 'react-spectrum-Table-dragButtonCell'))
|
|
1058
1058
|
}, isTableDraggable && !isDisabled && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$DragButton, null)));
|
|
1059
1059
|
}
|
|
1060
1060
|
function $e39c6de4eb69450d$var$TableCheckboxCell({ cell: cell }) {
|
|
@@ -1069,24 +1069,24 @@ function $e39c6de4eb69450d$var$TableCheckboxCell({ cell: cell }) {
|
|
|
1069
1069
|
key: cell.parentKey
|
|
1070
1070
|
}, state);
|
|
1071
1071
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
1072
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1072
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
1073
1073
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
1074
1074
|
...gridCellProps,
|
|
1075
1075
|
ref: ref,
|
|
1076
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1077
|
-
|
|
1078
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
1079
|
-
}, state.selectionManager.selectionMode !==
|
|
1076
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cell', 'spectrum-Table-checkboxCell', {
|
|
1077
|
+
'is-disabled': isDisabled
|
|
1078
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-cell'))
|
|
1079
|
+
}, state.selectionManager.selectionMode !== 'none' && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactspectrumcheckbox.Checkbox), {
|
|
1080
1080
|
...checkboxProps,
|
|
1081
1081
|
isEmphasized: true,
|
|
1082
1082
|
isDisabled: isDisabled,
|
|
1083
|
-
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1083
|
+
UNSAFE_className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-checkbox')
|
|
1084
1084
|
})));
|
|
1085
1085
|
}
|
|
1086
1086
|
function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
|
|
1087
1087
|
let { scale: scale } = (0, $idLTj$reactspectrumprovider.useProvider)();
|
|
1088
1088
|
let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
1089
|
-
let isExpandableTable =
|
|
1089
|
+
let isExpandableTable = 'expandedKeys' in state;
|
|
1090
1090
|
let ref = (0, $idLTj$react.useRef)();
|
|
1091
1091
|
let columnProps = cell.column.props;
|
|
1092
1092
|
let isDisabled = state.disabledKeys.has(cell.parentKey);
|
|
@@ -1099,7 +1099,7 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
|
|
|
1099
1099
|
let isRowExpandable = false;
|
|
1100
1100
|
let showExpandCollapseButton = false;
|
|
1101
1101
|
let levelOffset = 0;
|
|
1102
|
-
if (
|
|
1102
|
+
if ('expandedKeys' in state) {
|
|
1103
1103
|
var _state_keyMap_get_props_UNSTABLE_childItems, _state_keyMap_get, _state_keyMap_get_props_children, _state_keyMap_get_props, _state_keyMap_get1;
|
|
1104
1104
|
isRowExpandable = ((_state_keyMap_get = state.keyMap.get(cell.parentKey)) === null || _state_keyMap_get === void 0 ? void 0 : (_state_keyMap_get_props_UNSTABLE_childItems = _state_keyMap_get.props.UNSTABLE_childItems) === null || _state_keyMap_get_props_UNSTABLE_childItems === void 0 ? void 0 : _state_keyMap_get_props_UNSTABLE_childItems.length) > 0 || ((_state_keyMap_get1 = state.keyMap.get(cell.parentKey)) === null || _state_keyMap_get1 === void 0 ? void 0 : (_state_keyMap_get_props = _state_keyMap_get1.props) === null || _state_keyMap_get_props === void 0 ? void 0 : (_state_keyMap_get_props_children = _state_keyMap_get_props.children) === null || _state_keyMap_get_props_children === void 0 ? void 0 : _state_keyMap_get_props_children.length) > state.userColumnCount;
|
|
1105
1105
|
showExpandCollapseButton = isFirstRowHeaderCell && isRowExpandable;
|
|
@@ -1107,7 +1107,7 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
|
|
|
1107
1107
|
levelOffset = (cell.level - 2) * $e39c6de4eb69450d$var$LEVEL_OFFSET_WIDTH[scale] + (!showExpandCollapseButton ? $e39c6de4eb69450d$var$LEVEL_OFFSET_WIDTH[scale] * 2 : 0);
|
|
1108
1108
|
}
|
|
1109
1109
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, $idLTj$reactariafocus.FocusRing), {
|
|
1110
|
-
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1110
|
+
focusRingClass: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'focus-ring')
|
|
1111
1111
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
1112
1112
|
...otherGridCellProps,
|
|
1113
1113
|
"aria-labelledby": id,
|
|
@@ -1115,21 +1115,21 @@ function $e39c6de4eb69450d$var$TableCell({ cell: cell }) {
|
|
|
1115
1115
|
style: isExpandableTable && isFirstRowHeaderCell ? {
|
|
1116
1116
|
paddingInlineStart: levelOffset
|
|
1117
1117
|
} : {},
|
|
1118
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1118
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cell', {
|
|
1119
|
+
'spectrum-Table-cell--divider': columnProps.showDivider && cell.column.nextKey !== null,
|
|
1120
|
+
'spectrum-Table-cell--hideHeader': columnProps.hideHeader,
|
|
1121
|
+
'spectrum-Table-cell--hasExpandCollapseButton': showExpandCollapseButton,
|
|
1122
|
+
'is-disabled': isDisabled
|
|
1123
|
+
}, (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-cell', {
|
|
1124
|
+
'react-spectrum-Table-cell--alignStart': columnProps.align === 'start',
|
|
1125
|
+
'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
|
|
1126
|
+
'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
|
|
1127
1127
|
}))
|
|
1128
1128
|
}, showExpandCollapseButton && /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement($e39c6de4eb69450d$var$ExpandableRowChevron, {
|
|
1129
1129
|
cell: cell
|
|
1130
1130
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("span", {
|
|
1131
1131
|
id: id,
|
|
1132
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1132
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-cellContents')
|
|
1133
1133
|
}, cell.rendered)));
|
|
1134
1134
|
}
|
|
1135
1135
|
function $e39c6de4eb69450d$var$ExpandableRowChevron({ cell: cell }) {
|
|
@@ -1137,9 +1137,9 @@ function $e39c6de4eb69450d$var$ExpandableRowChevron({ cell: cell }) {
|
|
|
1137
1137
|
let { direction: direction } = (0, $idLTj$reactariai18n.useLocale)();
|
|
1138
1138
|
let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
1139
1139
|
let expandButtonRef = (0, $idLTj$react.useRef)();
|
|
1140
|
-
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))),
|
|
1140
|
+
let stringFormatter = (0, $idLTj$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1a3d6ad53eb75d54$exports))), '@react-spectrum/table');
|
|
1141
1141
|
let isExpanded;
|
|
1142
|
-
if (
|
|
1142
|
+
if ('expandedKeys' in state) isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(cell.parentKey);
|
|
1143
1143
|
// Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future
|
|
1144
1144
|
let { buttonProps: buttonProps } = (0, $idLTj$reactariabutton.useButton)({
|
|
1145
1145
|
// Desktop and mobile both toggle expansion of a native expandable row on mouse/touch up
|
|
@@ -1150,38 +1150,38 @@ function $e39c6de4eb69450d$var$ExpandableRowChevron({ cell: cell }) {
|
|
|
1150
1150
|
state.selectionManager.setFocusedKey(cell.parentKey);
|
|
1151
1151
|
}
|
|
1152
1152
|
},
|
|
1153
|
-
elementType:
|
|
1154
|
-
|
|
1153
|
+
elementType: 'span',
|
|
1154
|
+
'aria-label': isExpanded ? stringFormatter.format('collapse') : stringFormatter.format('expand')
|
|
1155
1155
|
}, expandButtonRef);
|
|
1156
1156
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("span", {
|
|
1157
1157
|
...buttonProps,
|
|
1158
1158
|
ref: expandButtonRef,
|
|
1159
1159
|
// Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
|
|
1160
1160
|
tabIndex: (0, $idLTj$reactariautils.isAndroid)() ? -1 : undefined,
|
|
1161
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))),
|
|
1162
|
-
|
|
1161
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($982885d0a34882ea$exports))), 'spectrum-Table-expandButton', {
|
|
1162
|
+
'is-open': isExpanded
|
|
1163
1163
|
})
|
|
1164
|
-
}, direction ===
|
|
1164
|
+
}, direction === 'ltr' ? /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiChevronRightMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement((0, ($parcel$interopDefault($idLTj$spectrumiconsuiChevronLeftMedium))), null));
|
|
1165
1165
|
}
|
|
1166
1166
|
function $e39c6de4eb69450d$var$CenteredWrapper({ children: children }) {
|
|
1167
1167
|
let { state: state } = $e39c6de4eb69450d$export$3cb274deb6c2d854();
|
|
1168
1168
|
let rowProps;
|
|
1169
|
-
if (
|
|
1169
|
+
if ('expandedKeys' in state) {
|
|
1170
1170
|
let topLevelRowCount = [
|
|
1171
1171
|
...state.keyMap.get(state.collection.body.key).childNodes
|
|
1172
1172
|
].length;
|
|
1173
1173
|
rowProps = {
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1174
|
+
'aria-level': 1,
|
|
1175
|
+
'aria-posinset': topLevelRowCount + 1,
|
|
1176
|
+
'aria-setsize': topLevelRowCount + 1
|
|
1177
1177
|
};
|
|
1178
1178
|
} else rowProps = {
|
|
1179
|
-
|
|
1179
|
+
'aria-rowindex': state.collection.headerRows.length + state.collection.size + 1
|
|
1180
1180
|
};
|
|
1181
1181
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
1182
1182
|
role: "row",
|
|
1183
1183
|
...rowProps,
|
|
1184
|
-
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))),
|
|
1184
|
+
className: (0, $idLTj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($4afcd54cfd94dbb9$exports))), 'react-spectrum-Table-centeredWrapper')
|
|
1185
1185
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($idLTj$react))).createElement("div", {
|
|
1186
1186
|
role: "rowheader",
|
|
1187
1187
|
"aria-colspan": state.collection.columns.length
|