@persona/design-system 0.10.13 → 0.10.15

package/dist/components/SmartTextInput/index.mjs

@@ -1,7 +1,9 @@
 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 { focusStyle } from "../../mixins/focus.mjs";
+import "../../variables/effect.mjs";
 import { rotate } from "../../variables/keyframes.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.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";
@@ -10,20 +12,18 @@ 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-Bj1fry_K.mjs";
-import { n as useFormField } from "../../useFormField-pOVkb5BK.mjs";
+import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
+import { n as useFormField } from "../../useFormField-Cd9sH-HM.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-BfVrDOY0.mjs";
+import { n as ErrorText } from "../../FormControl--iW9afGv.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-C_rAxIPH.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";
 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 { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 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";
@@ -1415,7 +1415,7 @@ const withClosingToken = (key) => {
 		default: assertNever(key);
 	}
 };
-const spliceAtCursor = (value, insert, cursorIdx) => value.slice(0, cursorIdx) + insert + value.slice(cursorIdx);
+const spliceAtCursor = (value, insert, cursorIdx, selectionEnd = cursorIdx) => value.slice(0, cursorIdx) + insert + value.slice(selectionEnd);
 const getInitialValueType = (chainRoots, initialValue, allowedValueType) => {
 	if (allowedValueType != null) return allowedValueType;
 	return initialValue && isChainWithValidRoot(initialValue, chainRoots) ? "method-chain" : "interpolation";
@@ -1424,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);
@@ -1488,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(() => {
@@ -1859,7 +1872,7 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 								return;
 							}
 						}
-						if (assumeOnNextLink && /^[a-zA-Z0-9]$/.test(e.key)) {
+						if (assumeOnNextLink && !e.metaKey && !e.ctrlKey && !e.altKey && inputRef.current?.selectionStart === inputRef.current?.selectionEnd && /^[a-zA-Z0-9]$/.test(e.key)) {
 							const idx = safeCursorIdx(cursorIdx, tree);
 							setValue(spliceAtCursor(value, ".", idx));
 							nextRenderRef.current.cursor = {
@@ -1878,8 +1891,10 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 							return;
 						}
 						if (e.key === "{" || e.key === "(") {
-							const idx = safeCursorIdx(cursorIdx, tree);
-							setValue(spliceAtCursor(value, withClosingToken(e.key), idx));
+							const idx = safeCursorIdx(inputRef.current?.selectionStart ?? cursorIdx, tree);
+							const end = safeCursorIdx(inputRef.current?.selectionEnd ?? cursorIdx, tree);
+							setAssumeOnNextLink(false);
+							setValue(spliceAtCursor(value, withClosingToken(e.key), idx, end));
 							nextRenderRef.current.cursor = {
 								start: idx + 1,
 								end: idx + 1
@@ -1888,8 +1903,10 @@ const SmartTextInput = ({ value: passedValue, onChange, valueType: allowedValueT
 							return;
 						}
 						if ((e.key === "'" || e.key === "[") && mode === "method-chain") {
-							const idx = safeCursorIdx(cursorIdx, tree);
-							setValue(spliceAtCursor(value, withClosingToken(e.key), idx));
+							const idx = safeCursorIdx(inputRef.current?.selectionStart ?? cursorIdx, tree);
+							const end = safeCursorIdx(inputRef.current?.selectionEnd ?? cursorIdx, tree);
+							setAssumeOnNextLink(false);
+							setValue(spliceAtCursor(value, withClosingToken(e.key), idx, end));
 							nextRenderRef.current.cursor = {
 								start: idx + 1,
 								end: idx + 1