feat(listitembase): dynamic list support

.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
     'plugin:storybook/recommended',
     'prettier',
   ],
-  plugins: ['react', 'jsx-a11y', '@typescript-eslint'],
+  plugins: ['react', 'react-hooks', 'jsx-a11y', '@typescript-eslint'],
   ignorePatterns: ['**/src/app', '**/es', '**/dist', '**/docs', '**/*.d.ts'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -86,6 +86,7 @@ module.exports = {
         forbid: ['any'],
       },
     ],
+    'react-hooks/exhaustive-deps': 'warn',
     'react/jsx-boolean-value': 0,
     'react/jsx-closing-bracket-location': 0,
     'react/jsx-curly-spacing': 1,

package.json

@@ -92,6 +92,9 @@
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
   },
+  "resolutions": {
+    "@react-aria/button": "3.4.3"
+  },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
@@ -204,6 +207,7 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "7.12.2",
+    "eslint-plugin-react-hooks": "1.7.0",
     "eslint-plugin-storybook": "^0.5.5",
     "eslint-watch": "^6.0.0",
     "file-loader": "^1.1.6",

src/components/AriaToolbar/AriaToolbar.tsx

@@ -5,6 +5,7 @@ import { DEFAULTS, STYLE } from './AriaToolbar.constants';
 import { Props } from './AriaToolbar.types';
 import ButtonGroup from '../ButtonGroup';
 import { AriaToolbarContext } from './AriaToolbar.utils';
