Merge branch 'master' of github.com:DevoInc/genesys-ui

CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## [12.0.0](https://github.com/DevoInc/genesys-ui/compare/v11.0.4...v12.0.0) (2024-09-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* normalize 'style' interface for custom styles
+* refactor a new SplitLayout based on composition
+* **Datetime:** refactored DateTimeRange and Presets
+
+### Features
+
+* add after row ([4cc16a7](https://github.com/DevoInc/genesys-ui/commit/4cc16a717a3588860843a6a73e16b7af70a7a68d))
+* add height afterRow ([761d2e2](https://github.com/DevoInc/genesys-ui/commit/761d2e2e8dcc53e5636a1050bf2172a313fe6446))
+* add height declaration in TRowDef ([92a84ee](https://github.com/DevoInc/genesys-ui/commit/92a84ee843bbd1017b362f81a27ac81e237f5699))
+* add resize item ([81f496d](https://github.com/DevoInc/genesys-ui/commit/81f496de5b07fca16e40d357ee3523292dc6db31))
+* afterRow with helpers ([7a688fb](https://github.com/DevoInc/genesys-ui/commit/7a688fb6df60cd7f6a8722fd3d739dd0c12e62d1))
+* **Calendar:** added dateRepr and errorsRepr ([ee23765](https://github.com/DevoInc/genesys-ui/commit/ee237654045ee00e473240cf54d948a27f8973c9))
+* **Calendar:** Added min and max dates ([f1ffec5](https://github.com/DevoInc/genesys-ui/commit/f1ffec5fceb39bb2b0cef15f8604b5b0e27e8ad3))
+* **Datetime:** adapt to new Calendar ([df69f25](https://github.com/DevoInc/genesys-ui/commit/df69f256682acce8950798cba26d5f960b4ad245))
+* **Datetime:** added default parseDates ([d1a4995](https://github.com/DevoInc/genesys-ui/commit/d1a49952ba8f28c43958b357609ce7b67f9190cd))
+* **Datetime:** expose Time component ([31d1009](https://github.com/DevoInc/genesys-ui/commit/31d1009e340f3610c6684a9addef9b922efcd3c7))
+* **DateTimeRangeFloatingPicker:** change to the new arch ([f3cea8e](https://github.com/DevoInc/genesys-ui/commit/f3cea8e6d157f97f578cf712e01eef8ad9624796))
+* **Datetime:** refactored DateTimeRange and Presets ([87101b9](https://github.com/DevoInc/genesys-ui/commit/87101b9bbcdfd35dbe191d3875c64f29bfee08b7))
+* normalize 'style' interface for custom styles ([cb9b229](https://github.com/DevoInc/genesys-ui/commit/cb9b2291c5a558c778391ba2ad7f4ab7605eb625))
+* QUV-2455 New table rowGroupingRenderer preset ([0af7f76](https://github.com/DevoInc/genesys-ui/commit/0af7f7698712d250f87cd1f855e89222d5884b0e))
+* refactor a new SplitLayout based on composition ([77bcc50](https://github.com/DevoInc/genesys-ui/commit/77bcc5075716268fa5623a9f25d2cdbea25225f3))
+* **Table:** OptionsEditor defined as the preset edition view in options type cell and render the select opened at the beginning of the edition. ([5b59a76](https://github.com/DevoInc/genesys-ui/commit/5b59a76fd89a53ba4b4c07dcf93972660f8e9b91))
+
+
+### Bug Fixes
+
+* add styled-components peer dependencie 5.x || ^6.1.9 ([b3bd352](https://github.com/DevoInc/genesys-ui/commit/b3bd3521c3b044ce329b53cdf69db15ffbccef57))
+* added the FloatingMessage to the index of components to be exposed. ([ca5c81c](https://github.com/DevoInc/genesys-ui/commit/ca5c81cb15955b9c5fa8b8abf5cd12e7eea07bcb))
+* added the KeyValue to the index of components to be exposed. ([272652c](https://github.com/DevoInc/genesys-ui/commit/272652ca6be3de2e4f3ba0b1580d74a6049c674d))
+* cahnge default rowDefs ([f2da2b9](https://github.com/DevoInc/genesys-ui/commit/f2da2b97279ef81effee0d61e3872df99052223a))
+* circular dependencies ([04acfce](https://github.com/DevoInc/genesys-ui/commit/04acfcef734d69af20bb4f434b9a8aec4e8ba0b2))
+* delete props no used ([76b16ef](https://github.com/DevoInc/genesys-ui/commit/76b16ef55fa18758fc75040b1e9449c55400fd28))
+* delete rowVirtualizer unused ([8d20f00](https://github.com/DevoInc/genesys-ui/commit/8d20f00d6d964c83076d184a789368a60fc9a82a))
+* error styled props css ([4f4f4bc](https://github.com/DevoInc/genesys-ui/commit/4f4f4bc751a0d67847a2c6d5855c1a305e62b403))
+* exported to index the hooks from SplitLayout and docs minor change ([2b7cde6](https://github.com/DevoInc/genesys-ui/commit/2b7cde677a2f7d05228f0ab0a550b2885e1b89ec))
+* fixed the name of deprecated prop styles and a minor change for TabsMarker styles ([cd81b03](https://github.com/DevoInc/genesys-ui/commit/cd81b039c83e3cf881dec13de0253026cecd77a9))
+* oxlint no-console rule ([d797c63](https://github.com/DevoInc/genesys-ui/commit/d797c633a756d41cd6bbb82b3c8ae31c8488caab))
+* paths and delete unused files ([cb71f24](https://github.com/DevoInc/genesys-ui/commit/cb71f24679fb59952367d1adf9ea35a49a332082))
+
 ## [11.1.1](https://github.com/DevoInc/genesys-ui/compare/v11.1.0...v11.1.1) (2024-09-05)
 
 
@@ -1193,4 +1237,4 @@
 
 ### [1.0.2-0](https://github.com/DevoInc/genesys-ui/compare/v1.0.1...v1.0.2-0) (2023-03-10)
 
-### 1.0.1 (2023-03-10)
+### 1.0.1 (2023-03-10)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-ui",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "",
   "type": "module",
   "private": true,

packages/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui-code",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@devoinc/genesys-brand-devo": "6.x.x",
-    "@devoinc/genesys-ui": "^11.1.1",
+    "@devoinc/genesys-ui": "^12.0.0",
     "ahooks": "3.x.x",
     "monaco-editor-core": "0.x.x",
     "react": "16.x || 17.x || 18.x",

packages/color/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui-color",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "",
   "type": "module",
   "scripts": {
@@ -29,7 +29,7 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "@devoinc/genesys-ui": "^11.1.1",
+    "@devoinc/genesys-ui": "^12.0.0",
     "polished": "4.x.x",
     "react": "16.x || 17.x || 18.x",
     "react-color": "2.x.x",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "",
   "type": "module",
   "types": "./dist/index.d.ts",

packages/datetime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui-datetime",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "",
   "type": "module",
   "scripts": {
@@ -30,7 +30,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@devoinc/genesys-icons": "4.x.x || 5.x.x || 6.x.x",
-    "@devoinc/genesys-ui": "^11.1.1",
+    "@devoinc/genesys-ui": "^12.0.0",
     "date-fns": "2.x.x",
     "react": "16.x || 17.x || 18.x",
     "react-popper": "2.x.x",

packages/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui-table",
-  "version": "11.1.1",
+  "version": "12.0.0",
   "description": "Genesys composable table",
   "type": "module",
   "scripts": {
@@ -30,8 +30,8 @@
   "license": "MIT",
   "peerDependencies": {
     "@devoinc/genesys-icons": "^4.x.x || ^5.x.x || ^6.x.x",
-    "@devoinc/genesys-ui": "^11.1.1",
-    "@devoinc/genesys-ui-datetime": "^11.1.1",
+    "@devoinc/genesys-ui": "^12.0.0",
+    "@devoinc/genesys-ui-datetime": "^12.0.0",
     "@tanstack/react-virtual": "3.x.x",
     "date-fns": "2.x.x",
     "date-fns-tz": "2.x.x",

packages/table/src/core/Cell/Cell.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
+
 import { GIPencilEditFilled } from '@devoinc/genesys-icons';
+import { mergeStyles } from '@devoinc/genesys-ui';
 
-import type { TColDef, TRow } from '../../declarations';
+import type { TCellDef, TColDef, TRow, TRowDef } from '../../declarations';
 import { useRenderContent } from './useRenderContent';
 import { useInitialState } from '../../editors/useInitialState';
 import { TableContext, WrapperContext } from '../../context';
-
 import { StyledCellWrapper } from './StyledCellWrapper';
 import { StyledCell } from './StyledCell';
 import { StyledCellMarker } from './StyledCellMarker';
 
 interface CellProps {
   data: unknown;
   colDef: TColDef;
+  cellDef: TCellDef;
   width?: number;
   height?: number;
   offsetX?: number;
@@ -24,6 +26,7 @@ interface CellProps {
 export const Cell: React.FC<CellProps> = ({
   data,
   colDef,
+  cellDef,
   rowIndex,
   width,
   height,
@@ -34,7 +37,9 @@ export const Cell: React.FC<CellProps> = ({
   const { density, texts, highlightColumnsOnHover } =
     React.useContext(TableContext);
   const { height: wrapperHeight } = React.useContext(WrapperContext);
-  const { onReset } = colDef;
+  const onReset = colDef.onReset;
+  const colStyle = colDef?.style ?? '';
+  const cellStyle = cellDef?.style ?? '';
 
   useInitialState(data, onReset);
 
@@ -48,11 +53,12 @@ export const Cell: React.FC<CellProps> = ({
       $width={width}
       $offsetX={offsetX}
       colSpan={colSpan}
-      highlightColumnsOnHover={highlightColumnsOnHover}
+      $highlightColumnsOnHover={highlightColumnsOnHover}
       $wrapperHeight={wrapperHeight}
       aria-selected={isEditMode}
       onDoubleClick={onDoubleClick}
       ref={cellRef}
+      css={mergeStyles(colStyle, cellStyle)}
     >
       <StyledCellWrapper
         as={colDef.editable ? 'button' : 'div'}

packages/table/src/core/Cell/StyledCell.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 
 import { pseudoElementOverlayMixin } from '@devoinc/genesys-ui';
 
@@ -10,10 +10,12 @@ import { getTableZIndexMap } from '../utils';
 interface StyledCellProps {
   $wrapperHeight?: number;
   $density?: TDensity;
-  highlightColumnsOnHover?: boolean;
+  $highlightColumnsOnHover?: boolean;
   $offsetX: number;
   $width: number;
   $height: number;
+  // TODO: interface only for satisfy the type error with TS and inherit CSSProp
+  css: CSSProp;
 }
 
 export const StyledCell = styled.td.attrs(
@@ -34,9 +36,9 @@ export const StyledCell = styled.td.attrs(
 
   ${({ theme }) => cellMixin({ theme })};
 
-  ${({ highlightColumnsOnHover, $wrapperHeight = 9999, theme, $density }) => {
+  ${({ $highlightColumnsOnHover, $wrapperHeight = 9999, theme, $density }) => {
     const tokens = theme.cmp.table.cell;
-    return highlightColumnsOnHover
+    return $highlightColumnsOnHover
       ? css`
           &:focus,
           &:has(*:focus),

packages/table/src/core/Row/Row.tsx

@@ -3,28 +3,26 @@ import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { TableContext } from '../../context/TableContext';
 import { Cell } from '../Cell';
 import { StyledTableRow, type StyledTableRowProps } from './StyledTableRow';
-import { getRowDef } from '../../helpers';
-import { TStateRow } from '../../declarations';
+import { getCellDef, getRowDef } from '../../helpers';
+import { TColDef, TRowDef, TStateRow } from '../../declarations';
 
 interface RowProps extends StyledTableRowProps {
-  data: { [key: string]: unknown };
+  rowData: { [key: string]: unknown };
   columnVirtualizer: Virtualizer<HTMLDivElement, Element>;
   virtualRow: VirtualItem;
   state?: TStateRow;
 }
 
 export const Row: React.FC<RowProps> = ({
   columnVirtualizer,
-  data,
+  rowData,
   isAfterRow,
   isDragging,
   state = 'enabled',
   virtualRow,
 }) => {
-  const { striped, colDefs, rowDefs } = React.useContext(TableContext);
-
-  const rowDef = getRowDef(rowDefs, data.id as string);
-
+  const { striped, colDefs, rowDefs, cellDefs } = React.useContext(TableContext);
+  const rowDef = (getRowDef(rowDefs, rowData.id as string) ?? {}) as TRowDef;
   return (
     <StyledTableRow
       $height={virtualRow.size}
@@ -36,36 +34,44 @@ export const Row: React.FC<RowProps> = ({
       isDragging={isDragging}
       $state={state}
       $striped={striped}
+      css={rowDef?.style}
     >
       {rowDef?.cellRenderer ? (
         <Cell
           colDef={{
             id: 'afterRow',
             cellRenderer: rowDef.cellRenderer,
           }}
+          cellDef={{
+            colId: 'afterRow',
+            rowId: rowDef.id,
+          }}
           height={virtualRow.size}
           key={`cell-0`}
           offsetX={0}
           width={columnVirtualizer.getTotalSize()}
           rowIndex={virtualRow.index}
-          row={data}
+          row={rowData}
           data={null}
           colSpan={colDefs.length}
         />
       ) : (
         columnVirtualizer
           .getVirtualItems()
           .map((virtualColumn: VirtualItem) => {
+            const colDef = (colDefs[virtualColumn.index] ?? {}) as TColDef;
+            const cellDef = getCellDef(cellDefs, colDef.id, rowDef.id);
             return (
               <Cell
-                colDef={colDefs[virtualColumn.index]}
-                data={data[colDefs[virtualColumn.index].id] ?? ''}
+                colDef={colDef}
+                cellDef={cellDef}
+                data={rowData[colDef.id] ?? ''}
                 height={virtualRow.size}
                 key={`cell-${virtualColumn.key}`}
                 offsetX={virtualColumn.start}
                 width={virtualColumn.size}
                 rowIndex={virtualRow.index}
-                row={data}
+                row={rowData}
               />
             );
           })

packages/table/src/core/Row/StyledTableRow.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 import {
   pseudoElementMixin,
   pseudoElementOverlayMixin,
@@ -18,6 +18,8 @@ export interface StyledTableRowProps {
   transform?: React.CSSProperties['transform'];
   $width?: React.CSSProperties['width'];
   $hide?: boolean;
+  // TODO: interface only for satisfy the type error with TS and inherit CSSProp
+  css?: CSSProp;
 }
 
 export const StyledTableRow = styled.tr.attrs<StyledTableRowProps>(

packages/table/src/core/Table/Table.tsx

@@ -12,6 +12,7 @@ export const Table: React.FC<TableProps> = ({
   defaultColDef,
   colDefs = [],
   rowDefs = [],
+  cellDefs = [],
   columnPresets = [],
   density = 'default',
   striped = false,
@@ -53,6 +54,7 @@ export const Table: React.FC<TableProps> = ({
         onFilter,
         rowHeight,
         rowDefs,
+        cellDefs,
       }}
     >
       <WrapperContextProvider>

packages/table/src/core/TableBody/StyledTableBody.ts

@@ -4,14 +4,15 @@ import type { StyledTableProps } from '../TableWrapper/StyledTable';
 import type { ITable } from '../../declarations';
 
 interface StyledTableBodyProps
-  extends Pick<StyledTableProps, '$width' | '$height'>,
-    Pick<ITable, 'highlightColumnsOnHover'> {}
+  extends Pick<StyledTableProps, '$width' | '$height'> {
+  $highlightColumnsOnHover: ITable['highlightColumnsOnHover'];
+}
 
 export const StyledTableBody = styled.tbody<StyledTableBodyProps>`
   position: relative;
   display: inline-block;
   height: ${({ $height = 'auto' }) => `${$height}px`};
   width: ${({ $width = '100%' }) => `${$width}px`};
-  overflow: ${({ highlightColumnsOnHover }) =>
-    highlightColumnsOnHover ? 'hidden' : null};
+  overflow: ${({ $highlightColumnsOnHover }) =>
+    $highlightColumnsOnHover ? 'hidden' : null};
 `;

packages/table/src/core/TableBody/TableBody.tsx

@@ -25,14 +25,14 @@ export const TableBody: React.FC<TableBodyProps> = ({
     <StyledTableBody
       $height={height}
       $width={width}
-      highlightColumnsOnHover={highlightColumnsOnHover}
+      $highlightColumnsOnHover={highlightColumnsOnHover}
     >
       {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
         return (
           <Row
             key={'tb_' + virtualRow.key}
             columnVirtualizer={columnVirtualizer}
-            data={data[virtualRow.index]}
+            rowData={data[virtualRow.index]}
             virtualRow={virtualRow}
           />
         );

packages/table/src/core/utils/columns.ts

@@ -1,5 +1,5 @@
 import { VirtualItem } from '@tanstack/react-virtual';
-import type { TColDef, TDefaultColDef, TPreset } from '../../declarations';
+import type { TColDef, TDefaultColDef, TColPreset } from '../../declarations';
 
 export const getColDefByID = (
   colDefs: TColDef[] = [],
@@ -13,7 +13,7 @@ export const getColDefByID = (
 export const getCollatedColumns = (
   defaultColDef: TDefaultColDef,
   column: TColDef,
-  presets: TPreset[] = [],
+  presets: TColPreset[] = [],
 ): TColDef => {
   const preset = presets.find((element) => element.id === column.preset);
   return { ...defaultColDef, ...preset, ...column };