release version patch canary

Author: radubrehar

examples/src/pages/tests/table/full-demo.page.tsx

@@ -108,7 +108,6 @@ function getColumns(): Record<string, InfiniteTableColumn<Developer>> {
       renderValue: ({ value }) => value,
     },
     salary: {
-      header: 'Compensation',
       field: 'salary',
       type: 'number',
       defaultWidth: 210,
@@ -123,7 +122,6 @@ function getColumns(): Record<string, InfiniteTableColumn<Developer>> {
       defaultWidth: 135,
       field: 'canDesign',
       header: 'Design Skills',
-      renderMenuIcon: false,
       renderValue: ({ value }) => {
         return (
           <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -240,10 +238,10 @@ const defaultFilterValue: DataSourcePropFilterValue<Developer> = [
 
 const domProps = {
   style: {
-    // minHeight: '50vh',
-    width: 575,
-    height: 390,
-    margin: 5,
+    minHeight: '50vh',
+    width: '100vw',
+    // width: 575,
+    marginTop: 200,
   },
 };
 
@@ -300,10 +298,6 @@ export default function App() {
       filterMode="local"
       useGroupKeysForMultiRowSelection
       defaultRowSelection={defaultRowSelection}
-      defaultSortInfo={{
-        dir: -1,
-        field: 'country',
-      }}
       onDataArrayChange={(data) => {
         const min = Math.min(...data.map((data) => data.salary ?? 0));
         const max = Math.max(...data.map((data) => data.salary ?? 0));

examples/src/pages/tests/table/props/column/dnd-example2.page.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  DataSourceData,
+} from '@infinite-table/infinite-react';
+
+import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+};
+
+const dataSource: DataSourceData<Developer> = ({}) => {
+  return [
+    {
+      id: 1,
+      firstName: 'John',
+      lastName: 'Bobson',
+      country: 'USA',
+      city: 'LA',
+      currency: 'USD',
+    },
+    {
+      id: 2,
+      firstName: 'Bill',
+      lastName: 'Richardson',
+      country: 'USA',
+      city: 'NY',
+      currency: 'USD',
+    },
+    {
+      id: 3,
+      firstName: 'Nat',
+      lastName: 'Natson',
+      country: 'Canada',
+      city: 'Montreal',
+      currency: 'CAD',
+    },
+  ];
+};
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: { field: 'id', defaultWidth: 80 },
+  country: {
+    field: 'country',
+  },
+  firstName: {
+    field: 'firstName',
+  },
+  lastName: {
+    field: 'lastName',
+  },
+  preferredLanguage: {
+    field: 'currency',
+  },
+};
+
+export default function ColumnValueGetterExample() {
+  return (
+    <>
+      <DataSource<Developer> primaryKey="id" data={dataSource}>
+        <InfiniteTable<Developer>
+          columns={columns}
+          columnDefaultWidth={500}
+          domProps={{
+            style: {
+              height: 500,
+              marginTop: 300,
+            },
+          }}
+        />
+      </DataSource>
+    </>
+  );
+}

source/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx

@@ -31,11 +31,8 @@ const headerCls = HeaderClsRecipe({
   overflow: false,
 });
 
-const updatePosition = (_options: {
-  id: string;
-  node: HTMLElement;
-  offset: null | { left: number; top: number };
-}) => {};
+const emptyFn = () => {};
+
 function InfiniteTableInternalHeaderFn<T>(
   props: InfiniteTableInternalHeaderProps<T> &
     React.HTMLAttributes<HTMLDivElement>,
@@ -172,14 +169,12 @@ function InfiniteTableInternalHeaderFn<T>(
     ],
   );
 
-  const onDrop = useCallback((_sortedIndexes: number[]) => {}, []);
-
   return (
     <DragList
       orientation="horizontal"
       dragListId="header"
-      onDrop={onDrop}
-      updatePosition={updatePosition}
+      onDrop={emptyFn}
+      updatePosition={emptyFn}
     >
       {(dragListDomProps) => {
         return (

source/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts

@@ -374,7 +374,8 @@ export const HeaderMenuIconCls = recipe({
         '&:active': {
           top: '1px',
         },
-        [`${HeaderCellRecipe({})}:hover &`]: menuVisibleStyle,
+        [`${HeaderCellRecipe.classNames.variants.dragging.false}:hover &`]:
+          menuVisibleStyle,
       },
     },
   ],

source/src/components/InfiniteTable/hooks/useColumnPointerEvents.ts

@@ -292,14 +292,19 @@ export const useColumnPointerEvents = ({
             col.computedVisibleIndex,
             rootRef.current,
           );
+          setInfiniteColumnVisibility(
+            col.computedVisibleIndex,
+            '',
+            rootRef.current,
+          );
           setInfiniteColumnOffsetWhileReordering(
             col.computedVisibleIndex,
             '',
             rootRef.current,
           );
         });
 
-        setInfiniteColumnVisibility(dragColumnIndex, '', rootRef.current);
+        // setInfiniteColumnVisibility(dragColumnIndex, '', rootRef.current);
 
         setInfiniteColumnZIndex(
           dragColumnIndex,

www/src/components/CSEmbed/index.tsx

@@ -66,7 +66,7 @@ export function CSEmbed({
   ) : null;
 
   return descriptionBlock || titleBlock ? (
-    <div className="bg-csdark rounded-lg">
+    <div className="bg-codesandboxdark rounded-lg">
       {titleBlock}
       {descriptionBlock}
       {frame}

www/src/styles/index.css

@@ -53,7 +53,7 @@
   --color-border: #ebecf0; /* gray-10 */
   --color-border-dark: #343a46; /* gray-80 */
   --color-brand: #0b6fcb; /* gray-80 */
-  --color-csdark: #191919;
+  --color-codesandboxdark: #191919;
   --color-brand-dark: #133048; /* gray-80 */
   --color-brand-blue: #497aff;
   --color-secondary-button: #ebecf0; /* gray-10 */

www/src/styles/www-utils.ts

@@ -16,7 +16,7 @@ const colorVariables = {
   brandDark: BRAND_COLOR_DARK,
   black: colors.black,
   darkCustom: colors['darkcustom'],
-  csdark: colors['csdark'],
+  codesandboxdark: colors['codesandboxdark'],
   blue: 'blue',
   blue700: '#1c4fd8',
   glow: colors.glow,