@react-spectrum/s2
Version:
Spectrum 2 UI components in React
1,185 lines (1,157 loc) • 64.7 kB
JavaScript
require("./TableView.css");
var $6e265ff388155b91$exports = require("./ActionButton.cjs");
var $e1016b8947dbadb8$exports = require("./ButtonGroup.cjs");
var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
var $c3e72d94a25defe0$exports = require("../icons/Checkmark.cjs");
var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
var $8ecd53081d7d50cc$exports = require("../icons/Close.cjs");
var $a05aa0b0345f1846$exports = require("./CustomDialog.cjs");
var $fc196655d58ce18c$exports = require("./DialogContainer.cjs");
var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
var $4526404114e78c80$exports = require("./intlStrings.cjs");
var $e741ea6b88ce4866$exports = require("./Menu.cjs");
var $23350f45c699333e$exports = require("./S2_MoveHorizontalTableWidget.cjs");
var $1c116ea4b0d2d023$exports = require("./ProgressCircle.cjs");
var $22bf2407c3628a21$exports = require("../icons/SortDown.cjs");
var $2197830b90e71c31$exports = require("../icons/SortUp.cjs");
var $25d06cf8d4e72761$exports = require("./Button.cjs");
var $85bf454149fe9ddc$exports = require("./ActionBar.cjs");
var $ee7b4c497f520c08$exports = require("./utils.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $iLVc8$reactjsxruntime = require("react/jsx-runtime");
var $iLVc8$reactariacomponents = require("react-aria-components");
var $iLVc8$reactariautils = require("@react-aria/utils");
var $iLVc8$react = require("react");
var $iLVc8$reactspectrumutils = require("@react-spectrum/utils");
var $iLVc8$reactariai18n = require("@react-aria/i18n");
var $iLVc8$reactaria = require("react-aria");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "TableContext", () => $bed37377ec7a3a9e$export$93e4b0b2cc49b648);
$parcel$export(module.exports, "TableView", () => $bed37377ec7a3a9e$export$b3c27e869d856b7);
$parcel$export(module.exports, "TableBody", () => $bed37377ec7a3a9e$export$76ccd210b9029917);
$parcel$export(module.exports, "Column", () => $bed37377ec7a3a9e$export$816b5d811295e6bc);
$parcel$export(module.exports, "TableHeader", () => $bed37377ec7a3a9e$export$f850895b287ef28e);
$parcel$export(module.exports, "Cell", () => $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea);
$parcel$export(module.exports, "EditableCell", () => $bed37377ec7a3a9e$export$d27c35c47f085992);
$parcel$export(module.exports, "Row", () => $bed37377ec7a3a9e$export$b59bdbef9ce70de2);
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
let $bed37377ec7a3a9e$var$InternalTableContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)({});
const $bed37377ec7a3a9e$var$tableWrapper = function anonymous(props, overrides) {
let rules = " ";
let minHeight = false;
let minWidth = false;
let position = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "M") minHeight = true;
if (p[1] === "N") minWidth = true;
if (p[1] === "_P") position = true;
rules += p[0];
}
if (!minHeight) rules += ' Ma1';
if (!minWidth) rules += ' Na1';
rules += ' sd1';
rules += ' _Bb1';
rules += ' __ca1';
if (!position) rules += ' _Pc1';
rules += ' _Nb1';
rules += ' Pb1';
return rules;
};
const $bed37377ec7a3a9e$var$table = function anonymous(props) {
let rules = " ";
rules += ' Za1';
rules += ' Fb1';
rules += ' _oa1';
rules += ' _4c1';
rules += ' Ma1';
rules += ' Na1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' xb1';
rules += ' _xa1';
rules += ' _Na1';
rules += ' Pa1';
if (props.isQuiet) rules += ' g91';
else rules += ' gX1';
rules += ' gla1';
rules += ' iq1';
rules += ' _jf1';
if (props.isQuiet) rules += ' _ka1';
else rules += ' _kb1';
if (props.isQuiet) rules += ' ha1';
else rules += ' hb1';
if (props.isQuiet) rules += ' ma1';
else rules += ' mb1';
if (props.isQuiet) rules += ' la1';
else rules += ' lb1';
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Ka1';
if (props.isQuiet) rules += ' od1';
else rules += ' of1';
if (props.isQuiet) rules += ' nd1';
else rules += ' nf1';
if (props.isQuiet) rules += ' kd1';
else rules += ' kf1';
if (props.isQuiet) rules += ' jd1';
else rules += ' jf1';
rules += ' _Um1';
if (props.isCheckboxSelection) rules += ' _Tk1';
return rules;
};
// component-height-100
const $bed37377ec7a3a9e$var$DEFAULT_HEADER_HEIGHT = {
medium: 32,
large: 40
};
const $bed37377ec7a3a9e$var$ROW_HEIGHTS = {
compact: {
medium: 32,
large: 40
},
regular: {
medium: 40,
large: 50
},
spacious: {
medium: 48,
large: 60
}
};
class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomponents.TableLayout) {
isStickyColumn(node) {
return node.props.isSticky;
}
buildCollection() {
let [header, body] = super.buildCollection();
if (!header) return [];
let { layoutInfo: layoutInfo } = body;
// TableLayout's buildCollection always sets the body width to the max width between the header width, but
// we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
if (isEmptyOrLoading) layoutInfo.rect.width = this.virtualizer.visibleRect.width - 80;
return [
header,
body
];
}
buildLoader(node, x, y) {
let layoutNode = super.buildLoader(node, x, y);
let { layoutInfo: layoutInfo } = layoutNode;
layoutInfo.allowOverflow = true;
layoutInfo.rect.width = this.virtualizer.visibleRect.width;
// If performing first load or empty, the body will be sticky so we don't want to apply sticky to the loader, otherwise it will
// affect the positioning of the empty state renderer
let collection = this.virtualizer.collection;
let isEmptyOrLoading = collection?.size === 0;
layoutInfo.isSticky = !isEmptyOrLoading;
return layoutNode;
}
// y is the height of the headers
buildBody(y) {
let layoutNode = super.buildBody(y);
let { layoutInfo: layoutInfo } = layoutNode;
// Needs overflow for sticky loader
layoutInfo.allowOverflow = true;
// If loading or empty, we'll want the body to be sticky and centered
let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
if (isEmptyOrLoading) {
layoutInfo.rect = new (0, $iLVc8$reactariacomponents.Rect)(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
layoutInfo.isSticky = true;
}
return {
...layoutNode,
layoutInfo: layoutInfo
};
}
buildRow(node, x, y) {
let layoutNode = super.buildRow(node, x, y);
layoutNode.layoutInfo.allowOverflow = true;
// Needs overflow for sticky selection/drag cells
return layoutNode;
}
buildTableHeader() {
let layoutNode = super.buildTableHeader();
// Needs overflow for sticky selection/drag column
layoutNode.layoutInfo.allowOverflow = true;
return layoutNode;
}
buildColumn(node, x, y) {
let layoutNode = super.buildColumn(node, x, y);
// Needs overflow for the resize handle
layoutNode.layoutInfo.allowOverflow = true;
return layoutNode;
}
}
const $bed37377ec7a3a9e$export$93e4b0b2cc49b648 = /*#__PURE__*/ (0, $iLVc8$react.createContext)(null);
const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableView(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $bed37377ec7a3a9e$export$93e4b0b2cc49b648);
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, isQuiet: isQuiet = false, density: density = 'regular', overflowMode: overflowMode = 'truncate', styles: styles, loadingState: loadingState, onResize: propsOnResize, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, onAction: onAction, onLoadMore: onLoadMore, selectionMode: selectionMode = 'none', ...otherProps } = props;
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
let scale = (0, $ee7b4c497f520c08$exports.useScale)();
// Starts when the user selects resize from the menu, ends when resizing ends
// used to control the visibility of the resizer Nubbin
let [isInResizeMode, setIsInResizeMode] = (0, $iLVc8$react.useState)(false);
let onResizeStart = (0, $iLVc8$react.useCallback)((widths)=>{
propsOnResizeStart?.(widths);
}, [
propsOnResizeStart
]);
let onResizeEnd = (0, $iLVc8$react.useCallback)((widths)=>{
setIsInResizeMode(false);
propsOnResizeEnd?.(widths);
}, [
propsOnResizeEnd,
setIsInResizeMode
]);
let context = (0, $iLVc8$react.useMemo)(()=>({
isQuiet: isQuiet,
density: density,
overflowMode: overflowMode,
loadingState: loadingState,
onLoadMore: onLoadMore,
isInResizeMode: isInResizeMode,
setIsInResizeMode: setIsInResizeMode,
selectionMode: selectionMode
}), [
isQuiet,
density,
overflowMode,
loadingState,
onLoadMore,
isInResizeMode,
setIsInResizeMode,
selectionMode
]);
let scrollRef = (0, $iLVc8$react.useRef)(null);
let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single';
let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $85bf454149fe9ddc$exports.useActionBarContainer)({
...props,
scrollRef: scrollRef
});
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.ResizableTableContainer), {
// TODO: perhaps this ref should be attached to the RACTable but it expects a table type ref which isn't true in the virtualized case
ref: domRef,
onResize: propsOnResize,
onResizeEnd: onResizeEnd,
onResizeStart: onResizeStart,
className: (UNSAFE_className || '') + $bed37377ec7a3a9e$var$tableWrapper(null, styles),
style: UNSAFE_style,
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Virtualizer), {
layout: $bed37377ec7a3a9e$export$4e03bdf0174fd602,
layoutOptions: {
rowHeight: overflowMode === 'wrap' ? undefined : $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale],
estimatedRowHeight: overflowMode === 'wrap' ? $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale] : undefined,
// No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
headingHeight: $bed37377ec7a3a9e$var$DEFAULT_HEADER_HEIGHT[scale],
loaderHeight: 60
},
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$InternalTableContext.Provider, {
value: context,
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Table), {
ref: scrollRef,
style: {
// Fix webkit bug where scrollbars appear above the checkboxes/other table elements
WebkitTransform: 'translateZ(0)',
// Add padding at the bottom when the action bar is visible so users can scroll to the last items.
// Also add scroll padding so navigating with the keyboard doesn't go behind the action bar.
paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
},
className: (renderProps)=>$bed37377ec7a3a9e$var$table({
...renderProps,
isCheckboxSelection: isCheckboxSelection,
isQuiet: isQuiet
}),
selectionBehavior: "toggle",
selectionMode: selectionMode,
onRowAction: onAction,
...otherProps,
selectedKeys: selectedKeys,
defaultSelectedKeys: undefined,
onSelectionChange: onSelectionChange
})
})
}),
actionBar
]
});
});
const $bed37377ec7a3a9e$var$centeredWrapper = " sd1 eb1 _Ca1 Za1 Fb1";
const $bed37377ec7a3a9e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableBody(props, ref) {
let { items: items, renderEmptyState: renderEmptyState, children: children, dependencies: dependencies = [] } = props;
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
let { loadingState: loadingState, onLoadMore: onLoadMore } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
let emptyRender;
let renderer = children;
let stringFormatter = (0, $iLVc8$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
// TODO: still is offset strangely if loadingMore when there aren't any items in the table, see http://localhost:6006/?path=/story/tableview--empty-state&args=loadingState:loadingMore
// This is because we don't distinguish between loadingMore and loading in the layout, resulting in a different rect being used to build the body. Perhaps can be considered as a user error
// if they pass loadingMore without having any other items in the table. Alternatively, could update the layout so it knows the current loading state.
let loadMoreSpinner = /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.TableLoadMoreItem), {
isLoading: loadingState === 'loadingMore',
onLoadMore: onLoadMore,
className: " Fb1 Za1",
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$centeredWrapper,
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $1c116ea4b0d2d023$exports.ProgressCircle), {
isIndeterminate: true,
"aria-label": stringFormatter.format('table.loadingMore')
})
})
});
// If the user is rendering their rows in dynamic fashion, wrap their render function in Collection so we can inject
// the loader. Otherwise it is a static renderer and thus we can simply add the table loader after
// TODO: this assumes that the user isn't providing their children in some wrapper though and/or isn't doing a map of children
// (though I guess they wouldn't provide items then so the check for this is still valid in the latter case)...
if (typeof children === 'function' && items) renderer = /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Collection), {
items: items,
dependencies: dependencies,
children: children
}),
loadMoreSpinner
]
});
else renderer = /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
children,
loadMoreSpinner
]
});
if (renderEmptyState != null && !isLoading) emptyRender = (props)=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$centeredWrapper,
children: renderEmptyState(props)
});
else if (loadingState === 'loading') emptyRender = ()=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$centeredWrapper,
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $1c116ea4b0d2d023$exports.ProgressCircle), {
isIndeterminate: true,
"aria-label": stringFormatter.format('table.loading')
})
});
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.TableBody), {
// @ts-ignore
ref: domRef,
className: " Fb1",
...props,
renderEmptyState: emptyRender,
dependencies: [
loadingState
],
children: renderer
});
});
const $bed37377ec7a3a9e$var$cellFocus = {
outlineStyle: {
default: 'none',
isFocusVisible: 'solid'
},
outlineOffset: -2,
outlineWidth: 2,
outlineColor: 'focus-ring',
borderRadius: '[6px]'
};
function $bed37377ec7a3a9e$var$CellFocusRing() {
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
role: "presentation",
className: function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' _Kb1';
rules += ' _Mc1';
rules += ' Oh1';
rules += ' of1';
rules += ' nf1';
rules += ' kf1';
rules += ' jf1';
rules += ' _Pa1';
rules += ' Wr1';
rules += ' _lr1';
rules += ' _Ar1';
rules += ' _zr1';
rules += ' _Ob1';
return rules;
}({
isFocusVisible: true
})
});
}
const $bed37377ec7a3a9e$var$columnStyles = function anonymous(props) {
let rules = " ";
rules += ' F40ub4c1';
rules += ' _oa1';
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
rules += ' plb1';
if (props.isMenu) rules += ' Sd1';
else rules += ' Sf1';
if (props.isMenu) rules += ' Rd1';
else rules += ' Rf1';
if (props.align === "end") rules += ' _Wb1';
else if (props.align === "center") rules += ' _Wa1';
else if (props.align === "start") rules += ' _Wd1';
rules += ' _Le1';
rules += ' _Pc1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
rules += ' sd1';
rules += ' iq1';
rules += ' ila1';
if (props.isQuiet) rules += ' _kb1';
else rules += ' _ka1';
rules += ' hb1';
rules += ' ma1';
if (props.isMenu) rules += ' lb1';
else rules += ' la1';
rules += ' _jf1';
rules += ' _yb1';
return rules;
};
const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Column(props, ref) {
let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let { allowsResizing: allowsResizing, children: children, align: align = 'start' } = props;
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
let isMenu = allowsResizing || !!props.menuItems;
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Column), {
...props,
ref: domRef,
style: {
borderInlineEndColor: 'transparent'
},
className: (renderProps)=>$bed37377ec7a3a9e$var$columnStyles({
...renderProps,
isMenu: isMenu,
align: align,
isQuiet: isQuiet
}),
children: ({ allowsSorting: allowsSorting, sortDirection: sortDirection, isFocusVisible: isFocusVisible, sort: sort, startResize: startResize })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
isMenu ? /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ColumnWithMenu, {
isColumnResizable: allowsResizing,
menuItems: props.menuItems,
allowsSorting: allowsSorting,
sortDirection: sortDirection,
sort: sort,
startResize: startResize,
align: align,
children: children
}) : /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ColumnContents, {
align: align,
allowsSorting: allowsSorting,
sortDirection: sortDirection,
children: children
})
]
})
});
});
const $bed37377ec7a3a9e$var$columnContentWrapper = function anonymous(props) {
let rules = " ";
rules += ' Na1';
rules += ' sd1';
rules += ' eb1';
rules += ' Za1';
if (props.align === "end") rules += ' _Cb1';
else if (props.align === "center") rules += ' _Ca1';
else if (props.align === "default") rules += ' _Cg1';
return rules;
};
const $bed37377ec7a3a9e$var$sortIcon = function anonymous(props) {
let rules = " ";
rules += ' ZXJkxGe1';
rules += ' FXJkxGe1';
rules += ' _va1';
if (props.isButton) {
rules += ' Ht1';
rules += ' Hsu1';
} else rules += ' Hv1';
rules += ' _5b1';
rules += ' -_8sjo0b-t5ZbAob1';
return rules;
};
function $bed37377ec7a3a9e$var$ColumnContents(props) {
let { align: align, allowsSorting: allowsSorting, sortDirection: sortDirection, children: children } = props;
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)("div", {
className: $bed37377ec7a3a9e$var$columnContentWrapper({
align: align
}),
children: [
allowsSorting && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Provider), {
values: [
[
(0, $bde97c91243ed164$exports.IconContext),
{
styles: $bed37377ec7a3a9e$var$sortIcon({})
}
]
],
children: sortDirection != null && (sortDirection === 'ascending' ? /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $2197830b90e71c31$exports.default), {}) : /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $22bf2407c3628a21$exports.default), {}))
}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("span", {
className: $bed37377ec7a3a9e$var$columnHeaderText,
children: children
})
]
});
}
const $bed37377ec7a3a9e$var$resizableMenuButtonWrapper = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' _Kb1';
rules += ' _Mc1';
rules += ' Oh1';
rules += ' of1';
rules += ' nf1';
rules += ' kf1';
rules += ' jf1';
rules += ' pt1';
rules += ' Za1';
rules += ' _Pc1';
rules += ' sd1';
rules += ' eb1';
if (props.align === "end") rules += ' _Cb1';
else if (props.align === "center") rules += ' _Ca1';
else if (props.align === "default") rules += ' _Cg1';
rules += ' Sf1';
rules += ' Rf1';
rules += ' g91';
rules += ' _je1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
return rules;
};
const $bed37377ec7a3a9e$var$resizerHandleContainer = function anonymous(props) {
let rules = " ";
if (props.isInResizeMode) rules += ' sb1';
else if (props.isResizing) rules += ' sb1';
else rules += ' sjBAxlb1';
rules += ' Zj1';
rules += ' Fb1';
rules += ' _Pa1';
rules += ' Wr1';
rules += ' _zdYbyj1';
if (props.resizableDirection === "both") rules += ' rk1';
else if (props.resizableDirection === "right") rules += ' rF1';
else if (props.resizableDirection === "left") rules += ' rj1';
else rules += ' rt1';
return rules;
};
const $bed37377ec7a3a9e$var$resizerHandle = function anonymous(props) {
let rules = " ";
if (props.isResizing) rules += ' g5qAiPc1';
else if (props.isFocusVisible) rules += ' g5qAiPc1';
else rules += ' gE1';
if (props.isResizing) rules += ' gle1';
else if (props.isFocusVisible) rules += ' gle1';
else rules += ' gla1';
if (props.isResizing) rules += ' Fc1';
else rules += ' Fb1';
if (props.isResizing) rules += ' Zf1';
else rules += ' Ze1';
rules += ' _Pa1';
rules += ' _AWJpoB1';
return rules;
};
const $bed37377ec7a3a9e$var$columnHeaderText = " _Nc1 Pc1 _Yb1 _7c1 NXJkxGe1 _ua1 _vb1 _sd1";
const $bed37377ec7a3a9e$var$chevronIcon = " _Sd1 It1 Isu1 NXJkxGe1 _va1 -_8sjo0b-t5ZbAob1";
const $bed37377ec7a3a9e$var$nubbin = " _Pa1 Wr1 _AlhfIS1 ZXJkxGe1 FXJkxGe1 t5qAiPc1 tla1 -_8sjo0b-tw1 -_8sjo0b-lt8pvGJ1";
function $bed37377ec7a3a9e$var$ColumnWithMenu(props) {
let { allowsSorting: allowsSorting, sortDirection: sortDirection, sort: sort, startResize: startResize, children: children, align: align, isColumnResizable: isColumnResizable, menuItems: menuItems } = props;
let { setIsInResizeMode: setIsInResizeMode, isInResizeMode: isInResizeMode } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let stringFormatter = (0, $iLVc8$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
const onMenuSelect = (key)=>{
switch(key){
case 'sort-asc':
sort('ascending');
break;
case 'sort-desc':
sort('descending');
break;
case 'resize':
setIsInResizeMode?.(true);
startResize();
break;
}
};
let items = (0, $iLVc8$react.useMemo)(()=>{
let options = [];
if (isColumnResizable) options = [
{
label: stringFormatter.format('table.resizeColumn'),
id: 'resize'
}
];
if (allowsSorting) options = [
{
label: stringFormatter.format('table.sortAscending'),
id: 'sort-asc'
},
{
label: stringFormatter.format('table.sortDescending'),
id: 'sort-desc'
},
...options
];
return options;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
allowsSorting,
isColumnResizable
]);
let buttonAlignment = 'start';
let menuAlign = 'start';
if (align === 'center') buttonAlignment = 'center';
else if (align === 'end') {
buttonAlignment = 'end';
menuAlign = 'end';
}
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $e741ea6b88ce4866$exports.MenuTrigger), {
align: menuAlign,
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.Button), {
className: (renderProps)=>$bed37377ec7a3a9e$var$resizableMenuButtonWrapper({
...renderProps,
align: buttonAlignment
}),
children: [
allowsSorting && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Provider), {
values: [
[
(0, $bde97c91243ed164$exports.IconContext),
{
styles: $bed37377ec7a3a9e$var$sortIcon({
isButton: true
})
}
]
],
children: sortDirection != null && (sortDirection === 'ascending' ? /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $2197830b90e71c31$exports.default), {}) : /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $22bf2407c3628a21$exports.default), {}))
}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$columnHeaderText,
children: children
}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
size: "M",
className: $bed37377ec7a3a9e$var$chevronIcon
})
]
}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $e741ea6b88ce4866$exports.Menu), {
onAction: onMenuSelect,
styles: " Nn1",
children: [
items.length > 0 && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.MenuSection), {
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Collection), {
items: items,
children: (item)=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.MenuItem), {
children: item?.label
})
})
}),
menuItems
]
})
]
}),
isColumnResizable && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
"data-react-aria-prevent-focus": "true",
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.ColumnResizer), {
"data-react-aria-prevent-focus": "true",
className: ({ resizableDirection: resizableDirection, isResizing: isResizing })=>$bed37377ec7a3a9e$var$resizerHandleContainer({
resizableDirection: resizableDirection,
isResizing: isResizing,
isInResizeMode: isInResizeMode
}),
children: ({ isFocusVisible: isFocusVisible, isResizing: isResizing })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ResizerIndicator, {
isFocusVisible: isFocusVisible,
isResizing: isResizing
}),
(isFocusVisible || isInResizeMode) && isResizing && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$nubbin,
children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $23350f45c699333e$exports.default), {})
})
]
})
})
})
]
});
}
function $bed37377ec7a3a9e$var$ResizerIndicator({ isFocusVisible: isFocusVisible, isResizing: isResizing }) {
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
className: $bed37377ec7a3a9e$var$resizerHandle({
isFocusVisible: isFocusVisible,
isResizing: isResizing
})
});
}
const $bed37377ec7a3a9e$var$tableHeader = function anonymous(props) {
let rules = " ";
rules += ' Fb1';
rules += ' Za1';
rules += ' gL1';
rules += ' JLPOtrc1';
if (props.isHovered) rules += ' -xLp2wc-sb1';
else rules += ' -xLp2wc-sk1';
return rules;
};
const $bed37377ec7a3a9e$var$selectAllCheckbox = " IC1";
const $bed37377ec7a3a9e$var$selectAllCheckboxColumn = function anonymous(props) {
let rules = " ";
rules += ' Td1';
rules += ' Qd1';
rules += ' Sd1';
rules += ' Rd1';
rules += ' Fb1';
rules += ' _oa1';
rules += ' _Le1';
rules += ' _Pc1';
rules += ' _cb1';
rules += ' iq1';
rules += ' ila1';
rules += ' ma1';
rules += ' la1';
if (props.isQuiet) rules += ' _kb1';
else rules += ' _ka1';
rules += ' hb1';
rules += ' _jf1';
rules += ' gL1';
return rules;
};
const $bed37377ec7a3a9e$export$f850895b287ef28e = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableHeader({ columns: columns, dependencies: dependencies, children: children }, ref) {
let scale = (0, $ee7b4c497f520c08$exports.useScale)();
let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponents.useTableOptions)();
let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponents.TableHeader), {
// @ts-ignore
ref: domRef,
className: $bed37377ec7a3a9e$var$tableHeader,
children: [
selectionBehavior === 'toggle' && // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
// @ts-ignore
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Column), {
isSticky: true,
width: scale === 'medium' ? 40 : 52,
minWidth: scale === 'medium' ? 40 : 52,
className: $bed37377ec7a3a9e$var$selectAllCheckboxColumn({
isQuiet: isQuiet
}),
children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
selectionMode === 'single' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel, {})
]
}),
selectionMode === 'multiple' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $af04e099a53d3e85$exports.Checkbox), {
styles: $bed37377ec7a3a9e$var$selectAllCheckbox,
slot: "selection"
})
]
})
}),
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Collection), {
items: columns,
dependencies: dependencies,
children: children
})
]
});
});
function $bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel() {
let checkboxProps = (0, $iLVc8$reactariacomponents.useSlottedContext)((0, $iLVc8$reactariacomponents.CheckboxContext), 'selection');
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactaria.VisuallyHidden), {
children: checkboxProps?.['aria-label']
});
}
const $bed37377ec7a3a9e$var$commonCellStyles = {
borderColor: 'transparent',
borderBottomWidth: 1,
borderTopWidth: 0,
borderXWidth: 0,
borderStyle: 'solid',
position: 'relative',
color: {
default: 'gray-800',
forcedColors: 'ButtonText'
},
outlineStyle: 'none',
paddingX: 16 // table-edge-to-content
};
const $bed37377ec7a3a9e$var$cell = function anonymous(props) {
let rules = " ";
rules += ' iq1';
rules += ' ila1';
rules += ' hXMFGYc1';
rules += ' _kJ8iPYd1';
rules += ' ma1';
if (props.isDivider) rules += ' lb1';
else rules += ' la1';
if (props.isDivider) rules += ' _jf1';
else rules += ' _je1';
rules += ' _Pc1';
if (props.isSelected) {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
} else {
if (props.isPressed) rules += ' pt1';
else if (props.isFocusVisible) rules += ' pt1';
else if (props.isHovered) rules += ' pt1';
else rules += ' pv1';
}
rules += ' _Le1';
rules += ' Sf1';
rules += ' Rf1';
rules += ' Tu7Fubd1';
rules += ' Qu7Fubd1';
rules += ' MAyFGYc1';
rules += ' _oa1';
rules += ' Fb1';
rules += ' Za1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' eb1';
rules += ' sd1';
if (props.density === "spacious") rules += ' -M_-Mk1';
else if (props.density === "compact") rules += ' -M_-Mi1';
else rules += ' -M_-Mh1';
rules += ' -_k_-_ka1';
rules += ' -h_-hb1';
return rules;
};
const $bed37377ec7a3a9e$var$stickyCell = {
backgroundColor: 'gray-25'
};
const $bed37377ec7a3a9e$var$checkboxCellStyle = " iA1 ha1 _ka1 ma1 la1 _jf1 _Pc1 pt1 plb1 _Le1 Sf1 Rf1 gs9yXOb1 _cb1 FBJsHLe1";
const $bed37377ec7a3a9e$var$cellContent = function anonymous(props) {
let rules = " ";
rules += ' _Nc1';
rules += ' Pc1';
rules += ' _Yb1';
if (props.overflowMode === "wrap") rules += ' _7b1';
else rules += ' _7c1';
if (props.align === "end") rules += ' _Wb1';
else if (props.align === "center") rules += ' _Wa1';
else if (props.align === "start") rules += ' _Wd1';
rules += ' Za1';
rules += ' _Bb1';
if (props.isSticky) rules += ' Td1';
else rules += ' Tp1';
if (props.isSticky) rules += ' Qd1';
else rules += ' Qp1';
if (props.isSticky) rules += ' Sd1';
else rules += ' Sp1';
if (props.isSticky) rules += ' Rd1';
else rules += ' Rp1';
if (props.isSticky) rules += ' Jy1';
else rules += ' Jb1';
if (props.isSticky) rules += ' Gy1';
else rules += ' Gb1';
if (props.isSticky) rules += ' Iy1';
else rules += ' Ib1';
if (props.isSticky) rules += ' Hy1';
else rules += ' Hb1';
if (props.isSticky) rules += ' gs9yXOb1';
else rules += ' g91';
return rules;
};
const $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Cell(props, ref) {
let { children: children, isSticky: isSticky, showDivider: showDivider = false, align: align, textValue: textValue, ...otherProps } = props;
let domRef = (0, $iLVc8$reactspectrumutils.useDOMRef)(ref);
let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
textValue ||= typeof children === 'string' ? children : undefined;
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Cell), {
ref: domRef,
// Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
// @ts-ignore
isSticky: isSticky,
className: (renderProps)=>$bed37377ec7a3a9e$var$cell({
...renderProps,
...tableVisualOptions,
isDivider: showDivider
}),
textValue: textValue,
...otherProps,
children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("span", {
className: $bed37377ec7a3a9e$var$cellContent({
...tableVisualOptions,
isSticky: isSticky,
align: align || 'start'
}),
children: children
}),
isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {})
]
})
});
});
const $bed37377ec7a3a9e$var$editableCell = function anonymous(props) {
let rules = " ";
rules += ' iq1';
rules += ' ila1';
rules += ' hXMFGYc1';
rules += ' _kJ8iPYd1';
rules += ' ma1';
if (props.isDivider) rules += ' lb1';
else rules += ' la1';
if (props.isDivider) rules += ' _jf1';
else rules += ' _je1';
rules += ' _Pc1';
if (props.isSaving) {
if (props.isPressed) rules += ' pt1';
else if (props.isFocusVisible) rules += ' pt1';
else if (props.isHovered) rules += ' pt1';
else rules += ' pv1';
} else {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
}
rules += ' _Le1';
rules += ' Sf1';
rules += ' Rf1';
rules += ' Tu7Fubd1';
rules += ' Qu7Fubd1';
rules += ' _oa1';
rules += ' FBJsHLe1';
rules += ' Za1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' eb1';
rules += ' sd1';
rules += ' -_k_-_ka1';
rules += ' -h_-hb1';
return rules;
};
let $bed37377ec7a3a9e$var$editPopover = function anonymous(props, overrides) {
let rules = " ";
let minWidth = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "N") minWidth = true;
rules += p[0];
}
if (props.colorScheme === "dark") rules += ' _pa1';
else if (props.colorScheme === "light") rules += ' _pb1';
else if (props.colorScheme === "light dark") rules += ' _pc1';
else rules += ' _pN79Hzc1';
rules += ' -Ovbhqd-g_g1';
rules += ' gEzkoQe1';
rules += ' kb1';
rules += ' jb1';
rules += ' _nLeasBb1';
rules += ' _jf1';
rules += ' _kb1';
rules += ' hb1';
rules += ' mb1';
rules += ' lb1';
rules += ' ir1';
rules += ' ila1';
rules += ' _ob1';
rules += ' _Bb1';
if (props.isExiting) rules += ' _Ob1';
rules += ' _Le1';
if (!minWidth) rules += ' NuHSBze1';
rules += ' Tt1';
rules += ' Qt1';
rules += ' St1';
rules += ' Rt1';
rules += ' sd1';
rules += ' eb1';
return rules;
};
const $bed37377ec7a3a9e$export$d27c35c47f085992 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function EditableCell(props, ref) {
let { children: children, showDivider: showDivider = false, textValue: textValue, isSaving: isSaving, ...otherProps } = props;
let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let domRef = (0, $iLVc8$reactariautils.useObjectRef)(ref);
textValue ||= typeof children === 'string' ? children : undefined;
return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponents.Cell), {
ref: domRef,
className: (renderProps)=>$bed37377ec7a3a9e$var$editableCell({
...renderProps,
...tableVisualOptions,
isDivider: showDivider,
isSaving: isSaving
}),
textValue: textValue,
...otherProps,
children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$EditableCellInner, {
...props,
isFocusVisible: isFocusVisible,
cellRef: domRef
})
});
});
const $bed37377ec7a3a9e$var$nonTextInputTypes = new Set([
'checkbox',
'radio',
'range',
'color',
'file',
'image',
'button',
'submit',
'reset'
]);
function $bed37377ec7a3a9e$var$EditableCellInner(props1) {
let { children: children, align: align, renderEditing: renderEditing, isSaving: isSaving, onSubmit: onSubmit, isFocusVisible: isFocusVisible, cellRef: cellRef, action: action, onCancel: onCancel } = props1;
let [isOpen, setIsOpen] = (0, $iLVc8$react.useState)(false);
let popoverRef = (0, $iLVc8$react.useRef)(null);
let formRef = (0, $iLVc8$react.useRef)(null);
let [triggerWidth, setTriggerWidth] = (0, $iLVc8$react.useState)(0);
let [tableWidth, setTableWidth] = (0, $iLVc8$react.useState)(0);
let [verticalOffset, setVerticalOffset] = (0, $iLVc8$react.useState)(0);
let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let stringFormatter = (0, $iLVc8$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
let dialogRef = (0, $iLVc8$react.useRef)(null);
let { density: density } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
let size = 'M';
if (density === 'compact') size = 'S';
else if (density === 'spacious') size = 'L';
// Popover positioning
(0, $iLVc8$reactariautils.useLayoutEffect)(()=>{
if (!isOpen) return;
let width = cellRef.current?.clientWidth || 0;
let cell = cellRef.current;
let boundingRect = cell?.parentElement?.getBoundingClientRect();
let verticalOffset = (boundingRect?.top ?? 0) - (boundingRect?.bottom ?? 0);
let tableWidth = cellRef.current?.closest('[role="grid"]')?.clientWidth || 0;
setTriggerWidth(width);
setVerticalOffset(verticalOffset);
setTableWidth(tableWidth);
}, [
cellRef,
density,
isOpen
]);
// Auto select the entire text range of the autofocused input on overlay opening
// Maybe replace with FocusScope or one of those