@parallelworks/ui 0.83.3 → 0.84.1

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { IconButton, type IconButtonProps } from './components/IconButton.js';
 export { formatInfoTipContent, InfoTip } from './components/InfoTip.js';
 export { Input, type InputProps, Textarea, type TextareaProps, TitleInput, type TitleInputProps, } from './components/Input.js';
 export { ariaKeyShortcuts, formatShortcut, isApplePlatform, Kbd, type KbdProps, type KbdSize, type KbdVariant, type KeyPlatform, shortcutText, useShortcutFormat, } from './components/Kbd.js';
-export { LetterBadge } from './components/LetterBadge.js';
+export { LetterBadge, type LetterBadgeProps } from './components/LetterBadge.js';
 export { ListboxGroup, type ListboxNavigation, type ListboxNavigationOptions, ListboxOption, type ListboxOptionProps, ListboxPanel, type ListboxPanelProps, useListboxNavigation, } from './components/Listbox.js';
 export { Loader, type LoaderProps } from './components/Loader.js';
 export type { MarkdownProps } from './components/Markdown.js';
@@ -53,7 +53,7 @@ export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RefreshButton, type RefreshButtonProps } from './components/RefreshButton.js';
 export { RequiredMark } from './components/RequiredMark.js';
 export { RunStatusIcon, type RunStatusIconProps, type RunStatusIconStatus, runStatusTone, } from './components/RunStatusIcon.js';
-export { Elapsed, RelativeTime, type RelativeTimeFormat, type RelativeTimeProps, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
+export { Elapsed, type ElapsedProps, RelativeTime, type RelativeTimeFormat, type RelativeTimeProps, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
 export { SearchInput, type SearchInputProps } from './components/SearchInput.js';
 export { Section, type SectionProps, type SectionTone, type SectionVariant, } from './components/Section.js';
 export { SegmentedControl, type SegmentedControlRootProps, type SegmentedOption, } from './components/SegmentedControl.js';
@@ -63,7 +63,7 @@ export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } from './components/SettingsCard.js';
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
-export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, statusTextClass, } from './components/StatusBadge.js';
+export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, statusTextClass, } from './components/StatusBadge.js';
 export { StickyBar, type StickyBarProps } from './components/StickyBar.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export type { SegmentTone } from './components/segmented.js';

package/dist/list/ActionToolbar.js

@@ -3,12 +3,12 @@ import { buttonClasses } from "../components/buttonClasses.js";
 import { MoreIcon } from "../icons.js";
 import { MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { isDev } from "../dev.js";
+import { useStickyTop } from "../components/stickyTop.js";
 import { Loader } from "../components/Loader.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
 import { MenuEntries, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { useStickyTop } from "../components/stickyTop.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/list/ListPage.js

@@ -4,7 +4,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { Table } from "../components/Table.js";
+import { CellPlacementContext, Table } from "../components/Table.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
@@ -85,28 +85,46 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 		]
 	});
 }
+var STACKED = { stacked: true };
+var isCellElement = (child) => child.type === Table.Item || child.type === "td";
 function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
 	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
-		const content = child.props.children;
-		return Children.toArray(content).length > 0 ? [content] : [];
+		if (isCellElement(child)) {
+			const content = child.props.children;
+			return Children.toArray(content).length > 0 ? [child] : [];
+		}
+		return [child];
 	});
+	const under = stacked.length > 0 ? stacked.map((child, j) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
+		className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
+		"data-stacked": true,
+		children: child.props.children
+	}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
+		value: STACKED,
+		children: child
+	}, j)) : void 0;
 	const styledCells = cells.map((child, i) => {
 		const cls = cx(columnClasses[i], i > 0 && stacked.length > 0 && !columnStacks[i] && STAYS_BESIDE_STACK);
-		if (!isValidElement(child) || !cls && !(i === 0 && stacked.length > 0)) return child;
-		const el = child;
-		if (i === 0 && stacked.length > 0) return cloneElement(el, {
-			className: cx(el.props.className, cls),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
-				className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
-				"data-stacked": true,
-				children: content
-			}, j))] })
-		});
-		return cloneElement(el, { className: cx(el.props.className, cls) });
+		const after = i === 0 ? under : void 0;
+		if (!isValidElement(child) || !cls && !after) return child;
+		if (child.type === "td") {
+			const el = child;
+			return cloneElement(el, {
+				className: cx(el.props.className, cls),
+				...after ? { children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, after] }) } : {}
+			});
+		}
+		return /* @__PURE__ */ jsx(CellPlacementContext, {
+			value: {
+				className: cls || void 0,
+				after
+			},
+			children: child
+		}, child.key);
 	});
 	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0);
 	const stretch = !!href && !selectionActive;

package/dist/list/ListTable.js

@@ -5,7 +5,7 @@ import { AppLink } from "../components/AppLink.js";
 import { positionKeys } from "../components/keys.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Checkbox } from "../components/Checkbox.js";
-import { Table } from "../components/Table.js";
+import { CellPlacementContext, Table } from "../components/Table.js";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListTable.tsx
@@ -43,6 +43,8 @@ var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visi
 var STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title, children }) {
 	const stretch = useContext(StretchRowLinkContext);
+	const placed = useContext(CellPlacementContext);
+	const under = placed?.after;
 	const hasIcon = icon !== null && icon !== void 0 && icon !== false;
 	const columns = hasIcon ? "col-span-2 grid grid-cols-subgrid items-center" : "flex items-center";
 	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile && subtitle ? /* @__PURE__ */ jsx("span", {
@@ -65,7 +67,7 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 			children: subtitle
 		})]
 	})] });
-	return /* @__PURE__ */ jsx(Table.Item, {
+	const cell = /* @__PURE__ */ jsx(Table.Item, {
 		className: "py-2.5",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cx("grid min-w-0", hasIcon ? "grid-cols-[auto_minmax(0,1fr)] gap-x-2.5" : "grid-cols-[minmax(0,1fr)]"),
@@ -77,12 +79,19 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 			}) : /* @__PURE__ */ jsx("div", {
 				className: cx("min-w-0", columns),
 				children: inner
-			}), !!children && /* @__PURE__ */ jsx("div", {
+			}), (!!children || !!under) && /* @__PURE__ */ jsxs("div", {
 				className: hasIcon ? "col-start-2 min-w-0" : "min-w-0",
-				children
+				children: [children, under]
 			})]
 		})
 	});
+	return placed?.after ? /* @__PURE__ */ jsx(CellPlacementContext, {
+		value: {
+			...placed,
+			after: void 0
+		},
+		children: cell
+	}) : cell;
 }
 /** A row's column text: muted 13px, or monospace for an ID, a path or a
 *  hash. The style sits on the text rather than the cell, so it carries over