cleanup & fix story

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -1,21 +1,11 @@
-import type { ReactTableHooks, TableInstance } from '@/components/AnalyticalTable/types/index.js';
 import dataLarge from '@sb/mockData/Friends500.json';
 import dataTree from '@sb/mockData/FriendsTree.json';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/edit.js';
 import '@ui5/webcomponents-icons/dist/settings.js';
 import NoDataIllustration from '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
-import {
-  FocusEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import {
   AnalyticalTablePopinDisplay,
   AnalyticalTableScaleWidthMode,
@@ -39,7 +29,6 @@ import { SegmentedButtonItem } from '../../webComponents/SegmentedButtonItem/ind
 import { Select } from '../../webComponents/Select/index.js';
 import { Tag } from '../../webComponents/Tag/index.js';
 import { Text } from '../../webComponents/Text/index.js';
-import { Input } from '../../webComponents/input/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import type { AnalyticalTableColumnDefinition } from './index.js';
 import { AnalyticalTable } from './index.js';
@@ -636,162 +625,3 @@ export const KitchenSink: Story = {
     return context.viewMode === 'story' ? <AnalyticalTable {...args} /> : <ToggleableTable {...args} />;
   },
 };
-
-const inputCols = [
-  {
-    Header: 'Input',
-    id: 'input',
-    Cell: (props) => {
-      return (
-        <Input
-          onFocus={console.log}
-          tabIndex={props.state.cellTabIndex}
-          inert={Object.hasOwn(props.state, 'tabIndex') ? props.state.cellTabIndex < 0 : true}
-        />
-      );
-    },
-    interactiveElementName: 'Input',
-  },
-  {
-    Header: 'Button',
-    id: 'btn',
-    Cell: (props) => (
-      <Button tabIndex={props.state.cellTabIndex} inert={props.state.cellTabIndex < 0}>
-        Button
-      </Button>
-    ),
-    interactiveElementName: () => 'Button',
-  },
-];
-
-const useGetTableProps = (props, { instance }) => {
-  const handleFocus: FocusEventHandler<HTMLDivElement> = (e) => {
-    const isCell = e.target.hasAttribute('gridcell') || e.target.hasAttribute('columnheader');
-    if (isCell) {
-    }
-    if (typeof props.onFocus === 'function') {
-      props.onFocus(e);
-    }
-  };
-
-  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {};
-
-  return [props, { onFocus: handleFocus, onKeyDown: handleKeyDown }];
-};
-
-function findFirstFocusableInside(element) {
-  if (!element) return null;
-
-  function recursiveFindInteractiveElement(el) {
-    for (const child of el.children) {
-      const style = getComputedStyle(child);
-      if (child.disabled || style.display === 'none' || style.visibility === 'hidden') {
-        continue; // skip non-interactive
-      }
-
-      const focusableSelectors = [
-        'a[href]',
-        'button',
-        'input',
-        'textarea',
-        'select',
-        '[tabindex]:not([tabindex="-1"])',
-      ];
-
-      if (child.matches(focusableSelectors.join(','))) {
-        return child;
-      }
-
-      if (child.shadowRoot) {
-        const shadowFocusable = recursiveFindInteractiveElement(child.shadowRoot);
-        if (shadowFocusable) return shadowFocusable;
-      }
-
-      const nestedFocusable = recursiveFindInteractiveElement(child);
-      if (nestedFocusable) return nestedFocusable;
-    }
-    return null;
-  }
-
-  return recursiveFindInteractiveElement(element);
-}
-
-const useCellTabIndex = (cols, { instance: { state } }) => {
-  console.log(state.cellTabIndex);
-  return cols.map((col) => {
-    const origCell = col.Cell;
-
-    // only wrap function renderers, non-function renderers don't receive props anyway.
-    if (typeof origCell !== 'function') return col;
-
-    return {
-      ...col,
-      Cell: (props: any) => {
-        return origCell({ ...props, tabIndex: state.cellTabIndex ?? -1 });
-      },
-    };
-  });
-};
-
-const useGetCellProps = (props, { cell, instance, userProps }) => {
-  const { interactiveElementName, Cell } = cell.column;
-
-  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (e.key === 'F2') {
-      if (e.currentTarget === e.target && interactiveElementName) {
-        let name: string;
-        const interactiveElement = findFirstFocusableInside(e.target);
-        if (interactiveElement) {
-          e.currentTarget.tabIndex = -1;
-          interactiveElement.focus();
-          instance.dispatch({ type: 'CELL_TAB_INDEX', payload: 0 });
-          if (typeof interactiveElementName === 'function') {
-            name = interactiveElementName(cell);
-          } else {
-            name = interactiveElementName;
-          }
-        }
-      }
-      if (e.currentTarget !== e.target) {
-        e.currentTarget.tabIndex = 0;
-        e.currentTarget.focus();
-        instance.dispatch({ type: 'CELL_TAB_INDEX', payload: -1 });
-      }
-    }
-  };
-
-  return [props, { onKeyDown: handleKeyDown }];
-};
-
-const stateReducer = (state, action, _prevState, instance: TableInstance) => {
-  const { payload, type } = action;
-
-  if (type === 'CELL_TAB_INDEX') {
-    return { ...state, cellTabIndex: payload };
-  }
-  return state;
-};
-
-const useF2Navigation = (hooks: ReactTableHooks) => {
-  // const prevFocusedCell = useRef<HTMLDivElement>(null);
-  //todo: param names claim functions are hooks, but they aren't
-  hooks.visibleColumns.push(useCellTabIndex);
-  hooks.getCellProps.push(useGetCellProps);
-  hooks.stateReducers.push(stateReducer);
-  // hooks.getTableProps.push(useGetTableProps);
-  // hooks.getHeaderProps.push(setHeaderProps);
-};
-
-const tableHooks = [useF2Navigation];
-
-export const Test: Story = {
-  render(args) {
-    return (
-      <>
-        <button>Click</button>
-        <AnalyticalTable {...args} columns={[inputCols[0], ...args.columns, inputCols[1]]} tableHooks={tableHooks} />
-        <button>Click</button>
-      </>
-    );
-  },
-};

packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx

@@ -322,7 +322,7 @@ const inputCols: AnalyticalTableColumnDefinition[] = [
       const callbackRef = useF2CellEdit.useCallbackRef(props);
       return (
         <>
-          <Input />
+          <Input ref={callbackRef} />
           <Button ref={callbackRef} icon={paperPlaneIcon} tooltip="Submit" accessibleName="Submit" />
         </>
       );
@@ -353,10 +353,11 @@ const inputCols: AnalyticalTableColumnDefinition[] = [
     Header: 'Switch or CheckBox',
     id: 'switch_checkbox',
     Cell: (props: AnalyticalTableCellInstance) => {
+      const callbackRef = useF2CellEdit.useCallbackRef(props);
       if (props.row.index % 2) {
-        return <CheckBox accessibleName="Dummy CheckBox" />;
+        return <CheckBox ref={callbackRef} accessibleName="Dummy CheckBox" />;
       }
-      return <Switch accessibleName="Dummy Switch" />;
+      return <Switch ref={callbackRef} accessibleName="Dummy Switch" />;
     },
     interactiveElementName: (props: AnalyticalTableCellInstance) => {
       if (props.row.index % 2) {

packages/main/src/components/AnalyticalTable/PluginF2CellEdit.mdx

@@ -1,6 +1,6 @@
 import { ImportStatement } from '@sb/components/Import';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import { Footer } from '@sb/components';
+import { DocsHeader, Footer } from '@sb/components';
 import * as ComponentStories from './AnalyticalTableHooks.stories';
 
 <Meta title="Data Display / AnalyticalTable / Plugin Hooks / useF2CellEdit" />
@@ -59,7 +59,7 @@ const columns: AnalyticalTableColumnDefinition[] = [
       const callbackRef = useF2CellEdit.useCallbackRef(props);
       return (
         <>
-          <Input />
+          <Input ref={callbackRef} />
           <Button ref={callbackRef} icon={paperPlaneIcon} tooltip="Submit" accessibleName="Submit" />
         </>
       );
@@ -90,10 +90,11 @@ const columns: AnalyticalTableColumnDefinition[] = [
     Header: 'Switch or CheckBox',
     id: 'switch_checkbox',
     Cell: (props: AnalyticalTableCellInstance) => {
+      const callbackRef = useF2CellEdit.useCallbackRef(props);
       if (props.row.index % 2) {
-        return <CheckBox accessibleName="Dummy CheckBox" />;
+        return <CheckBox ref={callbackRef} accessibleName="Dummy CheckBox" />;
       }
-      return <Switch accessibleName="Dummy Switch" />;
+      return <Switch ref={callbackRef} accessibleName="Dummy Switch" />;
     },
     interactiveElementName: (props: AnalyticalTableCellInstance) => {
       if (props.row.index % 2) {