@vertigis/react-ui 11.35.1 → 12.0.1

package/SymbolInput/SymbolInput.js

@@ -1,457 +1,26 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useCallback, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SimpleFillSymbolInput, {} from "./SimpleFillSymbolInput.js";
+import SimpleLineSymbolInput, {} from "./SimpleLineSymbolInput.js";
+import SimpleMarkerSymbolInput, {} from "./SimpleMarkerSymbolInput.js";
+import TextSymbolInput, {} from "./TextSymbolInput.js";
+import UnsupportedSymbol from "./UnsupportedSymbol.js";
 import Box, {} from "../Box/index.js";
-import FormLabelColorField, {} from "../FormLabelColorField/index.js";
-import FormLabelSliderField, {} from "../FormLabelSliderField/index.js";
-import FormLabelTextField, {} from "../FormLabelTextField/index.js";
-import Typography from "../Typography/index.js";
 export function symbolIsSupported(symbol) {
     const type = symbol.type;
-    return type === "esriSMS" || type === "esriSLS" || type === "esriSFS";
+    return type === "esriSMS" || type === "esriSLS" || type === "esriSFS" || type === "esriTS";
 }
 const SymbolInput = props => {
-    const { onChange, symbol, languageResources, colorResources, children, parseNumber, formatNumber, isSupported = symbolIsSupported, LineColorProps, FillColorProps, LineWidthProps, LineStyleProps, FillStyleProps, MarkerStyleProps, MarkerSizeProps, MarkerAngleProps, MarkerXOffsetProps, MarkerYOffsetProps, TextInputComponent, NumberInputComponent, ColorInputComponent, ...other } = {
-        parseNumber: DEFAULT_PARSE_NUMBER,
-        formatNumber: DEFAULT_FORMAT_NUMBER,
-        ...props,
+    const { onChange, symbol, languageResources, colorResources, children, isSupported = symbolIsSupported, AutoCompleteComponent, TextInputComponent, NumberInputComponent, ColorInputComponent, textSymbolDisplayOptions, ...other } = props;
+    const symbolProps = {
+        onChange,
+        symbol,
+        languageResources,
+        colorResources,
+        TextInputComponent,
+        NumberInputComponent,
+        ColorInputComponent,
     };
-    const isSupportedSymbol = isSupported(symbol);
-    const text = { ...DEFAULT_LANGUAGE, ...languageResources };
-    const colors = { ...DEFAULT_COLORS, ...colorResources };
-    const { type } = symbol;
-    const FormTextInput = TextInputComponent ?? FormLabelTextField;
-    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
-    const FormColorInput = ColorInputComponent ?? FormLabelColorField;
-    const [lineStyle, setLineStyle] = useState(getLineStyle(symbol));
-    const [fillStyle, setFillStyle] = useState(getFillStyle(symbol));
-    const [lineColor, setLineColor] = useState(getLineColor(symbol));
-    const [fillColor, setFillColor] = useState(getFillColor(symbol));
-    const [lineWidth, setLineWidth] = useState(getLineWidth(symbol));
-    const [markerStyle, setMarkerStyle] = useState(getMarkerProperty(symbol, "style"));
-    const [markerSize, setMarkerSize] = useState(getMarkerProperty(symbol, "size") ?? 1);
-    const [markerAngle, setMarkerAngle] = useState(getMarkerProperty(symbol, "angle") ?? 0);
-    const [xOffset, setXOffset] = useState(getMarkerProperty(symbol, "xoffset") ?? 0);
-    const [yOffset, setYOffset] = useState(getMarkerProperty(symbol, "yoffset") ?? 0);
-    useEffect(() => {
-        setLineColor(getLineColor(symbol));
-        setLineStyle(getLineStyle(symbol));
-        setLineWidth(getLineWidth(symbol));
-        setFillColor(getFillColor(symbol));
-        setFillStyle(getFillStyle(symbol));
-        setMarkerAngle(getMarkerProperty(symbol, "angle") ?? 0);
-        setMarkerSize(getMarkerProperty(symbol, "size") ?? 1);
-        setMarkerStyle(getMarkerProperty(symbol, "style"));
-        setXOffset(getMarkerProperty(symbol, "xoffset") ?? 0);
-        setYOffset(getMarkerProperty(symbol, "yoffset") ?? 0);
-    }, [symbol]);
-    const handleLineWidthBlur = useCallback((event) => {
-        setLineWidth(Math.min(100, Math.max(0, lineWidth ?? 0)));
-        LineWidthProps?.onBlur?.(event);
-    }, [lineWidth, LineWidthProps]);
-    const handleMarkerSizeBlur = useCallback((event) => {
-        setMarkerSize(Math.min(100, Math.max(0, markerSize ?? 0)));
-        MarkerSizeProps?.onBlur?.(event);
-    }, [markerSize, MarkerSizeProps]);
-    const handleXOffsetBlur = useCallback((event) => {
-        setXOffset(Math.min(100, Math.max(0, xOffset ?? 0)));
-        MarkerXOffsetProps?.onBlur?.(event);
-    }, [xOffset, MarkerXOffsetProps]);
-    const handleYOffsetBlur = useCallback((event) => {
-        setYOffset(Math.min(100, Math.max(0, yOffset ?? 0)));
-        MarkerYOffsetProps?.onBlur?.(event);
-    }, [yOffset, MarkerYOffsetProps]);
-    const handleMarkerAngleBlur = useCallback((event) => {
-        setMarkerAngle(Math.min(360, Math.max(0, markerAngle ?? 0)));
-        MarkerAngleProps?.onBlur?.(event);
-    }, [markerAngle, MarkerAngleProps]);
-    // The rule is correct, but without the useless constraint, the TSX parser
-    // gets confused and tries to interpret it as a React element.
-    //
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-    const handleStateChange = (state, propName, setState) => {
-        setState(state);
-        onChange?.(getCurrentProperties({ [propName]: state }));
-    };
-    const getCurrentProperties = (newState = {}) => {
-        switch (type) {
-            case "esriSFS":
-                return {
-                    type,
-                    color: newState.fillColor ?? fillColor,
-                    outline: {
-                        color: newState.lineColor ?? lineColor,
-                        width: newState.lineWidth ?? lineWidth,
-                        style: newState.lineStyle ?? lineStyle,
-                        type: "esriSLS",
-                    },
-                    style: newState.fillStyle ?? fillStyle,
-                };
-            case "esriSLS":
-                return {
-                    type,
-                    color: newState.lineColor ?? lineColor,
-                    width: newState.lineWidth ?? lineWidth,
-                    style: newState.lineStyle ?? lineStyle,
-                };
-            case "esriSMS":
-                return {
-                    type,
-                    color: newState.fillColor ?? fillColor,
-                    outline: {
-                        color: newState.lineColor ?? lineColor,
-                        width: newState.lineWidth ?? lineWidth,
-                        style: newState.lineStyle ?? lineStyle,
-                        type: "esriSLS",
-                    },
-                    style: newState.markerStyle ?? markerStyle,
-                    size: newState.markerSize ?? markerSize,
-                    angle: newState.markerAngle ?? markerAngle,
-                    xoffset: newState.xOffset ?? xOffset,
-                    yoffset: newState.yOffset ?? yOffset,
-                };
-            default:
-                return { type };
-        }
-    };
-    return (_jsxs(Box, { ...other, children: [!isSupportedSymbol && (_jsx(Typography, { sx: {
-                    mb: 1,
-                    p: 0.5,
-                    backgroundColor: colors.errorBackground,
-                    color: colors.errorForeground,
-                    borderRadius: 1,
-                }, children: text.symbolUnsupportedErrorMessage })), children, isSupportedSymbol ? (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...LineColorProps, label: text.lineColorTitle, onChange: (value) => {
-                            handleStateChange(toColor(value), "lineColor", setLineColor);
-                            LineColorProps?.onChange?.(value);
-                        }, value: toRgbaString(lineColor), disabled: !isSupportedSymbol || LineColorProps?.disabled }), type !== "esriSMS" && (_jsx(FormTextInput, { fullWidth: true, ...LineStyleProps, nativeSelect: true, label: text.lineStyleTitle, value: lineStyle, onChange: event => {
-                            const { value } = event.target;
-                            handleStateChange(value, "lineStyle", setLineStyle);
-                            LineStyleProps?.onChange?.(event);
-                        }, disabled: !isSupportedSymbol || LineStyleProps?.disabled, children: getSimpleLineStyles(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) })), _jsx(FormNumberInput, { fullWidth: true, ...LineWidthProps, SliderProps: {
-                            step: 0.5,
-                            min: 0,
-                            max: 25,
-                            ...LineWidthProps?.SliderProps,
-                            disabled: !isSupportedSymbol || LineWidthProps?.SliderProps?.disabled,
-                        }, InputProps: {
-                            onBlur: handleLineWidthBlur,
-                            min: 0,
-                            max: 25,
-                            ...LineWidthProps?.InputProps,
-                            disabled: !isSupportedSymbol || LineWidthProps?.InputProps?.disabled,
-                        }, label: text.lineWidthTitle, value: lineWidth, onChange: value => {
-                            handleStateChange(value, "lineWidth", setLineWidth);
-                            LineWidthProps?.onChange?.(value);
-                        } }), type === "esriSFS" && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...FillColorProps, label: text.fillColorTitle, onChange: (value) => {
-                                    handleStateChange(toColor(value), "fillColor", setFillColor);
-                                    FillColorProps?.onChange?.(value);
-                                }, value: toRgbaString(fillColor), disabled: !isSupportedSymbol || FillColorProps?.disabled }), _jsx(FormTextInput, { fullWidth: true, ...FillStyleProps, nativeSelect: true, label: text.fillStyleTitle, value: fillStyle, onChange: event => {
-                                    const { value } = event.target;
-                                    handleStateChange(value, "fillStyle", setFillStyle);
-                                    FillStyleProps?.onChange?.(event);
-                                }, disabled: !isSupportedSymbol || FillStyleProps?.disabled, children: getSimpleFillStyles(text).map(fillStyle => (_jsx("option", { value: fillStyle.id, children: fillStyle.label }, fillStyle.id))) })] })), type === "esriSMS" && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, ...FillColorProps, label: text.fillColorTitle, onChange: (value) => {
-                                    handleStateChange(toColor(value), "fillColor", setFillColor);
-                                    FillColorProps?.onChange?.(value);
-                                }, value: toRgbaString(fillColor), disabled: !isSupportedSymbol ||
-                                    NO_FILL_MARKER_STYLES.includes(markerStyle) ||
-                                    FillColorProps?.disabled }), _jsx(FormTextInput, { fullWidth: true, ...MarkerStyleProps, nativeSelect: true, label: text.markerStyleTitle, value: markerStyle, onChange: event => {
-                                    const { value } = event.target;
-                                    handleStateChange(value, "markerStyle", setMarkerStyle);
-                                    MarkerStyleProps?.onChange?.(event);
-                                }, disabled: !isSupportedSymbol || MarkerStyleProps?.disabled, children: getSimpleMarkerStyles(text).map(markerStyle => (_jsx("option", { value: markerStyle.id, children: markerStyle.label }, markerStyle.id))) }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerSizeProps, label: text.markerSizeTitle, value: markerSize, onChange: value => {
-                                    handleStateChange(value, "markerSize", setMarkerSize);
-                                    MarkerSizeProps?.onChange?.(value);
-                                }, SliderProps: {
-                                    step: 1,
-                                    min: 0,
-                                    max: 25,
-                                    ...MarkerSizeProps?.SliderProps,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerSizeProps?.SliderProps?.disabled,
-                                }, InputProps: {
-                                    min: 0,
-                                    max: 25,
-                                    ...MarkerSizeProps?.InputProps,
-                                    onBlur: handleMarkerSizeBlur,
-                                    disabled: !isSupportedSymbol || MarkerSizeProps?.disabled,
-                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerAngleProps, label: text.markerAngleTitle, value: markerAngle, onChange: value => {
-                                    handleStateChange(value, "markerAngle", setMarkerAngle);
-                                    MarkerAngleProps?.onChange?.(value);
-                                }, SliderProps: {
-                                    step: 1,
-                                    min: 0,
-                                    max: 360,
-                                    ...MarkerAngleProps?.SliderProps,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerAngleProps?.SliderProps?.disabled,
-                                }, InputProps: {
-                                    min: 0,
-                                    max: 360,
-                                    ...MarkerAngleProps?.InputProps,
-                                    onBlur: handleMarkerAngleBlur,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerAngleProps?.InputProps?.disabled,
-                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerXOffsetProps, label: text.xOffsetTitle, value: xOffset, onChange: value => {
-                                    handleStateChange(value, "xOffset", setXOffset);
-                                    MarkerXOffsetProps?.onChange?.(value);
-                                }, SliderProps: {
-                                    step: 1,
-                                    min: -25,
-                                    max: 25,
-                                    ...MarkerXOffsetProps?.SliderProps,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerXOffsetProps?.SliderProps?.disabled,
-                                }, InputProps: {
-                                    min: -25,
-                                    max: 25,
-                                    ...MarkerXOffsetProps?.InputProps,
-                                    onBlur: handleXOffsetBlur,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerXOffsetProps?.InputProps?.disabled,
-                                } }), _jsx(FormNumberInput, { fullWidth: true, ...MarkerYOffsetProps, label: text.yOffsetTitle, value: yOffset, onChange: value => {
-                                    handleStateChange(value, "yOffset", setYOffset);
-                                    MarkerYOffsetProps?.onChange?.(value);
-                                }, SliderProps: {
-                                    step: 1,
-                                    min: -25,
-                                    max: 25,
-                                    ...MarkerYOffsetProps?.SliderProps,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerYOffsetProps?.SliderProps?.disabled,
-                                }, InputProps: {
-                                    min: -25,
-                                    max: 25,
-                                    ...MarkerYOffsetProps?.InputProps,
-                                    onBlur: handleYOffsetBlur,
-                                    disabled: !isSupportedSymbol ||
-                                        MarkerYOffsetProps?.InputProps?.disabled,
-                                } })] }))] })) : null] }));
+    const isSupportedSymbol = symbolIsSupported(symbol) && isSupported(symbol);
+    return (_jsxs(Box, { ...other, children: [!isSupportedSymbol && _jsx(UnsupportedSymbol, { ...props }), children, symbol.type === "esriSFS" && (_jsx(SimpleFillSymbolInput, { ...symbolProps, isSupported: props.isSupported })), symbol.type === "esriSLS" && (_jsx(SimpleLineSymbolInput, { ...symbolProps, isSupported: props.isSupported })), symbol.type === "esriSMS" && (_jsx(SimpleMarkerSymbolInput, { ...symbolProps, isSupported: props.isSupported })), symbol.type === "esriTS" && (_jsx(TextSymbolInput, { ...symbolProps, isSupported: props.isSupported, AutoCompleteComponent: AutoCompleteComponent, displayOptions: textSymbolDisplayOptions }))] }));
 };
 export default SymbolInput;
