@react-aria/table 3.0.0-beta.1 → 3.0.0-nightly-4980928d3-240906

package/dist/useTableColumnHeader.mjs

@@ -0,0 +1,88 @@
+import {getColumnHeaderId as $2140fb2337097f2d$export$37cd4213f2ad742e} from "./utils.mjs";
+import $cjB6b$intlStringsmodulejs from "./intlStrings.mjs";
+import {isAndroid as $cjB6b$isAndroid, useDescription as $cjB6b$useDescription, mergeProps as $cjB6b$mergeProps} from "@react-aria/utils";
+import {useEffect as $cjB6b$useEffect} from "react";
+import {useFocusable as $cjB6b$useFocusable} from "@react-aria/focus";
+import {useGridCell as $cjB6b$useGridCell} from "@react-aria/grid";
+import {useLocalizedStringFormatter as $cjB6b$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {usePress as $cjB6b$usePress} from "@react-aria/interactions";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $f329116d8ad0aba0$export$9514819a8c81e960(props, state, ref) {
+    var _state_sortDescriptor, _state_sortDescriptor1;
+    let { node: node } = props;
+    let allowsSorting = node.props.allowsSorting;
+    // if there are no focusable children, the column header will focus the cell
+    let { gridCellProps: gridCellProps } = (0, $cjB6b$useGridCell)({
+        ...props,
+        focusMode: 'child'
+    }, state, ref);
+    let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
+    let { pressProps: pressProps } = (0, $cjB6b$usePress)({
+        isDisabled: !allowsSorting || isSelectionCellDisabled,
+        onPress () {
+            state.sort(node.key);
+        },
+        ref: ref
+    });
+    // Needed to pick up the focusable context, enabling things like Tooltips for example
+    let { focusableProps: focusableProps } = (0, $cjB6b$useFocusable)({}, ref);
+    let ariaSort = null;
+    let isSortedColumn = ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === node.key;
+    let sortDirection = (_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction;
+    // aria-sort not supported in Android Talkback
+    if (node.props.allowsSorting && !(0, $cjB6b$isAndroid)()) ariaSort = isSortedColumn ? sortDirection : 'none';
+    let stringFormatter = (0, $cjB6b$useLocalizedStringFormatter)((0, ($parcel$interopDefault($cjB6b$intlStringsmodulejs))), '@react-aria/table');
+    let sortDescription;
+    if (allowsSorting) {
+        sortDescription = `${stringFormatter.format('sortable')}`;
+        // Android Talkback doesn't support aria-sort so we add sort order details to the aria-described by here
+        if (isSortedColumn && sortDirection && (0, $cjB6b$isAndroid)()) sortDescription = `${sortDescription}, ${stringFormatter.format(sortDirection)}`;
+    }
+    let descriptionProps = (0, $cjB6b$useDescription)(sortDescription);
+    let shouldDisableFocus = state.collection.size === 0;
+    (0, $cjB6b$useEffect)(()=>{
+        if (shouldDisableFocus && state.selectionManager.focusedKey === node.key) state.selectionManager.setFocusedKey(null);
+    }, [
+        shouldDisableFocus,
+        state.selectionManager,
+        node.key
+    ]);
+    return {
+        columnHeaderProps: {
+            ...(0, $cjB6b$mergeProps)(gridCellProps, pressProps, focusableProps, descriptionProps, // If the table is empty, make all column headers untabbable
+            shouldDisableFocus && {
+                tabIndex: -1
+            }),
+            role: 'columnheader',
+            id: (0, $2140fb2337097f2d$export$37cd4213f2ad742e)(state, node.key),
+            'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
+            'aria-sort': ariaSort
+        }
+    };
+}
+
+
+export {$f329116d8ad0aba0$export$9514819a8c81e960 as useTableColumnHeader};
+//# sourceMappingURL=useTableColumnHeader.module.js.map

package/dist/useTableColumnHeader.module.js

@@ -0,0 +1,88 @@
+import {getColumnHeaderId as $2140fb2337097f2d$export$37cd4213f2ad742e} from "./utils.module.js";
+import $cjB6b$intlStringsmodulejs from "./intlStrings.module.js";
+import {isAndroid as $cjB6b$isAndroid, useDescription as $cjB6b$useDescription, mergeProps as $cjB6b$mergeProps} from "@react-aria/utils";
+import {useEffect as $cjB6b$useEffect} from "react";
+import {useFocusable as $cjB6b$useFocusable} from "@react-aria/focus";
+import {useGridCell as $cjB6b$useGridCell} from "@react-aria/grid";
+import {useLocalizedStringFormatter as $cjB6b$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {usePress as $cjB6b$usePress} from "@react-aria/interactions";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $f329116d8ad0aba0$export$9514819a8c81e960(props, state, ref) {
+    var _state_sortDescriptor, _state_sortDescriptor1;
+    let { node: node } = props;
+    let allowsSorting = node.props.allowsSorting;
+    // if there are no focusable children, the column header will focus the cell
+    let { gridCellProps: gridCellProps } = (0, $cjB6b$useGridCell)({
+        ...props,
+        focusMode: 'child'
+    }, state, ref);
+    let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
+    let { pressProps: pressProps } = (0, $cjB6b$usePress)({
+        isDisabled: !allowsSorting || isSelectionCellDisabled,
+        onPress () {
+            state.sort(node.key);
+        },
+        ref: ref
+    });
+    // Needed to pick up the focusable context, enabling things like Tooltips for example
+    let { focusableProps: focusableProps } = (0, $cjB6b$useFocusable)({}, ref);
+    let ariaSort = null;
+    let isSortedColumn = ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === node.key;
+    let sortDirection = (_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction;
+    // aria-sort not supported in Android Talkback
+    if (node.props.allowsSorting && !(0, $cjB6b$isAndroid)()) ariaSort = isSortedColumn ? sortDirection : 'none';
+    let stringFormatter = (0, $cjB6b$useLocalizedStringFormatter)((0, ($parcel$interopDefault($cjB6b$intlStringsmodulejs))), '@react-aria/table');
+    let sortDescription;
+    if (allowsSorting) {
+        sortDescription = `${stringFormatter.format('sortable')}`;
+        // Android Talkback doesn't support aria-sort so we add sort order details to the aria-described by here
+        if (isSortedColumn && sortDirection && (0, $cjB6b$isAndroid)()) sortDescription = `${sortDescription}, ${stringFormatter.format(sortDirection)}`;
+    }
+    let descriptionProps = (0, $cjB6b$useDescription)(sortDescription);
+    let shouldDisableFocus = state.collection.size === 0;
+    (0, $cjB6b$useEffect)(()=>{
+        if (shouldDisableFocus && state.selectionManager.focusedKey === node.key) state.selectionManager.setFocusedKey(null);
+    }, [
+        shouldDisableFocus,
+        state.selectionManager,
+        node.key
+    ]);
+    return {
+        columnHeaderProps: {
+            ...(0, $cjB6b$mergeProps)(gridCellProps, pressProps, focusableProps, descriptionProps, // If the table is empty, make all column headers untabbable
+            shouldDisableFocus && {
+                tabIndex: -1
+            }),
+            role: 'columnheader',
+            id: (0, $2140fb2337097f2d$export$37cd4213f2ad742e)(state, node.key),
+            'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
+            'aria-sort': ariaSort
+        }
+    };
+}
+
+
+export {$f329116d8ad0aba0$export$9514819a8c81e960 as useTableColumnHeader};
+//# sourceMappingURL=useTableColumnHeader.module.js.map

package/dist/useTableColumnHeader.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAiCM,SAAS,0CAAwB,KAAoC,EAAE,KAAoB,EAAE,GAAuC;QAoBpH,uBACD;IApBpB,IAAI,QAAC,IAAI,EAAC,GAAG;IACb,IAAI,gBAAgB,KAAK,KAAK,CAAC,aAAa;IAC5C,4EAA4E;IAC5E,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAAC,GAAG,KAAK;QAAE,WAAW;IAAO,GAAG,OAAO;IAEzE,IAAI,0BAA0B,KAAK,KAAK,CAAC,eAAe,IAAI,MAAM,gBAAgB,CAAC,aAAa,KAAK;IAErG,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC1B,YAAY,CAAC,iBAAiB;QAC9B;YACE,MAAM,IAAI,CAAC,KAAK,GAAG;QACrB;aACA;IACF;IAEA,qFAAqF;IACrF,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE,CAAC,GAAG;IAExC,IAAI,WAAuC;IAC3C,IAAI,iBAAiB,EAAA,wBAAA,MAAM,cAAc,cAApB,4CAAA,sBAAsB,MAAM,MAAK,KAAK,GAAG;IAC9D,IAAI,iBAAgB,yBAAA,MAAM,cAAc,cAApB,6CAAA,uBAAsB,SAAS;IACnD,8CAA8C;IAC9C,IAAI,KAAK,KAAK,CAAC,aAAa,IAAI,CAAC,CAAA,GAAA,gBAAQ,KACvC,WAAW,iBAAiB,gBAAgB;IAG9C,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI;IACJ,IAAI,eAAe;QACjB,kBAAkB,CAAC,EAAE,gBAAgB,MAAM,CAAC,YAAY,CAAC;QACzD,wGAAwG;QACxG,IAAI,kBAAkB,iBAAiB,CAAA,GAAA,gBAAQ,KAC7C,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,EAAE,gBAAgB,MAAM,CAAC,eAAe,CAAC;IAEpF;IAEA,IAAI,mBAAmB,CAAA,GAAA,qBAAa,EAAE;IAEtC,IAAI,qBAAqB,MAAM,UAAU,CAAC,IAAI,KAAK;IACnD,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,sBAAsB,MAAM,gBAAgB,CAAC,UAAU,KAAK,KAAK,GAAG,EACtE,MAAM,gBAAgB,CAAC,aAAa,CAAC;IAEzC,GAAG;QAAC;QAAoB,MAAM,gBAAgB;QAAE,KAAK,GAAG;KAAC;IAEzD,OAAO;QACL,mBAAmB;YACjB,GAAG,CAAA,GAAA,iBAAS,EACV,eACA,YACA,gBACA,kBACA,4DAA4D;YAC5D,sBAAsB;gBAAC,UAAU;YAAE,EACpC;YACD,MAAM;YACN,IAAI,CAAA,GAAA,yCAAgB,EAAE,OAAO,KAAK,GAAG;YACrC,gBAAgB,KAAK,OAAO,IAAI,KAAK,OAAO,GAAG,IAAI,KAAK,OAAO,GAAG;YAClE,aAAa;QACf;IACF;AACF","sources":["packages/@react-aria/table/src/useTableColumnHeader.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\nimport {getColumnHeaderId} from './utils';\nimport {GridNode} from '@react-types/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {isAndroid, mergeProps, useDescription} from '@react-aria/utils';\nimport {TableState} from '@react-stately/table';\nimport {useEffect} from 'react';\nimport {useFocusable} from '@react-aria/focus';\nimport {useGridCell} from '@react-aria/grid';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {usePress} from '@react-aria/interactions';\n\nexport interface AriaTableColumnHeaderProps<T> {\n  /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */\n  node: GridNode<T>,\n  /** Whether the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) is contained in a virtual scroller. */\n  isVirtualized?: boolean\n}\n\nexport interface TableColumnHeaderAria {\n  /** Props for the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) element. */\n  columnHeaderProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a column header in a table.\n * @param props - Props for the column header.\n * @param state - State of the table, as returned by `useTableState`.\n * @param ref - The ref attached to the column header element.\n */\nexport function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, state: TableState<T>, ref: RefObject<FocusableElement | null>): TableColumnHeaderAria {\n  let {node} = props;\n  let allowsSorting = node.props.allowsSorting;\n  // if there are no focusable children, the column header will focus the cell\n  let {gridCellProps} = useGridCell({...props, focusMode: 'child'}, state, ref);\n\n  let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';\n\n  let {pressProps} = usePress({\n    isDisabled: !allowsSorting || isSelectionCellDisabled,\n    onPress() {\n      state.sort(node.key);\n    },\n    ref\n  });\n\n  // Needed to pick up the focusable context, enabling things like Tooltips for example\n  let {focusableProps} = useFocusable({}, ref);\n\n  let ariaSort: DOMAttributes['aria-sort'] = null;\n  let isSortedColumn = state.sortDescriptor?.column === node.key;\n  let sortDirection = state.sortDescriptor?.direction;\n  // aria-sort not supported in Android Talkback\n  if (node.props.allowsSorting && !isAndroid()) {\n    ariaSort = isSortedColumn ? sortDirection : 'none';\n  }\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');\n  let sortDescription;\n  if (allowsSorting) {\n    sortDescription = `${stringFormatter.format('sortable')}`;\n    // Android Talkback doesn't support aria-sort so we add sort order details to the aria-described by here\n    if (isSortedColumn && sortDirection && isAndroid()) {\n      sortDescription = `${sortDescription}, ${stringFormatter.format(sortDirection)}`;\n    }\n  }\n\n  let descriptionProps = useDescription(sortDescription);\n\n  let shouldDisableFocus = state.collection.size === 0;\n  useEffect(() => {\n    if (shouldDisableFocus && state.selectionManager.focusedKey === node.key) {\n      state.selectionManager.setFocusedKey(null);\n    }\n  }, [shouldDisableFocus, state.selectionManager, node.key]);\n\n  return {\n    columnHeaderProps: {\n      ...mergeProps(\n        gridCellProps,\n        pressProps,\n        focusableProps,\n        descriptionProps,\n        // If the table is empty, make all column headers untabbable\n        shouldDisableFocus && {tabIndex: -1}\n      ),\n      role: 'columnheader',\n      id: getColumnHeaderId(state, node.key),\n      'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,\n      'aria-sort': ariaSort\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useTableColumnHeader.module.js.map"}

package/dist/useTableColumnResize.main.js

@@ -0,0 +1,216 @@
+var $6acf696f746f932c$exports = require("./utils.main.js");
+var $7ff3f66df3873a5e$exports = require("./intlStrings.main.js");
+var $gDW2h$react = require("react");
+var $gDW2h$reactariafocus = require("@react-aria/focus");
+var $gDW2h$reactariautils = require("@react-aria/utils");
+var $gDW2h$reactariainteractions = require("@react-aria/interactions");
+var $gDW2h$reactariai18n = require("@react-aria/i18n");
+var $gDW2h$reactariavisuallyhidden = require("@react-aria/visually-hidden");
+
+
+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, "useTableColumnResize", () => $16d645f9e2153641$export$52994e973806c219);
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
+    let { column: item, triggerRef: triggerRef, isDisabled: isDisabled, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, 'aria-label': ariaLabel } = props;
+    const stringFormatter = (0, $gDW2h$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($7ff3f66df3873a5e$exports))), '@react-aria/table');
+    let id = (0, $gDW2h$reactariautils.useId)();
+    let isResizing = state.resizingColumn === item.key;
+    let isResizingRef = (0, $gDW2h$react.useRef)(isResizing);
+    let lastSize = (0, $gDW2h$react.useRef)(null);
+    let wasFocusedOnResizeStart = (0, $gDW2h$react.useRef)(false);
+    let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
+    let { direction: direction } = (0, $gDW2h$reactariai18n.useLocale)();
+    let { keyboardProps: keyboardProps } = (0, $gDW2h$reactariainteractions.useKeyboard)({
+        onKeyDown: (e)=>{
+            if (editModeEnabled) {
+                if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
+                    e.preventDefault();
+                    endResize(item);
+                }
+            } else {
+                // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+                e.continuePropagation();
+                if (e.key === 'Enter') startResize(item);
+            }
+        }
+    });
+    let startResize = (0, $gDW2h$reactariautils.useEffectEvent)((item)=>{
+        if (!isResizingRef.current) {
+            lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+            state.startResize(item.key);
+            state.tableState.setKeyboardNavigationDisabled(true);
+            onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(lastSize.current);
+        }
+        isResizingRef.current = true;
+    });
+    let resize = (0, $gDW2h$reactariautils.useEffectEvent)((item, newWidth)=>{
+        let sizes = state.updateResizedColumns(item.key, newWidth);
+        onResize === null || onResize === void 0 ? void 0 : onResize(sizes);
+        lastSize.current = sizes;
+    });
+    let endResize = (0, $gDW2h$reactariautils.useEffectEvent)((item)=>{
+        if (isResizingRef.current) {
+            if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+            state.endResize();
+            state.tableState.setKeyboardNavigationDisabled(false);
+            onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
+            isResizingRef.current = false;
+            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && !wasFocusedOnResizeStart.current) // switch focus back to the column header unless the resizer was already focused when resizing started.
+            (0, $gDW2h$reactariafocus.focusSafely)(triggerRef.current);
+        }
+        lastSize.current = null;
+    });
+    const columnResizeWidthRef = (0, $gDW2h$react.useRef)(0);
+    const { moveProps: moveProps } = (0, $gDW2h$reactariainteractions.useMove)({
+        onMoveStart () {
+            columnResizeWidthRef.current = state.getColumnWidth(item.key);
+            startResize(item);
+        },
+        onMove (e) {
+            let { deltaX: deltaX, deltaY: deltaY, pointerType: pointerType } = e;
+            if (direction === 'rtl') deltaX *= -1;
+            if (pointerType === 'keyboard') {
+                if (deltaY !== 0 && deltaX === 0) deltaX = deltaY * -1;
+                deltaX *= 10;
+            }
+            // if moving up/down only, no need to resize
+            if (deltaX !== 0) {
+                columnResizeWidthRef.current += deltaX;
+                resize(item, columnResizeWidthRef.current);
+            }
+        },
+        onMoveEnd (e) {
+            let { pointerType: pointerType } = e;
+            columnResizeWidthRef.current = 0;
+            if (pointerType === 'mouse' || pointerType === 'touch' && wasFocusedOnResizeStart.current) endResize(item);
+        }
+    });
+    let onKeyDown = (0, $gDW2h$react.useCallback)((e)=>{
+        if (editModeEnabled) moveProps.onKeyDown(e);
+    }, [
+        editModeEnabled,
+        moveProps
+    ]);
+    let min = Math.floor(state.getColumnMinWidth(item.key));
+    let max = Math.floor(state.getColumnMaxWidth(item.key));
+    if (max === Infinity) max = Number.MAX_SAFE_INTEGER;
+    let value = Math.floor(state.getColumnWidth(item.key));
+    let modality = (0, $gDW2h$reactariainteractions.useInteractionModality)();
+    if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) modality = 'touch';
+    let description = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing ? stringFormatter.format('resizerDescription') : undefined;
+    let descriptionProps = (0, $gDW2h$reactariautils.useDescription)(description);
+    let ariaProps = {
+        'aria-label': ariaLabel,
+        'aria-orientation': 'horizontal',
+        'aria-labelledby': `${id} ${(0, $6acf696f746f932c$exports.getColumnHeaderId)(state.tableState, item.key)}`,
+        'aria-valuetext': stringFormatter.format('columnSize', {
+            value: value
+        }),
+        'type': 'range',
+        min: min,
+        max: max,
+        value: value,
+        ...descriptionProps
+    };
+    const focusInput = (0, $gDW2h$react.useCallback)(()=>{
+        if (ref.current) (0, $gDW2h$reactariafocus.focusSafely)(ref.current);
+    }, [
+        ref
+    ]);
+    let resizingColumn = state.resizingColumn;
+    let prevResizingColumn = (0, $gDW2h$react.useRef)(null);
+    (0, $gDW2h$react.useEffect)(()=>{
+        if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+            wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+            startResize(item);
+            // Delay focusing input until Android Chrome's delayed click after touchend happens: https://bugs.chromium.org/p/chromium/issues/detail?id=1150073
+            let timeout = setTimeout(()=>focusInput(), 0);
+            // VoiceOver on iOS has problems focusing the input from a menu.
+            let VOTimeout = setTimeout(focusInput, 400);
+            return ()=>{
+                clearTimeout(timeout);
+                clearTimeout(VOTimeout);
+            };
+        }
+        prevResizingColumn.current = resizingColumn;
+    }, [
+        resizingColumn,
+        item,
+        focusInput,
+        ref,
+        startResize
+    ]);
+    let onChange = (e)=>{
+        let currentWidth = state.getColumnWidth(item.key);
+        let nextValue = parseFloat(e.target.value);
+        if (nextValue > currentWidth) nextValue = currentWidth + 10;
+        else nextValue = currentWidth - 10;
+        resize(item, nextValue);
+    };
+    let { pressProps: pressProps } = (0, $gDW2h$reactariainteractions.usePress)({
+        onPressStart: (e)=>{
+            if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') return;
+            if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+                endResize(item);
+                return;
+            }
+            // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+            // can cancel resize mode for us.
+            focusInput();
+            // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+            // to handle a virtual click to start the resizer.
+            if (e.pointerType !== 'virtual') startResize(item);
+        },
+        onPress: (e)=>{
+            if ((e.pointerType === 'touch' && wasFocusedOnResizeStart.current || e.pointerType === 'mouse') && state.resizingColumn != null) endResize(item);
+        }
+    });
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $gDW2h$reactariavisuallyhidden.useVisuallyHidden)();
+    return {
+        resizerProps: (0, $gDW2h$reactariautils.mergeProps)(keyboardProps, {
+            ...moveProps,
+            onKeyDown: onKeyDown
+        }, pressProps, {
+            style: {
+                touchAction: 'none'
+            }
+        }),
+        inputProps: (0, $gDW2h$reactariautils.mergeProps)(visuallyHiddenProps, {
+            id: id,
+            onBlur: ()=>{
+                endResize(item);
+            },
+            onChange: onChange,
+            disabled: isDisabled
+        }, ariaProps),
+        isResizing: isResizing
+    };
+}
+
+
+//# sourceMappingURL=useTableColumnResize.main.js.map

