@persona/design-system 0.10.12 → 0.10.14

package/dist/components/SmartTextInput/index.mjs

@@ -1,4 +1,5 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import { rotate } from "../../variables/keyframes.mjs";
 import { JsonSchemaStringifiableTypes, getNonNullableRefSchema, getNonNullableType, isFunctionSchema, isJsonSchemaArray, isSchemaTypeAllowed } from "../../lib/jsonSchema.mjs";
@@ -16,7 +17,7 @@ import { n as Button } from "../../IconButton-Bj1fry_K.mjs";
 import { n as useFormField } from "../../useFormField-pOVkb5BK.mjs";
 import Input_default from "../Input/index.mjs";
 import { n as ErrorText } from "../../FormControl-BoKGiWdQ.mjs";
-import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-yYJFkJ6R.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-BfVrDOY0.mjs";
 import PillType from "./PillType.mjs";
 import { ErrorMessageByKind, NodeType, isASTChainNode, isASTContainerNode, isMethodChainNode } from "./parser/smart-text/types.mjs";
 import { enclosingExpr, findAll, resolve } from "./parser/tree.mjs";
@@ -81,7 +82,7 @@ const Overlay = styled.div`
   overflow: hidden;
 
   ${({ $size }) => $size === "sm" && css`
-      font-size: 12px;
+      font-size: ${Typography.TextSmall.fontSize};
       margin: 0 9px;
     `};
   ${({ $variant }) => $variant === "table-cell" && css`
@@ -115,7 +116,7 @@ const MonoSpan = styled.span`
             content: '';
             position: absolute;
             inset: -2px;
-            background-color: ${Color.CoreRed600};
+            background-color: ${({ theme }) => semanticColor(theme, "FeedbackDanger3", Color.CoreRed600)};
             opacity: 0.1;
             pointer-events: none;
           }
@@ -133,7 +134,7 @@ const MonoSpan = styled.span`
             content: '';
             position: absolute;
             inset: -2px;
-            background-color: ${Color.CoreBlue600};
+            background-color: ${({ theme }) => semanticColor(theme, "FeedbackInfo3", Color.CoreBlue600)};
             opacity: 0.1;
             pointer-events: none;
           }