-const DEFAULT_LANGUAGE = {
-    fillColorTitle: "Fill Color",
-    fillStyleTitle: "Fill Style",
-    lineColorTitle: "Line Color",
-    lineStyleTitle: "Line Style",
-    lineWidthTitle: "Line Width",
-    markerAngleTitle: "Marker Angle",
-    xOffsetTitle: "X Offset",
-    yOffsetTitle: "Y Offset",
-    markerSizeTitle: "Marker Size",
-    markerStyleTitle: "Marker Style",
-    symbolUnsupportedErrorMessage: "You are attempting to edit a symbol that is not currently supported.",
-    markerStyleCircle: "Circle",
-    markerStyleCross: "Cross",
-    markerStyleDiamond: "Diamond",
-    markerStyleSquare: "Square",
-    markerStyleTriangle: "Triangle",
-    markerStyleX: "X",
-    lineStyleDash: "Dash",
-    lineStyleDashDot: "Dash Dot",
-    lineStyleDot: "Dot",
-    lineStyleLongDashDot: "Long Dash Dot",
-    lineStyleLongDash: "Long Dash",
-    lineStyleNone: "None",
-    lineStyleShortDashDotDot: "Short Dash Dot Dot",
-    lineStyleShortDashDot: "Short Dash Dot",
-    lineStyleShortDash: "Short Dash",
-    lineStyleShortDot: "Short Dot",
-    lineStyleSolid: "Solid",
-    fillStyleBackwardDiagonal: "Backward Diagonal",
-    fillStyleCross: "Cross",
-    fillStyleDiagonalCross: "Diagonal Cross",
-    fillStyleForwardDiagonal: "Forward Diagonal",
-    fillStyleHorizontal: "Horizontal",
-    fillStyleNone: "None",
-    fillStyleSolid: "Solid",
-    fillStyleVertical: "Vertical",
-};
-const DEFAULT_COLORS = {
-    errorBackground: "#B22222",
-    errorForeground: "#FFFFFF",
-};
-const NO_FILL_MARKER_STYLES = ["esriSMSCross", "esriSMSX"];
-const DEFAULT_PARSE_NUMBER = (s) => (typeof s === "string" ? +s : 0);
-const DEFAULT_FORMAT_NUMBER = (n) => typeof n === "number" ? `${n}` : "0";
-const getSimpleFillStyles = (t) => {
-    return [
-        {
-            id: "esriSFSBackwardDiagonal",
-            label: t.fillStyleBackwardDiagonal,
-        },
-        {
-            id: "esriSFSCross",
-            label: t.fillStyleCross,
-        },
-        {
-            id: "esriSFSDiagonalCross",
-            label: t.fillStyleDiagonalCross,
-        },
-        {
-            id: "esriSFSForwardDiagonal",
-            label: t.fillStyleForwardDiagonal,
-        },
-        {
-            id: "esriSFSHorizontal",
-            label: t.fillStyleHorizontal,
-        },
-        {
-            id: "esriSFSNull",
-            label: t.fillStyleNone,
-        },
-        {
-            id: "esriSFSSolid",
-            label: t.fillStyleSolid,
-        },
-        {
-            id: "esriSFSVertical",
-            label: t.fillStyleVertical,
-        },
-    ];
-};
-const getSimpleLineStyles = (t) => {
-    return [
-        {
-            id: "esriSLSDash",
-            label: t.lineStyleDash,
-        },
-        {
-            id: "esriSLSDashDot",
-            label: t.lineStyleDashDot,
-        },
-        {
-            id: "esriSLSDot",
-            label: t.lineStyleDot,
-        },
-        {
-            id: "esriSLSLongDash",
-            label: t.lineStyleLongDash,
-        },
-        {
-            id: "esriSLSLongDashDot",
-            label: t.lineStyleLongDashDot,
-        },
-        {
-            id: "esriSLSNull",
-            label: t.lineStyleNone,
-        },
-        {
-            id: "esriSLSShortDash",
-            label: t.lineStyleShortDash,
-        },
-        {
-            id: "esriSLSShortDashDot",
-            label: t.lineStyleShortDashDot,
-        },
-        {
-            id: "esriSLSShortDashDotDot",
-            label: t.lineStyleShortDashDotDot,
-        },
-        {
-            id: "esriSLSShortDot",
-            label: t.lineStyleShortDot,
-        },
-        {
-            id: "esriSLSSolid",
-            label: t.lineStyleSolid,
-        },
-    ];
-};
-const getSimpleMarkerStyles = (t) => {
-    return [
-        { id: "esriSMSCircle", label: t.markerStyleCircle },
-        { id: "esriSMSCross", label: t.markerStyleCross },
-        { id: "esriSMSDiamond", label: t.markerStyleDiamond },
-        { id: "esriSMSSquare", label: t.markerStyleSquare },
-        { id: "esriSMSTriangle", label: t.markerStyleTriangle },
-        { id: "esriSMSX", label: t.markerStyleX },
-    ];
-};
-const getLineStyle = (symbol) => {
-    switch (symbol?.type) {
-        case "esriSMS":
-        case "esriSFS":
-            return symbol.outline?.style;
-        case "esriSLS":
-            return symbol.style;
-        default:
-            return undefined;
-    }
-};
-const getFillStyle = (symbol) => {
-    switch (symbol?.type) {
-        case "esriSFS":
-            return symbol.style;
-        default:
-            return undefined;
-    }
-};
-const getLineColor = (symbol) => {
-    switch (symbol?.type) {
-        case "esriSMS":
-        case "esriSFS":
-            return symbol.outline?.color;
-        case "esriSLS":
-            return symbol.color;
-        default:
-            return undefined;
-    }
-};
-const getFillColor = (symbol) => {
-    switch (symbol?.type) {
-        case "esriSMS":
-        case "esriSFS":
-            return symbol.color;
-        default:
-            return undefined;
-    }
-};
-const getLineWidth = (symbol) => {
-    switch (symbol?.type) {
-        case "esriSMS":
-        case "esriSFS":
-            return symbol.outline?.width;
-        case "esriSLS":
-            return symbol.width;
-        default:
-            return undefined;
-    }
-};
-const getMarkerProperty = (symbol, property) => {
-    if (symbol?.type !== "esriSMS") {
-        return undefined;
-    }
-    return symbol[property];
-};
-const toRgbaString = (color) => {
-    if (!color) {
-        return DEFAULT_RGBA_STRING;
-    }
-    const [r, g, b, a] = color;
-    const aVal = a / 255;
-    return `rgba(${r}, ${g}, ${b}, ${isNaN(aVal) ? 1 : aVal})`;
-};
-const toColor = (color) => {
-    if (!color) {
-        return DEFAULT_COLOR;
-    }
-    return fromRgbaString(color) ?? fromRgbString(color) ?? DEFAULT_COLOR;
-};
-const fromRgbString = (color) => {
-    const result = /rgb\(([\d.]+), ([\d.]+), ([\d.]+)\)/.exec(color);
-    if (result) {
-        const [, r, g, b] = result;
-        return [+r, +g, +b, 255];
-    }
-    return undefined;
-};
-const fromRgbaString = (color) => {
-    const result = /rgba\(([\d.]+), ([\d.]+), ([\d.]+), ([\d.]+)\)/.exec(color);
-    if (result) {
-        const [, r, g, b, a] = result;
-        const aVal = +a * 255;
-        return [+r, +g, +b, isNaN(aVal) ? 255 : aVal];
-    }
-    return undefined;
-};
-const DEFAULT_COLOR = [255, 255, 255, 255];
-const DEFAULT_RGBA_STRING = "rgba(255, 255, 255, 1)";

