@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/src/components/DataGrid.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { ReactNode, useId, useState } from "react";
+import React, { ReactNode, useCallback, useId, useRef, useState } from "react";
 
 // TanStack Table
 import {
+  Column,
   ColumnDef,
   ColumnFiltersState,
   FilterFn,
@@ -115,6 +116,7 @@ export interface DataGridProps<T extends Record<string, unknown>> {
   totalRowCount: number;
   hideStatusBar?: boolean;
   centerHeader?: boolean;
+  enableColumnSelector?: boolean;
 }
 
 export function DataGrid<T extends Record<string, unknown>>({
@@ -136,6 +138,7 @@ export function DataGrid<T extends Record<string, unknown>>({
   totalRowCount,
   hideStatusBar,
   centerHeader,
+  enableColumnSelector,
 }: DataGridProps<T>) {
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     columns.map((c) => c.id!),
@@ -205,6 +208,37 @@ export function DataGrid<T extends Record<string, unknown>>({
   const id = useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
 
+  const [columnVisibility, setColumnVisibility] = useState<
+    Record<string, boolean>
+  >(() => {
+    const initialVisibility: Record<string, boolean> = {};
+    columns.forEach((column) => {
+      if (column.id) {
+        initialVisibility[column.id] = column.meta?.visible ?? true;
+      }
+    });
+    return initialVisibility;
+  });
+
+  const toggleColumnVisibility = useCallback(
+    (id: string, isVisible: boolean) => {
+      setColumnVisibility((prev) => ({ ...prev, [id]: isVisible }));
+    },
+    [setColumnVisibility],
+  );
+
+  const resetColumnVisibility = useCallback(() => {
+    setColumnVisibility(() => {
+      const initialVisibility: Record<string, boolean> = {};
+      columns.forEach((column) => {
+        if (column.id) {
+          initialVisibility[column.id] = column.meta?.visible ?? true;
+        }
+      });
+      return initialVisibility;
+    });
+  }, [columns]);
+
   const table = useReactTable<T>({
     columns,
     data,
@@ -218,6 +252,7 @@ export function DataGrid<T extends Record<string, unknown>>({
       sorting: sortingState,
       columnFilters: columnFilterState,
       rowSelection,
+      columnVisibility,
     },
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
@@ -326,9 +361,9 @@ export function DataGrid<T extends Record<string, unknown>>({
         items={columnOrder}
         strategy={horizontalListSortingStrategy}
       >
-        <div className="flex flex-col flex-1 max-h-screen m-4 rounded border border-border-primary-normal overflow-hidden text-text-primary-normal">
+        <div className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal">
           <div
-            className="overflow-auto scrollbar-thin max-h-full relative contain-paint will-change-transform"
+            className="overflow-auto scrollbar-thin h-full relative contain-paint will-change-transform"
             ref={containerRef}
           >
             <table className="min-w-full grid">
@@ -432,6 +467,13 @@ export function DataGrid<T extends Record<string, unknown>>({
                         style={{ display: "flex", width: virtualPaddingRight }}
                       />
                     ) : null}
+                    {enableColumnSelector && (
+                      <ColumnSelectorHeaderCell
+                        table={table}
+                        toggleColumnVisibility={toggleColumnVisibility}
+                        resetColumnVisibility={resetColumnVisibility}
+                      />
+                    )}
                   </tr>
                 ))}
               </thead>
@@ -446,6 +488,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                 isLoadingMore={isLoadingMore}
                 hasMore={hasMore}
                 showFilterRow={showFilterRow}
+                enableColumnSelector={enableColumnSelector}
               />
             </table>
           </div>
@@ -551,6 +594,7 @@ interface TableBodyProps<TData extends RowData> {
   isLoadingMore: boolean;
   hasMore: boolean;
   showFilterRow: boolean;
+  enableColumnSelector?: boolean;
 }
 
 // Helpers
@@ -565,6 +609,7 @@ function TableBody<T>({
   isLoadingMore,
   hasMore,
   showFilterRow,
+  enableColumnSelector = false,
 }: TableBodyProps<T>) {
   const { rows } = table.getRowModel();
 
@@ -639,6 +684,7 @@ function TableBody<T>({
             virtualPaddingRight={virtualPaddingRight}
             virtualRow={virtualRow}
             showFilterRow={showFilterRow}
+            enableColumnSelector={enableColumnSelector}
           />
         );
       })}
@@ -670,6 +716,7 @@ interface TableBodyRowProps<T> {
   virtualPaddingRight: number | undefined;
   virtualRow: VirtualItem;
   showFilterRow: boolean;
+  enableColumnSelector?: boolean;
 }
 
 function TableBodyRow<T>({
@@ -680,6 +727,7 @@ function TableBodyRow<T>({
   virtualPaddingRight,
   virtualRow,
   showFilterRow,
+  enableColumnSelector = false,
 }: TableBodyRowProps<T>) {
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -738,6 +786,8 @@ function TableBodyRow<T>({
         // fake empty column to the right for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingRight }} />
       ) : null}
+
+      {enableColumnSelector && <td></td>}
     </tr>
   );
 }
@@ -773,6 +823,84 @@ const LoadingCell = <T extends RowData>({
   );
 };
 
+function ColumnSelectorHeaderCell<T>({
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility,
+}: {
+  table: Table<T>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+  resetColumnVisibility: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [show, setShow] = useState(false);
+
+  return (
+    <DataGridCell
+      width="48"
+      type="header"
+      color="text-secondary-normal"
+      ref={ref}
+    >
+      <Button
+        onClick={() => setShow((prev) => !prev)}
+        variant="navigation"
+        iconOnly
+        leftIcon={<Icon name="tune" />}
+      ></Button>
+      <Menu
+        positionTo={ref}
+        position="bottom-right"
+        show={show}
+        setShow={setShow}
+      >
+        <Button
+          variant="tertiary"
+          onClick={() => {
+            resetColumnVisibility();
+            setShow(false);
+          }}
+        >
+          Reset to default
+        </Button>
+        {table.getAllColumns().map((column) => (
+          <ColumnSelectorMenuOption
+            key={column.id}
+            column={column}
+            toggleColumnVisibility={toggleColumnVisibility}
+          />
+        ))}
+      </Menu>
+    </DataGridCell>
+  );
+}
+
+function ColumnSelectorMenuOption<T>({
+  column,
+  toggleColumnVisibility,
+}: {
+  column: Column<T, unknown>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+}) {
+  const [isVisible, setIsVisible] = useState(column.getIsVisible());
+  const label =
+    typeof column.columnDef.header === "string"
+      ? column.columnDef.header
+      : null;
+  return (
+    <MenuOption selected={isVisible} defaultChecked={isVisible}>
+      <Checkbox
+        label={label ?? "Unknown"}
+        checked={isVisible}
+        onChange={(e) => {
+          setIsVisible(e.target.checked);
+          toggleColumnVisibility(column.id, e.target.checked);
+        }}
+      />
+    </MenuOption>
+  );
+}
+
 function getSortIcon(sort: SortDirection | false, nextSort = false) {
   const iconClassName = clsx(
     "text-icon-on-action-primary-normal",
@@ -807,6 +935,7 @@ declare module "@tanstack/react-table" {
     locked?: boolean;
     checkbox?: boolean;
     headerWidth?: string;
+    visible?: boolean;
     filterRowCell?: ({
       header,
       table,

package/src/components/FilterGroup.tsx

@@ -7,6 +7,7 @@ import { Checkbox } from "./Checkbox";
 import { OptionPill } from "./OptionPill";
 import clsx from "clsx";
 import { Link } from "./Link";
+import { Search } from "./Search";
 import {
   baseTransition,
   componentGap,
@@ -23,8 +24,19 @@ type FilterGroupProps = {
   showMore?: boolean;
   type?: "link" | "checkbox" | "summary";
   onShowMore?: () => void;
-  onClearAll?: () => void; // ✅ NEW
-};
+  onClearAll?: () => void;
+} & (
+  | {
+      showSearchField: true;
+      searchValue: string;
+      onSearchChange: React.ChangeEventHandler<HTMLInputElement>;
+    }
+  | {
+      showSearchField?: false | undefined;
+      searchValue?: string;
+      onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;
+    }
+);
 
 export const FilterGroup = ({
   label,
@@ -34,6 +46,9 @@ export const FilterGroup = ({
   onShowMore,
   onClearAll,
   children,
+  showSearchField = false,
+  searchValue,
+  onSearchChange,
   ...props
 }: ComponentProps<"div"> & FilterGroupProps) => {
   const isSummary = type === "summary";
@@ -110,6 +125,14 @@ export const FilterGroup = ({
               "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap",
           )}
         >
+          {!isSummary && showSearchField && (
+            <Search
+              style={{ marginBottom: '2px' }}
+              onChange={onSearchChange}
+              value={searchValue}
+            />
+          )}
+
           <div className={clsx(isSummary && `flex flex-col ${componentGap}`)}>
             {visibleChildren}
           </div>

package/src/components/Input.tsx

@@ -251,6 +251,7 @@ export const Input = ({
     const baseProps = {
       ...props,
       ...getDecimalPlaceholder(decimals),
+      value: propValue
     };
 
     switch (variant) {
@@ -329,7 +330,9 @@ export const Input = ({
 
       case "uom":
         return uom ? (
-          <span className="text-text-secondary-normal uppercase">{uom}</span>
+            <span className="text-text-secondary-normal uppercase">
+            {uom.slice(0, 4)}
+            </span>
         ) : null;
 
       case "percentage":

package/src/components/MainBar.tsx

@@ -32,8 +32,9 @@ export const MainBar = ({
   return (
     <div
       className={clsx(
+        "min-h-mobile-container-padding",
         "bg-background-brand-normal items-center justify-between",
-        !mobileLeft && !mobileRight ? "hidden desktop:flex" : "flex",
+        "flex",
         layoutGroupGap,
         containerPaddingX,
         footer ? containerPaddingY : componentPaddingYUsingComponentGap,

package/src/components/Menu.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import clsx from "clsx";
-import { ComponentProps, ReactNode, RefObject, useEffect, useRef, useState } from "react";
+import {
+  ComponentProps,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useMenuPosition } from "./useMenuSystem";
 import { findDocumentRoot } from "../utils";
@@ -53,7 +60,7 @@ export const Menu = ({
       isOpen: show,
       setIsOpen: setShow,
       menuRef: internalRef,
-      topOffset
+      topOffset,
     },
   );
 
@@ -131,7 +138,7 @@ export const Menu = ({
           ...props.style,
           maxHeight: customMaxHeight || maxHeight,
           ...menuPosition,
-          minWidth: useDefaultMinWidth ? '212px' : menuPosition.minWidth
+          minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth,
         }}
         onKeyDown={handleKeydown}
         onMouseDown={stopPropagation}
@@ -247,7 +254,7 @@ export const Menu = ({
       block: "nearest",
       behavior: "instant",
     });
-    
+
     if (autoFocusOff) {
       return;
     }

package/src/components/MobileDataGrid.tsx

@@ -0,0 +1,135 @@
+import clsx from "clsx";
+import { Icon } from "./Icon";
+import { ComponentProps } from "react";
+import { Stack } from "./Stack";
+import { Button } from "./Button";
+import { Theme } from "./Theme";
+import { Heading3 } from "./Heading";
+import { Paragraph } from "./Paragraph";
+
+export type RowData = Record<string, unknown>;
+
+export type MobileColumnDef<T extends RowData> = {
+  header: string;
+  accessorKey: keyof T;
+  show?: boolean;
+
+  cell?: (info: { row: T }) => React.ReactNode;
+};
+
+export function MobileDataGrid<T extends RowData>({
+  columns,
+  data,
+  header,
+  getId,
+  renderLink,
+  renderChevron,
+}: {
+  columns: MobileColumnDef<T>[];
+  data: T[];
+  header: string;
+  getId: (data: T) => string | number | undefined;
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: (data: T) => React.ReactNode;
+} & ComponentProps<"div">) {
+  return (
+    <div
+      className={clsx(
+        "rounded",
+        "overflow-hidden",
+        "divide-y divide-border-primary-normal",
+        "border border-border-primary-normal",
+        "overflow-y-scroll scrollbar-thin",
+      )}
+    >
+      <MobileDataGridHeader header={header} />
+      {data.map((item) => (
+        <MobileDataGridCard
+          data={item}
+          key={getId(item)}
+          columns={columns}
+          renderLink={renderLink}
+          renderChevron={renderChevron}
+        />
+      ))}
+    </div>
+  );
+}
+
+function MobileDataGridHeader({ header }: { header: string }) {
+  return (
+    <div className="sticky top-0">
+      <Theme theme="brand">
+        <Stack
+          horizontal
+          items="start"
+          justify="center"
+          backgroundColor="background-primary-normal"
+          padding
+          sizing="component"
+        >
+          <Heading3 as="span" color="text-primary-normal">
+            {header}
+          </Heading3>
+        </Stack>
+      </Theme>
+    </div>
+  );
+}
+
+function MobileDataGridCard<T extends RowData>({
+  data,
+  columns,
+  renderLink,
+  renderChevron,
+}: {
+  data: T;
+  columns: MobileColumnDef<T>[];
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: (data: T) => React.ReactNode;
+}) {
+  return (
+    <div>
+      <Stack sizing="component" padding>
+        <Stack horizontal horizontalMobile items="center" justify="between">
+          {renderLink && renderLink(data)}
+          <Stack horizontal horizontalMobile items="center" justify="end">
+            <Button
+              iconOnly
+              variant="tertiary"
+              onClick={() => console.log("Edit", data.id)}
+              leftIcon={<Icon name="docs" />}
+            ></Button>
+            <Button
+              iconOnly
+              variant="tertiary"
+              onClick={() => console.log("Edit", data.id)}
+              leftIcon={<Icon name="swap_vert" />}
+            ></Button>
+          </Stack>
+        </Stack>
+
+        {columns
+          .filter((x) => x.show)
+          .map((column) => (
+            <div
+              key={String(column.accessorKey)}
+              className="mb-2 grid grid-cols-2"
+            >
+              <Paragraph color="text-secondary-normal" className="text-left">
+                {column.header}:
+              </Paragraph>{" "}
+              {column.cell
+                ? column.cell({ row: data })
+                : String(data[column.accessorKey])}
+            </div>
+          ))}
+      </Stack>
+      {renderChevron && (
+        <Stack items="center" justify="center" horizontal horizontalMobile>
+          {renderChevron(data)}
+        </Stack>
+      )}
+    </div>
+  );
+}

package/src/components/Modal.tsx

@@ -9,6 +9,7 @@ import { ModalScrim } from "./ModalScrim";
 import { createPortal } from "react-dom";
 import { findDocumentRoot } from "../utils";
 import { usePrevious } from "react-use";
+import { useMatchesMobile } from "./useMatchesMedia";
 import { useMounted } from "./useMounted";
 
 type ModalProps = PropsWithChildren<{
@@ -20,6 +21,10 @@ type ModalProps = PropsWithChildren<{
   onContinue?: () => void;
   closeOnBackdropClick?: boolean;
   showButtons?: boolean;
+  hideCloseIcon?: boolean;
+  headerIcon?: React.ReactNode;
+  fixedHeightScrolling?: boolean;
+  customActions?: React.ReactNode;
 }>;
 
 const fadeInScale = (element: HTMLElement, duration = 300) =>
@@ -80,16 +85,19 @@ const whenAllAnimationsFinish = (
 
 const sizes = {
   small: {
-    sizeClass: "max-w-120",
+    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm",
   },
   medium: {
-    sizeClass: "max-w-180",
+    sizeClass:
+      "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
   },
   large: {
-    sizeClass: "max-w-240",
+    sizeClass:
+      "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
   },
   "x-large": {
-    sizeClass: "max-w-300",
+    sizeClass:
+      "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
   },
 };
 
@@ -103,6 +111,10 @@ export const Modal = ({
   onContinue,
   closeOnBackdropClick = true,
   showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  fixedHeightScrolling = false,
+  customActions,
 }: ModalProps) => {
   const mounted = useMounted();
 
@@ -111,8 +123,11 @@ export const Modal = ({
 
   const wasOpen = usePrevious(open);
 
+  const isMobile = useMatchesMobile();
+
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+
   useEffect(() => {
-    console.log("was open", wasOpen, open);
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -120,7 +135,6 @@ export const Modal = ({
     }
     if (wasOpen === undefined) return;
     if (wasOpen && !open) {
-      console.log('"Closing modal"');
       const modalAnimation = fadeOutScale(modalRef.current);
       const bgAnimation = bgFadeOut(bgRef.current);
       whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
@@ -129,7 +143,6 @@ export const Modal = ({
         }
       });
     } else if (!wasOpen && open) {
-      console.log('"Opening modal"');
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
@@ -163,13 +176,40 @@ export const Modal = ({
     };
   }, [open, handleKeyDown]);
 
+  // Effect to lock scroll when modal is open
+  useEffect(() => {
+    if (!open) return;
+
+    const scrollY = window.scrollY;
+    const body = document.body;
+
+    // Lock scroll
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.overflow = "hidden";
+    body.style.width = "100%";
+
+    return () => {
+      // Restore scroll
+      body.style.position = "";
+      body.style.top = "";
+      body.style.left = "";
+      body.style.right = "";
+      body.style.overflow = "";
+      body.style.width = "";
+
+      window.scrollTo(0, scrollY);
+    };
+  }, [open]);
+
   const { sizeClass } = sizes[size] ?? sizes.small;
 
   const backgroundClickHandler = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       const target = e.target as HTMLElement;
       const currentTarget = e.currentTarget as HTMLElement;
-      console.log(currentTarget, target, currentTarget.contains(target));
       if (currentTarget.contains(target) && currentTarget !== target) {
         e.stopPropagation();
         return;
@@ -187,20 +227,40 @@ export const Modal = ({
   }
 
   return createPortal(
-    <ModalScrim ref={bgRef} show={open} onClick={backgroundClickHandler}>
+    <ModalScrim
+      size={size}
+      ref={bgRef}
+      show={open}
+      onClick={backgroundClickHandler}
+    >
       <div
         ref={modalRef}
         className={clsx(
-          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden max-h-[calc(100vh-32px)] w-full opacity-0",
+          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+          computedFixedHeightScrolling &&
+            "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
           className,
           sizeClass,
         )}
         onClick={(e) => e.stopPropagation()}
       >
-        <ModalHeader title={title} onClose={handleClose} />
-        {children && <ModalContent>{children}</ModalContent>}
+        <ModalHeader
+          title={title}
+          onClose={handleClose}
+          hideCloseIcon={hideCloseIcon}
+          headerIcon={headerIcon}
+        />
+        {children && (
+          <ModalContent fixedHeightScrolling={computedFixedHeightScrolling}>
+            {children}
+          </ModalContent>
+        )}
         {showButtons && (
-          <ModalButtons onClose={handleClose} onContinue={onContinue} />
+          <ModalButtons
+            onClose={handleClose}
+            onContinue={onContinue}
+            customActions={customActions}
+          />
         )}
       </div>
     </ModalScrim>,