@@ -274,6 +275,7 @@ const HighlightedTextOverlay = forwardRef(function HighlightedTextOverlay({ chil
 const HighlightedText = ({ value, tree, focused, interactive, schemaValidator, onLinkMouseDown, dontHighlightErrors = false, cursorIdx }) => {
 	const runs = buildHighlights(tree, value, focused, schemaValidator);
 	const linkMap = /* @__PURE__ */ new Map();
+	const paramEntries = /* @__PURE__ */ new Map();
 	findAll(tree, NodeType.Chain).forEach((chainNode) => {
 		if (!isASTChainNode(chainNode)) return;
 		chainNode.children.forEach((link) => {
@@ -284,7 +286,7 @@ const HighlightedText = ({ value, tree, focused, interactive, schemaValidator, o
 				});
 				if (link.type === NodeType.Function || link.type === NodeType.CustomFunction) {
 					if (link.children.some((child) => child.type === NodeType.ParenClose)) {
-						for (const child of link.children) if (child.type !== NodeType.Error && child.type !== NodeType.ParenOpen && child.type !== NodeType.ParenClose) linkMap.set(child.start, {
+						for (const child of link.children) if (child.type !== NodeType.Error && child.type !== NodeType.ParenOpen && child.type !== NodeType.ParenClose) paramEntries.set(child.start, {
 							start: child.start,
 							end: child.start
 						});
@@ -293,6 +295,7 @@ const HighlightedText = ({ value, tree, focused, interactive, schemaValidator, o
 			}
 		});
 	});
+	paramEntries.forEach((entry, start) => linkMap.set(start, entry));
 	let pos = 0;
 	return /* @__PURE__ */ jsx(Fragment$1, { children: runs.map((r) => {
 		const start = pos;
@@ -402,8 +405,9 @@ const scrollInputToCursor = (inputRef, cursorIdx) => {
 * accepted chain roots.
 */
 const isChainWithValidRoot = (value, chainRoots, { onlyAllowSingleLink = false } = {}) => {
-	const firstChild = (safeParse(value, { startRule: "ChainRoot" }).children ?? [])[0];
-	return firstChild != null && firstChild.type === NodeType.Chain && isASTChainNode(firstChild) && chainRoots.some((r) => {
+	const tree = safeParse(value, { startRule: "ChainRoot" });
+	const firstChild = (tree.children ?? [])[0];
+	return !findAll(tree, NodeType.Error).some((e) => !e.wip) && firstChild != null && firstChild.type === NodeType.Chain && isASTChainNode(firstChild) && chainRoots.some((r) => {
 		const firstLink = firstChild.children[0];
 		return firstLink != null && isMethodChainNode(firstLink) && r.label === firstLink.name;
 	}) && (!onlyAllowSingleLink || firstChild.children.length === 1);
@@ -462,7 +466,7 @@ const replaceChainAtCursor = (value, valueType, cursorIdx, tree, newChainString)
 		newCursorIdx: cursorIdx ?? value.length
 	};
 	const before = value.slice(0, openNode.end);
-	const after = closeNode ? value.slice(closeNode.start) : "";
+	const after = value.slice(closeNode ? closeNode.start : expr.end);
 	return {
 		newValue: before + newChainString + after,
 		newCursorIdx: before.length + newChainString.length
@@ -582,7 +586,8 @@ const getConfirmLinkCursorPos = (tree, valueType, currentChain, chain, schema, c
 *
 * TODO: Add more sophistication here (e.g. fuzzy matching, etc.)
 */
-const isQueryMatch = (query, chain) => {
+const isQueryMatch = (rawQuery, chain) => {
+	const query = rawQuery.toLowerCase();
 	const prop = chain.property.toLowerCase();
 	if (query.startsWith("@")) return prop.startsWith(query);
 	return (prop.startsWith("@") ? prop.slice(1) : prop).startsWith(query);
@@ -861,6 +866,7 @@ const SmartTextInputPopover = ({ id, children, comboboxState, inputRef, popoverR
 			$isDialog: isDialog,
 			id,
 			style: {
+				...popoverProps.style,
 				zIndex: Z_INDICES.modalDropdown,
 				width: popoverWidth
 			},
@@ -951,6 +957,7 @@ const buildTextModeHeading = (nodes) => {
 	parts.push("String");
 	return parts.join(", ");
 };
+const isListboxEmptyState = (collection, mode, isLoading) => [...collection].length === 0 || mode !== "text" && !!isLoading;
 const ListboxOption = ({ item, state }) => {
 	const ref = useRef(null);
 	const { optionProps, isFocused } = useOption({ key: item.id }, state, ref);
@@ -1002,44 +1009,59 @@ const ListboxOption = ({ item, state }) => {
 		});
 	}
 };
-const SmartTextInputListbox = ({ comboboxState, listBoxRef, listBoxProps, mode, isLoading, openCodeChainFunctionPanel }) => {
+const SmartTextInputListbox = ({ comboboxState, listBoxRef, listBoxProps, mode, isLoading, openCodeChainFunctionPanel, footerButtonId, isFooterHighlighted = false }) => {
 	const listBox = useListBox({
 		...listBoxProps,
 		"aria-label": mode === "text" ? "Context menu" : "Data path options"
 	}, comboboxState, listBoxRef);
 	const nodes = [...comboboxState.collection];
-	return /* @__PURE__ */ jsxs(StyledListBox, {
+	const showEmptyState = isListboxEmptyState(comboboxState.collection, mode, isLoading);
+	const footerButtonRef = useRef(null);
+	useEffect(() => {
+		if (isFooterHighlighted) footerButtonRef.current?.scrollIntoView?.({ block: "nearest" });
+	}, [isFooterHighlighted]);
+	const headings = /* @__PURE__ */ jsxs(Fragment$1, { children: [mode === "method-chain" && nodes[0]?.value?.id !== "exitMethodChainValueType" && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(StyledListboxOption, {
+		$bottomBorder: true,
+		children: /* @__PURE__ */ jsx(OptionLabel, {
+			$heading: true,
+			children: "Data path"
+		})
+	}) }), mode === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StyledListboxOption, {
+		$bottomBorder: true,
+		children: /* @__PURE__ */ jsx(OptionLabel, {
+			$heading: true,
+			children: buildTextModeHeading(nodes)
+		})
+	}), /* @__PURE__ */ jsx(StyledListboxOption, { children: /* @__PURE__ */ jsx(OptionLabel, {
+		$heading: true,
+		children: "Modes"
+	}) })] })] });
+	const footer = showEmptyState && openCodeChainFunctionPanel ? /* @__PURE__ */ jsx(FooterContainer, { children: /* @__PURE__ */ jsx(Button, {
+		ref: footerButtonRef,
+		id: footerButtonId,
+		role: "option",
+		"aria-selected": isFooterHighlighted,
+		type: "button",
+		tabIndex: -1,
+		variant: "basic",
+		size: "sm",
+		active: isFooterHighlighted,
+		onClick: openCodeChainFunctionPanel,
+		children: "Create custom chain"
+	}) }) : null;
+	const listBoxElement = showEmptyState ? /* @__PURE__ */ jsx(StyledListBox, {
 		ref: listBoxRef,
 		...listBox.listBoxProps,
-		children: [
-			mode === "method-chain" && nodes[0]?.value?.id !== "exitMethodChainValueType" && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(StyledListboxOption, {
-				$bottomBorder: true,
-				children: /* @__PURE__ */ jsx(OptionLabel, {
-					$heading: true,
-					children: "Data path"
-				})
-			}) }),
-			mode === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StyledListboxOption, {
-				$bottomBorder: true,
-				children: /* @__PURE__ */ jsx(OptionLabel, {
-					$heading: true,
-					children: buildTextModeHeading(nodes)
-				})
-			}), /* @__PURE__ */ jsx(StyledListboxOption, { children: /* @__PURE__ */ jsx(OptionLabel, {
-				$heading: true,
-				children: "Modes"
-			}) })] }),
-			nodes.length === 0 || mode !== "text" && isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EmptyOptionList, { children: "No options available" }), openCodeChainFunctionPanel && /* @__PURE__ */ jsx(FooterContainer, { children: /* @__PURE__ */ jsx(Button, {
-				variant: "basic",
-				size: "sm",
-				onClick: openCodeChainFunctionPanel,
-				children: "Create custom chain"
-			}) })] }) : nodes.map((node) => node.value ? /* @__PURE__ */ jsx(ListboxOption, {
-				item: node.value,
-				state: comboboxState
-			}, node.key) : null)
-		]
+		children: footer
+	}) : /* @__PURE__ */ jsxs(StyledListBox, {
+		ref: listBoxRef,
+		...listBox.listBoxProps,
+		children: [headings, nodes.map((node) => node.value ? /* @__PURE__ */ jsx(ListboxOption, {
+			item: node.value,
+			state: comboboxState
+		}, node.key) : null)]
 	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showEmptyState && /* @__PURE__ */ jsxs(Fragment$1, { children: [headings, /* @__PURE__ */ jsx(EmptyOptionList, { children: "No options available" })] }), listBoxElement] });
 };
 //#endregion
 //#region src/components/SmartTextInput/useChainAtCursor.ts
@@ -1091,7 +1113,10 @@ function extractChainContextAtCursor(tree, cursorIdx, valueType, assumeOnNextLin
 		}
 		if (!shouldInclude) {
 			cutoffIdx = i;
-			if (!assumeOnNextLink && link.start < idx) partialQuery = link.name.slice(0, Math.min(idx - link.start, link.name.length));
+			if (!assumeOnNextLink && link.start < idx) {
+				const linkText = link.type === NodeType.CustomFunction ? `@${link.name}` : link.name;
+				partialQuery = linkText.slice(0, Math.min(idx - link.start, linkText.length));
+			}
 			break;
 		}
 	}
@@ -1372,12 +1397,12 @@ const StyledInput = styled(Input_default)`
   overflow: hidden;
 
   ${({ size }) => size === "sm" && css`
-      font-size: 12px;
+      font-size: ${Typography.TextSmall.fontSize};
     `}
   ${({ $variant }) => $variant === "table-cell" && css`
       border: none;
       padding: 0;
-      height: 18px;
+      height: ${Typography.TextSmall.lineHeight};
       border-radius: 0;
     `}
 `;
@@ -1399,18 +1424,15 @@ const getInitialValueType = (chainRoots, initialValue, allowedValueType) => {
 * Smart text input for configuring access to data, interpolated strings, or inline code.
 */
 const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueType, allowedInterpolationModes, chainRoots, platformObjectJsonSchema, defaultPrimitiveUtilities, codeChainFunctionSchema, useChainRootDescriptions = false, primitivesSchema = "default", isLoading = false, portalContainerRef, getSchemaOptionsOverride, creatable = false, renderFunctionForm, renderCustomFunctionDetail, renderCodeChainFunctionPanel, canCreateCodeChainFunction = false, sortOptionsBy, onValidationChange, contextMenuExamples, popoverFooter, id, placeholder = "Select or type", disabled = false, size = "md", variant = "default", ...props }) => {
-	const lastNotifiedValueRef = useRef(passedValue ?? "");
 	const [value, setValue] = useState(passedValue ?? "");
-	useEffect(() => {
-		if (passedValue !== void 0 && passedValue !== lastNotifiedValueRef.current) {
-			setValue(passedValue);
-			lastNotifiedValueRef.current = passedValue;
-		}
-	}, [passedValue]);
+	const [valueType, setValueType] = useState(getInitialValueType(chainRoots, passedValue, allowedValueType));
+	const lastNotifiedRef = useRef({
+		value: passedValue ?? "",
+		valueType
+	});
 	const onChangeRef = useRef(onChange);
 	onChangeRef.current = onChange;
 	const [cursorIdx, setCursor] = useState(null);
-	const [valueType, setValueType] = useState(getInitialValueType(chainRoots, passedValue, allowedValueType));
 	const [assumeOnNextLinkState, setAssumeOnNextLink] = useState(false);
 	const [forceFunctionDialog, setForceFunctionDialog] = useState(false);
 	const inputRef = useRef(null);
@@ -1463,14 +1485,30 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 		}
 	});
 	useEffect(() => {
-		if (value === lastNotifiedValueRef.current) return;
-		lastNotifiedValueRef.current = value;
+		if (value === lastNotifiedRef.current.value && valueType === lastNotifiedRef.current.valueType) return;
+		lastNotifiedRef.current = {
+			value,
+			valueType
+		};
 		onChangeRef.current?.(value, {
 			valueType,
 			schema: resolveSchema(value),
 			ast: tree
 		});
-	}, [value]);
+	}, [value, valueType]);
+	useEffect(() => {
+		if (passedValue !== void 0 && passedValue !== lastNotifiedRef.current.value) {
+			setValue(passedValue);
+			setValueType(getInitialValueType(chainRoots, passedValue, allowedValueType));
+			lastNotifiedRef.current = {
+				...lastNotifiedRef.current,
+				value: passedValue
+			};
+		}
+	}, [passedValue]);
+	useEffect(() => {
+		if (allowedValueType != null) setValueType(allowedValueType);
+	}, [allowedValueType]);
 	const functionAtCursor = getFunctionAtCursor(tree, cursorIdx, valueType);
 	const popupMode = functionAtCursor != null && (functionAtCursor.cursorInParens || forceFunctionDialog) ? "function-dialog" : mode === "code" ? "code-dialog" : "listbox";
 	const comboboxItems = useMemo(() => {
@@ -1729,6 +1767,19 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 	});
 	const showFunctionDialog = popupMode === "function-dialog" && comboboxState.isOpen;
 	const showCodeDialog = popupMode === "code-dialog" && comboboxState.isOpen;
