@react-fabric/data 1.0.0-beta.0 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,9 +33,9 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.0",
-    "@react-fabric/form": "^1.0.0-beta.0",
-    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "@react-fabric/core": "^1.0.0-beta.1",
+    "@react-fabric/form": "^1.0.0-beta.1",
+    "@react-fabric/utilities": "^1.0.0-beta.1",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -51,5 +51,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+  "gitHead": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
 }

package/src/table/AddColumn.tsx

@@ -0,0 +1,55 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { type ColumnType } from "./types";
+
+export const AddColumn = ({
+  columns,
+  onClick,
+}: {
+  columns: ColumnType[];
+  onClick: (id: string) => void;
+}) => {
+  return (
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+      <Dropdown placement="bottom-end">
+        <Icon
+          icon={CoreIcons.insert}
+          className="p-1 rounded-t rounded-b-none hover:outline"
+        />
+        <Menu className="text-sm" onClick={onClick}>
+          {columns.map((col) => (
+            <MenuItem
+              key={String(col.id)}
+              id={String(col.id)}
+              data-dropdown-dismiss="false"
+              label={`${col.label ?? String(col.id)}`}
+              icon={!col.hidden ? CoreIcons.tick : ""}
+            />
+          ))}
+        </Menu>
+      </Dropdown>
+    </div>
+  );
+};

package/src/table/BodyCell.tsx

@@ -22,7 +22,14 @@
  */
 
 import classNames from "classnames";
