@monolith-forensics/monolith-ui 1.3.112-dev.0 → 1.3.112-dev.1

package/dist/Kanban/Kanban.d.ts

@@ -1,2 +1,2 @@
 import { KanbanGroupKey, KanbanProps } from "./types";
-export declare const Kanban: <TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth, columnHeight, estimatedCardHeight, overscanCount, orderStep, minOrderGap, emptyColumnPlaceholder, className, }: KanbanProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;
+export declare const Kanban: <TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth, columnGap, cardGap, columnHeight, estimatedCardHeight, overscanCount, orderStep, minOrderGap, emptyColumnPlaceholder, className, }: KanbanProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/Kanban.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, getFirstCollision, pointerWithin, rectIntersection, useSensor, useSensors, } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { KanbanColumn } from "./KanbanColumn";
 import { findContainer, fromCardToken, isCardToken, isGroupToken, moveCard, moveCardToInsertIndex, } from "./board";
 import { dropAnimation } from "./constants";
@@ -9,7 +9,7 @@ import { CardContainer, Board } from "./styles";
 import { useKanbanBoardData } from "./useKanbanBoardData";
 import { useKanbanRowHeights } from "./useKanbanRowHeights";
 import { DEFAULT_MIN_ORDER_GAP, DEFAULT_ORDER_STEP, calculateOrderValue, } from "./utils";
-export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth = 320, columnHeight, estimatedCardHeight = 100, overscanCount = 4, orderStep = DEFAULT_ORDER_STEP, minOrderGap = DEFAULT_MIN_ORDER_GAP, emptyColumnPlaceholder, className, }) => {
+export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth = 320, columnGap = 12, cardGap = 8, columnHeight, estimatedCardHeight = 100, overscanCount = 4, orderStep = DEFAULT_ORDER_STEP, minOrderGap = DEFAULT_MIN_ORDER_GAP, emptyColumnPlaceholder, className, }) => {
     var _a, _b;
     const [activeCardToken, setActiveCardToken] = useState(null);
     const [activeOverlayWidth, setActiveOverlayWidth] = useState(null);
@@ -214,14 +214,14 @@ export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCar
             droppable: {
                 strategy: MeasuringStrategy.Always,
             },
-        }, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(Board, { className: className, children: Object.keys(board).map((columnToken) => {
+        }, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(Board, { className: className, "$columnGap": columnGap, children: Object.keys(board).map((columnToken) => {
                     var _a, _b;
                     const columnItems = (_a = board[columnToken]) !== null && _a !== void 0 ? _a : [];
                     const groupValue = groupValueByToken.get(columnToken);
                     if (groupValue == null) {
                         return null;
                     }
-                    return (_jsx(KanbanColumn, { columnToken: columnToken, groupValue: groupValue, groupLabel: groupLabels === null || groupLabels === void 0 ? void 0 : groupLabels[String(groupValue)], renderColumnHeader: renderColumnHeader, itemTokens: columnItems, cardByToken: cardByToken, cardIdByToken: cardIdByToken, groupByToken: groupValueByToken, renderCard: renderCard, onMeasure: onRowMeasured, rowHeights: (_b = columnHeights[columnToken]) !== null && _b !== void 0 ? _b : {}, listRefMap: listRefMap, columnWidth: columnWidth, columnHeight: columnHeight, estimatedCardHeight: estimatedCardHeight, overscanCount: overscanCount, emptyColumnPlaceholder: emptyColumnPlaceholder }, columnToken));
+                    return (_jsx(KanbanColumn, { columnToken: columnToken, groupValue: groupValue, groupLabel: groupLabels === null || groupLabels === void 0 ? void 0 : groupLabels[String(groupValue)], renderColumnHeader: renderColumnHeader, itemTokens: columnItems, cardByToken: cardByToken, cardIdByToken: cardIdByToken, groupByToken: groupValueByToken, renderCard: renderCard, onMeasure: onRowMeasured, rowHeights: (_b = columnHeights[columnToken]) !== null && _b !== void 0 ? _b : {}, listRefMap: listRefMap, columnWidth: columnWidth, columnHeight: columnHeight, cardGap: cardGap, estimatedCardHeight: estimatedCardHeight, overscanCount: overscanCount, emptyColumnPlaceholder: emptyColumnPlaceholder }, columnToken));
                 }) }), _jsx(DragOverlay, { adjustScale: false, dropAnimation: dropAnimation, children: activeCard && activeGroup != null ? (_jsx("div", { style: { width: activeOverlayWidth !== null && activeOverlayWidth !== void 0 ? activeOverlayWidth : undefined }, children: _jsx(CardContainer, { "$isDragging": true, "$isDragOverlay": true, children: renderCard({
                             card: activeCard,
                             cardId: getCardId(activeCard),

package/dist/Kanban/KanbanColumn.d.ts

@@ -16,8 +16,9 @@ export interface KanbanColumnProps<TCard, TGroup extends KanbanGroupKey> {
     listRefMap: MutableRefObject<Record<string, VariableSizeList | null>>;
     columnWidth: number;
     columnHeight?: number;
+    cardGap: number;
     estimatedCardHeight: number;
     overscanCount: number;
     emptyColumnPlaceholder?: ReactNode;
 }
-export declare const KanbanColumn: <TCard, TGroup extends KanbanGroupKey>({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }: KanbanColumnProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;
+export declare const KanbanColumn: <TCard, TGroup extends KanbanGroupKey>({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }: KanbanColumnProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/KanbanColumn.js

@@ -6,9 +6,8 @@ import { useOverlayScrollbars } from "overlayscrollbars-react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import { Column, ColumnBody, ColumnCount, ColumnHeader, EmptyColumn, } from "./styles";
-import { CARD_GAP } from "./constants";
 import { MemoizedSortableVirtualRow } from "./virtualRow";
-export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }) => {
+export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }) => {
     const { setNodeRef, isOver } = useDroppable({
         id: columnToken,
         data: {
@@ -24,6 +23,7 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
         groupByToken,
         renderCard,
         onMeasure,
+        cardGap,
     }), [
         cardByToken,
         cardIdByToken,
@@ -32,6 +32,7 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
         itemTokens,
         onMeasure,
         renderCard,
+        cardGap,
     ]);
     const previousOrderTokensRef = useRef([]);
     const scrollTargetRef = useRef(null);
@@ -112,6 +113,6 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
                             }, outerRef: setScrollViewportRef, width: width, height: height, itemCount: cardCount, overscanCount: overscanCount, itemData: rowData, itemKey: (index, data) => data.itemTokens[index], itemSize: (index) => {
                                 var _a;
                                 const token = rowData.itemTokens[index];
-                                return (_a = rowHeights[token]) !== null && _a !== void 0 ? _a : estimatedCardHeight + CARD_GAP;
+                                return (_a = rowHeights[token]) !== null && _a !== void 0 ? _a : estimatedCardHeight + cardGap;
                             }, children: MemoizedSortableVirtualRow })) })) }) })] }));
 };

