@dmsi/wedgekit-react 0.0.82 → 0.0.83

package/src/components/DataGrid/types.ts

@@ -0,0 +1,86 @@
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+} from "@tanstack/react-table";
+
+import { ReactNode } from "react";
+
+// TanStack Table
+import {
+  FilterFn,
+  Header,
+  PartialKeys,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/react-table";
+
+// Types
+export interface DataGridPagination {
+  pageIndex: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export interface DataGridProps<T extends Record<string, unknown>> {
+  id?: string;
+  data: T[];
+  columns: ColumnDef<T>[];
+  status?: string;
+  locked?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  pagination?: DataGridPagination;
+  showFilterRow?: boolean;
+  sorting?: SortingState;
+  onSortingChange?: (state: SortingState) => void;
+  columnFilters?: ColumnFiltersState;
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+  rowSelection?: Record<string, boolean>;
+  onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+  filteredSortedData?: T[];
+  totalRowCount: number;
+  hideStatusBar?: boolean;
+  centerHeader?: boolean;
+  enableColumnSelector?: boolean;
+  predeterminedLeftPins?: string[];
+  predeterminedRightPins?: string[];
+  useMenuDefaultMinWidth?: boolean;
+}
+
+declare module "@tanstack/react-table" {
+  interface TableOptions<TData extends RowData>
+    extends PartialKeys<
+      TableOptionsResolved<TData>,
+      "state" | "onStateChange" | "renderFallbackValue"
+    > {
+    filterFns?: FilterFns;
+  }
+  interface FilterFns {
+    endsWith?: FilterFn<RowData>;
+    startsWith?: FilterFn<RowData>;
+  }
+
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterVariant?: "text" | "select" | "range";
+    className?: string;
+    sticky?: boolean;
+    useCustomRenderer?: boolean;
+    locked?: boolean;
+    checkbox?: boolean;
+    headerWidth?: string;
+    visible?: boolean;
+    inVisibilityMenu?: boolean;
+    filterRowCell?: ({
+      header,
+      table,
+    }: {
+      header: Header<TData, TValue>;
+      table: Table<TData>;
+    }) => ReactNode;
+  }
+}

package/src/components/DataGrid/utils.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { Icon } from "..";
+import { SortDirection } from "@tanstack/react-table";
+
+export function getSortIcon(sort: SortDirection | false, nextSort = false) {
+  const iconClassName = clsx(
+    "text-icon-on-action-primary-normal",
+    nextSort && "hidden group-hover:block",
+  );
+  if (sort === "asc")
+    return <Icon size={16} className={iconClassName} name="arrow_upward" />;
+  if (sort === "desc")
+    return <Icon size={16} className={iconClassName} name="arrow_downward" />;
+  return null;
+}

package/src/components/DataGridCell.tsx

@@ -197,14 +197,17 @@ export type DataGridCellHeaderProps<T> = {
   width?: string;
   setNodeRef?: (node: HTMLElement | null) => void;
   node?: RefObject<HTMLElement | null>;
-} & DataGridCellProps & ComponentProps<"th">;
+  useMenuDefaultMinWidth?: boolean;
+} & DataGridCellProps &
+  ComponentProps<"th">;
 
