react-aria/dist/private/table/useTableColumnResize.mjs.map

Spectrum UI components in React

{"mappings":"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","sources":["packages/react-aria/src/table/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-stately/useTableState';\nimport {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';\nimport {focusSafely} from '../interactions/focusSafely';\nimport {getActiveElement, getEventTarget} from '../utils/shadowdom/DOMFunctions';\nimport {getColumnHeaderId} from './utils';\nimport {GridNode} from 'react-stately/private/grid/GridCollection';\nimport intlMessages from '../../intl/table/*.json';\nimport {mergeProps} from '../utils/mergeProps';\nimport {TableColumnResizeState} from 'react-stately/useTableState';\nimport {useDescription} from '../utils/useDescription';\nimport {useEffectEvent} from '../utils/useEffectEvent';\nimport {useId} from '../utils/useId';\nimport {useInteractionModality} from '../interactions/useFocusVisible';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useLocale} from '../i18n/I18nProvider';\n// @ts-ignore\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\nimport {useMove} from '../interactions/useMove';\nimport {usePress} from '../interactions/usePress';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\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  /**\n   * An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader).\n   * Contains all the relevant information that makes up the column header.\n   */\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, focus\n   * will be returned there when resizing is done. If it isn't provided, it is assumed that the\n   * resizer is visible at all time and keyboard resizing is started via pressing Enter on the\n   * 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 *\n * @param props - Props for the resizer.\n * @param state - State for the table's resizable columns, as returned by\n *   `useTableColumnResizeState`.\n * @param ref - The ref attached to the resizer's visually hidden input element.\n */\nexport function useTableColumnResize<T>(\n  props: AriaTableColumnResizeProps<T>,\n  state: TableColumnResizeState<T>,\n  ref: RefObject<HTMLInputElement | null>\n): TableColumnResizeAria {\n  let {\n    column: item,\n    triggerRef,\n    isDisabled,\n    onResizeStart,\n    onResize,\n    onResizeEnd,\n    'aria-label': ariaLabel\n  } = 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<Map<Key, ColumnSize> | null>(null);\n  let wasFocusedOnResizeStart = useRef(false);\n  let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;\n\n  let {direction} = useLocale();\n\n  let startResize = useCallback(\n    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    [state, onResizeStart]\n  );\n\n  let resize = useCallback(\n    (item, newWidth) => {\n      let sizes = state.updateResizedColumns(item.key, newWidth);\n      onResize?.(sizes);\n      lastSize.current = sizes;\n    },\n    [state, onResize]\n  );\n\n  let endResize = useCallback(\n    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    [state, triggerRef, onResizeEnd]\n  );\n\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  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(\n    e => {\n      if (editModeEnabled) {\n        moveProps.onKeyDown?.(e);\n      }\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 | null = useInteractionModality();\n  if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) {\n    modality = 'touch';\n  }\n  let description =\n    triggerRef?.current == null &&\n    (modality === 'keyboard' || modality === 'virtual') &&\n    !isResizing\n      ? stringFormatter.format('resizerDescription')\n      : 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<Key | null>(null);\n  let startResizeEvent = useEffectEvent(startResize);\n  useEffect(() => {\n    if (\n      prevResizingColumn.current !== resizingColumn &&\n      resizingColumn != null &&\n      resizingColumn === item.key\n    ) {\n      wasFocusedOnResizeStart.current = getActiveElement() === ref.current;\n      startResizeEvent(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]);\n\n  let onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    let currentWidth = state.getColumnWidth(item.key);\n    let nextValue = parseFloat(getEventTarget(e).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    preventFocusOnPress: true,\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 (\n        ((e.pointerType === 'touch' && wasFocusedOnResizeStart.current) ||\n          e.pointerType === 'mouse') &&\n        state.resizingColumn != null\n      ) {\n        endResize(item);\n      }\n    }\n  });\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  return {\n    resizerProps: mergeProps(keyboardProps, {...moveProps, onKeyDown}, 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.mjs.map"}