From a00536f2fe07ae189d54d6fc848dbdbdb48dbc6b Mon Sep 17 00:00:00 2001
From: Marco Schumacher <marco@schumacher.dev>
Date: Mon, 17 Apr 2023 20:53:11 +0200
Subject: [PATCH] fix: renamed css to styles

---
 docs/stories/aIntro.stories.tsx |  2 +-
 src/components/cell.tsx         |  4 ++--
 src/components/columnFooter.tsx |  6 +++---
 src/components/columnHeader.tsx | 10 +++++-----
 src/components/row.tsx          |  4 ++--
 src/components/table.tsx        | 18 +++++++++---------
 src/hooks/useTheme.ts           | 16 ++++++++--------
 src/internalState/calcProps.ts  |  4 ++--
 src/misc/calcClassNames.ts      |  8 ++++----
 src/theme/tableTheme.tsx        |  2 +-
 src/types.ts                    |  8 ++++----
 11 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/docs/stories/aIntro.stories.tsx b/docs/stories/aIntro.stories.tsx
index 596de11..1852db7 100644
--- a/docs/stories/aIntro.stories.tsx
+++ b/docs/stories/aIntro.stories.tsx
@@ -73,7 +73,7 @@ export const HiddenColumns = {
 export const StyledCells = {
   args: {
     ...Primary.args,
-    css: {
+    styles: {
       evenCell: {
         backgroundColor: 'rgba(0, 0, 0, 0.05)',
       },
diff --git a/src/components/cell.tsx b/src/components/cell.tsx
index 7b0b0eb..79d5586 100644
--- a/src/components/cell.tsx
+++ b/src/components/cell.tsx
@@ -39,14 +39,14 @@ export const Cell = memo(function Cell<T>({ itemId, rowIndex }: { itemId: Id; ro
 
   useLayoutEffect(() => table.getState().props.debugRender?.('render cell', itemId, columnId));
   const className = useTheme((t) => cx(...calcClassNames(t.classes, item, rowIndex)));
-  const css = useTheme((t) => calcCss(t.css, item, rowIndex));
+  const styles = useTheme((t) => calcCss(t.styles, item, rowIndex));
 
   if (!column || !item) return null;
 
   const content = column.renderCell(column.value(item.value), item.value);
 
   return (
-    <div className={className} css={[defaultClasses.cell, css]} style={columnStyleOverride}>
+    <div className={className} css={[defaultClasses.cell, styles]} style={columnStyleOverride}>
       {wrapCell(content, column.value(item.value), item.value, rowIndex)}
     </div>
   );
diff --git a/src/components/columnFooter.tsx b/src/components/columnFooter.tsx
index 0038b44..2941e4d 100644
--- a/src/components/columnFooter.tsx
+++ b/src/components/columnFooter.tsx
@@ -15,9 +15,9 @@ export function ColumnFooter() {
   );
   const classes = useTheme((theme) => theme.classes?.footerCell);
   const columnCss = table.useState(
-    (state) => state.activeColumns.find((column) => column.id === columnId)?.css?.footerCell,
+    (state) => state.activeColumns.find((column) => column.id === columnId)?.styles?.footerCell,
   );
-  const css = useTheme((theme) => theme.css?.footerCell);
+  const styles = useTheme((theme) => theme.styles?.footerCell);
 
   const content = table.useState((state) => {
     const column = state.activeColumns.find((column) => column.id === columnId);
@@ -30,7 +30,7 @@ export function ColumnFooter() {
       className={cx(classes, columnClasses)}
       css={[
         defaultClasses.footerCell,
-        css,
+        styles,
         columnCss,
         stickyFooter && defaultClasses.stickyBottom,
         stickyFooter instanceof Object && stickyFooter,
diff --git a/src/components/columnHeader.tsx b/src/components/columnHeader.tsx
index b68dfcf..5fc5cca 100644
--- a/src/components/columnHeader.tsx
+++ b/src/components/columnHeader.tsx
@@ -25,14 +25,14 @@ export function ColumnHeader() {
   });
   const stickyHeader = table.useState((state) => state.props.stickyHeader);
   const classes = useTheme((theme) => theme.classes?.headerCell);
-  const css = useTheme((theme) => theme.css?.headerCell);
+  const styles = useTheme((theme) => theme.styles?.headerCell);
 
-  const { header, columnClasses, columnCss } = table.useState((state) => {
+  const { header, columnClasses, columnStyles } = table.useState((state) => {
     const column = state.activeColumns.find((column) => column.id === columnId);
     return {
       header: column?.header,
       columnClasses: column?.classes?.headerCell,
-      columnCss: column?.css?.headerCell,
+      columnStyles: column?.styles?.headerCell,
     };
   });
 
@@ -203,8 +203,8 @@ export function ColumnHeader() {
           userSelect: 'none',
         },
         defaultClasses.headerCell,
-        css,
-        columnCss,
+        styles,
+        columnStyles,
         stickyHeader && defaultClasses.sticky,
         stickyHeader instanceof Object && stickyHeader,
       ]}
diff --git a/src/components/row.tsx b/src/components/row.tsx
index cfd5bc9..1cbef8a 100644
--- a/src/components/row.tsx
+++ b/src/components/row.tsx
@@ -20,7 +20,7 @@ export const Row = memo(function Row<T>({
   const divRef = useRef<HTMLDivElement>(null);
 
   const classes = useTheme((t) => t.classes);
-  const css = useTheme((t) => t.css);
+  const styles = useTheme((t) => t.styles);
 
   const {
     className,
@@ -36,7 +36,7 @@ export const Row = memo(function Row<T>({
 
     return {
       className: cx(...calcClassNames(classes, item, rowIndex)),
-      css_: calcCss(css, item, rowIndex),
+      css_: calcCss(styles, item, rowIndex),
       indent: item ? getAncestors(state.activeItemsById, item).size : 0,
       hasChildren: !!item?.children.length,
       hasDeferredChildren: item && state.props.hasDeferredChildren?.(item.value),
diff --git a/src/components/table.tsx b/src/components/table.tsx
index 8a30829..95dbb95 100644
--- a/src/components/table.tsx
+++ b/src/components/table.tsx
@@ -69,7 +69,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
       id: column.id,
       width: column.width,
       classes: column.classes,
-      css: column.css,
+      styles: column.styles,
     })),
   );
   const hasActiveFilters = table.useState((state) => {
@@ -83,7 +83,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
   const hasFooter = table.useState((state) => state.activeColumns.some((column) => column.footer));
 
   const classes = useTheme((theme) => theme.classes);
-  const css = useTheme((theme) => theme.css);
+  const styles = useTheme((theme) => theme.styles);
   const stickyHeader = table.useState((state) => state.props.stickyHeader);
   const stickyFooter = table.useState((state) => state.props.stickyFooter);
 
@@ -101,7 +101,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
   return (
     <Virtualized
       className={classes?.table}
-      css={[cssVariables, defaultClasses.table, css?.table, hidden && { visibility: 'hidden' }]}
+      css={[cssVariables, defaultClasses.table, styles?.table, hidden && { visibility: 'hidden' }]}
       style={{
         gridTemplateColumns: [
           //
@@ -119,7 +119,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
             className={classes?.headerCell}
             css={[
               defaultClasses.headerFill,
-              css?.headerCell,
+              styles?.headerCell,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
             ]}
@@ -129,7 +129,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
             className={classes?.headerCell}
             css={[
               defaultClasses.headerCell,
-              css?.headerCell,
+              styles?.headerCell,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
             ]}
@@ -156,7 +156,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
             className={classes?.headerCell}
             css={[
               defaultClasses.headerFill,
-              css?.headerCell,
+              styles?.headerCell,
               stickyHeader && defaultClasses.sticky,
               stickyHeader instanceof Object && stickyHeader,
             ]}
@@ -172,7 +172,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
                 className={classes?.footerCell}
                 css={[
                   defaultClasses.footerFill,
-                  css?.footerCell,
+                  styles?.footerCell,
                   stickyFooter && defaultClasses.stickyBottom,
                   stickyFooter instanceof Object && stickyFooter,
                 ]}
@@ -181,7 +181,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
                 className={classes?.footerCell}
                 css={[
                   defaultClasses.footerFill,
-                  css?.footerCell,
+                  styles?.footerCell,
                   stickyFooter && defaultClasses.stickyBottom,
                   stickyFooter instanceof Object && stickyFooter,
                 ]}
@@ -197,7 +197,7 @@ const TableInner = memo(function TableInner<T>({ hidden }: { hidden: boolean })
                 className={classes?.footerCell}
                 css={[
                   defaultClasses.footerFill,
-                  css?.footerCell,
+                  styles?.footerCell,
                   stickyFooter && defaultClasses.stickyBottom,
                   stickyFooter instanceof Object && stickyFooter,
                 ]}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index ed4a653..e37a260 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -17,7 +17,7 @@ export function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S
 
   const process = (t: TableTheme<T>): MemoizedTableTheme<T> => {
     const cellClass = t.classes?.cell;
-    const cellCss = t.css?.cell;
+    const cellStyles = t.styles?.cell;
 
     return {
       ...t,
@@ -28,12 +28,12 @@ export function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S
             ? memo('theme.classes.cell', cellClass)
             : cellClass,
       },
-      css: {
-        ...t.css,
+      styles: {
+        ...t.styles,
         cell:
-          cellCss instanceof Function || Array.isArray(cellCss)
-            ? memo('theme.css.cell', cellCss)
-            : cellCss,
+          cellStyles instanceof Function || Array.isArray(cellStyles)
+            ? memo('theme.styles.cell', cellStyles)
+            : cellStyles,
       },
       text: {
         ...t.text,
@@ -46,7 +46,7 @@ export function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S
       const localTheme = {
         text: state.props.text,
         classes: state.props.classes,
-        css: state.props.css,
+        styles: state.props.styles,
         components: state.props.components,
         icons: state.props.icons,
         colors: state.props.colors,
@@ -56,7 +56,7 @@ export function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S
       const column = state.activeColumns.find((column) => column.id === columnId);
       const columnsTheme = {
         classes: column?.classes,
-        css: column?.css,
+        styles: column?.styles,
       };
 
       const theme = mergeThemes(
diff --git a/src/internalState/calcProps.ts b/src/internalState/calcProps.ts
index 42301e7..e88ccfb 100644
--- a/src/internalState/calcProps.ts
+++ b/src/internalState/calcProps.ts
@@ -50,7 +50,7 @@ export function calcProps<T>(props: TableProps<T>): InternalTableProps<T> {
         disableSort,
         hidden = defaults?.hidden,
         classes = defaults?.classes,
-        css = defaults?.css,
+        styles = defaults?.styles,
         filter = defaults?.filter,
         width = defaults?.width,
       }: Column<T, V>,
@@ -70,7 +70,7 @@ export function calcProps<T>(props: TableProps<T>): InternalTableProps<T> {
         disableSort,
         hidden,
         classes,
-        css,
+        styles,
         filter,
         width,
       };
diff --git a/src/misc/calcClassNames.ts b/src/misc/calcClassNames.ts
index 496ec11..c35e4cf 100644
--- a/src/misc/calcClassNames.ts
+++ b/src/misc/calcClassNames.ts
@@ -13,13 +13,13 @@ export function calcClassNames<T>(
 }
 
 export function calcCss<T>(
-  css: MemoizedTableTheme<any>['css'] | undefined,
+  styles: MemoizedTableTheme<any>['styles'] | undefined,
   item: T,
   index: number,
 ) {
   return [
-    css?.cell instanceof Function ? css.cell(item, index) : css?.cell,
-    index % 2 === 0 && css?.evenCell,
-    index % 2 === 1 && css?.oddCell,
+    styles?.cell instanceof Function ? styles.cell(item, index) : styles?.cell,
+    index % 2 === 0 && styles?.evenCell,
+    index % 2 === 1 && styles?.oddCell,
   ];
 }
diff --git a/src/theme/tableTheme.tsx b/src/theme/tableTheme.tsx
index bb7261a..32905e8 100644
--- a/src/theme/tableTheme.tsx
+++ b/src/theme/tableTheme.tsx
@@ -25,7 +25,7 @@ export function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableT
   return {
     text: Object.assign({}, ...themes.map((theme) => theme.text)),
     classes: Object.assign({}, ...themes.map((theme) => theme.classes)),
-    css: Object.assign({}, ...themes.map((theme) => theme.css)),
+    styles: Object.assign({}, ...themes.map((theme) => theme.styles)),
     components: Object.assign({}, ...themes.map((theme) => theme.components)),
     icons: Object.assign({}, ...themes.map((theme) => theme.icons)),
     colors: {
diff --git a/src/types.ts b/src/types.ts
index 1736810..56b7b54 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -50,7 +50,7 @@ export interface TableTheme<T = unknown> {
     popover?: string;
     popoverBackdrop?: string;
   };
-  css?: {
+  styles?: {
     table?: CSSObject;
     headerCell?: CSSObject;
     footerCell?: CSSObject;
@@ -134,9 +134,9 @@ export type PartialTableTheme<T = unknown> = {
     : TableTheme<T>[K];
 };
 
-export type MemoizedTableTheme<T> = Omit<TableTheme, 'classes' | 'css' | 'text'> & {
+export type MemoizedTableTheme<T> = Omit<TableTheme, 'classes' | 'styles' | 'text'> & {
   classes: MemoizedFunctions<TableTheme<T>['classes']>;
-  css: MemoizedFunctions<TableTheme<T>['css']>;
+  styles: MemoizedFunctions<TableTheme<T>['styles']>;
   text: MemoizedFunctions<TableTheme<T>['text']>;
 };
 
@@ -355,7 +355,7 @@ export type Column<T, V> = {
   /** Provide css class names to override columns styles. */
   classes?: Omit<NonNullable<TableTheme<T>['classes']>, 'table'>;
   /** Provide css styles to override columns styles. */
-  css?: Omit<NonNullable<TableTheme<T>['css']>, 'table'>;
+  styles?: Omit<NonNullable<TableTheme<T>['styles']>, 'table'>;
 };
 
 export type InternalColumn<T, V> = MemoizedFunctions<