@react-spectrum/table 3.17.10 → 3.18.0

package/src/DragPreview.tsx

@@ -1,77 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-import {classNames} from '@react-spectrum/utils';
-import {Flex} from '@react-spectrum/layout';
-import React, {ReactNode} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
-import stylesOverrides from './table.css';
-
-interface DragPreviewProps {
-  itemText: string,
-  itemCount: number,
-  height: number,
-  maxWidth: number
-}
-
-export function DragPreview(props: DragPreviewProps): ReactNode {
-  let {
-    itemText,
-    itemCount,
-    height,
-    maxWidth
-  } = props;
-  let isDraggingMultiple = itemCount > 1;
-  return (
-    <Flex
-      justifyContent="space-between"
-      height={height}
-      maxWidth={maxWidth}
-      UNSAFE_className={
-        classNames(
-          styles,
-          'spectrum-Table-row',
-          classNames(
-            stylesOverrides,
-            'react-spectrum-Table-row',
-            'react-spectrum-Table-row-dragPreview',
-            {'react-spectrum-Table-row-dragPreview--multiple': isDraggingMultiple}
-          )
-        )
-      }>
-      <div
-        className={
-        classNames(
-          styles,
-          'spectrum-Table-cell',
-          classNames(
-            stylesOverrides,
-            'react-spectrum-Table-cell'
-          )
-        )
-      }>
-        <span
-          className={
-            classNames(
-              styles,
-              'spectrum-Table-cellContents'
-            )
-        }>
-          {itemText}
-        </span>
-      </div>
-      {isDraggingMultiple &&
-        <div className={classNames(stylesOverrides, 'react-spectrum-Table-row-badge')}>{itemCount}</div>
-      }
-    </Flex>
-  );
-}

package/src/InsertionIndicator.tsx

@@ -1,62 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-import {classNames} from '@react-spectrum/utils';
-import {FocusableElement, ItemDropTarget} from '@react-types/shared';
-import React, {DOMAttributes, HTMLAttributes, ReactNode, useRef} from 'react';
-import styles from './table.css';
-import {useTableContext} from './TableViewBase';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-interface InsertionIndicatorProps {
-  target: ItemDropTarget,
-  rowProps: HTMLAttributes<HTMLElement> & DOMAttributes<FocusableElement>
-}
-
-export function InsertionIndicator(props: InsertionIndicatorProps): ReactNode | null {
-  let {dropState, dragAndDropHooks} = useTableContext();
-  const {target, rowProps} = props;
-
-  let ref = useRef<HTMLDivElement | null>(null);
-  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);
-  let {visuallyHiddenProps} = useVisuallyHidden();
-
-  let isDropTarget = dropState!.isDropTarget(target);
-
-  if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
-    return null;
-  }
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: typeof rowProps.style?.top === 'number' && typeof rowProps.style?.height === 'number' ? rowProps.style.top + (target.dropPosition === 'after' ? rowProps.style.height : 0) : 0,
-        width: rowProps.style?.width
-      }}
-      role="row"
-      aria-hidden={dropIndicatorProps['aria-hidden']}>
-      <div
-        role="gridcell"
-        className={
-          classNames(
-            styles,
-            'react-spectrum-Table-InsertionIndicator',
-            {
-              'react-spectrum-Table-InsertionIndicator--dropTarget': isDropTarget
-            }
-        )}>
-        <div {...visuallyHiddenProps} role="button" {...dropIndicatorProps} ref={ref} />
-      </div>
-    </div>
-  );
-}

package/src/Nubbin.tsx

@@ -1,28 +0,0 @@
-/*
- * Copyright 2022 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.
- */
-
-import React, {ReactNode} from 'react';
-
-
-// TODO resize with scale? colors should be variables
-export function Nubbin(): ReactNode {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-      <g fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
-        <circle cx="8" cy="8" r="8" stroke="none" />
-        <circle cx="8" cy="8" r="7" fill="none" />
-      </g>
-      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
-      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
-    </svg>
-  );
-}

