@parallelworks/ui 0.3.0 → 0.4.0

package/README.md

@@ -34,6 +34,11 @@ stylesheet instead:
 import '@parallelworks/ui/styles.css'
 ```
 
+The prebuilt stylesheet nests all of its rules in the `pw-ui` cascade layer,
+so loading it alongside other Parallel Works package stylesheets (for example
+`@parallelworks/ai-chat/styles.css`, which uses the `pw-ai-chat` layer) is
+order-independent.
+
 ## Icons
 
 ```tsx

package/dist/chunks/{CodePreviewEditor-CSPRILMp.js → CodePreviewEditor-B3688Fx4.js}

@@ -1,4 +1,4 @@
-import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-D55tumuZ.js";
+import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-CdQbKtYO.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";

package/dist/chunks/{Markdown-C5Re2ezs.js → Markdown-iFhq8Gb0.js}

@@ -1,5 +1,5 @@
 import { AlertIcon, CheckIcon, ClipboardIcon, CopyIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon } from "../icons.js";
-import { i as useNotify } from "./Provider-DvVvScTQ.js";
+import { i as useNotify } from "./Provider-uUHgWOWc.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useState } from "react";

package/dist/chunks/{Monaco-CC4ak1JG.js → Monaco-BEj--GTx.js}

@@ -1,5 +1,5 @@
-import { l as useWorkflowJsonResolver } from "./Provider-DvVvScTQ.js";
-import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-D55tumuZ.js";
+import { l as useWorkflowJsonResolver } from "./Provider-uUHgWOWc.js";
+import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-CdQbKtYO.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -39,6 +39,7 @@ var workflowCompletionProvidersRegistered = false;
 var noop = () => {};
 function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path = "file:///default", marketplaceItems = [], workflows = [], ...options }) {
 	const isDark = useCssIsDark();
+	const readOnly = disabled || options.readOnly;
 	const resolveWorkflowJson = useWorkflowJsonResolver();
 	const monacoRef = useRef(null);
 	const isSyncingValueRef = useRef(false);
@@ -49,8 +50,12 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		if (!monacoRef.current) return;
 		defineEditorThemes(monaco.editor);
 		monaco.editor.setTheme(getThemeName(isDark, disabled));
-		monacoRef.current.updateOptions({ readOnly: disabled });
-	}, [disabled, isDark]);
+		monacoRef.current.updateOptions({ readOnly });
+	}, [
+		disabled,
+		isDark,
+		readOnly
+	]);
 	useEffect(() => {
 		if (!monacoRef.current) return;
 		const model = monacoRef.current.getModel();
@@ -102,7 +107,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 					automaticLayout: true,
 					model,
 					...options,
-					readOnly: disabled || options.readOnly,
+					readOnly,
 					fixedOverflowWidgets: true,
 					suggest: {
 						preview: true,

package/dist/chunks/{Provider-DvVvScTQ.js → Provider-uUHgWOWc.js}

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ to, onClick, className, children }) => /* @__PURE__ */ jsx("a", {
@@ -291,7 +291,60 @@ var DEFAULTS = {
 			labelUid: "UID",
 			labelId: "ID",
 			labelUrl: "URL",
-			couldNotLoad: (noun) => `Couldn't load ${noun}`
+			couldNotLoad: (noun) => `Couldn't load ${noun}`,
+			displayOptions: "Display options",
+			grouping: "Grouping",
+			ordering: "Ordering",
+			orderDefault: "Default",
+			orderFavorites: "Favorites",
+			ascending: "Ascending",
+			descending: "Descending",
+			columnHeaders: "Column headers",
+			showColumnHeaders: "Show column headers",
+			showActions: "Show actions",
+			showRowActions: "Show row actions",
+			alwaysShowActions: "Always show actions",
+			alwaysShowRowActions: "Always show row actions",
+			displayProperties: "Display properties",
+			pinnedActions: "Pinned actions",
+			pinnedActionsHelp: "Pinned actions show as quick buttons on the right of each row (on hover), alongside the ⋯ menu. Each only appears on rows where that action is available, so a row's buttons vary by its type and status.",
+			reset: "Reset",
+			none: "None",
+			filter: "Filter",
+			clear: "Clear",
+			pager: (start, end, total) => `${start}–${end} of ${total}`,
+			paginationPrevious: "Previous",
+			paginationNext: "Next",
+			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing ",
+				name,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: start
+				}),
+				" to",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: end
+				})
+			] }),
+			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing ",
+				name,
+				" from ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: startTime
+				}),
+				" ",
+				"to ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: endTime
+				})
+			] })
 		}
 	},
 	navigation: {

package/dist/chunks/{SwitchToggle-2uRw8ZeJ.js → SwitchToggle-BqD0dE-L.js}

@@ -1,5 +1,5 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-DvVvScTQ.js";
+import { c as useStrings } from "./Provider-uUHgWOWc.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -46,6 +46,34 @@ function filterOption(option, query) {
 	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
 	return label.includes(q) || secondary.includes(q);
 }
+function flattenFilteredOptions({ options, query, selectedValue, allowCustomValue, customValueLabel }) {
+	const flatOptions = options.flatMap((option) => {
+		if (isCategory(option)) {
+			const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
+			if (filteredOptions.length === 0) return [];
+			return [{
+				label: option.category || "",
+				value: option.category || "",
+				disabled: true,
+				category: true
+			}, ...filteredOptions];
+		}
+		if (filterOption(option, query)) return option;
+		return [];
+	});
+	if (allowCustomValue) {
+		const customValue = query || selectedValue || "";
+		flatOptions.unshift({
+			label: `${customValueLabel} "${customValue}"`,
+			value: customValue
+		});
+	} else if (flatOptions.length === 0) return [{
+		label: "No options found",
+		value: "",
+		disabled: true
+	}];
+	return flatOptions;
+}
 function DropdownCaret() {
 	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
 }
@@ -213,34 +241,13 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		}
 		onChange(val);
 	};
-	const flattenedOptions = useMemo(() => {
-		const flatOptions = options.flatMap((option) => {
-			if (isCategory(option)) {
-				const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
-				if (filteredOptions.length === 0) return [];
-				return [{
-					label: option.category || "",
-					value: option.category || "",
-					disabled: true,
-					category: true
-				}, ...filteredOptions];
-			}
-			if (filterOption(option, query)) return option;
-			return [];
-		});
-		if (allowCustomValue) {
-			const customValue = query || value?.value || "";
-			flatOptions.unshift({
-				label: `${customValueLabel} "${customValue}"`,
-				value: customValue
-			});
-		} else if (flatOptions.length === 0) return [{
-			label: "No options found",
-			value: "",
-			disabled: true
-		}];
-		return flatOptions;
-	}, [
+	const flattenedOptions = useMemo(() => flattenFilteredOptions({
+		options,
+		query,
+		selectedValue: value?.value,
+		allowCustomValue,
+		customValueLabel
+	}), [
 		options,
 		query,
 		value,

package/dist/chunks/{editor-D55tumuZ.js → editor-CdQbKtYO.js}

@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-DvVvScTQ.js";
+import { c as useStrings, i as useNotify } from "./Provider-uUHgWOWc.js";
 import { t as Loader } from "./Loader-DQiZ75fa.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
 import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
@@ -9,7 +9,7 @@ import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-CC4ak1JG.js"));
+var MonacoEditor = lazy(() => import("./Monaco-BEj--GTx.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),