feat(table): add cell expand (#107)

* feat: first commit * feat(table): add rowDef in cellrenderer * fix(table): delete use useOnEventOutside cell renderer * Release 13.7.0 * test: delete unused vars * fix: #102 Cannot set text in table component - add default editTootip - add callback textsCell for build title cells * test(table): fix storie cell title * Release 13.7.1 * feat(table): add aria label in editors * feat: added example of Table custom cell renderer and usage of separators between SelectControl options. * fix: filterDataByText with options columns * feat: added removable functionality to Chip component. New default name 'Overview' for mdx based pages. Readonly state fixed for ColorPicker component. * fix: Options in story of global text search in table * Release 13.8.0 * feat: first commit * fix: pull origin master * fix: adapter editor cell * build: upgrade packages * feat(table): added cell expand * feat(table): add click away in cells * test: fix test getOptionsFromData * feat: unused setEditModeCell * fix: update sorting column * doc: add cell expand storie * feat: add cell expand presets * doc: add doc and storie cell expand * fix: adpater renderer to context props * refactor(table): review all expand feature * fix(table): fix tts errors * test(table): fix getOptionsFromData * test: fix lint warnnigs * fix: update package-lock * test(table): fix cyclic references --------- Co-authored-by: Devo GitHub Action <[email protected]> Co-authored-by: Jose Andrés Granero <[email protected]> Co-authored-by: Jose M. Esteban <[email protected]> Co-authored-by: Javier López Úbeda <[email protected]>
DevoInc · Nov 28, 2024 · e7a3eb4 · e7a3eb4
1 parent 6a12e77
commit e7a3eb4
Show file tree

Hide file tree

Showing 90 changed files with 2,122 additions and 738 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,38 +31,38 @@
   "devDependencies": {
     "@devoinc/genesys-base-styles": "^2.0.1",
     "@devoinc/genesys-brand-devo": "^8.0.3",
-    "@devoinc/genesys-tokens-types": "^7.5.1",
     "@devoinc/genesys-icons": "^6.1.0",
-    "@devoinc/holo": "^1.0.5",
+    "@devoinc/genesys-tokens-types": "^7.5.1",
+    "@devoinc/holo": "^1.0.6",
     "@release-it-plugins/workspaces": "^4.2.0",
-    "@release-it/conventional-changelog": "^9.0.2",
-    "@storybook/addon-a11y": "^8.4.0",
-    "@storybook/addon-actions": "^8.4.0",
-    "@storybook/addon-controls": "^8.4.0",
-    "@storybook/addon-docs": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-themes": "^8.4.0",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-controls": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
     "@stryker-mutator/core": "^8.6.0",
     "@stryker-mutator/vitest-runner": "^8.6.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.8.5",
+    "@types/node": "^22.9.3",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/coverage-v8": "^2.1.5",
     "babel-plugin-styled-components": "^2.1.4",
-    "dependency-cruiser": "^16.5.0",
+    "dependency-cruiser": "^16.6.0",
     "dpdm": "^3.14.0",
-    "framer-motion": "^11.11.11",
-    "happy-dom": "^15.7.4",
+    "framer-motion": "^11.11.17",
+    "happy-dom": "^15.11.6",
     "identity-obj-proxy": "^3.0.0",
     "js-cookie": "^3.0.5",
     "mermaid": "^11.4.0",
+    "@release-it/conventional-changelog": "^9.0.2",
     "oxlint": "^0.10.3",
     "polished": "^4.3.1",
     "prettier": "^3.3.3",
@@ -71,17 +71,17 @@
     "react-syntax-highlighter": "^15.6.1",
     "release-it": "^17.10.0",
     "remark-gfm": "^4.0.0",
-    "sass": "^1.80.5",
+    "sass": "^1.81.0",
     "semver": "^7.6.3",
-    "storybook": "^8.4.0",
-    "tocbot": "^4.31.0",
+    "storybook": "^8.4.5",
+    "tocbot": "^4.32.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-dts": "^4.3.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^2.1.4",
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitest": "^2.1.5",
     "viz.js": "^2.1.2"
   },
   "workspaces": [

diff --git a/packages/core/src/components/Chip/components/ChipContainer/StyledChipContainer.ts b/packages/core/src/components/Chip/components/ChipContainer/StyledChipContainer.ts
@@ -6,7 +6,6 @@ import { pseudoElementOverlayMixin } from '../../../../styled/mixins/pseudoEleme
 import { getPadding } from '../../helpers';
 import { type IChipContainerStyled } from './declarations';
 import { getSpacingPropCss } from '../../../../helpers';
-import { disabled } from 'happy-dom/lib/PropertySymbol';
 
 export interface StyledChipContainerProps extends IChipContainerStyled {
   // TODO: interface only for satisfy the type error with TS and inherit CSSProp

diff --git a/packages/table/src/context/TableContext.tsx b/packages/table/src/context/TableContext.tsx
@@ -5,9 +5,9 @@ import type { ITable } from '../declarations';
 export interface ITableContext extends ITable {}
 
 export const TableContext = React.createContext<ITableContext>({
+  id: '',
   density: 'default',
   data: [],
   striped: false,
-  highlightColumnsOnHover: false,
   resizableColumns: false,
 });
diff --git a/packages/table/src/core/Cell/Cell.tsx b/packages/table/src/core/Cell/Cell.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
 
-import { GIPencilEditFilled } from '@devoinc/genesys-icons';
 import { mergeStyles } from '@devoinc/genesys-ui';
 
 import type { TCellDef, TColDef, TRow, TRowDef } from '../../declarations';
-
 import { TableContext } from '../../context';
-import { useInitialState } from '../../editors/useInitialState';
-import { useRenderContent } from './useRenderContent';
-
 import { StyledCell } from './StyledCell';
-import { StyledCellMarker } from './StyledCellMarker';
-import { StyledCellWrapper } from './StyledCellWrapper';
+import {
+  CellWrapper,
+  CellEditModeWrapper,
+  CellExpandWrapper,
+} from '../../wrapper';
 
 interface CellProps {
   cellDef: TCellDef;
@@ -38,19 +36,27 @@ export const Cell: React.FC<CellProps> = ({
   rowDef,
   width,
 }) => {
-  const { density, texts, onCellMouseEnter, onCellMouseLeave, textsCell } =
-    React.useContext(TableContext);
-
-  useInitialState(data, colDef.onReset);
-
-  const { cellRef, editionContent, isEditMode, onDoubleClick, viewContent } =
-    useRenderContent(colDef, data, rowIndex, row, rowDef);
-
+  const {
+    onCellMouseEnter,
+    onCellMouseLeave,
+    onCellDoubleClick,
+    onCellKeyUp,
+    onCellKeyDown,
+    onCellClick,
+    onCellDataChange,
+  } = React.useContext(TableContext);
+  const cellRef = React.useRef<HTMLTableCellElement>();
+  const Wrapper = colDef.cellWrapper
+    ? colDef.cellWrapper
+    : colDef.editable
+      ? CellEditModeWrapper
+      : colDef.isExpandable
+        ? CellExpandWrapper
+        : CellWrapper;
   return (
     <StyledCell
-      aria-selected={isEditMode}
+      aria-selected={cellDef?.isEditMode}
       css={mergeStyles(colDef?.style ?? '', cellDef?.style ?? '')}
-      onDoubleClick={onDoubleClick}
       ref={cellRef}
       style={{
         width: `${width}px`,
@@ -69,31 +75,36 @@ export const Cell: React.FC<CellProps> = ({
         }
       }}
       aria-colindex={colIndex}
-    >
-      <StyledCellWrapper
-        $clickable={colDef.editable}
-        $density={density}
-        $horAlign={
-          colDef?.align || (colDef.preset === 'number' ? 'right' : null)
+      onClick={(event) => {
+        if (onCellClick) {
+          onCellClick({ event, colDef, cellDef, rowDef, rowIndex });
         }
-        $isEditMode={isEditMode}
-        as={colDef.editable ? 'button' : 'div'}
-        tabIndex={colDef.editable ? 0 : -1}
-        title={
-          textsCell
-            ? textsCell({ colDef, rowDef, cellDef, data, row, rowIndex })
-            : colDef.editable && texts?.cell?.editTooltip
+      }}
+      onDoubleClick={() => {
+        if (onCellDoubleClick) {
+          onCellDoubleClick({ colDef, cellDef, rowDef, rowIndex });
         }
-        toEdge={colDef?.toEdge}
-        verAlign={colDef?.verticalAlign}
-      >
-        {isEditMode ? editionContent : viewContent}
-        {colDef.editable && !isEditMode && (
-          <StyledCellMarker>
-            <GIPencilEditFilled size={10} />
-          </StyledCellMarker>
-        )}
-      </StyledCellWrapper>
+      }}
+      onKeyUp={(event) => {
+        if (onCellKeyUp) {
+          onCellKeyUp({ event, colDef, cellDef, rowDef, rowIndex });
+        }
+      }}
+      onKeyDown={(event) => {
+        if (onCellKeyDown) {
+          onCellKeyDown({ event, colDef, cellDef, rowDef, rowIndex });
+        }
+      }}
+      $isSelected={cellDef?.isSelected}
+    >
+      <Wrapper
+        colDef={colDef}
+        rowIndex={rowIndex}
+        data={data}
+        row={row}
+        cellDef={cellDef}
+        onCellDataChange={onCellDataChange}
+      />
     </StyledCell>
   );
 };
diff --git a/packages/table/src/core/Cell/StyledCell.ts b/packages/table/src/core/Cell/StyledCell.ts
@@ -8,6 +8,7 @@ interface StyledCellProps {
   // TODO: interface only for satisfy the type error with TS and inherit CSSProp
   css: CSSProp;
   $isHighlighted: boolean;
+  $isSelected: boolean;
 }
 
 export const StyledCell = styled.td<StyledCellProps>`
@@ -32,4 +33,15 @@ export const StyledCell = styled.td<StyledCellProps>`
       `
     );
   }}
+
+  ${({ $isSelected, theme }) => {
+    const tokens = theme.cmp.table.cellClickableWrapper;
+    const boxShadow = tokens.elevation.boxShadow;
+    return css`
+      ${$isSelected &&
+      css`
+        box-shadow: ${boxShadow};
+      `}
+    `;
+  }};
 `;
diff --git a/packages/table/src/core/Cell/useRenderContent.ts b/packages/table/src/core/Cell/useRenderContent.ts
diff --git a/packages/table/src/core/HeaderCell/HeaderCell.tsx b/packages/table/src/core/HeaderCell/HeaderCell.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { TColDef } from '../../declarations';
+import type { TColDef, THeaderCellDef } from '../../declarations';
 import { TableContext } from '../../context/TableContext';
 
 import { OrderIndicator } from './OrderIndicator';
@@ -14,6 +14,7 @@ interface HeaderCellProps {
   children: React.ReactNode;
   title?: string;
   filter?: boolean;
+  headerCellDef?: THeaderCellDef;
 }
 
 export const HeaderCell: React.FC<HeaderCellProps> = ({
@@ -22,9 +23,17 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
   offsetX,
   children,
   title,
-  filter
+  filter,
+  headerCellDef,
 }) => {
-  const { density, onSort, resizableColumns } = React.useContext(TableContext);
+  const {
+    density,
+    resizableColumns,
+    onHeaderCellDoubleClick,
+    onHeaderCellKeyUp,
+    onHeaderCellKeyDown,
+    onHeaderCellClick,
+  } = React.useContext(TableContext);
 
   return (
     <StyledHeaderCell
@@ -33,15 +42,28 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
       $offsetX={offsetX}
       $density={density}
       title={title}
-      onClick={
-        colDef.sortable && !filter
-          ? () => {
-              if (onSort) {
-                onSort(colDef);
-              }
-            }
-          : null
-      }
+      tabIndex={headerCellDef?.isSelected ? 0 : 1}
+      isSelected={headerCellDef?.isSelected}
+      onClick={() => {
+        if (onHeaderCellClick) {
+          onHeaderCellClick({ colDef, filter });
+        }
+      }}
+      onDoubleClick={() => {
+        if (onHeaderCellDoubleClick) {
+          onHeaderCellDoubleClick({ colDef });
+        }
+      }}
+      onKeyUp={(event) => {
+        if (onHeaderCellKeyUp) {
+          onHeaderCellKeyUp({ event, colDef });
+        }
+      }}
+      onKeyDown={(event) => {
+        if (onHeaderCellKeyDown) {
+          onHeaderCellKeyDown({ event, colDef });
+        }
+      }}
     >
       {children}
       {colDef.sortable && !filter && <OrderIndicator colDef={colDef} />}