Custom resize cursors (#3535)

Custom resizer cursors and menu chevrons

Author: snowystinger

package.json

@@ -66,9 +66,11 @@
     "@octokit/rest": "*",
     "@parcel/bundler-experimental": "^2.2.1",
     "@parcel/optimizer-css": "^2.2.1",
+    "@parcel/optimizer-data-url": "^2.2.1",
     "@parcel/packager-ts": "^2.2.1",
     "@parcel/resolver-glob": "^2.2.1",
     "@parcel/transformer-inline": "^2.2.1",
+    "@parcel/transformer-inline-string": "^2.2.1",
     "@parcel/transformer-svg-react": "^2.2.1",
     "@parcel/transformer-typescript-types": "^2.2.1",
     "@spectrum-css/component-builder": "^1.0.0",
@@ -173,6 +175,8 @@
   "resolutions": {
     "@babel/core": "7.12.10",
     "@babel/runtime": "7.12.5",
+    "@parcel/optimizer-data-url": "2.2.1",
+    "@parcel/transformer-inline-string": "2.2.1",
     "postcss-calc": "6.0.2",
     "jsdom": "16.7.0",
     "postcss-modules": "^3.2.2",

packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg

@@ -32,14 +32,23 @@ governing permissions and limitations under the License.
 svg.spectrum-Table-sortedIcon {
   display: none;
   flex: 0 0 auto;
-  margin-inline-start: var(--spectrum-table-header-sort-icon-gap);
+  margin-inline-end: var(--spectrum-table-header-sort-icon-gap);
   min-inline-size: var(--spectrum-icon-arrow-down-small-width);
 
   vertical-align: middle;
 
   transition: transform var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
+.spectrum-Table-menuChevron {
+  display: none;
+  flex: 0 0 auto;
+  margin-inline-start: var(--spectrum-table-header-sort-icon-gap);
+  min-inline-size: var(--spectrum-icon-chevron-down-medium-width);
+
+  vertical-align: middle;
+}
+
 .spectrum-Table-headWrapper {
   border-left-width: 1px;
   border-left-style: solid;
@@ -104,6 +113,12 @@ svg.spectrum-Table-sortedIcon {
       text-overflow: ellipsis;
     }
   }
+  .is-hovered,
+  &.focus-ring {
+    .spectrum-Table-menuChevron {
+      display: inline-block;
+    }
+  }
 }
 
 .spectrum-Table-columnResizer {
@@ -282,6 +297,18 @@ svg.spectrum-Table-sortedIcon {
     }
   }
 }
+.spectrum-Table-headCellButton {
+  display: flex;
+  align-items: center;
+}
+
+.spectrum-Table-headerCellText {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 .spectrum-Table-headCell,
 .spectrum-Table-headCellButton {
@@ -453,12 +480,15 @@ svg.spectrum-Table-sortedIcon {
   }
 }
 
-.resize-ew * {
-  cursor: col-resize !important;
+.resize-ew *,
+.spectrum-Table-columnResizer--ewresize {
+  cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important;
 }
-.resize-e * {
-  cursor: e-resize !important;
+.resize-e *,
+.spectrum-Table-columnResizer--eresize {
+  cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important;
 }
-.resize-w * {
-  cursor: w-resize !important;
+.resize-w *,
+.spectrum-Table-columnResizer--wresize {
+  cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important;
 }

packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg

@@ -58,21 +58,24 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
     display: showResizer ? undefined : 'none',
     touchAction: 'none'
   };
-  if (columnState.getColumnMinWidth(column.key) >= columnState.getColumnWidth(column.key)) {
-    style.cursor = direction === 'rtl' ? 'w-resize' : 'e-resize';
-  } else if (columnState.getColumnMaxWidth(column.key) <= columnState.getColumnWidth(column.key)) {
-    style.cursor = direction === 'rtl' ? 'e-resize' : 'w-resize';
-  } else {
-    style.cursor = 'col-resize';
-  }
+  let isEResizable = columnState.getColumnMinWidth(column.key) >= columnState.getColumnWidth(column.key);
+  let isWResizable = columnState.getColumnMaxWidth(column.key) <= columnState.getColumnWidth(column.key);
 
   return (
     <>
       <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
         <div
           role="presentation"
           style={style}
-          className={classNames(styles, 'spectrum-Table-columnResizer')}
+          className={classNames(
+            styles,
+            'spectrum-Table-columnResizer',
+            {
+              'spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable),
+              'spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable,
+              'spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable
+            }
+          )}
           {...resizerProps}>
           <VisuallyHidden>
             <input

packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg

@@ -13,6 +13,7 @@
 import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
 import {chain, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {Checkbox} from '@react-spectrum/checkbox';
+import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
 import {classNames, useDOMRef, useFocusableRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DOMRef, FocusableRef, MoveMoveEvent} from '@react-types/shared';
 import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
@@ -569,13 +570,13 @@ function TableColumnHeader(props) {
             )
           )
         }>
+        {columnProps.allowsSorting &&
+          <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
+        }
         {columnProps.hideHeader ?
           <VisuallyHidden>{column.rendered}</VisuallyHidden> :
           <div className={classNames(styles, 'spectrum-Table-headCellContents')}>{column.rendered}</div>
         }
-        {columnProps.allowsSorting &&
-          <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
-        }
       </div>
     </FocusRing>
   );
@@ -586,8 +587,9 @@ let _TableColumnHeaderButton = (props, ref: FocusableRef<HTMLDivElement>) => {
   let {isEmpty} = useTableContext();
   let domRef = useFocusableRef(ref);
   let {buttonProps} = useButton({...otherProps, elementType: 'div', isDisabled: isEmpty}, domRef);
+  let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: isEmpty});
   return (
-    <div className={classNames(styles, 'spectrum-Table-headCellContents')}>
+    <div className={classNames(styles, 'spectrum-Table-headCellContents', {'is-hovered': isHovered})} {...hoverProps}>
       <div className={classNames(styles, 'spectrum-Table-headCellButton')} {...mergeProps(buttonProps, focusProps)} ref={domRef}>{props.children}</div>
     </div>
   );
@@ -607,9 +609,10 @@ function ResizableTableColumnHeader(props) {
     isVirtualized: true,
     hasMenu: true
   }, state, ref);
+
   let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
 
-  const allProps = [columnHeaderProps, hoverProps, pressProps];
+  const allProps = [columnHeaderProps, pressProps, hoverProps];
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
@@ -697,12 +700,15 @@ function ResizableTableColumnHeader(props) {
         }>
         <MenuTrigger>
           <TableColumnHeaderButton ref={triggerRef} focusProps={focusProps}>
+            {columnProps.allowsSorting &&
+              <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
+            }
             {columnProps.hideHeader ?
               <VisuallyHidden>{column.rendered}</VisuallyHidden> :
-              column.rendered
+              <div className={classNames(styles, 'spectrum-Table-headerCellText')}>{column.rendered}</div>
             }
-            {columnProps.allowsSorting &&
-              <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
+            {
+              columnProps.allowsResizing && columnState.currentlyResizingColumn === null && <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Table-menuChevron')} />
             }
           </TableColumnHeaderButton>
           <Menu onAction={onMenuSelect} minWidth="size-2000" items={items}>

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -54,6 +54,9 @@ module.exports = new Namer({
       let bundleGroup = bundleGraph.getBundleGroupsContainingBundle(bundle)[0];
       let bundleGroupBundles = bundleGraph.getBundlesInBundleGroup(bundleGroup);
       let mainBundle =  bundleGroupBundles.find(b => b.getEntryAssets().some(a => a.id === bundleGroup.entryAssetId));
+      if (!mainBundle) {
+        return null;
+      }
       let entry = mainBundle.getEntryAssets().find(a => a.id === bundleGroup.entryAssetId).filePath;
       return path.basename(entry, path.extname(entry)) + '.' + bundle.hashReference + '.' + bundle.type;
     } else {

packages/@react-spectrum/table/src/Resizer.tsx

@@ -2810,6 +2810,16 @@
     cssnano "^5.0.15"
     postcss "^8.4.5"
 
+"@parcel/[email protected]", "@parcel/optimizer-data-url@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-data-url/-/optimizer-data-url-2.2.1.tgz#69e2bc7bb5164a82d9044a26758464a12c76e993"
+  integrity sha512-e1gbnGpc2wKGUmXEMXK8FfPGBjE1Ols3CQe06FUzq5dxocctcoEBdZas/cBew+b5LmuHqzTv4rYNWMqQnr7Izw==
+  dependencies:
+    "@parcel/plugin" "^2.2.1"
+    "@parcel/utils" "^2.2.1"
+    isbinaryfile "^4.0.2"
+    mime "^2.4.4"
+
 "@parcel/optimizer-htmlnano@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.2.1.tgz#781267e8b72033abc500e16ca032d24d56d7f2ce"
@@ -3089,6 +3099,13 @@
     "@parcel/workers" "^2.2.1"
     nullthrows "^1.1.1"
 
+"@parcel/[email protected]", "@parcel/transformer-inline-string@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-inline-string/-/transformer-inline-string-2.2.1.tgz#a80a8a0221803b863e103340ea2e3b6546de14f3"
+  integrity sha512-yHhKmYEEyg3D5FfAz/yv+U4Ml6MPJvYfEgFowfeCTG2cJ9g7jVwsB66nAwOR1IP+MJh9ODmzf5OSjdR9MX6lYQ==
+  dependencies:
+    "@parcel/plugin" "^2.2.1"
+
 "@parcel/transformer-inline@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@parcel/transformer-inline/-/transformer-inline-2.2.1.tgz#626cea8c83ae0b8ae9e4070f9aa9255ac1273f86"
@@ -12625,6 +12642,11 @@ isbinaryfile@^4.0.1:
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.2.tgz#bfc45642da645681c610cca831022e30af426488"
   integrity sha512-C3FSxJdNrEr2F4z6uFtNzECDM5hXk+46fxaa+cwBe5/XrWSmzdG8DDgyjfX6/NRdBB21q2JXuRAzPCUs+fclnQ==
 
+isbinaryfile@^4.0.2:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
+  integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"