-import { type ColumnType } from "./types";
+import { useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+} from "./types";
 
 export const BodyCell = ({
   column,
@@ -31,13 +38,20 @@ export const BodyCell = ({
   column: ColumnType;
   item: KeyValue;
 }) => {
+  const { widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(column.id.toString()) ?? column.width,
+    [widths, column],
+  );
+
   return (
     <div
       className="overflow-hidden bg-inherit start-0"
       style={{
-        width: column.width ?? "12rem",
-        minWidth: column.minWidth ?? "2rem",
-        maxWidth: column.maxWidth ?? "32rem",
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: column.minWidth ?? COL_MIN_WIDTH,
+        maxWidth: column.maxWidth ?? COL_MAX_WIDTH,
       }}
     >
       <div

package/src/table/CheckboxCell.tsx

@@ -0,0 +1,48 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+
+export const CheckboxCell = ({
+  state,
+  onClick,
+}: {
+  state: 0 | 1 | 2;
+  onClick?: () => void;
+}) => {
+  return (
+    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+      <Icon
+        icon={
+          state === 2
+            ? CoreIcons.checkboxInt
+            : state === 1
+              ? CoreIcons.checkboxOn
+              : CoreIcons.checkboxOff
+        }
+        className="p-1 text-tint-700 hover:text-primary-600"
+        onClick={(e) => [onClick?.(), e.stopPropagation()]}
+      />
+    </div>
+  );
+};

package/src/table/Context.tsx

@@ -0,0 +1,70 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { useResizer } from "./useResizer";
+
+interface Context {
+  widths: Map<string, number>;
+  startResize: (col: HTMLElement) => void;
+}
+
+const TableContext = createContext<Context>({} as Context);
+
+export const TableProvider = ({ children }: ChildrenProp) => {
+  const ghostRef = useRef<HTMLDivElement>(null);
+  const [widths, setWidths] = useState<Map<string, number>>(new Map());
+  const startResize = useCallback(
+    (col: HTMLElement) => {
+      if (col) {
+        ghostRef.current != null &&
+          useResizer(col, ghostRef.current, (width) => {
+            setWidths(new Map(widths.set(col.dataset.id ?? "", width)));
+          });
+      }
+    },
+    [widths],
+  );
+
+  return (
+    <TableContext.Provider value={{ startResize, widths }}>
+      {children}
+
+      <div
+        className="absolute inset-0 hidden z-20 cursor-col-resize"
+        ref={ghostRef}
+      >
+        <div className="absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2" />
+      </div>
+    </TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => useContext(TableContext);

package/src/table/EmptyCell.tsx

@@ -0,0 +1,57 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+} from "./types";
+
+export const EmptyCell = ({
+  id,
+  width: _width,
+  maxWidth,
+  minWidth,
+}: ColumnType) => {
+  const { widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(id.toString()) ?? _width,
+    [widths, id, _width],
+  );
+
+  return (
+    <div
+      key={`blank:${id.toString()}`}
+      className="overflow-hidden border-e"
+      style={{
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: minWidth ?? COL_MIN_WIDTH,
+        maxWidth: maxWidth ?? COL_MAX_WIDTH,
+      }}
+    />
+  );
+};

package/src/table/HeaderCell.tsx

@@ -21,10 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
-import { type ColumnType } from "./types";
+import {
+  CoreIcons,
+  DropdownTool,
+  Icon,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from "@react-fabric/core";
+import { useCallback, useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+  type TableProps,
+} from "./types";
 
 export const HeaderCell = ({
+  id,
   label,
   icon,
   iconBg,
@@ -32,38 +48,89 @@ export const HeaderCell = ({
   rtlFlip,
   actions,
   locked,
+  sortable,
   resizable,
-  width,
+  width: _width,
   maxWidth,
   minWidth,
-}: ColumnType) => {
+  sort,
+  onSort,
+}: ColumnType & Pick<TableProps, "sort" | "onSort">) => {
+  const { startResize, widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(id.toString()) ?? _width,
+    [widths, _width, id],
+  );
+
+  const handleSort = useCallback(() => {
+    sortable &&
+      onSort?.({
+        id: id.toString(),
+        order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
+      });
+  }, [onSort, name, sort, sortable]);
+
+  const menus = useMemo(() => {
+    const ret = [];
+    if (sortable) {
+      ret.push(
+        <MenuItem
+          key="sort-asc"
+          label="Sort ascending"
+          icon={CoreIcons.sortAsc}
+        />,
+        <MenuItem
+          key="sort-desc"
+          label="Sort descending"
+          icon={CoreIcons.sortDesc}
+        />,
+      );
+    }
+    return ret;
+  }, [sortable]);
+
   return (
     <div
-      className="group font-medium border-e flex flex-nowrap text-start items-center"
+      role="none"
+      data-id={id}
+      onClick={handleSort}
+      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
-        width: width ?? "12rem",
-        minWidth: minWidth ?? "2rem",
-        maxWidth: maxWidth ?? "32rem",
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: minWidth ?? COL_MIN_WIDTH,
+        maxWidth: maxWidth ?? COL_MAX_WIDTH,
       }}
     >
-      <div className="flex-1 px-2 py-1 text-sm truncate sticky start-0">
-        {icon && (
-          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-        )}
-        <span>{label ?? " "}</span>
-      </div>
-      <Dropdown placement="bottom-start">
-        <Icon
-          icon={CoreIcons.caretDown}
-          className="outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
-        />
-        <Menu className="text-sm">
-          <MenuItem label="Sort ascending" icon={CoreIcons.sortAsc} />
-          <MenuItem label="Sort descending" icon={CoreIcons.sortDesc} />
-        </Menu>
-      </Dropdown>
+      <Tooltip content={label} disabled={!label}>
+        <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
+          {icon && (
+            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+          )}
+          <span>{label ?? " "}</span>
+        </div>
+      </Tooltip>
+      {sortable && (
+        <div className="text-sm text-tint-300">
+          {sort?.id === id && sort?.order === "desc" && <span>▼</span>}
+          {sort?.id === id && sort?.order === "asc" && <span>▲</span>}
+        </div>
+      )}
+      <div className="flex-1" />
+      {menus.length > 0 && (
+        <DropdownTool groupHover placement="bottom-end">
+          <Menu className="text-sm">{menus}</Menu>
+        </DropdownTool>
+      )}
       {resizable && (
-        <div className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch" />
+        <div
+          role="none"
+          className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+          onMouseDown={(e) =>
+            e.currentTarget.parentElement &&
+            startResize(e.currentTarget.parentElement)
+          }
+        />
       )}
     </div>
   );