+import { getKeyboardFocusableElements } from '../../utils/navigation';
 
 /**
  * The AriaToolbar component. A style-less by default or button-group styled component implementing the Aria Toolbar pattern
@@ -29,6 +30,7 @@ const AriaToolbar: FC<Props> = (props: Props) => {
   const [currentFocus, setCurrentFocus] = useState(undefined);
 
   const buttonRefs = useRef({});
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     buttonRefs.current[currentFocus]?.focus();
@@ -59,15 +61,31 @@ const AriaToolbar: FC<Props> = (props: Props) => {
   const renderBody = () => {
     if (shouldRenderAsButtonGroup) {
       return (
-        <ButtonGroup {...buttonGroupProps} {...commonProps} orientation={orientation}>
+        <ButtonGroup ref={ref} {...buttonGroupProps} {...commonProps} orientation={orientation}>
           {children}
         </ButtonGroup>
       );
     } else {
-      return <div {...commonProps}>{children}</div>;
+      return (
+        <div ref={ref} {...commonProps}>
+          {children}
+        </div>
+      );
     }
   };
 
+  useEffect(() => {
+    // When the toolbar is rendered inside a list, only item in the toolbar
+    // should be focusable. This is the preserve the tab order as the
+    // List uses a roving tab index.
+    getKeyboardFocusableElements(ref.current, false).forEach((el, index) => {
+      if (index === 0) {
+        return;
+      }
+      el.setAttribute('data-exclude-focus', 'true');
+    });
+  }, [ref]);
+
   return (
     <AriaToolbarContext.Provider value={getContext()}>{renderBody()}</AriaToolbarContext.Provider>
   );

src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap

@@ -1154,11 +1154,13 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 1`
     />
     <button
       class="md-button-simple-wrapper"
+      data-exclude-focus="true"
       tabindex="-1"
       type="button"
     />
     <button
       class="md-button-simple-wrapper"
+      data-exclude-focus="true"
       tabindex="-1"
       type="button"
     />
@@ -1180,11 +1182,13 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 2`
     />
     <button
       class="md-button-simple-wrapper"
+      data-exclude-focus="true"
       tabindex="-1"
       type="button"
     />
     <button
       class="md-button-simple-wrapper md-focus-ring-wrapper children"
+      data-exclude-focus="true"
       type="button"
     />
   </div>
@@ -1205,10 +1209,12 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 3`
     />
     <button
       class="md-button-simple-wrapper md-focus-ring-wrapper children"
+      data-exclude-focus="true"
       type="button"
     />
     <button
       class="md-button-simple-wrapper"
+      data-exclude-focus="true"
       tabindex="-1"
       type="button"
     />
@@ -1230,11 +1236,13 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 4`
     />
     <button
       class="md-button-simple-wrapper"
+      data-exclude-focus="true"
       tabindex="-1"
       type="button"
     />
     <button
       class="md-button-simple-wrapper md-focus-ring-wrapper children"
+      data-exclude-focus="true"
       type="button"
     />
   </div>

src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx

@@ -47,16 +47,30 @@ const AvatarMeetingsListItem: FC<Props> = (props: Props) => {
     switch (schedulerState) {
       case SCHEDULER_STATES.available:
         return (
-          <Icon name="scheduler-available" fillColor="var(--mds-color-theme-text-success-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-available"
+            fillColor="var(--mds-color-theme-text-success-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unavailable:
         return (
-          <Icon name="scheduler-unavailable" fillColor="var(--mds-color-theme-text-warning-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-unavailable"
+            fillColor="var(--mds-color-theme-text-warning-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unknown:
-        return <Icon name="scheduler-unknown" fillColor="var(--mds-color-theme-text-error-normal)" {...iconProps} />;
+        return (
+          <Icon
+            name="scheduler-unknown"
+            fillColor="var(--mds-color-theme-text-error-normal)"
+            {...iconProps}
+          />
+        );
 
       case SCHEDULER_STATES.quietHours:
         return (

src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap

@@ -36,6 +36,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -156,6 +157,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with avatarPr
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -314,6 +316,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with classNam
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -433,6 +436,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -630,6 +634,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -832,6 +837,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1030,6 +1036,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with firstLin
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1149,6 +1156,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with id 1`] =
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1264,6 +1272,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1409,6 +1418,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1554,6 +1564,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1699,6 +1710,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1844,6 +1856,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with secondLi
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
@@ -1978,6 +1991,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with style 1`
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
+          onPointerDown={[Function]}
           onTouchCancel={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}

src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { forwardRef, RefObject } from 'react';
 import classNames from 'classnames';
 
 import { DEFAULTS, STYLE, CHILD_OF } from './ButtonGroup.constants';
@@ -7,12 +7,13 @@ import { Props } from './ButtonGroup.types';
 import './ButtonGroup.style.scss';
 
 export interface CompoundProps {
-  CHILD_PROPS: {
+  CHILD_PROPS?: {
     [CHILD_OF.KEY]: typeof CHILD_OF.VALUE;
   };
 }
 
-const ButtonGroup: FC<Props> & CompoundProps = (props: Props) => {
+const ButtonGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> &
+  CompoundProps = forwardRef((props: Props, ref: RefObject<HTMLDivElement>) => {
   const {
     children,
     className,
@@ -29,6 +30,7 @@ const ButtonGroup: FC<Props> & CompoundProps = (props: Props) => {
 
   return (
     <div
+      ref={ref}
       className={classNames(STYLE.wrapper, className)}
       data-round={round || DEFAULTS.ROUND}
       data-spaced={spaced || DEFAULTS.SPACED}
@@ -43,7 +45,9 @@ const ButtonGroup: FC<Props> & CompoundProps = (props: Props) => {
       {children}
     </div>
   );
-};
+});
+
+ButtonGroup.displayName = 'ButtonGroup';
 
 export default ButtonGroup;
 

src/components/Icon/Icon.unit.test.tsx

@@ -62,7 +62,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -72,7 +74,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -205,7 +209,9 @@ describe('<Icon />', () => {
 
       const title = 'You have a draft message';
 
-      const wrapper = await mountAndWait(<Icon name="draft-indicator" weight="bold" title={title} />);
+      const wrapper = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" title={title} />
+      );
       const element = wrapper.find(Icon).getDOMNode();
 
       expect(element.getAttribute('title')).toBe(title);

src/components/Icon/Icon.utils.test.ts

@@ -15,6 +15,8 @@ describe('getResolvedSVGName', () => {
     ['icon-name', 'thin', true, 'icon-name'],
     ['icon-name', 'filled', true, 'icon-name'],
   ])('returns the correct name for %s, %s, %s', (name, weight, weightless, expected) => {
-    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(expected);
+    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(
+      expected
+    );
   });
 });

src/components/Icon/Icon.utils.ts

@@ -8,5 +8,8 @@ import { DEFAULTS } from './Icon.constants';
  * @param weightless - marks that this icon doesn't have a weight
  * @returns - resolved name of the icon
  */
-export const getResolvedSVGName = (name: InferredIconName, weight: IconWeight, weightless: boolean): string =>
-  weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`;
+export const getResolvedSVGName = (
+  name: InferredIconName,
+  weight: IconWeight,
+  weightless: boolean
+): string => (weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`);

src/components/List/List.constants.ts

@@ -4,6 +4,7 @@ const CLASS_PREFIX = 'md-list';
 
 const DEFAULTS = {
   ORIENTATION: 'vertical' as ListOrientation,
+  INITIAL_FOCUS: 0,
 };
 
 const STYLE = {