+	const openCustomChainPanel = openCcfPanel ? () => openCcfPanel({
+		initialName: query,
+		inputSchema: currentSchema
+	}) : void 0;
+	const customChainButtonId = `${id}__create-custom-chain`;
+	const showCustomChainFooter = openCustomChainPanel != null && comboboxState.isOpen && !showFunctionDialog && !showCodeDialog && isListboxEmptyState(comboboxState.collection, mode, isLoading);
+	const [isCustomChainHighlighted, setIsCustomChainHighlighted] = useState(false);
+	useEffect(() => {
+		if (!showCustomChainFooter) setIsCustomChainHighlighted(false);
+	}, [showCustomChainFooter]);
+	useEffect(() => {
+		setIsCustomChainHighlighted(false);
+	}, [value]);
 	const popoverFooterRendered = useMemo(() => {
 		return popoverFooter == null ? void 0 : popoverFooter({ closePopover() {
 			comboboxState.setOpen(false);
@@ -1767,6 +1818,26 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 							dialogFocusRef.current?.focusFirst();
 							return;
 						}
+						if (showCustomChainFooter) {
+							if (e.key === "ArrowDown") {
+								e.preventDefault();
+								e.stopPropagation();
+								setIsCustomChainHighlighted(true);
+								return;
+							}
+							if (e.key === "ArrowUp") {
+								e.preventDefault();
+								e.stopPropagation();
+								setIsCustomChainHighlighted(false);
+								return;
+							}
+							if (e.key === "Enter" && isCustomChainHighlighted) {
+								e.preventDefault();
+								e.stopPropagation();
+								openCustomChainPanel?.();
+								return;
+							}
+						}
 						inputProps.onKeyDown?.(e);
 					}
 				}, {
@@ -1880,6 +1951,7 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 				disabled,
 				size,
 				$variant: variant,
+				"aria-activedescendant": isCustomChainHighlighted ? customChainButtonId : inputProps["aria-activedescendant"],
 				"aria-haspopup": popupMode === "function-dialog" || popupMode === "code-dialog" ? "dialog" : inputProps["aria-haspopup"],
 				...suppressPopover ? { "aria-expanded": false } : {}
 			})
@@ -1916,12 +1988,9 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 				listBoxProps: combobox.listBoxProps,
 				mode,
 				isLoading,
-				openCodeChainFunctionPanel: openCcfPanel ? () => {
-					openCcfPanel({
-						initialName: query,
-						inputSchema: currentSchema
-					});
-				} : void 0
+				openCodeChainFunctionPanel: openCustomChainPanel,
+				footerButtonId: customChainButtonId,
+				isFooterHighlighted: isCustomChainHighlighted
 			})
 		})]
 	}), renderCcfPanel()] });