-export function DataCellHeader<T extends unknown>({
+export function DataCellHeader<T>({
   header,
   children,
   setNodeRef,
   node,
   id,
+  useMenuDefaultMinWidth,
   ...props
 }: DataGridCellHeaderProps<T>) {
   const [showMenu, setShowMenu] = useState(false);
@@ -213,22 +216,25 @@ export function DataCellHeader<T extends unknown>({
   );
   const ref = useRef<HTMLElement>(null);
   const predeterminedPinned = useRef(false);
-  
+
   const {
     menuRootRef,
     isMenuActive,
     registerSubMenu,
     listeners: subMenuListeners,
-    mobileHide
+    mobileHide,
   } = useSubMenuSystem(node ? node : ref);
 
   useEffect(() => {
-    const columnPinning = header.getContext().table.options.initialState?.columnPinning;
+    const columnPinning =
+      header.getContext().table.options.initialState?.columnPinning;
     const left = columnPinning?.left ? columnPinning.left : [];
     const right = columnPinning?.right ? columnPinning.right : [];
-    
-    predeterminedPinned.current = [...left, ...right].includes(header.column.id);
-  }, [])
+
+    predeterminedPinned.current = [...left, ...right].includes(
+      header.column.id,
+    );
+  }, []);
 
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -245,7 +251,7 @@ export function DataCellHeader<T extends unknown>({
     whiteSpace: "nowrap",
     width: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
-    ...props.style
+    ...props.style,
   };
 
   return (
@@ -269,6 +275,7 @@ export function DataCellHeader<T extends unknown>({
           show={showMenu}
           setShow={setShowMenu}
           mobileHide={mobileHide}
+          useDefaultMinWidth={useMenuDefaultMinWidth}
         >
           <MenuOption
             id={id ? `${id}-filter-option` : undefined}
@@ -281,6 +288,7 @@ export function DataCellHeader<T extends unknown>({
                 ref={(el) => {
                   registerSubMenu(menuId, el);
                 }}
+                useDefaultMinWidth={useMenuDefaultMinWidth}
               >
                 <div className={clsx(paddingUsingComponentGap)}>
                   <Search
@@ -325,7 +333,7 @@ export function DataCellHeader<T extends unknown>({
           >
             Filter
           </MenuOption>
-          
+
           {!predeterminedPinned.current && header.column.getCanPin() && (
             <MenuOption
               onClick={() => {
@@ -341,29 +349,37 @@ export function DataCellHeader<T extends unknown>({
                   }}
                 >
                   <MenuOption
-                    selected={header.column.getIsPinned() === 'left'}
+                    selected={header.column.getIsPinned() === "left"}
                     onClick={() => {
-                      if (header.column.getIsPinned() === 'left') {
-                        header.column.pin(false)
+                      if (header.column.getIsPinned() === "left") {
+                        header.column.pin(false);
                       } else {
-                        header.column.pin('left')
+                        header.column.pin("left");
                       }
                     }}
-                    after={header.column.getIsPinned() === 'left' && <Icon name="check" />}
+                    after={
+                      header.column.getIsPinned() === "left" && (
+                        <Icon name="check" />
+                      )
+                    }
                   >
                     Left
                   </MenuOption>
 
                   <MenuOption
-                    selected={header.column.getIsPinned() === 'right'}
+                    selected={header.column.getIsPinned() === "right"}
                     onClick={() => {
-                      if (header.column.getIsPinned() === 'right') {
-                        header.column.pin(false)
+                      if (header.column.getIsPinned() === "right") {
+                        header.column.pin(false);
                       } else {
-                        header.column.pin('right')
+                        header.column.pin("right");
                       }
                     }}
-                    after={header.column.getIsPinned() === 'right' && <Icon name="check" />}
+                    after={
+                      header.column.getIsPinned() === "right" && (
+                        <Icon name="check" />
+                      )
+                    }
                   >
                     Right
                   </MenuOption>
@@ -433,6 +449,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     zIndex: isDragging ? 1 : 0,
     width: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-neutral-000)",
+    userSelect: "none",
   };
 
   return (
@@ -463,7 +480,6 @@ export function DragAlongCell<T extends RowData, TValue>({
   const { isDragging, setNodeRef, transform } = useSortable({
     id: cell.column.id,
   });
-  
 
   const style: CSSProperties = {
     opacity: isDragging ? 0.8 : 1,

package/src/components/TopBar.tsx

@@ -58,7 +58,7 @@ export const TopBarBase = ({
           className={clsx(
             "hidden desktop:flex items-center shrink-0 ml-auto",
             "[&>a]:leading-6",
-            layoutGroupGap,
+            layoutGap,
           )}
         >
           {topNavLinks}

package/src/components/index.ts

@@ -0,0 +1,20 @@
+export {
+  DataCellHeader,
+  DataGridCell,
+  DragAlongCell,
+  DraggableCellHeader,
+} from "./DataGridCell";
+export { DataGrid } from "./DataGrid";
+export type { ColumnDef } from "./DataGrid";
+export { Label } from "./Label";
+export { Select } from "./Select";
+export { Subheader } from "./Subheader";
+export { Icon } from "./Icon";
+export { Checkbox } from "./Checkbox";
+export { Paragraph } from "./Paragraph";
+export { Button } from "./Button";
+export { Menu } from "./Menu";
+export { MenuOption } from "./MenuOption";
+export { Search } from "./Search";
+export { Tooltip } from "./Tooltip";
+export { Input } from "./Input";

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useKeydown } from "./useKeydown";
+export { useInfiniteScroll } from "./useInfiniteScroll";
 export { useMatchesMedia, useMatchesMobile } from "./useMatchesMedia";

package/dist/chunk-AWQSSKCK.js

@@ -1,32 +0,0 @@
-// src/components/useInfiniteScroll.tsx
-import { useEffect } from "react";
-function useInfiniteScroll({
-  containerRef,
-  onLoadMore,
-  isLoading,
-  offset = 50,
-  enabled = true
-  // ✅ Add this
-}) {
-  useEffect(() => {
-    if (!enabled) return;
-    const handleScroll = () => {
-      const el2 = containerRef.current;
-      if (!el2 || isLoading) return;
-      const { scrollTop, scrollHeight, clientHeight } = el2;
-      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
-      if (isNearBottom) {
-        onLoadMore();
-      }
-    };
-    const el = containerRef.current;
-    if (el) el.addEventListener("scroll", handleScroll);
-    return () => {
-      if (el) el.removeEventListener("scroll", handleScroll);
-    };
-  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
-}
-
-export {
-  useInfiniteScroll
-};

package/dist/components/useInfiniteScroll.cjs

@@ -1,57 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/useInfiniteScroll.tsx
-var useInfiniteScroll_exports = {};
-__export(useInfiniteScroll_exports, {
-  useInfiniteScroll: () => useInfiniteScroll
-});
-module.exports = __toCommonJS(useInfiniteScroll_exports);
-var import_react = require("react");
-function useInfiniteScroll({
-  containerRef,
-  onLoadMore,
-  isLoading,
-  offset = 50,
-  enabled = true
-  // ✅ Add this
-}) {
-  (0, import_react.useEffect)(() => {
-    if (!enabled) return;
-    const handleScroll = () => {
-      const el2 = containerRef.current;
-      if (!el2 || isLoading) return;
-      const { scrollTop, scrollHeight, clientHeight } = el2;
-      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
-      if (isNearBottom) {
-        onLoadMore();
-      }
-    };
-    const el = containerRef.current;
-    if (el) el.addEventListener("scroll", handleScroll);
-    return () => {
-      if (el) el.removeEventListener("scroll", handleScroll);
-    };
-  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useInfiniteScroll
-});

package/dist/components/useInfiniteScroll.js

@@ -1,8 +0,0 @@
-"use client";
-import {
-  useInfiniteScroll
-} from "../chunk-AWQSSKCK.js";
-import "../chunk-ORMEWXMH.js";
-export {
-  useInfiniteScroll
-};