@persona/design-system 0.10.11 → 0.10.13

package/dist/components/SmartTextInput/index.mjs

@@ -1,8 +1,7 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
-import { focusStyle } from "../../mixins/focus.mjs";
-import "../../variables/effect.mjs";
-import { rotate } from "../../variables/keyframes.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";
 import { isCreatableReceiverSchema, isNoArgCodeChainFunction } from "../../lib/customFunctionSchema.mjs";
 import { isASTCustomFunctionNode, isAnyASTFunctionNode, isRealASTFunctionParamType } from "./parser/method-chain/types.mjs";
@@ -11,61 +10,26 @@ import { normalizeChain, normalizeFunctionParam } from "../../lib/methodChainNor
 import { UNTYPED_ADDITIONAL_PROPERTY_SCHEMA, getFunctionSchemaForNode, getSchemaForFieldPath } from "../../lib/schemaOptions.mjs";
 import { n as useChain, r as useChainSchema } from "../../useChain-D1aNsdvn.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
+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--pbTH3bY.mjs";
-import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-DMxjftFw.mjs";
+import { n as ErrorText } from "../../FormControl-BoKGiWdQ.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 { parse as peg$parse } from "./parser/smart-text/parser.mjs";
-import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { enclosingExpr, findAll, resolve } from "./parser/tree.mjs";
+import { safeParse } from "./parser/safe-parse.mjs";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
 import { ArrowLeftIcon as ArrowLeftIcon$1 } from "@persona/icons/12px";
 import { FocusScope, mergeProps, useComboBox, useDialog, useFocusManager, useInteractOutside, useListBox, useOption, usePopover } from "react-aria";
 import { Item, useComboBoxState } from "react-stately";
 import { createPortal } from "react-dom";
-//#region src/components/SmartTextInput/parser/tree.ts
-function getChildren(node) {
-	return node.children ?? [];
-}
-function findAll(node, type, acc = []) {
-	if (node.type === type) acc.push(node);
-	getChildren(node).forEach((c) => findAll(c, type, acc));
-	return acc;
-}
-function resolve(node, charIdx) {
-	if (charIdx < node.start || charIdx >= Math.max(node.end, node.start + 1)) return null;
-	const children = getChildren(node);
-	for (let i = 0; i < children.length; i++) {
-		const hit = resolve(children[i], charIdx);
-		if (hit) return hit;
-	}
-	return node;
-}
-function findAncestor(root, target, pred) {
-	function walk(n, ancestors) {
-		if (n === target) {
-			for (let i = ancestors.length - 1; i >= 0; i--) if (pred(ancestors[i])) return [true, ancestors[i]];
-			return [true, null];
-		}
-		const children = getChildren(n);
-		for (let j = 0; j < children.length; j++) {
-			const [found, result] = walk(children[j], ancestors.concat([n]));
-			if (found) return [true, result];
-		}
-		return [false, null];
-	}
-	const [, result] = walk(root, []);
-	return result;
-}
-function enclosingExpr(root, node) {
-	return findAncestor(root, node, (a) => a.type === NodeType.Handlebars || a.type === NodeType.Code);
-}
-//#endregion
 //#region src/components/SmartTextInput/HighlightedText.tsx
 const LoadingIndicator = styled(LoaderIcon)`
   color: ${Color.BorderIconSecondary};
@@ -118,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`
@@ -152,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;
           }
@@ -170,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;
           }
@@ -311,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) => {
@@ -321,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
 						});
@@ -330,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;
@@ -374,31 +340,6 @@ let ValueType = /* @__PURE__ */ function(ValueType) {
 	return ValueType;
 }({});
 //#endregion
-//#region src/components/SmartTextInput/parser/safe-parse.ts
-/**
-* Parses the input string into an ASTNode tree.
-*/
-function safeParse(input, options) {
-	try {
-		return peg$parse(input, {
-			startRule: "Root",
-			strict: false,
-			...options
-		});
-	} catch {
-		return {
-			type: NodeType.Root,
-			start: 0,
-			end: input.length,
-			children: [{
-				type: NodeType.Error,
-				start: 0,
-				end: input.length
-			}]
-		};
-	}
-}
-//#endregion
 //#region src/components/SmartTextInput/utils.ts
 const safeCursorIdx = (cursorIdx, ast) => {
 	const idx = cursorIdx ?? ast.end;
@@ -464,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);
@@ -524,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
@@ -644,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);
@@ -923,6 +866,7 @@ const SmartTextInputPopover = ({ id, children, comboboxState, inputRef, popoverR
 			$isDialog: isDialog,
 			id,
 			style: {
+				...popoverProps.style,
 				zIndex: Z_INDICES.modalDropdown,
 				width: popoverWidth
 			},
@@ -1013,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);
@@ -1064,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
@@ -1153,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;
 		}
 	}
@@ -1434,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;
     `}
 `;
@@ -1791,6 +1754,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);
@@ -1829,6 +1805,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);
 					}
 				}, {
@@ -1942,6 +1938,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 } : {}
 			})
@@ -1978,12 +1975,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()] });