package/src/Resizer.tsx

@@ -1,137 +0,0 @@
-
-import {classNames} from '@react-spectrum/utils';
-import {ColumnSize} from '@react-types/table';
-import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg';
-import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg';
-import {FocusRing} from '@react-aria/focus';
-import {GridNode} from '@react-types/grid';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {isWebKit, mergeProps, useObjectRef} from '@react-aria/utils';
-import {Key, RefObject} from '@react-types/shared';
-import React, {createContext, ForwardedRef, useContext, useEffect, useState} from 'react';
-import ReactDOM from 'react-dom';
-import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
-import {TableColumnResizeState} from '@react-stately/table';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useTableColumnResize} from '@react-aria/table';
-import {useTableContext, useVirtualizerContext} from './TableViewBase';
-import {useUNSAFE_PortalContext} from '@react-aria/overlays';
-// @ts-ignore
-import wCursor from 'bundle-text:./cursors/Cur_MoveToLeft_9_9.svg';
-
-function getCursor(svg: string, fallback: string) {
-  // WebKit renders SVG cursors blurry on 2x screens: https://bugs.webkit.org/show_bug.cgi?id=160657
-  // To work around this, we generate two SVGs at different sizes and use image-set to pick between them.
-  // Only do this in WebKit to avoid Firefox rendering the cursor at twice the size.
-  if (isWebKit()) {
-    return `image-set(url("data:image/svg+xml,${encodeURIComponent(svg)}") 1x, url("data:image/svg+xml,${encodeURIComponent(svg.replace('width="32" height="32"', 'width="64" height="64"'))}") 2x) 8 8, ${fallback}`;
-  } else {
-    return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 8 8, ${fallback}`;
-  }
-}
-
-interface ResizerProps<T> {
-  column: GridNode<T>,
-  showResizer: boolean,
-  triggerRef: RefObject<HTMLDivElement | null>,
-  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
-  onResize?: (widths: Map<Key, ColumnSize>) => void,
-  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
-}
-
-const CURSORS = {
-  ew: getCursor(ewCursor, 'ew-resize'),
-  w: getCursor(wCursor, 'w-resize'),
-  e: getCursor(eCursor, 'e-resize')
-};
-
-export const ResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
-
-export const Resizer = React.forwardRef(function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
-  let {column, showResizer} = props;
-  let objectRef = useObjectRef(ref);
-  let {isEmpty, onFocusedResizer} = useTableContext();
-  let layout = useContext(ResizeStateContext)!;
-  // Virtualizer re-renders, but these components are all cached
-  // in order to get around that and cause a rerender here, we use context
-  // but we don't actually need any value, they are available on the layout object
-  useVirtualizerContext();
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/table');
-  let {direction} = useLocale();
-
-  let [isPointerDown, setIsPointerDown] = useState(false);
-  useEffect(() => {
-    let setDown = (e) => {
-      if (e.pointerType === 'mouse') {
-        setIsPointerDown(true);
-      }
-    };
-    let setUp = (e) => {
-      if (e.pointerType === 'mouse') {
-        setIsPointerDown(false);
-      }
-    };
-    document.addEventListener('pointerdown', setDown, {capture: true});
-    document.addEventListener('pointerup', setUp, {capture: true});
-    return () => {
-      document.removeEventListener('pointerdown', setDown, {capture: true});
-      document.removeEventListener('pointerup', setUp, {capture: true});
-    };
-  }, []);
-
-  let {inputProps, resizerProps} = useTableColumnResize<unknown>(
-    mergeProps(props, {
-      'aria-label': stringFormatter.format('columnResizer'),
-      isDisabled: isEmpty
-    }), layout, objectRef);
-
-  let isEResizable = layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key);
-  let isWResizable = layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key);
-  let isResizing = layout.resizingColumn === column.key;
-  let cursor = '';
-  if (isEResizable) {
-    cursor = direction === 'rtl' ? CURSORS.w : CURSORS.e;
-  } else if (isWResizable) {
-    cursor = direction === 'rtl' ? CURSORS.e : CURSORS.w;
-  } else {
-    cursor = CURSORS.ew;
-  }
-
-  let style = {
-    ...resizerProps.style,
-    height: '100%',
-    display: showResizer ? undefined : 'none',
-    cursor
-  };
-
-  return (
-    <>
-      <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
-        <div
-          {...resizerProps}
-          role="presentation"
-          style={style}
-          className={classNames(styles, 'spectrum-Table-columnResizer')}>
-          <input
-            ref={objectRef}
-            {...mergeProps(inputProps, {onFocus: onFocusedResizer})} />
-        </div>
-      </FocusRing>
-      {/* Placeholder so that the title doesn't intersect with space reserved by the resizer when it appears. */}
-      <div
-        aria-hidden
-        role="presentation"
-        className={classNames(styles, 'spectrum-Table-columnResizerPlaceholder')} />
-      <CursorOverlay show={isResizing && isPointerDown}>
-        <div style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor}} />
-      </CursorOverlay>
-    </>
-  );
-});
-
-function CursorOverlay(props) {
-  let {show, children} = props;
-  let {getContainer} = useUNSAFE_PortalContext();
-  return show ? ReactDOM.createPortal(children, getContainer?.() ?? document.body) : null;
-}

package/src/RootDropIndicator.tsx

@@ -1,40 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-import React, {ReactNode, useRef} from 'react';
-import {useTableContext} from './TableViewBase';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-export function RootDropIndicator(): ReactNode | null {
-  let {dropState, dragAndDropHooks, state} = useTableContext();
-  let ref = useRef<HTMLDivElement | null>(null);
-  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
-    target: {type: 'root'}
-  }, dropState!, ref);
-  let isDropTarget = dropState!.isDropTarget({type: 'root'});
-  let {visuallyHiddenProps} = useVisuallyHidden();
-
-  if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
-    return null;
-  }
-
-  return (
-    <div role="row" aria-hidden={dropIndicatorProps['aria-hidden']}>
-      <div
-        role="gridcell"
-        aria-selected="false"
-        aria-colspan={state.collection.columns.length}>
-        <div role="button" {...visuallyHiddenProps} {...dropIndicatorProps} ref={ref} />
-      </div>
-    </div>
-  );
-}

package/src/TableView.tsx

@@ -1,44 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-import {DOMRef} from '@react-types/shared';
-import React, {ReactElement, useState} from 'react';
-import {SpectrumTableProps} from './TableViewWrapper';
-import {TableViewBase} from './TableViewBase';
-import {useTableState} from '@react-stately/table';
-
-interface TableProps<T> extends Omit<SpectrumTableProps<T>, 'UNSTABLE_allowsExpandableRows'> {}
-
-export const TableView = React.forwardRef(function TableView<T extends object>(props: TableProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {
-    selectionStyle,
-    dragAndDropHooks
-  } = props;
-  let [showSelectionCheckboxes, setShowSelectionCheckboxes] = useState(selectionStyle !== 'highlight');
-  let isTableDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
-  let state = useTableState({
-    ...props,
-    showSelectionCheckboxes,
-    showDragButtons: isTableDraggable,
-    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
-  });
-
-  // If the selection behavior changes in state, we need to update showSelectionCheckboxes here due to the circular dependency...
-  let shouldShowCheckboxes = state.selectionManager.selectionBehavior !== 'replace';
-  if (shouldShowCheckboxes !== showSelectionCheckboxes) {
-    setShowSelectionCheckboxes(shouldShowCheckboxes);
-  }
-
-  return (
-    <TableViewBase {...props} state={state} ref={ref} />
-  );
-}) as <T>(props: TableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;