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",
@@ -205,6 +208,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 the first 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, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { DEFAULTS, STYLE, CHILD_OF } from './ButtonGroup.constants';
@@ -12,41 +12,40 @@ export interface CompoundProps {
   };
 }
 
-const ButtonGroup: FC<Props> & CompoundProps = forwardRef<HTMLDivElement, Props>(
-  (props: Props, ref) => {
-    const {
-      children,
-      className,
-      id,
-      round,
-      spaced,
-      compressed,
-      separator,
-      style,
-      role,
-      orientation,
-      ...rest
-    } = props;
-
-    return (
-      <div
-        ref={ref}
-        className={classNames(STYLE.wrapper, className)}
-        data-round={round || DEFAULTS.ROUND}
-        data-spaced={spaced || DEFAULTS.SPACED}
-        data-compressed={compressed || DEFAULTS.COMPRESSED}
-        data-separator={separator || DEFAULTS.SEPARATOR}
-        data-orientation={orientation || DEFAULTS.ORIENTATION}
-        id={id}
-        style={style}
-        role={role}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+const ButtonGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> &
+  CompoundProps = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
+  const {
+    children,
+    className,
+    id,
+    round,
+    spaced,
+    compressed,
+    separator,
+    style,
+    role,
+    orientation,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(STYLE.wrapper, className)}
+      data-round={round || DEFAULTS.ROUND}
+      data-spaced={spaced || DEFAULTS.SPACED}
+      data-compressed={compressed || DEFAULTS.COMPRESSED}
+      data-separator={separator || DEFAULTS.SEPARATOR}
+      data-orientation={orientation || DEFAULTS.ORIENTATION}
+      id={id}
+      style={style}
+      role={role}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
 
 ButtonGroup.displayName = 'ButtonGroup';