package/dist/Kanban/constants.d.ts

@@ -1,5 +1,4 @@
 import { DropAnimation } from "@dnd-kit/core";
 export declare const GROUP_PREFIX = "group::";
 export declare const CARD_PREFIX = "card::";
-export declare const CARD_GAP = 5;
 export declare const dropAnimation: DropAnimation;

package/dist/Kanban/constants.js

@@ -1,7 +1,6 @@
 import { defaultDropAnimationSideEffects } from "@dnd-kit/core";
 export const GROUP_PREFIX = "group::";
 export const CARD_PREFIX = "card::";
-export const CARD_GAP = 5;
 export const dropAnimation = {
     duration: 220,
     easing: "cubic-bezier(0.2, 0, 0, 1)",

package/dist/Kanban/styles.d.ts

@@ -1,4 +1,6 @@
-export declare const Board: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Board: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columnGap?: number;
+}>> & string;
 export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width: number;
     $isOver: boolean;

package/dist/Kanban/styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 export const Board = styled.div `
   display: flex;
   align-items: stretch;
-  gap: 12px;
+  gap: ${({ $columnGap }) => $columnGap !== null && $columnGap !== void 0 ? $columnGap : 12}px;
   width: 100%;
   height: 100%;
   min-height: 0;

package/dist/Kanban/types.d.ts

@@ -46,6 +46,8 @@ export interface KanbanProps<TCard, TGroup extends KanbanGroupKey> {
     renderColumnHeader?: (group: TGroup, cardCount: number) => ReactNode;
     /** Width of each column in pixels. Defaults to `320`. */
     columnWidth?: number;
+    /** Gap between columns in pixels. Defaults to `8`. */
+    columnGap?: number;
     /** Fixed column body height in pixels. If omitted, it grows with container layout. */
     columnHeight?: number;
     /** Fallback card height estimate for virtualization. Defaults to `100`. */
@@ -60,4 +62,6 @@ export interface KanbanProps<TCard, TGroup extends KanbanGroupKey> {
     emptyColumnPlaceholder?: ReactNode;
     /** Optional class name applied to the board root element. */
     className?: string;
+    /** Gap between cards in pixels. Defaults to `8`. */
+    cardGap?: number;
 }

package/dist/Kanban/virtualRow.d.ts

@@ -8,6 +8,7 @@ export interface ColumnRowData<TCard, TGroup extends KanbanGroupKey> {
     cardIdByToken: Map<string, string>;
     groupByToken: Map<string, TGroup>;
     renderCard: (args: RenderCardArgs<TCard, TGroup>) => ReactNode;
+    cardGap: number;
     onMeasure: (columnToken: string, cardToken: string, index: number, height: number) => void;
 }
 export declare const MemoizedSortableVirtualRow: import("react").MemoExoticComponent<({ data, index, style, }: ListChildComponentProps<ColumnRowData<any, any>>) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/Kanban/virtualRow.js

@@ -4,7 +4,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { areEqual, } from "react-window";
 import { memo, useCallback, useEffect, useState } from "react";
 import { CardContainer } from "./styles";
-import { CARD_GAP } from "./constants";
 const SortableVirtualRow = ({ data, index, style, }) => {
     const cardToken = data.itemTokens[index];
     const card = data.cardByToken.get(cardToken);
@@ -36,7 +35,7 @@ const SortableVirtualRow = ({ data, index, style, }) => {
             if (!nextHeight || nextHeight <= 0) {
                 return;
             }
-            data.onMeasure(data.columnToken, cardToken, index, Math.ceil(nextHeight) + CARD_GAP);
+            data.onMeasure(data.columnToken, cardToken, index, Math.ceil(nextHeight) + data.cardGap);
         });
         observer.observe(contentNode);
         return () => observer.disconnect();
@@ -44,7 +43,7 @@ const SortableVirtualRow = ({ data, index, style, }) => {
     if (!card || !cardId || group == null) {
         return null;
     }
-    return (_jsx("div", { ref: setCombinedRef, style: Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition, willChange: isDragging || isSorting ? "transform" : undefined, zIndex: isDragging ? 2 : 1 }), children: _jsx(CardContainer, { ref: setContentNode, style: { marginBottom: CARD_GAP }, "$isDragging": isDragging, "$isDragOverlay": false, children: _jsx("div", Object.assign({}, attributes, listeners, { children: data.renderCard({
+    return (_jsx("div", { ref: setCombinedRef, style: Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition, willChange: isDragging || isSorting ? "transform" : undefined, zIndex: isDragging ? 2 : 1 }), children: _jsx(CardContainer, { ref: setContentNode, style: { marginBottom: data.cardGap }, "$isDragging": isDragging, "$isDragOverlay": false, children: _jsx("div", Object.assign({}, attributes, listeners, { children: data.renderCard({
                     card,
                     cardId,
                     group,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.112-dev.0",
+  "version": "1.3.112-dev.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",

package/dist/Kanban/ordering.d.ts

@@ -1,16 +0,0 @@
-export declare const ORDER_GAP = 1024;
-type GetOrderByCardId = (cardId: string) => number;
-export type OrderComputationResult = {
-    newOrder: number;
-    beforeCardId: string | null;
-    afterCardId: string | null;
-};
-type ComputeOrderParams = {
-    destinationCardIds: string[];
-    movedCardId: string;
-    destinationIndex: number;
-    getOrderByCardId: GetOrderByCardId;
-    orderGap?: number;
-};
-export declare const computeOrderForMove: ({ destinationCardIds, movedCardId, destinationIndex, getOrderByCardId, orderGap, }: ComputeOrderParams) => OrderComputationResult;
-export {};

package/dist/Kanban/ordering.js

@@ -1,52 +0,0 @@
-export const ORDER_GAP = 1024;
-const coerceOrderValue = (value, fallback) => {
-    return Number.isFinite(value) ? value : fallback;
-};
-export const computeOrderForMove = ({ destinationCardIds, movedCardId, destinationIndex, getOrderByCardId, orderGap = ORDER_GAP, }) => {
-    const total = destinationCardIds.length;
-    if (total === 0) {
-        return {
-            newOrder: 0,
-            beforeCardId: null,
-            afterCardId: null,
-        };
-    }
-    const safeIndex = Math.max(0, Math.min(destinationIndex, total - 1));
-    const currentCardId = destinationCardIds[safeIndex];
-    const resolvedIndex = currentCardId === movedCardId
-        ? safeIndex
-        : destinationCardIds.indexOf(movedCardId);
-    const targetIndex = resolvedIndex >= 0 ? resolvedIndex : safeIndex;
-    const beforeCardId = targetIndex > 0 ? destinationCardIds[targetIndex - 1] : null;
-    const afterCardId = targetIndex < total - 1 ? destinationCardIds[targetIndex + 1] : null;
-    if (beforeCardId === null && afterCardId === null) {
-        return {
-            newOrder: 0,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    if (beforeCardId === null && afterCardId !== null) {
-        const afterOrder = coerceOrderValue(getOrderByCardId(afterCardId), 0);
-        return {
-            newOrder: afterOrder - orderGap,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    if (beforeCardId !== null && afterCardId === null) {
-        const beforeOrder = coerceOrderValue(getOrderByCardId(beforeCardId), 0);
-        return {
-            newOrder: beforeOrder + orderGap,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    const beforeOrder = coerceOrderValue(getOrderByCardId(beforeCardId), 0);
-    const afterOrder = coerceOrderValue(getOrderByCardId(afterCardId), beforeOrder + orderGap);
-    return {
-        newOrder: (beforeOrder + afterOrder) / 2,
-        beforeCardId,
-        afterCardId,
-    };
-};