package/dist/useTableColumnResize.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/table/src/useTableColumnResize.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ChangeEvent, useCallback, useEffect, useRef} from 'react';\nimport {ColumnSize} from '@react-types/table';\nimport {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';\nimport {focusSafely} from '@react-aria/focus';\nimport {getColumnHeaderId} from './utils';\nimport {GridNode} from '@react-types/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils';\nimport {TableColumnResizeState} from '@react-stately/table';\nimport {useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface TableColumnResizeAria {\n  /** Props for the visually hidden input element. */\n  inputProps: DOMAttributes,\n  /** Props for the resizer element. */\n  resizerProps: DOMAttributes,\n  /** Whether this column is currently being resized. */\n  isResizing: boolean\n}\n\nexport interface AriaTableColumnResizeProps<T> {\n  /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */\n  column: GridNode<T>,\n  /** Aria label for the hidden input. Gets read when resizing. */\n  'aria-label': string,\n  /**\n   * Ref to the trigger if resizing was started from a column header menu. If it's provided,\n   * focus will be returned there when resizing is done. If it isn't provided, it is assumed that the resizer is\n   * visible at all time and keyboard resizing is started via pressing Enter on the resizer and not on focus.\n   * */\n  triggerRef?: RefObject<FocusableElement | null>,\n  /** If resizing is disabled. */\n  isDisabled?: boolean,\n  /** Called when resizing starts. */\n  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,\n  /** Called for every resize event that results in new column sizes. */\n  onResize?: (widths: Map<Key, ColumnSize>) => void,\n  /** Called when resizing ends. */\n  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void\n}\n\n/**\n * Provides the behavior and accessibility implementation for a table column resizer element.\n * @param props - Props for the resizer.\n * @param state - State for the table's resizable columns, as returned by `useTableColumnResizeState`.\n * @param ref - The ref attached to the resizer's visually hidden input element.\n */\nexport function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement | null>): TableColumnResizeAria {\n  let {column: item, triggerRef, isDisabled, onResizeStart, onResize, onResizeEnd, 'aria-label': ariaLabel} = props;\n  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');\n  let id = useId();\n  let isResizing = state.resizingColumn === item.key;\n  let isResizingRef = useRef(isResizing);\n  let lastSize = useRef(null);\n  let wasFocusedOnResizeStart = useRef(false);\n  let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;\n\n  let {direction} = useLocale();\n  let {keyboardProps} = useKeyboard({\n    onKeyDown: (e) => {\n      if (editModeEnabled) {\n        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {\n          e.preventDefault();\n          endResize(item);\n        }\n      } else {\n        // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there\n        e.continuePropagation();\n\n        if (e.key === 'Enter') {\n          startResize(item);\n        }\n      }\n    }\n  });\n\n  let startResize = useEffectEvent((item) => {\n    if (!isResizingRef.current) {\n      lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));\n      state.startResize(item.key);\n      state.tableState.setKeyboardNavigationDisabled(true);\n      onResizeStart?.(lastSize.current);\n    }\n    isResizingRef.current = true;\n  });\n\n  let resize = useEffectEvent((item, newWidth) => {\n    let sizes = state.updateResizedColumns(item.key, newWidth);\n    onResize?.(sizes);\n    lastSize.current = sizes;\n  });\n\n  let endResize = useEffectEvent((item) => {\n    if (isResizingRef.current) {\n      if (lastSize.current == null) {\n        lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));\n      }\n\n      state.endResize();\n      state.tableState.setKeyboardNavigationDisabled(false);\n      onResizeEnd?.(lastSize.current);\n      isResizingRef.current = false;\n\n      if (triggerRef?.current && !wasFocusedOnResizeStart.current) {\n        // switch focus back to the column header unless the resizer was already focused when resizing started.\n        focusSafely(triggerRef.current);\n      }\n    }\n    lastSize.current = null;\n  });\n\n  const columnResizeWidthRef = useRef<number>(0);\n  const {moveProps} = useMove({\n    onMoveStart() {\n      columnResizeWidthRef.current = state.getColumnWidth(item.key);\n      startResize(item);\n    },\n    onMove(e) {\n      let {deltaX, deltaY, pointerType} = e;\n      if (direction === 'rtl') {\n        deltaX *= -1;\n      }\n      if (pointerType === 'keyboard') {\n        if (deltaY !== 0 && deltaX === 0) {\n          deltaX = deltaY * -1;\n        }\n        deltaX *= 10;\n      }\n      // if moving up/down only, no need to resize\n      if (deltaX !== 0) {\n        columnResizeWidthRef.current += deltaX;\n        resize(item, columnResizeWidthRef.current);\n      }\n    },\n    onMoveEnd(e) {\n      let {pointerType} = e;\n      columnResizeWidthRef.current = 0;\n      if (pointerType === 'mouse' || (pointerType === 'touch' && wasFocusedOnResizeStart.current)) {\n        endResize(item);\n      }\n    }\n  });\n\n  let onKeyDown = useCallback((e) => {\n    if (editModeEnabled) {\n      moveProps.onKeyDown(e);\n    }\n  }, [editModeEnabled, moveProps]);\n\n\n  let min = Math.floor(state.getColumnMinWidth(item.key));\n  let max = Math.floor(state.getColumnMaxWidth(item.key));\n  if (max === Infinity) {\n    max = Number.MAX_SAFE_INTEGER;\n  }\n  let value = Math.floor(state.getColumnWidth(item.key));\n  let modality: string = useInteractionModality();\n  if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {\n    modality = 'touch';\n  }\n  let description = triggerRef?.current == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing ? stringFormatter.format('resizerDescription') : undefined;\n  let descriptionProps = useDescription(description);\n  let ariaProps = {\n    'aria-label': ariaLabel,\n    'aria-orientation': 'horizontal' as 'horizontal',\n    'aria-labelledby': `${id} ${getColumnHeaderId(state.tableState, item.key)}`,\n    'aria-valuetext': stringFormatter.format('columnSize', {value}),\n    'type': 'range',\n    min,\n    max,\n    value,\n    ...descriptionProps\n  };\n\n  const focusInput = useCallback(() => {\n    if (ref.current) {\n      focusSafely(ref.current);\n    }\n  }, [ref]);\n\n  let resizingColumn = state.resizingColumn;\n  let prevResizingColumn = useRef(null);\n  useEffect(() => {\n    if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {\n      wasFocusedOnResizeStart.current = document.activeElement === ref.current;\n      startResize(item);\n      // Delay focusing input until Android Chrome's delayed click after touchend happens: https://bugs.chromium.org/p/chromium/issues/detail?id=1150073\n      let timeout = setTimeout(() => focusInput(), 0);\n      // VoiceOver on iOS has problems focusing the input from a menu.\n      let VOTimeout = setTimeout(focusInput, 400);\n      return () => {\n        clearTimeout(timeout);\n        clearTimeout(VOTimeout);\n      };\n    }\n    prevResizingColumn.current = resizingColumn;\n  }, [resizingColumn, item, focusInput, ref, startResize]);\n\n  let onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    let currentWidth = state.getColumnWidth(item.key);\n    let nextValue = parseFloat(e.target.value);\n\n    if (nextValue > currentWidth) {\n      nextValue = currentWidth + 10;\n    } else {\n      nextValue = currentWidth - 10;\n    }\n    resize(item, nextValue);\n  };\n\n  let {pressProps} = usePress({\n    onPressStart: (e) => {\n      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') {\n        return;\n      }\n      if (e.pointerType === 'virtual' && state.resizingColumn != null) {\n        endResize(item);\n        return;\n      }\n\n      // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away\n      // can cancel resize mode for us.\n      focusInput();\n\n      // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need\n      // to handle a virtual click to start the resizer.\n      if (e.pointerType !== 'virtual') {\n        startResize(item);\n      }\n    },\n    onPress: (e) => {\n      if (((e.pointerType === 'touch' && wasFocusedOnResizeStart.current) || e.pointerType === 'mouse') && state.resizingColumn != null) {\n        endResize(item);\n      }\n    }\n  });\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  return {\n    resizerProps: mergeProps(\n      keyboardProps,\n      {...moveProps, onKeyDown},\n      pressProps,\n      {style: {touchAction: 'none'}}\n    ),\n    inputProps: mergeProps(\n      visuallyHiddenProps,\n      {\n        id,\n        onBlur: () => {\n          endResize(item);\n        },\n        onChange,\n        disabled: isDisabled\n      },\n      ariaProps\n    ),\n    isResizing\n  };\n}\n"],"names":[],"version":3,"file":"useTableColumnResize.main.js.map"}

package/dist/useTableColumnResize.mjs

@@ -0,0 +1,211 @@
+import {getColumnHeaderId as $2140fb2337097f2d$export$37cd4213f2ad742e} from "./utils.mjs";
+import $d9Rqy$intlStringsmodulejs from "./intlStrings.mjs";
+import {useRef as $d9Rqy$useRef, useCallback as $d9Rqy$useCallback, useEffect as $d9Rqy$useEffect} from "react";
+import {focusSafely as $d9Rqy$focusSafely} from "@react-aria/focus";
+import {useId as $d9Rqy$useId, useEffectEvent as $d9Rqy$useEffectEvent, useDescription as $d9Rqy$useDescription, mergeProps as $d9Rqy$mergeProps} from "@react-aria/utils";
+import {useKeyboard as $d9Rqy$useKeyboard, useMove as $d9Rqy$useMove, useInteractionModality as $d9Rqy$useInteractionModality, usePress as $d9Rqy$usePress} from "@react-aria/interactions";
+import {useLocalizedStringFormatter as $d9Rqy$useLocalizedStringFormatter, useLocale as $d9Rqy$useLocale} from "@react-aria/i18n";
+import {useVisuallyHidden as $d9Rqy$useVisuallyHidden} from "@react-aria/visually-hidden";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
+    let { column: item, triggerRef: triggerRef, isDisabled: isDisabled, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, 'aria-label': ariaLabel } = props;
+    const stringFormatter = (0, $d9Rqy$useLocalizedStringFormatter)((0, ($parcel$interopDefault($d9Rqy$intlStringsmodulejs))), '@react-aria/table');
+    let id = (0, $d9Rqy$useId)();
+    let isResizing = state.resizingColumn === item.key;
+    let isResizingRef = (0, $d9Rqy$useRef)(isResizing);
+    let lastSize = (0, $d9Rqy$useRef)(null);
+    let wasFocusedOnResizeStart = (0, $d9Rqy$useRef)(false);
+    let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
+    let { direction: direction } = (0, $d9Rqy$useLocale)();
+    let { keyboardProps: keyboardProps } = (0, $d9Rqy$useKeyboard)({
+        onKeyDown: (e)=>{
+            if (editModeEnabled) {
+                if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
+                    e.preventDefault();
+                    endResize(item);
+                }
+            } else {
+                // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+                e.continuePropagation();
+                if (e.key === 'Enter') startResize(item);
+            }
+        }
+    });
+    let startResize = (0, $d9Rqy$useEffectEvent)((item)=>{
+        if (!isResizingRef.current) {
+            lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+            state.startResize(item.key);
+            state.tableState.setKeyboardNavigationDisabled(true);
+            onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(lastSize.current);
+        }
+        isResizingRef.current = true;
+    });
+    let resize = (0, $d9Rqy$useEffectEvent)((item, newWidth)=>{
+        let sizes = state.updateResizedColumns(item.key, newWidth);
+        onResize === null || onResize === void 0 ? void 0 : onResize(sizes);
+        lastSize.current = sizes;
+    });
+    let endResize = (0, $d9Rqy$useEffectEvent)((item)=>{
+        if (isResizingRef.current) {
+            if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+            state.endResize();
+            state.tableState.setKeyboardNavigationDisabled(false);
+            onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
+            isResizingRef.current = false;
+            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && !wasFocusedOnResizeStart.current) // switch focus back to the column header unless the resizer was already focused when resizing started.
+            (0, $d9Rqy$focusSafely)(triggerRef.current);
+        }
+        lastSize.current = null;
+    });
+    const columnResizeWidthRef = (0, $d9Rqy$useRef)(0);
+    const { moveProps: moveProps } = (0, $d9Rqy$useMove)({
+        onMoveStart () {
+            columnResizeWidthRef.current = state.getColumnWidth(item.key);
+            startResize(item);
+        },
+        onMove (e) {
+            let { deltaX: deltaX, deltaY: deltaY, pointerType: pointerType } = e;
+            if (direction === 'rtl') deltaX *= -1;
+            if (pointerType === 'keyboard') {
+                if (deltaY !== 0 && deltaX === 0) deltaX = deltaY * -1;
+                deltaX *= 10;
+            }
+            // if moving up/down only, no need to resize
+            if (deltaX !== 0) {
+                columnResizeWidthRef.current += deltaX;
+                resize(item, columnResizeWidthRef.current);
+            }
+        },
+        onMoveEnd (e) {
+            let { pointerType: pointerType } = e;
+            columnResizeWidthRef.current = 0;
+            if (pointerType === 'mouse' || pointerType === 'touch' && wasFocusedOnResizeStart.current) endResize(item);
+        }
+    });
+    let onKeyDown = (0, $d9Rqy$useCallback)((e)=>{
+        if (editModeEnabled) moveProps.onKeyDown(e);
+    }, [
+        editModeEnabled,
+        moveProps
+    ]);
+    let min = Math.floor(state.getColumnMinWidth(item.key));
+    let max = Math.floor(state.getColumnMaxWidth(item.key));
+    if (max === Infinity) max = Number.MAX_SAFE_INTEGER;
+    let value = Math.floor(state.getColumnWidth(item.key));
+    let modality = (0, $d9Rqy$useInteractionModality)();
+    if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) modality = 'touch';
+    let description = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing ? stringFormatter.format('resizerDescription') : undefined;
+    let descriptionProps = (0, $d9Rqy$useDescription)(description);
+    let ariaProps = {
+        'aria-label': ariaLabel,
+        'aria-orientation': 'horizontal',
+        'aria-labelledby': `${id} ${(0, $2140fb2337097f2d$export$37cd4213f2ad742e)(state.tableState, item.key)}`,
+        'aria-valuetext': stringFormatter.format('columnSize', {
+            value: value
+        }),
+        'type': 'range',
+        min: min,
+        max: max,
+        value: value,
+        ...descriptionProps
+    };
+    const focusInput = (0, $d9Rqy$useCallback)(()=>{
+        if (ref.current) (0, $d9Rqy$focusSafely)(ref.current);
+    }, [
+        ref
+    ]);
+    let resizingColumn = state.resizingColumn;
+    let prevResizingColumn = (0, $d9Rqy$useRef)(null);
+    (0, $d9Rqy$useEffect)(()=>{
+        if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+            wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+            startResize(item);
+            // Delay focusing input until Android Chrome's delayed click after touchend happens: https://bugs.chromium.org/p/chromium/issues/detail?id=1150073
+            let timeout = setTimeout(()=>focusInput(), 0);
+            // VoiceOver on iOS has problems focusing the input from a menu.
+            let VOTimeout = setTimeout(focusInput, 400);
+            return ()=>{
+                clearTimeout(timeout);
+                clearTimeout(VOTimeout);
+            };
+        }
+        prevResizingColumn.current = resizingColumn;
+    }, [
+        resizingColumn,
+        item,
+        focusInput,
+        ref,
+        startResize
+    ]);
+    let onChange = (e)=>{
+        let currentWidth = state.getColumnWidth(item.key);
+        let nextValue = parseFloat(e.target.value);
+        if (nextValue > currentWidth) nextValue = currentWidth + 10;
+        else nextValue = currentWidth - 10;
+        resize(item, nextValue);
+    };
+    let { pressProps: pressProps } = (0, $d9Rqy$usePress)({
+        onPressStart: (e)=>{
+            if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') return;
+            if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+                endResize(item);
+                return;
+            }
+            // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+            // can cancel resize mode for us.
+            focusInput();
+            // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+            // to handle a virtual click to start the resizer.
+            if (e.pointerType !== 'virtual') startResize(item);
+        },
+        onPress: (e)=>{
+            if ((e.pointerType === 'touch' && wasFocusedOnResizeStart.current || e.pointerType === 'mouse') && state.resizingColumn != null) endResize(item);
+        }
+    });
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $d9Rqy$useVisuallyHidden)();
+    return {
+        resizerProps: (0, $d9Rqy$mergeProps)(keyboardProps, {
+            ...moveProps,
+            onKeyDown: onKeyDown
+        }, pressProps, {
+            style: {
+                touchAction: 'none'
+            }
+        }),
+        inputProps: (0, $d9Rqy$mergeProps)(visuallyHiddenProps, {
+            id: id,
+            onBlur: ()=>{
+                endResize(item);
+            },
+            onChange: onChange,
+            disabled: isDisabled
+        }, ariaProps),
+        isResizing: isResizing
+    };
+}
+
+
+export {$e91ef4e5004e3774$export$52994e973806c219 as useTableColumnResize};
+//# sourceMappingURL=useTableColumnResize.module.js.map