UNPKG

@react-spectrum/s2

Version:
1,187 lines (1,161 loc) 63.8 kB
import "./TableView.css"; import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80, ActionButtonContext as $da878a05ab4a403e$export$2ff682723a46d413} from "./ActionButton.mjs"; import {ButtonGroup as $472eaa9a9b344b9a$export$69b1032f2ecdf404} from "./ButtonGroup.mjs"; import {Checkbox as $9b405e0f8095dce0$export$48513f6b9f8ce62d} from "./Checkbox.mjs"; import $4bb2fe02f5143bcc$export$2e2bcd8739ae039 from "../icons/Checkmark.mjs"; import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs"; import $11111a8204dcac81$export$2e2bcd8739ae039 from "../icons/Close.mjs"; import {CustomDialog as $6e8e8fdd66697ef1$export$82e1fa7406db6ec} from "./CustomDialog.mjs"; import {DialogContainer as $dd7e1b1b86bf720d$export$547754aada6e339f} from "./DialogContainer.mjs"; import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs"; import $auVFN$intlStringsmjs from "./intlStrings.mjs"; import {Menu as $13afb0ea5f0ed767$export$d9b273488cd8ce6f, MenuItem as $13afb0ea5f0ed767$export$2ce376c2cc3355c8, MenuSection as $13afb0ea5f0ed767$export$4b1545b4f2016d26, MenuTrigger as $13afb0ea5f0ed767$export$27d2ad3c5815583e} from "./Menu.mjs"; import $1bdd184cd8a3d21d$export$2e2bcd8739ae039 from "./S2_MoveHorizontalTableWidget.mjs"; import {ProgressCircle as $41ddd91dbbf0c389$export$c79b9d6b4cc92af7} from "./ProgressCircle.mjs"; import $5a632e895c21f138$export$2e2bcd8739ae039 from "../icons/SortDown.mjs"; import $415c33109ddcfc45$export$2e2bcd8739ae039 from "../icons/SortUp.mjs"; import {Button as $067ea9f64ccd4e8e$export$353f5b6fc5456de1} from "./Button.mjs"; import {useActionBarContainer as $f21f2186348fbc5b$export$13f32e21845e01d0} from "./ActionBar.mjs"; import {useScale as $859432f3b3573fcb$export$a8d2043b2d807f4d} from "./utils.mjs"; import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs"; import {jsxs as $auVFN$jsxs, jsx as $auVFN$jsx, Fragment as $auVFN$Fragment} from "react/jsx-runtime"; import {Rect as $auVFN$Rect, TableLayout as $auVFN$TableLayout, ResizableTableContainer as $auVFN$ResizableTableContainer, Virtualizer as $auVFN$Virtualizer, Table as $auVFN$Table, TableLoadMoreItem as $auVFN$TableLoadMoreItem, Collection as $auVFN$Collection, TableBody as $auVFN$TableBody, Column as $auVFN$Column, Provider as $auVFN$Provider, Button as $auVFN$Button, ColumnResizer as $auVFN$ColumnResizer, useTableOptions as $auVFN$useTableOptions, TableHeader as $auVFN$TableHeader, useSlottedContext as $auVFN$useSlottedContext, CheckboxContext as $auVFN$CheckboxContext, Cell as $auVFN$Cell, ButtonContext as $auVFN$ButtonContext, DEFAULT_SLOT as $auVFN$DEFAULT_SLOT, Popover as $auVFN$Popover, OverlayTriggerStateContext as $auVFN$OverlayTriggerStateContext, Form as $auVFN$Form, Row as $auVFN$Row} from "react-aria-components"; import {useObjectRef as $auVFN$useObjectRef, useLayoutEffect as $auVFN$useLayoutEffect, getActiveElement as $auVFN$getActiveElement, getOwnerDocument as $auVFN$getOwnerDocument} from "@react-aria/utils"; import {createContext as $auVFN$createContext, forwardRef as $auVFN$forwardRef, useState as $auVFN$useState, useCallback as $auVFN$useCallback, useMemo as $auVFN$useMemo, useRef as $auVFN$useRef, useContext as $auVFN$useContext, useEffect as $auVFN$useEffect} from "react"; import {useDOMRef as $auVFN$useDOMRef, useMediaQuery as $auVFN$useMediaQuery} from "@react-spectrum/utils"; import {useLocalizedStringFormatter as $auVFN$useLocalizedStringFormatter} from "@react-aria/i18n"; import {VisuallyHidden as $auVFN$VisuallyHidden} from "react-aria"; function $parcel$interopDefault(a) { return a && a.__esModule ? a.default : a; } /* * 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 $0fcd5fb617970a1d$var$InternalTableContext = /*#__PURE__*/ (0, $auVFN$createContext)({}); const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$var$DEFAULT_HEADER_HEIGHT = { medium: 32, large: 40 }; const $0fcd5fb617970a1d$var$ROW_HEIGHTS = { compact: { medium: 32, large: 40 }, regular: { medium: 40, large: 50 }, spacious: { medium: 48, large: 60 } }; class $0fcd5fb617970a1d$export$4e03bdf0174fd602 extends (0, $auVFN$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, $auVFN$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 $0fcd5fb617970a1d$export$93e4b0b2cc49b648 = /*#__PURE__*/ (0, $auVFN$createContext)(null); const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableView(props, ref) { [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $0fcd5fb617970a1d$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, $auVFN$useDOMRef)(ref); let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)(); // 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, $auVFN$useState)(false); let onResizeStart = (0, $auVFN$useCallback)((widths)=>{ propsOnResizeStart?.(widths); }, [ propsOnResizeStart ]); let onResizeEnd = (0, $auVFN$useCallback)((widths)=>{ setIsInResizeMode(false); propsOnResizeEnd?.(widths); }, [ propsOnResizeEnd, setIsInResizeMode ]); let context = (0, $auVFN$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, $auVFN$useRef)(null); let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single'; let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $f21f2186348fbc5b$export$13f32e21845e01d0)({ ...props, scrollRef: scrollRef }); return /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$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 || '') + $0fcd5fb617970a1d$var$tableWrapper(null, styles), style: UNSAFE_style, children: [ /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Virtualizer), { layout: $0fcd5fb617970a1d$export$4e03bdf0174fd602, layoutOptions: { rowHeight: overflowMode === 'wrap' ? undefined : $0fcd5fb617970a1d$var$ROW_HEIGHTS[density][scale], estimatedRowHeight: overflowMode === 'wrap' ? $0fcd5fb617970a1d$var$ROW_HEIGHTS[density][scale] : undefined, // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap headingHeight: $0fcd5fb617970a1d$var$DEFAULT_HEADER_HEIGHT[scale], loaderHeight: 60 }, children: /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$InternalTableContext.Provider, { value: context, children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$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)=>$0fcd5fb617970a1d$var$table({ ...renderProps, isCheckboxSelection: isCheckboxSelection, isQuiet: isQuiet }), selectionBehavior: "toggle", selectionMode: selectionMode, onRowAction: onAction, ...otherProps, selectedKeys: selectedKeys, defaultSelectedKeys: undefined, onSelectionChange: onSelectionChange }) }) }), actionBar ] }); }); const $0fcd5fb617970a1d$var$centeredWrapper = " sd1 eb1 _Ca1 Za1 Fb1"; const $0fcd5fb617970a1d$export$76ccd210b9029917 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableBody(props, ref) { let { items: items, renderEmptyState: renderEmptyState, children: children, dependencies: dependencies = [] } = props; let domRef = (0, $auVFN$useDOMRef)(ref); let { loadingState: loadingState, onLoadMore: onLoadMore } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let isLoading = loadingState === 'loading' || loadingState === 'loadingMore'; let emptyRender; let renderer = children; let stringFormatter = (0, $auVFN$useLocalizedStringFormatter)((0, ($parcel$interopDefault($auVFN$intlStringsmjs))), '@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, $auVFN$jsx)((0, $auVFN$TableLoadMoreItem), { isLoading: loadingState === 'loadingMore', onLoadMore: onLoadMore, className: " Fb1 Za1", children: /*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$centeredWrapper, children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7), { 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, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Collection), { items: items, dependencies: dependencies, children: children }), loadMoreSpinner ] }); else renderer = /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ children, loadMoreSpinner ] }); if (renderEmptyState != null && !isLoading) emptyRender = (props)=>/*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$centeredWrapper, children: renderEmptyState(props) }); else if (loadingState === 'loading') emptyRender = ()=>/*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$centeredWrapper, children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7), { isIndeterminate: true, "aria-label": stringFormatter.format('table.loading') }) }); return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$TableBody), { // @ts-ignore ref: domRef, className: " Fb1", ...props, renderEmptyState: emptyRender, dependencies: [ loadingState ], children: renderer }); }); const $0fcd5fb617970a1d$var$cellFocus = { outlineStyle: { default: 'none', isFocusVisible: 'solid' }, outlineOffset: -2, outlineWidth: 2, outlineColor: 'focus-ring', borderRadius: '[6px]' }; function $0fcd5fb617970a1d$var$CellFocusRing() { return /*#__PURE__*/ (0, $auVFN$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$export$816b5d811295e6bc = /*#__PURE__*/ (0, $auVFN$forwardRef)(function Column(props, ref) { let { isQuiet: isQuiet } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let { allowsResizing: allowsResizing, children: children, align: align = 'start' } = props; let domRef = (0, $auVFN$useDOMRef)(ref); let isMenu = allowsResizing || !!props.menuItems; return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Column), { ...props, ref: domRef, style: { borderInlineEndColor: 'transparent' }, className: (renderProps)=>$0fcd5fb617970a1d$var$columnStyles({ ...renderProps, isMenu: isMenu, align: align, isQuiet: isQuiet }), children: ({ allowsSorting: allowsSorting, sortDirection: sortDirection, isFocusVisible: isFocusVisible, sort: sort, startResize: startResize })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ isFocusVisible && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$CellFocusRing, {}), isMenu ? /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$ColumnWithMenu, { isColumnResizable: allowsResizing, menuItems: props.menuItems, allowsSorting: allowsSorting, sortDirection: sortDirection, sort: sort, startResize: startResize, align: align, children: children }) : /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$ColumnContents, { align: align, allowsSorting: allowsSorting, sortDirection: sortDirection, children: children }) ] }) }); }); const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$var$ColumnContents(props) { let { align: align, allowsSorting: allowsSorting, sortDirection: sortDirection, children: children } = props; return /*#__PURE__*/ (0, $auVFN$jsxs)("div", { className: $0fcd5fb617970a1d$var$columnContentWrapper({ align: align }), children: [ allowsSorting && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Provider), { values: [ [ (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed), { styles: $0fcd5fb617970a1d$var$sortIcon({}) } ] ], children: sortDirection != null && (sortDirection === 'ascending' ? /*#__PURE__*/ (0, $auVFN$jsx)((0, $415c33109ddcfc45$export$2e2bcd8739ae039), {}) : /*#__PURE__*/ (0, $auVFN$jsx)((0, $5a632e895c21f138$export$2e2bcd8739ae039), {})) }), /*#__PURE__*/ (0, $auVFN$jsx)("span", { className: $0fcd5fb617970a1d$var$columnHeaderText, children: children }) ] }); } const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$var$columnHeaderText = " _Nc1 Pc1 _Yb1 _7c1 NXJkxGe1 _ua1 _vb1 _sd1"; const $0fcd5fb617970a1d$var$chevronIcon = " _Sd1 It1 Isu1 NXJkxGe1 _va1 -_8sjo0b-t5ZbAob1"; const $0fcd5fb617970a1d$var$nubbin = " _Pa1 Wr1 _AlhfIS1 ZXJkxGe1 FXJkxGe1 t5qAiPc1 tla1 -_8sjo0b-tw1 -_8sjo0b-lt8pvGJ1"; function $0fcd5fb617970a1d$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, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let stringFormatter = (0, $auVFN$useLocalizedStringFormatter)((0, ($parcel$interopDefault($auVFN$intlStringsmjs))), '@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, $auVFN$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, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ /*#__PURE__*/ (0, $auVFN$jsxs)((0, $13afb0ea5f0ed767$export$27d2ad3c5815583e), { align: menuAlign, children: [ /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Button), { className: (renderProps)=>$0fcd5fb617970a1d$var$resizableMenuButtonWrapper({ ...renderProps, align: buttonAlignment }), children: [ allowsSorting && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Provider), { values: [ [ (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed), { styles: $0fcd5fb617970a1d$var$sortIcon({ isButton: true }) } ] ], children: sortDirection != null && (sortDirection === 'ascending' ? /*#__PURE__*/ (0, $auVFN$jsx)((0, $415c33109ddcfc45$export$2e2bcd8739ae039), {}) : /*#__PURE__*/ (0, $auVFN$jsx)((0, $5a632e895c21f138$export$2e2bcd8739ae039), {})) }), /*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$columnHeaderText, children: children }), /*#__PURE__*/ (0, $auVFN$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), { size: "M", className: $0fcd5fb617970a1d$var$chevronIcon }) ] }), /*#__PURE__*/ (0, $auVFN$jsxs)((0, $13afb0ea5f0ed767$export$d9b273488cd8ce6f), { onAction: onMenuSelect, styles: " Nn1", children: [ items.length > 0 && /*#__PURE__*/ (0, $auVFN$jsx)((0, $13afb0ea5f0ed767$export$4b1545b4f2016d26), { children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Collection), { items: items, children: (item)=>/*#__PURE__*/ (0, $auVFN$jsx)((0, $13afb0ea5f0ed767$export$2ce376c2cc3355c8), { children: item?.label }) }) }), menuItems ] }) ] }), isColumnResizable && /*#__PURE__*/ (0, $auVFN$jsx)("div", { "data-react-aria-prevent-focus": "true", children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$ColumnResizer), { "data-react-aria-prevent-focus": "true", className: ({ resizableDirection: resizableDirection, isResizing: isResizing })=>$0fcd5fb617970a1d$var$resizerHandleContainer({ resizableDirection: resizableDirection, isResizing: isResizing, isInResizeMode: isInResizeMode }), children: ({ isFocusVisible: isFocusVisible, isResizing: isResizing })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$ResizerIndicator, { isFocusVisible: isFocusVisible, isResizing: isResizing }), (isFocusVisible || isInResizeMode) && isResizing && /*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$nubbin, children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $1bdd184cd8a3d21d$export$2e2bcd8739ae039), {}) }) ] }) }) }) ] }); } function $0fcd5fb617970a1d$var$ResizerIndicator({ isFocusVisible: isFocusVisible, isResizing: isResizing }) { return /*#__PURE__*/ (0, $auVFN$jsx)("div", { className: $0fcd5fb617970a1d$var$resizerHandle({ isFocusVisible: isFocusVisible, isResizing: isResizing }) }); } const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$var$selectAllCheckbox = " IC1"; const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$export$f850895b287ef28e = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableHeader({ columns: columns, dependencies: dependencies, children: children }, ref) { let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)(); let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $auVFN$useTableOptions)(); let { isQuiet: isQuiet } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let domRef = (0, $auVFN$useDOMRef)(ref); return /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$TableHeader), { // @ts-ignore ref: domRef, className: $0fcd5fb617970a1d$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, $auVFN$jsx)((0, $auVFN$Column), { isSticky: true, width: scale === 'medium' ? 40 : 52, minWidth: scale === 'medium' ? 40 : 52, className: $0fcd5fb617970a1d$var$selectAllCheckboxColumn({ isQuiet: isQuiet }), children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ selectionMode === 'single' && /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ isFocusVisible && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$CellFocusRing, {}), /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$VisuallyHiddenSelectAllLabel, {}) ] }), selectionMode === 'multiple' && /*#__PURE__*/ (0, $auVFN$jsx)((0, $9b405e0f8095dce0$export$48513f6b9f8ce62d), { styles: $0fcd5fb617970a1d$var$selectAllCheckbox, slot: "selection" }) ] }) }), /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Collection), { items: columns, dependencies: dependencies, children: children }) ] }); }); function $0fcd5fb617970a1d$var$VisuallyHiddenSelectAllLabel() { let checkboxProps = (0, $auVFN$useSlottedContext)((0, $auVFN$CheckboxContext), 'selection'); return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$VisuallyHidden), { children: checkboxProps?.['aria-label'] }); } const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$var$stickyCell = { backgroundColor: 'gray-25' }; const $0fcd5fb617970a1d$var$checkboxCellStyle = " iA1 ha1 _ka1 ma1 la1 _jf1 _Pc1 pt1 plb1 _Le1 Sf1 Rf1 gs9yXOb1 _cb1 FBJsHLe1"; const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $auVFN$forwardRef)(function Cell(props, ref) { let { children: children, isSticky: isSticky, showDivider: showDivider = false, align: align, textValue: textValue, ...otherProps } = props; let domRef = (0, $auVFN$useDOMRef)(ref); let tableVisualOptions = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); textValue ||= typeof children === 'string' ? children : undefined; return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$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)=>$0fcd5fb617970a1d$var$cell({ ...renderProps, ...tableVisualOptions, isDivider: showDivider }), textValue: textValue, ...otherProps, children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), { children: [ /*#__PURE__*/ (0, $auVFN$jsx)("span", { className: $0fcd5fb617970a1d$var$cellContent({ ...tableVisualOptions, isSticky: isSticky, align: align || 'start' }), children: children }), isFocusVisible && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$CellFocusRing, {}) ] }) }); }); const $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$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 $0fcd5fb617970a1d$export$d27c35c47f085992 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function EditableCell(props, ref) { let { children: children, showDivider: showDivider = false, textValue: textValue, isSaving: isSaving, ...otherProps } = props; let tableVisualOptions = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let domRef = (0, $auVFN$useObjectRef)(ref); textValue ||= typeof children === 'string' ? children : undefined; return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Cell), { ref: domRef, className: (renderProps)=>$0fcd5fb617970a1d$var$editableCell({ ...renderProps, ...tableVisualOptions, isDivider: showDivider, isSaving: isSaving }), textValue: textValue, ...otherProps, children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$EditableCellInner, { ...props, isFocusVisible: isFocusVisible, cellRef: domRef }) }); }); const $0fcd5fb617970a1d$var$nonTextInputTypes = new Set([ 'checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset' ]); function $0fcd5fb617970a1d$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, $auVFN$useState)(false); let popoverRef = (0, $auVFN$useRef)(null); let formRef = (0, $auVFN$useRef)(null); let [triggerWidth, setTriggerWidth] = (0, $auVFN$useState)(0); let [tableWidth, setTableWidth] = (0, $auVFN$useState)(0); let [verticalOffset, setVerticalOffset] = (0, $auVFN$useState)(0); let tableVisualOptions = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let stringFormatter = (0, $auVFN$useLocalizedStringFormatter)((0, ($parcel$interopDefault($auVFN$intlStringsmjs))), '@react-spectrum/s2'); let dialogRef = (0, $auVFN$useRef)(null); let { density: density } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext); let size = 'M'; if (density === 'compact') size = 'S'; else if (density === 'spacious') size = 'L'; // Popover positioning (0, $auVFN$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 utilities (0, $auVFN$useEffect)(()=>{ if (isOpen) { let activeElement = (0, $auVFN$getActiveElement)((0, $auVFN$getOwnerDocument)(formRef.current)); if (activeElement && formRef.current?.contains(activeElement) && (activeElement instanceof HTMLInputElement && !$0fcd5fb617970a1d$var$nonTextInputTypes.has(activeElement.type) || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === 'function') activeElement.select(); } }, [ isOpen ]); let cancel = (0, $auVFN$useCallback)(()=>{ setIsOpen(false); onCancel?.(); }, [ onCancel ]); let isMobile = !(0, $auVFN$useM