chore(lumx-react): remove list key navigation

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     -   _[BREAKING]_ Removed `src` folder from the npm package (use compiled code instead)
     -   _[BREAKING]_ Reduced ecmascript transpilation to the minimum (make sure to transpile this lib if your project needs it)
     -   _[BREAKING]_ Externalise `@lumx/core` and `classnames` (now imported instead of bundled inside `@lumx/react`)
+    -   _[BREAKING]_ `List`: remove keyboard arrow navigation as it does not comply with any specific a11y pattern
 -   `@lumx/core`:
     -   _[BREAKING]_ removed deprecated `@lumx/core/js/utils/date-picker` utils
 -   `@lumx/angularjs`: removed from the project. Future updates to `@lumx/core` will continue to avoid breaking change to the deprecated angularjs directives but without any guarantee.

packages/lumx-core/src/scss/components/list/_index.scss

@@ -52,11 +52,14 @@
 
 .#{$lumx-base-prefix}-list-item__link,
 .#{$lumx-base-prefix}-list-item__wrapper {
-    .#{$lumx-base-prefix}-list--item-padding-big & {
+    // Padding big (defaults when list contain clickable item)
+    .#{$lumx-base-prefix}-list:has(.#{$lumx-base-prefix}-list-item__link) &,
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-big & {
         @include lumx-list-item-padding("big");
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
+    // Padding huge
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-huge & {
         @include lumx-list-item-padding("huge");
     }
 }
@@ -78,11 +81,14 @@
         @include lumx-list-subheader-icon;
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-big & {
+    // Padding big (defaults when list contain clickable item)
+    .#{$lumx-base-prefix}-list:has(.#{$lumx-base-prefix}-list-item__link) &,
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-big & {
         @include lumx-list-item-padding("big");
     }
 
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
+    // Padding huge
+    .#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-huge & {
         @include lumx-list-item-padding("huge");
     }
 }

packages/lumx-react/package.json

@@ -11,7 +11,6 @@
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
-        "react-is": ">=16.13.0",
         "react-popper": "^2.2.4"
     },
     "devDependencies": {
@@ -34,7 +33,6 @@
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
-        "@types/react-is": "^17.0.2",
         "@vitest/ui": "^3.0.0",
         "autoprefixer": "^9.7.4",
         "chromatic": "^13.1.4",

packages/lumx-react/src/components/list/List.stories.tsx

@@ -77,7 +77,6 @@ export const KeyboardNavigation = ({
             </List>
             <pre>{`
                 When focused:
-                arrow up/down to move focus on list item
                 tab/shift+tab to move focus on list item AND outside the list
             `}</pre>
         </>

packages/lumx-react/src/components/list/List.tsx

@@ -1,16 +1,13 @@
-import { Key, ReactNode, SyntheticEvent, useRef } from 'react';
+import { Key, ReactNode, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
 import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { useInteractiveList } from './useInteractiveList';
-
 /**
  * Defines the props of the component.
  */
@@ -71,14 +68,6 @@ const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
         tabIndex = DEFAULT_PROPS.tabIndex,
         ...forwardedProps
     } = props;
-    const listElementRef = useRef<HTMLUListElement>(null);
-
-    const { items, hasClickableItem } = useInteractiveList({
-        items: children,
-        ref: listElementRef,
-        onListItemSelected,
-    });
-    const clickable = hasClickableItem || isClickable;
 
     return (
         <ul
@@ -87,13 +76,13 @@ const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
                 className,
                 handleBasicClasses({
                     prefix: CLASSNAME,
-                    itemPadding: itemPadding ?? (clickable ? Size.big : undefined),
+                    itemPadding: itemPadding ?? (isClickable ? Size.big : undefined),
                 }),
             )}
             tabIndex={tabIndex}
-            ref={mergeRefs(ref, listElementRef)}
+            ref={ref}
         >
-            {items}
+            {children}
         </ul>
     );
 });

packages/lumx-react/src/components/list/ListItem.stories.tsx

@@ -16,14 +16,14 @@ export default {
     argTypes: {
         size: getSelectArgType(sizes),
     },
-    decorators: [withWrapper({}, List)],
 };
 
 /**
  * Default list item with text
  */
 export const Default = {
     args: { children: 'List item' },
+    decorators: [withWrapper({}, List)],
 };
 
 /**
@@ -34,6 +34,7 @@ export const CustomLink_ = {
         linkAs: CustomLink,
         children: 'List item custom link',
     },
+    decorators: [withWrapper({}, List)],
 };
 
 /**
@@ -42,6 +43,7 @@ export const CustomLink_ = {
 export const AllStates = {
     args: { children: 'List item' },
     decorators: [
+        withWrapper({}, List),
         withCombinations({
             combinations: {
                 rows: { key: 'size', options: sizes },