@dmsi/wedgekit-react 0.0.28 → 0.0.30

package/src/components/DataGridCell.tsx

@@ -16,6 +16,7 @@ import {
   CSSProperties,
   memo,
   PropsWithChildren,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -145,7 +146,7 @@ export const DataGridCell = memo(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       component === "input" && "border",
       component === "input" &&
@@ -164,7 +165,7 @@ export const DataGridCell = memo(
     return (
       <Element
         id={id}
-        className={clsx("flex", !width && "flex-1")}
+        className={clsx("flex h-10", !width && "flex-1")}
         style={{ width }}
         {...props}
       >
@@ -190,38 +191,44 @@ export const DataGridCell = memo(
 
 DataGridCell.displayName = "DataGridCell";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function DraggableCellHeader<T extends Record<string, any>>({
-  header,
-  children,
-  locked = false,
-  id,
-  ...props
-}: {
+export type DataGridCellHeaderProps<T> = {
   header: Header<T, unknown>;
   children: React.ReactNode;
-  locked?: boolean;
   width?: string;
-  id?: string;
-} & DataGridCellProps &
-  ComponentProps<"th">) {
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } =
-    useSortable({
-      id: header.column.id,
-    });
+  setNodeRef?: (node: HTMLElement | null) => void;
+  node?: RefObject<HTMLElement | null>;
+} & DataGridCellProps & ComponentProps<"th">;
 
+export function DataCellHeader<T extends unknown>({
+  header,
+  children,
+  setNodeRef,
+  node,
+  id,
+  ...props
+}: DataGridCellHeaderProps<T>) {
   const [showMenu, setShowMenu] = useState(false);
   const [filter, setFilter] = useState(
     (header.column.getFilterValue() as string) ?? "",
   );
-
+  const ref = useRef<HTMLElement>(null);
+  const predeterminedPinned = useRef(false);
+  
   const {
     menuRootRef,
     isMenuActive,
     registerSubMenu,
     listeners: subMenuListeners,
-    mobileHide,
-  } = useSubMenuSystem(node);
+    mobileHide
+  } = useSubMenuSystem(node ? node : ref);
+
+  useEffect(() => {
+    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);
+  }, [])
 
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -234,30 +241,23 @@ export function DraggableCellHeader<T extends Record<string, any>>({
   }, [filter]);
 
   const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
     position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
     "--color-text-primary-normal": "var(--color-neutral-000)",
+    ...props.style
   };
 
   return (
     <DataGridCell
       id={id}
-      locked={locked}
+      ref={setNodeRef ? setNodeRef : ref}
       type="header"
       component="header"
-      ref={setNodeRef}
-      colSpan={header.colSpan}
       style={style}
-      {...props}
       onClick={header.column.getToggleSortingHandler()}
       onRightClick={() => setShowMenu(!showMenu)}
-      {...(locked ? {} : attributes)}
-      {...(locked ? {} : listeners)}
+      {...props}
     >
       {children}
 
@@ -265,7 +265,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
         <Menu
           id={id ? `${id}-menu` : undefined}
           ref={menuRootRef}
-          positionTo={node}
+          positionTo={node ? node : ref}
           show={showMenu}
           setShow={setShowMenu}
           mobileHide={mobileHide}
@@ -325,6 +325,54 @@ export function DraggableCellHeader<T extends Record<string, any>>({
           >
             Filter
           </MenuOption>
+          
+          {!predeterminedPinned.current && header.column.getCanPin() && (
+            <MenuOption
+              onClick={() => {
+                setShowMenu(!showMenu);
+              }}
+              {...subMenuListeners}
+              subMenu={({ menuId, subMenuLevel, ...props }) => (
+                <Menu
+                  {...props}
+                  show={isMenuActive(menuId, subMenuLevel)}
+                  ref={(el) => {
+                    registerSubMenu(menuId, el);
+                  }}
+                >
+                  <MenuOption
+                    selected={header.column.getIsPinned() === 'left'}
+                    onClick={() => {
+                      if (header.column.getIsPinned() === 'left') {
+                        header.column.pin(false)
+                      } else {
+                        header.column.pin('left')
+                      }
+                    }}
+                    after={header.column.getIsPinned() === 'left' && <Icon name="check" />}
+                  >
+                    Left
+                  </MenuOption>
+
+                  <MenuOption
+                    selected={header.column.getIsPinned() === 'right'}
+                    onClick={() => {
+                      if (header.column.getIsPinned() === 'right') {
+                        header.column.pin(false)
+                      } else {
+                        header.column.pin('right')
+                      }
+                    }}
+                    after={header.column.getIsPinned() === 'right' && <Icon name="check" />}
+                  >
+                    Right
+                  </MenuOption>
+                </Menu>
+              )}
+            >
+              Freeze [{header.column.columnDef.header as string}]
+            </MenuOption>
+          )}
         </Menu>
       )}
     </DataGridCell>
@@ -359,10 +407,49 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     }
 
     header.column.columnDef.filterFn = filterFn;
-    header.column.setFilterValue(header.column.getFilterValue() ?? "");
+    header.column.setFilterValue(filter);
   }
 }
 
+DataCellHeader.displayName = "DataCellHeader";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function DraggableCellHeader<T extends Record<string, any>>({
+  header,
+  children,
+  ...props
+}: DataGridCellHeaderProps<T>) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } =
+    useSortable({
+      id: header.column.id,
+    });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    zIndex: isDragging ? 1 : 0,
+    width: header.column.getSize(),
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+  };
+
+  return (
+    <DataCellHeader
+      header={header}
+      setNodeRef={setNodeRef}
+      node={node}
+      style={style}
+      {...props}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </DataCellHeader>
+  );
+}
+
 DraggableCellHeader.displayName = "DraggableCellHeader";
 
 export function DragAlongCell<T extends RowData, TValue>({
@@ -376,15 +463,15 @@ export function DragAlongCell<T extends RowData, TValue>({
   const { isDragging, setNodeRef, transform } = useSortable({
     id: cell.column.id,
   });
+  
 
   const style: CSSProperties = {
     opacity: isDragging ? 0.8 : 1,
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    zIndex: isDragging ? 1 : 0,
     width: cell.column.getSize(),
-    minWidth: "min-content",
+    zIndex: isDragging ? 1 : 0,
   };
 
   return (

package/src/components/DateInput.tsx

@@ -1,9 +1,16 @@
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { InputBaseProps, InputBase } from "./Input";
 import { CalendarRange } from "./CalendarRange";
 import { Icon } from "./Icon";
 import { findDocumentRoot } from "../utils";
+import {
+  parseInputDate,
+  isValidDate,
+  formatInputValue,
+  calculateCursorPosition,
+  formatDate,
+} from "../utils/date";
 
 type DateInputProps = Omit<InputBaseProps, "id"> & {
   id?: string;
@@ -32,6 +39,7 @@ type DateInputProps = Omit<InputBaseProps, "id"> & {
   readOnly?: boolean; // If true, input is read-only and cannot be focused
   label?: string; // Optional label for the input
 };
+
 export const DateInput = ({
   id,
   value,
@@ -43,6 +51,8 @@ export const DateInput = ({
   ...props
 }: DateInputProps) => {
   const [visible, setVisible] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLInputElement | null>(null);
   const [calendarPosition, setCalendarPosition] = useState({
@@ -54,17 +64,26 @@ export const DateInput = ({
   // Extract from and to values from the pipe-separated string when range is enabled
   const [from, to] = [value, ""];
 
+  // Update input value when external value changes (but not when typing)
+  useEffect(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible])
+
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        if (triggerRef.current) {
-          const rect = triggerRef.current.getBoundingClientRect();
-          setCalendarPosition({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
-            width: rect.width,
-          });
-        }
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
       });
     }
   };
@@ -119,26 +138,88 @@ export const DateInput = ({
     // For single date selection, only pass the from value
     onChange(fromValue);
     setVisible(false);
+    setIsTyping(false);
   }
 
   const handleFocus = () => {
     if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
 
-  function formatDisplayValue(from?: string) {
-    if (!from) return "";
-
-    // Show single date format: "MM/DD/YYYY"
-    return formatDate(from ?? "");
+  const handleClick = () => {
+    handleFocus();
   }
 
-  function formatDate(date: string) {
-    if (!date) return "";
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (readOnly) return;
+    
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    setIsTyping(true);
+    
+    // Format the input as user types (add slashes automatically)
+    const formattedValue = formatInputValue(rawValue);
+    setInputValue(formattedValue);
+    
+    // Restore cursor position after formatting
+    requestAnimationFrame(() => {
+      if (triggerRef.current) {
+        const newPosition = calculateCursorPosition(rawValue, formattedValue, cursorPosition);
+        triggerRef.current.setSelectionRange(newPosition, newPosition);
+      }
+    });
+    
+    // Try to parse and validate the date
+    const parsedDate = parseInputDate(formattedValue);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(parsedDate);
+    }
+  };
+
+  const handleBlur = () => {
+    setIsTyping(false);
+    // If the input is invalid, revert to the last valid value
+    const parsedDate = parseInputDate(inputValue);
+    if (!parsedDate || !isValidDate(parsedDate)) {
+      setInputValue(formatDisplayValue(from));
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Backspace") {
+      const input = event.target as HTMLInputElement;
+      const cursorPosition = input.selectionStart || 0;
+      const value = input.value;
+      
+      // If cursor is right after a slash, move it before the slash
+      if (cursorPosition > 0 && value[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value.slice(0, cursorPosition - 2) + value.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        
+        // Set cursor position after the deletion
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        
+        setIsTyping(true);
+        return;
+      }
+    }
+    
+    if (event.key === "Enter") {
+      const parsedDate = parseInputDate(inputValue);
+      if (parsedDate && isValidDate(parsedDate)) {
+        onChange(parsedDate);
+        setVisible(false);
+        setIsTyping(false);
+      }
+    }
+  };
 
   return (
     <div className="relative">
@@ -148,15 +229,16 @@ export const DateInput = ({
           triggerRef.current = el;
         }}
         {...props}
-        value={formatDisplayValue(from)}
+        value={inputValue}
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
         after={<Icon name="calendar_month" />}
         onFocus={handleFocus}
-        onChange={() => {
-          // Input is controlled by calendar picker, ignore direct text changes
-        }}
+        onClick={handleClick}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
         label={label}
       />
       {visible &&
@@ -190,3 +272,14 @@ export const DateInput = ({
 };
 
 DateInput.displayName = "DateInput";
+
+function formatDisplayValue(from?: string): string {
+  if (!from) {
+    return "";
+  }
+  if (!isValidDate(from)) {
+    return "";
+  }
+  
+  return formatDate(from);
+}