fix: renamed css to styles

schummar · Apr 17, 2023 · a00536f · a00536f
1 parent 29e7d5a
commit a00536f
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<