package/SymbolInput/SymbolJson.d.ts

@@ -9,7 +9,7 @@ export type SymbolJson = Symbol2DJson;
 /**
  * Symbol types used in web maps.
  */
-export type Symbol2DJson = SimpleFillSymbolJson | SimpleLineSymbolJson | SimpleMarkerSymbolJson;
+export type Symbol2DJson = SimpleFillSymbolJson | SimpleLineSymbolJson | SimpleMarkerSymbolJson | TextSymbolJson;
 /**
  * Color is represented as a four-element array. The four elements represent
  * values for red, green, blue, and alpha in that order. Values range from 0
@@ -18,6 +18,33 @@ export type Symbol2DJson = SimpleFillSymbolJson | SimpleLineSymbolJson | SimpleM
  * {@link https://developers.arcgis.com/web-scene-specification/objects/color/}.
  */
 export type ColorJson = number[];
+/**
+ * Font used for text symbols.
+ *
+ * See {@link https://developers.arcgis.com/web-map-specification/objects/font/}.
+ */
+export interface FontJson {
+    /**
+     * The font decoration.
+     */
+    decoration?: "line-through" | "none" | "underline";
+    /**
+     * The font family.
+     */
+    family?: string;
+    /**
+     * The font size in points.
+     */
+    size?: number;
+    /**
+     * The font style.
+     */
+    style?: "italic" | "normal" | "oblique";
+    /**
+     * The text weight.
+     */
+    weight?: "bold" | "bolder" | "lighter" | "normal";
+}
 /**
  * Base class for all symbols.
  */
