Separate Menu and ListBox into different components

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

@@ -121,7 +121,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Menu-checkmark {
   display: none;
-  align-self: flex-start;
+  align-self: center;
+  grid-area: checkmark;
 }
 
 .spectrum-Menu-divider {
@@ -155,26 +156,25 @@ governing permissions and limitations under the License.
 .spectrum-Menu .spectrum-Menu {
   /* Fill parent menu when nested */
   display: block;
+  margin: 0;
 }
 
 .spectrum-Menu-itemGrid {
   display: grid;
-  grid-template-columns: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-selectlist-border-size-key-focus)) auto 1fr auto auto var(--spectrum-selectlist-option-padding);
+  grid-template-columns: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-selectlist-border-size-key-focus)) auto 1fr auto auto auto var(--spectrum-selectlist-option-padding);
   grid-template-rows: var(--spectrum-selectlist-option-padding-y) 1fr auto var(--spectrum-selectlist-option-padding-y);
   grid-template-areas:
-    ". .    .           .     .            ."
-    ". icon text        end   keyboard     ."
-    ". icon description end   keyboard     ."
-    ". .    .           .     .            .";
+    ". .    .            .         .     .            ."
+    ". icon text         checkmark end   keyboard     ."
+    ". icon description  checkmark end   keyboard     ."
+    ". .    .            .         .     .            .";
 }
 
 /* Added .spectrum-Menu so paddings from component styles are overriden */
 .spectrum-Menu .spectrum-Menu-end {
   grid-area: end;
   justify-self: end;
   align-self: center;
-  margin-inline-end: 0px;
-  margin-inline-start: 0px;
 }
 .spectrum-Menu-icon {
   grid-area: icon;

packages/@react-aria/button/src/useButtonGroup.ts

@@ -49,7 +49,7 @@ export function useButtonGroup(props: ButtonGroupProps, state: ButtonGroupState)
   let {direction} = useLocale();
   let keyboardDelegate = useMemo(() => new ButtonGroupKeyboardDelegate(state.buttonCollection, direction, orientation), [state.buttonCollection, direction, orientation]);
 
-  let {listProps} = useSelectableCollection({
+  let {collectionProps} = useSelectableCollection({
     selectionManager: state.selectionManager,
     keyboardDelegate
   });
@@ -68,7 +68,7 @@ export function useButtonGroup(props: ButtonGroupProps, state: ButtonGroupState)
       tabIndex: isDisabled ? null : tabIndex,
       'aria-orientation': orientation,
       'aria-disabled': isDisabled,
-      ...mergeProps(focusWithinProps, listProps)
+      ...mergeProps(focusWithinProps, collectionProps)
     },
     buttonProps: {
       role: BUTTON_ROLES[selectionMode]

packages/@react-aria/collections/src/useCollectionItem.ts

@@ -1,3 +1,15 @@
+/*
+ * 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.
+ */
+
 import {CollectionManager, LayoutInfo, Size} from '@react-stately/collections';
 import {RefObject, useCallback, useLayoutEffect} from 'react';
 

packages/@react-spectrum/menu/src/MenuDivider.tsx → packages/@react-aria/listbox/index.ts

@@ -3,25 +3,11 @@
  * 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 {Divider} from '@react-spectrum/divider';
-import React from 'react';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-
-export function MenuDivider() {
-  return (
-    <Divider 
-      size="M"
-      UNSAFE_className={classNames(
-        styles,
-        'spectrum-Menu-divider'
-      )} />
-  );
-}
+export * from './src';

packages/@react-aria/listbox/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@react-aria/listbox",
+  "version": "3.0.0-alpha.1",
+  "private": true,
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": ["dist"],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe-private/react-spectrum-v3"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/interactions": "^3.0.0-rc.1",
+    "@react-aria/selection": "^3.0.0-alpha.1",
+    "@react-aria/utils": "^3.0.0-rc.1",
+    "@react-stately/list": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-spectrum/menu/src/MenuHeading.tsx → packages/@react-aria/listbox/src/index.ts

@@ -3,31 +3,13 @@
  * 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 {Heading} from '@react-spectrum/typography';
-import React from 'react';
-import {SpectrumMenuHeadingProps} from '@react-types/menu';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-
-export function MenuHeading<T>({item}: SpectrumMenuHeadingProps<T>) {
-  return (
-    <Heading
-      UNSAFE_className={
-        classNames(
-          styles, 
-          'spectrum-Menu-sectionHeading'
-        )
-      }
-      aria-level={3}
-      role="heading">
-      {item.rendered}
-    </Heading>
-  );
-}
+export * from './useListBox';
+export * from './useOption';
+export * from './useListBoxSection';

packages/@react-aria/listbox/src/useListBox.ts

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+import {HTMLAttributes} from 'react';
+import {ListState} from '@react-stately/list';
+import {useSelectableList} from '@react-aria/selection';
+
+interface ListBoxAria {
+  listBoxProps: HTMLAttributes<HTMLElement>
+}
+
+export function useListBox<T>(props, state: ListState<T>): ListBoxAria {
+  let {listProps} = useSelectableList({
+    ...props,
+    selectionManager: state.selectionManager,
+    collection: state.collection
+  });
+
+  return {
+    listBoxProps: {
+      role: 'listbox',
+      'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined,
+      ...listProps
+    }
+  };
+}

packages/@react-aria/listbox/src/useListBoxSection.ts

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+import {HTMLAttributes} from 'react';
+import {useId} from '@react-aria/utils';
+
+interface ListBoxSectionAria {
+  itemProps: HTMLAttributes<HTMLElement>,
+  headingProps: HTMLAttributes<HTMLElement>,
+  groupProps: HTMLAttributes<HTMLElement>
+}
+
+export function useListBoxSection(): ListBoxSectionAria {
+  let headingId = useId();
+
+  return {
+    itemProps: {
+      role: 'presentation'
+    },
+    headingProps: {
+      // Techincally, listbox cannot contain headings according to ARIA.
+      // We hide the heading from assistive technology, and only use it
+      // as a label for the nested group.
+      id: headingId,
+      'aria-hidden': true
+    },
+    groupProps: {
+      role: 'group',
+      'aria-labelledby': headingId
+    }
+  };
+}

packages/@react-aria/listbox/src/useOption.ts

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+import {HTMLAttributes, Key, RefObject} from 'react';
+import {ListState} from '@react-stately/list';
+import {usePress} from '@react-aria/interactions';
+import {useSelectableItem} from '@react-aria/selection';
+
+interface OptionProps {
+  isDisabled?: boolean,
+  isSelected?: boolean,
+  key?: Key,
+  ref?: RefObject<HTMLElement>,
+  isVirtualized?: boolean
+}
+
+interface OptionAria {
+  optionProps: HTMLAttributes<HTMLElement>
+}
+
+export function useOption<T>(props: OptionProps, state: ListState<T>): OptionAria {
+  let {
+    isSelected,
+    isDisabled,
+    key,
+    ref,
+    isVirtualized
+  } = props;
+
+  let optionProps = {
+    role: 'option',
+    'aria-disabled': isDisabled,
+    'aria-selected': isSelected
+  };
+
+  if (isVirtualized) {
+    optionProps['aria-posinset'] = state.collection.getItem(key).index;
+    optionProps['aria-setsize'] = state.collection.size;
+  }
+
+  let {itemProps} = useSelectableItem({
+    selectionManager: state.selectionManager,
+    itemKey: key,
+    itemRef: ref,
+    isVirtualized
+  });
+
+  let {pressProps} = usePress({...itemProps, isDisabled});
+
+  return {
+    optionProps: {
+      ...optionProps,
+      ...pressProps
+    }
+  };
+}

packages/@react-aria/menu/src/index.ts

@@ -13,3 +13,4 @@
 export * from './useMenuTrigger';
 export * from './useMenu';
 export * from './useMenuItem';
+export * from './useMenuSection';

packages/@react-aria/menu/src/useMenu.ts

@@ -10,62 +10,35 @@
  * governing permissions and limitations under the License.
  */
 
-import {AllHTMLAttributes} from 'react';
-import {ListLayout} from '@react-stately/collections';
+import {AllHTMLAttributes, RefObject} from 'react';
+import {KeyboardDelegate} from '@react-types/shared';
 import {MenuProps} from '@react-types/menu';
-import {Orientation} from '@react-types/shared';
 import {TreeState} from '@react-stately/tree';
-import {useId} from '@react-aria/utils';
-import {useSelectableCollection} from '@react-aria/selection';
+import {useSelectableList} from '@react-aria/selection';
 
 interface MenuAria {
-  menuProps: AllHTMLAttributes<HTMLElement>,
-  menuItemProps: AllHTMLAttributes<HTMLElement>
+  menuProps: AllHTMLAttributes<HTMLElement>
 }
 
 interface MenuState<T> extends TreeState<T> {}
 
-interface MenuLayout<T> extends ListLayout<T> {}
-
-export function useMenu<T>(props: MenuProps<T>, state: MenuState<T>, layout: MenuLayout<T>): MenuAria {
-  let {
-    'aria-orientation': ariaOrientation = 'vertical' as Orientation,
-    role = 'menu',
-    id,
-    selectionMode,
-    autoFocus,
-    wrapAround,
-    focusStrategy
-  } = props;
-
-  let menuId = useId(id);
+interface AriaMenuProps<T> extends MenuProps<T> {
+  ref?: RefObject<HTMLElement>,
+  isVirtualized?: boolean,
+  keyboardDelegate?: KeyboardDelegate
+}
 
-  let {listProps} = useSelectableCollection({
+export function useMenu<T>(props: AriaMenuProps<T>, state: MenuState<T>): MenuAria {
+  let {listProps} = useSelectableList({
+    ...props,
     selectionManager: state.selectionManager,
-    keyboardDelegate: layout,
-    autoFocus,
-    focusStrategy,
-    wrapAround
+    collection: state.collection
   });
 
-  let menuItemRole = 'menuitem';
-  if (role === 'listbox') {
-    menuItemRole = 'option';
-  } else if (selectionMode === 'single') {
-    menuItemRole = 'menuitemradio';
-  } else if (selectionMode === 'multiple') {
-    menuItemRole = 'menuitemcheckbox';
-  }
-
   return {
     menuProps: {
-      ...listProps,
-      id: menuId,
-      role,
-      'aria-orientation': ariaOrientation
-    },
-    menuItemProps: {
-      role: menuItemRole
+      role: 'menu',
+      ...listProps
     }
   };
 }