@youp-grid/react 0.2.0 → 0.2.2

package/dist/YoupGrid.js

@@ -9,6 +9,9 @@ const DENSITY_ROW_HEIGHTS = {
     comfortable: 46,
 };
 const SELECTION_COLUMN_WIDTH = 44;
+const AUTOSIZE_CELL_EXTRA_WIDTH = 8;
+const AUTOSIZE_CELL_BORDER_THRESHOLD = 6;
+let autosizeMeasureCanvas;
 export function YoupGrid(props) {
     const controller = useYoupGrid(props);
     const rowModel = controller.rowModel;
@@ -32,6 +35,7 @@ export function YoupGrid(props) {
     const [columnChooserOpen, setColumnChooserOpen] = useState(false);
     const [columnMenuOpenId, setColumnMenuOpenId] = useState();
     const showRowSelectionColumn = props.showRowSelectionColumn ?? false;
+    const pinRowSelectionColumn = props.pinRowSelectionColumn ?? false;
     const gridEditable = (props.editable ?? true) && !props.readOnly;
     const displayRows = rowModel.displayRows;
     const virtualRange = useMemo(() => {
@@ -75,9 +79,9 @@ export function YoupGrid(props) {
     const someVisibleRowsSelected = selectedVisibleRowCount > 0 && !allVisibleRowsSelected;
     const columnLayouts = useMemo(() => {
         return getColumnLayouts(rowModel.visibleColumns, {
-            leftOffset: showRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
+            leftOffset: showRowSelectionColumn && pinRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
         });
-    }, [rowModel.visibleColumns, showRowSelectionColumn]);
+    }, [pinRowSelectionColumn, rowModel.visibleColumns, showRowSelectionColumn]);
     const visibleColumns = useMemo(() => columnLayouts.map((layout) => layout.column), [columnLayouts]);
     const visibleRowIndexById = useMemo(() => {
         return new Map(rowModel.visibleRows.map((row, index) => [row.id, index]));
@@ -313,6 +317,7 @@ export function YoupGrid(props) {
             "youp-grid",
             `youp-grid--density-${density}`,
             !gridEditable ? "youp-grid--read-only" : "",
+            pinRowSelectionColumn ? "youp-grid--selection-column-pinned" : "",
             props.className,
         ].filter(Boolean).join(" "),
         style: gridStyle,
@@ -403,6 +408,14 @@ export function YoupGrid(props) {
                 }
             },
             resizeColumn: (width) => controller.setColumnWidth(layout.column.id, width),
+            autoSizeColumn: (event) => {
+                autoSizeColumnToFit({
+                    event,
+                    column: layout.column,
+                    rows: rowModel.visibleRows,
+                    resizeColumn: (width) => controller.setColumnWidth(layout.column.id, width),
+                });
+            },
             showMenu: props.showColumnMenu ?? true,
             menuOpen: columnMenuOpenId === layout.column.id,
             toggleMenu: () => {
@@ -496,6 +509,14 @@ export function YoupGrid(props) {
                             },
                         });
                     },
+                    autoSizeColumn: (event, column) => {
+                        autoSizeColumnToFit({
+                            event,
+                            column,
+                            rows: rowModel.visibleRows,
+                            resizeColumn: (width) => controller.setColumnWidth(column.id, width),
+                        });
+                    },
                     applyCellValue,
                     startEditing: startEditingCell,
                     updateEditingDraft: (draftValue) => {
@@ -677,6 +698,7 @@ function renderHeaderCell(context) {
         role: "columnheader",
         style: getCellStyle(context.layout),
         "aria-sort": context.sorted === "desc" ? "descending" : context.sorted === "asc" ? "ascending" : "none",
+        "data-youp-column-id": context.layout.column.id,
     }, createElement("div", { className: "youp-grid__header-main" }, createElement("button", {
         className: "youp-grid__sort-button",
         type: "button",
@@ -736,6 +758,7 @@ function renderHeaderCell(context) {
                 resizeColumn: context.resizeColumn,
             });
         },
+        onDoubleClick: context.autoSizeColumn,
     }));
 }
 function renderColumnMenu(context) {
@@ -886,6 +909,7 @@ function renderRow(context) {
             meta,
             setFocusedCell: context.setFocusedCell,
             startFillHandle: context.startFillHandle,
+            autoSizeColumn: context.autoSizeColumn,
             applyCellValue: context.applyCellValue,
             startEditing: context.startEditing,
             updateEditingDraft: context.updateEditingDraft,
@@ -935,6 +959,7 @@ function renderCell(context) {
     const column = context.layout.column;
     const value = column.accessor(context.row.original);
     const editable = context.editable;
+    const cellAlign = getColumnAlign(column);
     const cellContext = {
         row: context.row,
         column,
@@ -965,6 +990,7 @@ function renderCell(context) {
         key: column.id,
         className: getCellClassName([
             "youp-grid__cell",
+            `youp-grid__cell--align-${cellAlign}`,
             context.focused ? "youp-grid__cell--focused" : "",
             context.selected ? "youp-grid__cell--range-selected" : "",
             context.fillTargeted ? "youp-grid__cell--fill-target" : "",
@@ -985,7 +1011,11 @@ function renderCell(context) {
             event.currentTarget.focus({ preventScroll: true });
             context.setFocusedCell({ rowIndex: context.rowIndex, columnIndex: context.columnIndex }, event.shiftKey);
         },
-        onDoubleClick: () => {
+        onDoubleClick: (event) => {
+            if (isCellRightBorderDoubleClick(event)) {
+                context.autoSizeColumn(event, column);
+                return;
+            }
             if (editable) {
                 if (column.editor === "checkbox") {
                     context.applyCellValue(cellState, !Boolean(value));
@@ -1013,6 +1043,18 @@ function renderCell(context) {
         })
         : undefined);
 }
+function getColumnAlign(column) {
+    if (column.align) {
+        return column.align;
+    }
+    if (column.editor === "number") {
+        return "right";
+    }
+    if (column.editor === "checkbox") {
+        return "center";
+    }
+    return "left";
+}
 function renderDefaultCellContent(context) {
     if (context.cell.column.editor === "checkbox") {
         return createElement("input", {
@@ -1338,6 +1380,100 @@ function startColumnResize(context) {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
 }
+function autoSizeColumnToFit(context) {
+    context.event.preventDefault();
+    context.event.stopPropagation();
+    context.resizeColumn(getAutoSizeColumnWidth({
+        anchor: context.event.currentTarget,
+        column: context.column,
+        rows: context.rows,
+    }));
+}
+function getAutoSizeColumnWidth(context) {
+    const metrics = getAutoSizeMetrics(context.anchor, context.column.id);
+    const minWidth = context.column.minWidth ?? 64;
+    const maxWidth = context.column.maxWidth ?? Number.MAX_SAFE_INTEGER;
+    let width = measureAutoSizeText(context.column.headerName, metrics.headerFont) +
+        metrics.headerHorizontalPadding +
+        metrics.headerControlWidth +
+        AUTOSIZE_CELL_EXTRA_WIDTH;
+    for (const row of context.rows) {
+        const text = getAutoSizeCellText(context.column, row.original);
+        width = Math.max(width, measureAutoSizeText(text, metrics.cellFont) + metrics.cellHorizontalPadding + AUTOSIZE_CELL_EXTRA_WIDTH);
+    }
+    return Math.ceil(clamp(width, minWidth, maxWidth));
+}
+function getAutoSizeMetrics(anchor, columnId) {
+    const anchorCell = anchor.closest(".youp-grid__cell");
+    const root = anchor.closest(".youp-grid");
+    const headerCell = anchorCell?.getAttribute("role") === "columnheader"
+        ? anchorCell
+        : findColumnElement(root, "columnheader", columnId);
+    const bodyCell = anchorCell?.getAttribute("role") === "gridcell"
+        ? anchorCell
+        : findColumnElement(root, "gridcell", columnId);
+    const headerCellStyle = headerCell ? window.getComputedStyle(headerCell) : undefined;
+    const bodyCellStyle = bodyCell ? window.getComputedStyle(bodyCell) : headerCellStyle;
+    const headerMain = headerCell?.querySelector(".youp-grid__header-main");
+    const headerMainStyle = headerMain ? window.getComputedStyle(headerMain) : undefined;
+    const menuButton = headerCell?.querySelector(".youp-grid__column-menu-button");
+    const headerHorizontalPadding = headerCellStyle
+        ? getPixelValue(headerCellStyle.paddingLeft) + getPixelValue(headerCellStyle.paddingRight)
+        : 24;
+    const cellHorizontalPadding = bodyCellStyle
+        ? getPixelValue(bodyCellStyle.paddingLeft) + getPixelValue(bodyCellStyle.paddingRight)
+        : headerHorizontalPadding;
+    const headerControlWidth = menuButton
+        ? menuButton.offsetWidth + getPixelValue(headerMainStyle?.columnGap ?? headerMainStyle?.gap ?? "0")
+        : 0;
+    return {
+        headerFont: headerCellStyle ? getFontValue(headerCellStyle) : "13px sans-serif",
+        cellFont: bodyCellStyle ? getFontValue(bodyCellStyle) : "13px sans-serif",
+        headerHorizontalPadding,
+        cellHorizontalPadding,
+        headerControlWidth,
+    };
+}
+function findColumnElement(root, role, columnId) {
+    if (!root) {
+        return undefined;
+    }
+    return Array.from(root.querySelectorAll(`[role='${role}'][data-youp-column-id]`))
+        .find((element) => element.dataset.youpColumnId === columnId);
+}
+function isCellRightBorderDoubleClick(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return Math.abs(rect.right - event.clientX) <= AUTOSIZE_CELL_BORDER_THRESHOLD;
+}
+function getAutoSizeCellText(column, row) {
+    const text = formatCellValue(column, row, column.accessor(row));
+    return text.length === 0 && column.placeholder ? column.placeholder : text;
+}
+function measureAutoSizeText(text, font) {
+    if (typeof document === "undefined") {
+        return text.length * 8;
+    }
+    autosizeMeasureCanvas ?? (autosizeMeasureCanvas = document.createElement("canvas"));
+    const context = autosizeMeasureCanvas.getContext("2d");
+    if (!context) {
+        return text.length * 8;
+    }
+    context.font = font;
+    return context.measureText(text).width;
+}
+function getFontValue(style) {
+    return style.font || [
+        style.fontStyle,
+        style.fontVariant,
+        style.fontWeight,
+        `${style.fontSize}/${style.lineHeight}`,
+        style.fontFamily,
+    ].join(" ");
+}
+function getPixelValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
 function handleCellKeyDown(context) {
     if (context.rowCount === 0 || context.columnCount === 0) {
         return;
@@ -1420,10 +1556,15 @@ function handleCellKeyDown(context) {
         }
         return;
     }
-    if (isPrintableKey(context.event)) {
+    if (isTextEditingKey(context.event)) {
         if (context.cell.editable && context.cell.column.editor !== "checkbox") {
-            context.event.preventDefault();
-            context.startEditing(createEditingCell(context.cell, context.event.key));
+            if (canUseKeyAsInitialDraft(context.event)) {
+                context.event.preventDefault();
+                context.startEditing(createEditingCell(context.cell, context.event.key));
+            }
+            else {
+                context.startEditing(createEditingCell(context.cell, ""));
+            }
         }
         return;
     }
@@ -1888,8 +2029,24 @@ function getCellTitle(meta, disabledReason, editable) {
     }
     return undefined;
 }
-function isPrintableKey(event) {
-    return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
+function isTextEditingKey(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) {
+        return false;
+    }
+    return event.key.length === 1 || isCompositionEditingKey(event);
+}
+function canUseKeyAsInitialDraft(event) {
+    return event.key.length === 1 && isAsciiPrintableKey(event.key) && !isCompositionEditingKey(event);
+}
+function isCompositionEditingKey(event) {
+    return (event.nativeEvent.isComposing ||
+        event.key === "Process" ||
+        event.key === "Dead" ||
+        event.key === "Unidentified" ||
+        event.keyCode === 229);
+}
+function isAsciiPrintableKey(key) {
+    return key >= " " && key <= "~";
 }
 function isUndoShortcut(event) {
     return (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "z";

package/dist/styles.css

@@ -164,11 +164,15 @@
   --youp-grid-header-scroll-left: 0px;
 }
 
-.youp-grid__header .youp-grid__cell--header:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell),
-.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell) {
+.youp-grid__header .youp-grid__cell--header:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right),
+.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right) {
   transform: translateX(calc(-1 * var(--youp-grid-header-scroll-left)));
 }
 
+.youp-grid--selection-column-pinned .youp-grid__header .youp-grid__selection-cell {
+  transform: none;
+}
+
 .youp-grid__row--header {
   background: var(--youp-grid-header);
 }
@@ -212,9 +216,6 @@
 }
 
 .youp-grid__selection-cell {
-  position: sticky;
-  left: 0;
-  z-index: 3;
   display: grid;
   place-items: center;
   min-width: 44px;
@@ -222,6 +223,12 @@
   background: #fff;
 }
 
+.youp-grid--selection-column-pinned .youp-grid__selection-cell {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+}
+
 .youp-grid__cell.youp-grid__selection-cell {
   min-width: 44px;
 }
@@ -286,6 +293,18 @@
   white-space: nowrap;
 }
 
+.youp-grid__cell--align-left {
+  text-align: left;
+}
+
+.youp-grid__cell--align-center {
+  text-align: center;
+}
+
+.youp-grid__cell--align-right {
+  text-align: right;
+}
+
 .youp-grid--read-only .youp-grid__cell {
   cursor: default;
 }
@@ -408,6 +427,18 @@
   outline: none;
 }
 
+.youp-grid__cell--align-left .youp-grid__cell-editor {
+  text-align: left;
+}
+
+.youp-grid__cell--align-center .youp-grid__cell-editor {
+  text-align: center;
+}
+
+.youp-grid__cell--align-right .youp-grid__cell-editor {
+  text-align: right;
+}
+
 .youp-grid__cell-editor--select {
   padding-right: 24px;
 }

package/dist/types.d.ts

@@ -118,6 +118,7 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     showAggregationFooter?: boolean;
     showPagination?: boolean;
     showRowSelectionColumn?: boolean;
+    pinRowSelectionColumn?: boolean;
     csvFileName?: string;
     density?: YoupGridDensity;
     defaultDensity?: YoupGridDensity;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youp-grid/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React adapter for Youp Grid.",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@youp-grid/core": "0.2.0"
+    "@youp-grid/core": "0.2.2"
   },
   "peerDependencies": {
     "react": ">=18.2.0"