@parallelworks/ui 0.76.0 → 0.78.0

package/dist/list/ActionToolbar.js

@@ -3,14 +3,15 @@ import { buttonClasses } from "../components/buttonClasses.js";
 import { MoreIcon } from "../icons.js";
 import { MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { isDev } from "../dev.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, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { Toggle } from "@base-ui/react/toggle";
 import { Toolbar } from "@base-ui/react/toolbar";
@@ -29,19 +30,37 @@ function actionClasses(action, iconOnly) {
 		iconOnly
 	}), action.destructive && !primary && "text-(--theme-error-text)");
 }
+/** A loading action as its menu row shows it: the spinner for its icon, and
+*  not to be chosen until done. */
+function asMenuRow(action) {
+	return action.loading ? {
+		...action,
+		icon: /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: "1em"
+		}),
+		disabled: true
+	} : action;
+}
 /** A toolbar action as a button: a link with `href`, a toggle with `checked`.
 *  In an ActionToolbar it is one of its items, reached with the arrow keys. */
 function ToolbarButton({ action }) {
 	const placement = use(PlacementContext);
 	const runAction = useRunAction();
 	const folded = use(FoldedContext);
-	if (placement === "menu") return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
+	if (placement === "menu") return /* @__PURE__ */ jsx(MenuEntries, { entries: [asMenuRow(action)] });
 	warnIfInert(action, "ActionToolbar");
+	const loading = action.loading === true;
 	const iconOnly = Boolean(action.icon) && placement === "toolbar" && folded;
 	const className = actionClasses(action, iconOnly);
 	const reason = action.disabled ? action.disabledReason : void 0;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-		action.icon,
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		loading ? /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: "1em"
+		}) : action.icon,
 		iconOnly ? /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: action.label
@@ -59,7 +78,8 @@ function ToolbarButton({ action }) {
 			href: action.href,
 			reloadDocument: action.reloadDocument,
 			target: action.target,
-			disabled: action.disabled,
+			disabled: action.disabled || loading,
+			"aria-busy": loading || void 0,
 			className
 		});
 		control = inToolbar ? /* @__PURE__ */ jsx(Toolbar.Link, {
@@ -70,19 +90,22 @@ function ToolbarButton({ action }) {
 		const toggle = /* @__PURE__ */ jsx(Toggle, {
 			pressed: action.checked,
 			onPressedChange: run,
-			disabled: action.disabled,
+			disabled: action.disabled || loading,
+			"aria-busy": loading || void 0,
 			className
 		});
 		control = inToolbar ? /* @__PURE__ */ jsx(Toolbar.Button, {
 			render: toggle,
-			disabled: action.disabled,
+			disabled: action.disabled || loading,
+			focusableWhenDisabled: true,
 			children: content
 		}) : cloneElement(toggle, void 0, content);
 	} else {
 		const Control = inToolbar ? Toolbar.Button : Button;
 		control = /* @__PURE__ */ jsx(Control, {
 			onClick: run,
-			disabled: action.disabled,
+			disabled: action.disabled || loading,
+			"aria-busy": loading || void 0,
 			focusableWhenDisabled: true,
 			className,
 			children: content
@@ -115,7 +138,7 @@ function OverflowMenu({ items }) {
 		className: "min-w-56",
 		children: /* @__PURE__ */ jsx(PlacementContext, {
 			value: "menu",
-			children: items.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(MenuSeparator, {}), group.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(MenuEntries, { entries: [item] }, item.key))] }, group[0]?.key ?? i))
+			children: items.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(MenuSeparator, {}), group.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(MenuEntries, { entries: [asMenuRow(item)] }, item.key))] }, group[0]?.key ?? i))
 		})
 	})] });
 }
@@ -241,7 +264,7 @@ function MeasuringCopy({ items, ref }) {
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "flex w-max gap-1",
-			children: items.map((item) => "element" in item ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+			children: items.map((item) => "element" in item ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 				"data-measure": item.key,
 				"data-fold": "full",
 				className: actionClasses(item, false),
@@ -299,7 +322,7 @@ function ActionToolbar({ groups, right = [], sticky = false, label }) {
 			items: all
 		}), /* @__PURE__ */ jsxs(PlacementContext, {
 			value: "toolbar",
-			children: [shownGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(Toolbar.Separator, {
+			children: [shownGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(Toolbar.Separator, {
 				orientation: "vertical",
 				className: "h-5 w-px shrink-0 bg-(--theme-border)"
 			}), /* @__PURE__ */ jsx(Toolbar.Group, {

package/dist/list/ListFilterBar.d.ts

@@ -0,0 +1,42 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type ActiveFilter, type FilterField } from './filterModel.js';
+import type { ListFilters } from './useListFilters.js';
+type Field = FilterField<any>;
+interface ChipProps {
+    filters: ListFilters;
+    filter: ActiveFilter;
+    field: Field;
+    /** Full width, as the phone sheet stacks them. */
+    stretch?: boolean;
+    /** Whether this chip answers requests to open its pickers. */
+    answers: boolean;
+    /** Called after Backspace or Delete removed it, to move focus on. */
+    onRemoved?: () => void;
+}
+/** One filter as a sentence: its field, its condition and its values, each opening its own
+ *  picker, and a button that removes it. */
+export declare function FilterChip({ filters, filter, field, stretch, answers, onRemoved, }: ChipProps): import("react").JSX.Element;
+export interface AddFilterMenuProps {
+    filters: ListFilters;
+    /** The button that opens it: the toolbar's Filter button, or the row's "+ Filter". */
+    trigger: ReactElement;
+    /** Where it opens against its trigger. */
+    align?: 'start' | 'end';
+}
+/** The fields a filter can be added on. Picking one adds its chip and opens its value picker
+ *  there; a field already in use opens its chip's picker. */
+export declare function AddFilterMenu({ filters, trigger, align }: AddFilterMenuProps): import("react").JSX.Element;
+export interface ListFilterBarProps {
+    filters: ListFilters | undefined;
+    /** At the row's end, such as Save view or Update view. */
+    trailing?: ReactNode;
+    /** Names the row; defaults to the provider's `filters.activeFilters`. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
+ *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
+ *  only while a filter is on or a field is required. At phone width it stops at two lines and
+ *  a "+n filters" chip opens the rest in a sheet. */
+export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): import("react").JSX.Element | null;
+export {};