@@ -128,6 +155,89 @@ export interface SimpleMarkerSymbolJson extends SymbolJsonBase {
      */
     type: "esriSMS";
 }
+/**
+ * Text symbols are used to add text to a feature (labeling).
+ *
+ * See
+ * {@link https://developers.arcgis.com/web-map-specification/objects/esriTS_symbol/}.
+ */
+export interface TextSymbolJson extends SymbolJsonBase {
+    /**
+     * A numeric value that defines the number of degrees (0 to 360) that a text
+     * symbol is rotated. The rotation is from East in a counter-clockwise
+     * direction where East is the 0° axis.
+     */
+    angle?: number;
+    /**
+     * Background color of the text.
+     */
+    backgroundColor?: ColorJson;
+    /**
+     * Value indicating the the color of the border line.
+     */
+    borderLineColor?: ColorJson;
+    /**
+     * Numeric value indicating the the size of the border line in points.
+     */
+    borderLineSize?: number;
+    /**
+     * Color is represented as a four-element array. The four elements represent
+     * values for red, green, blue, and alpha in that order. Values range from 0
+     * through 255. If color is undefined for a symbol, the color value is
+     * null.
+     */
+    color?: ColorJson;
+    /**
+     * Font used for text symbols.
+     */
+    font?: FontJson;
+    /**
+     * Color of the halo around the text.
+     */
+    haloColor?: ColorJson;
+    /**
+     * Numeric value indicating the point size of a halo around the text symbol.
+     */
+    haloSize?: number;
+    /**
+     * The horizontal alignment of the text.
+     */
+    horizontalAlignment?: "left" | "right" | "center" | "justify";
+    /**
+     * Boolean value indicating whether to adjust the spacing between characters
+     * in the text string.
+     */
+    kerning?: boolean;
+    /**
+     * Boolean value, set to true if using Hebrew or Arabic fonts.
+     */
+    rightToLeft?: boolean;
+    /**
+     * Boolean value indicating whether every character in the text string is
+     * rotated.
+     */
+    rotated?: boolean;
+    /**
+     * Only applicable when specified as a client-side graphic.
+     */
+    text?: string;
+    /**
+     * The vertical alignment of the text.
+     */
+    verticalAlignment?: "baseline" | "top" | "middle" | "bottom";
+    /**
+     * Numeric value indicating the offset on the x-axis in pixels.
+     */
+    xoffset?: number;
+    /**
+     * Numeric value indicating the offset on the y-axis in pixels.
+     */
+    yoffset?: number;
+    /**
+     * @inheritDoc
+     */
+    type: "esriTS";
+}
 /**
  * The type of the Symbol.
  */

