@human-kit/svelte-components 1.0.0-alpha.18 → 1.0.0-alpha.19

package/dist/table/column-resizer/table-column-resizer-narrow-min-width-test.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div data-testid="narrow-min-width-container" style="width: 240px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Narrow min width table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="request" isRowHeader textValue="Request" minWidth={75}>
+					<Table.ColumnHeaderCell data-testid="narrow-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="narrow-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester" minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="narrow-requester-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Requester</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell data-testid="narrow-area-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Area</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell data-testid="narrow-status-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Status</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="narrow-total-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Total</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="pr-001">
+				<Table.Cell>PR-001</Table.Cell>
+				<Table.Cell>Ana Gomez</Table.Cell>
+				<Table.Cell>Ops</Table.Cell>
+				<Table.Cell>Pending</Table.Cell>
+				<Table.Cell>$1,520</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="narrow-min-width-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-narrow-min-width-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerNarrowMinWidthTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerNarrowMinWidthTest = ReturnType<typeof TableColumnResizerNarrowMinWidthTest>;
+export default TableColumnResizerNarrowMinWidthTest;

package/dist/table/root/context.js

@@ -213,7 +213,16 @@ export function createTableContext(options = {}) {
         return hiddenColumnIds.has(columnId);
     }
     function getColumnMinWidth(columnId) {
-        return getColumnRegistrationById(columnId)?.minWidth;
+        const registration = getColumnRegistrationById(columnId);
+        if (!registration)
+            return undefined;
+        if (registration.minWidth !== undefined)
+            return registration.minWidth;
+        if (!isColumnResizable(columnId) &&
+            !isRelativeColumnWidth(getEffectiveColumnWidthSpec(columnId))) {
+            return undefined;
+        }
+        return getColumnWidthBounds(columnId).minWidth;
     }
     function getColumnMaxWidth(columnId) {
         return getColumnRegistrationById(columnId)?.maxWidth;
@@ -483,6 +492,8 @@ export function createTableContext(options = {}) {
         let fixedPxTotal = 0;
         let percentTotal = 0;
         let totalFr = 0;
+        const resolvedVisibleWidths = getResolvedVisibleColumnWidths();
+        const tableWidth = getMeasuredTableWidth();
         for (const token of getVisibleOrderedColumnTokens()) {
             const column = columns.get(token);
             if (!column)
@@ -513,6 +524,25 @@ export function createTableContext(options = {}) {
         const availableWidthExpression = availableWidthTerms.length === 1
             ? availableWidthTerms[0]
             : `(${availableWidthTerms.join(' - ')})`;
+        if (tableWidth !== undefined) {
+            const targetRelativeTotal = Math.max(tableWidth - fixedPxTotal, 0);
+            let actualRelativeTotal = 0;
+            for (const token of getVisibleOrderedColumnTokens()) {
+                const column = columns.get(token);
+                if (!column)
+                    continue;
+                const spec = parseColumnWidth(getEffectiveColumnWidthSpec(column.id));
+                if (!spec || spec.unit === 'px')
+                    continue;
+                actualRelativeTotal += resolvedVisibleWidths.get(column.id) ?? 0;
+            }
+            if (Math.abs(actualRelativeTotal - targetRelativeTotal) > 1) {
+                const constrainedWidth = resolvedVisibleWidths.get(columnId);
+                if (constrainedWidth !== undefined) {
+                    return `${constrainedWidth}px`;
+                }
+            }
+        }
         if (frShare === 1) {
             return `calc(${availableWidthExpression})`;
         }
@@ -1195,6 +1225,7 @@ export function createTableContext(options = {}) {
             cellOrder.push(cell.key);
         }
         notifyLayout();
+        notifyWidth();
     }
     function unregisterCell(key) {
         cells.delete(key);
@@ -1207,6 +1238,7 @@ export function createTableContext(options = {}) {
             notifyFocus();
         }
         notifyLayout();
+        notifyWidth();
     }
     function isCellFocused(key) {
         return focusedCellKey === key;

package/dist/table/root/table-root.svelte

@@ -210,6 +210,20 @@
 		return columns;
 	});
 
+	const minimumTableWidth = $derived.by(() => {
+		if (!hasResizable && !ctx.hasRelativeVisibleColumnWidths()) return undefined;
+
+		let total = 0;
+		let hasMinimumWidth = false;
+		for (const column of layoutColumns) {
+			if (column.minWidth === undefined) continue;
+			total += column.minWidth;
+			hasMinimumWidth = true;
+		}
+
+		return hasMinimumWidth ? total : undefined;
+	});
+
 	const explicitManagedTableWidth = $derived.by(() => {
 		void $layoutVersion;
 		if (ctx.hasRelativeVisibleColumnWidths()) return undefined;
@@ -303,6 +317,8 @@
 			ctx.refreshMeasuredLayout();
 		};
 
+		refreshMeasuredLayout();
+
 		window.addEventListener('resize', refreshMeasuredLayout);
 		window.visualViewport?.addEventListener('resize', refreshMeasuredLayout);
 
@@ -475,7 +491,11 @@
 	style:width={resolvedTableWidth !== undefined
 		? `${resolvedTableWidth}px`
 		: fallbackRelativeTableWidth}
-	style:min-width={resolvedTableWidth !== undefined ? '0' : undefined}
+	style:min-width={minimumTableWidth !== undefined
+		? `${minimumTableWidth}px`
+		: resolvedTableWidth !== undefined
+			? '0'
+			: undefined}
 	aria-label={ariaLabel}
 	aria-labelledby={ariaLabelledby}
 	aria-colcount={ariaColCount}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.18",
+	"version": "1.0.0-alpha.19",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",