package/SymbolInput/TextSymbolInput.d.ts

@@ -0,0 +1,58 @@
+import type { FC } from "react";
+import type { FontInputProps } from "./FontInput.js";
+import type { SymbolJson, TextSymbolJson } from "./SymbolJson.js";
+import { type UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import type { FontFamily } from "./fonts.js";
+import type { BoxProps } from "../Box/index.js";
+import type { FormLabelAutocompleteFieldProps } from "../FormLabelAutocompleteField/index.js";
+import { type FormLabelColorFieldProps } from "../FormLabelColorField/index.js";
+import { type FormLabelSliderFieldProps } from "../FormLabelSliderField/index.js";
+import { type FormLabelTextFieldProps } from "../FormLabelTextField/index.js";
+export interface LanguageResources {
+    angleTitle?: string;
+    backgroundColor?: string;
+    borderLineColor?: string;
+    borderLineSize?: string;
+    color?: string;
+    haloColor?: string;
+    haloSize?: string;
+    horizontalAlignment?: string;
+    horizontalAlignmentLeft?: string;
+    horizontalAlignmentRight?: string;
+    horizontalAlignmentCenter?: string;
+    verticalAlignment?: string;
+    verticalAlignmentBaseline?: string;
+    verticalAlignmentTop?: string;
+    verticalAlignmentMiddle?: string;
+    verticalAlignmentBottom?: string;
+    xOffsetTitle?: string;
+    yOffsetTitle?: string;
+}
+export interface TextSymbolDisplayOptions {
+    showAngle?: boolean;
+    showAlignments?: boolean | {
+        showVertical?: boolean;
+        showHorizontal?: boolean;
+    };
+    showColor?: boolean;
+    showBorder?: boolean;
+    showFont?: boolean;
+    showHalo?: boolean;
+    showOffset?: boolean;
+}
+export interface TextSymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    displayOptions?: TextSymbolDisplayOptions;
+    symbol: SymbolJson;
+    colorResources?: UnsupportedSymbolProps["colorResources"];
+    languageResources?: LanguageResources & FontInputProps["languageResources"] & UnsupportedSymbolProps["languageResources"];
+    isSupported?: (symbol: SymbolJson) => symbol is TextSymbolJson;
+    AutoCompleteComponent?: FC<FormLabelAutocompleteFieldProps<FontFamily, false, true, false>>;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+    fontFamilies?: FontFamily[];
+}
+export declare function symbolIsSupported(symbol: SymbolJson): symbol is TextSymbolJson;
+declare const TextSymbolInput: FC<TextSymbolInputProps>;
+export default TextSymbolInput;