@vertigis/react-ui 11.35.1 → 12.0.1

package/Autocomplete/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from "@mui/material/Autocomplete";
+export * from "@mui/material/useAutocomplete";
 export * from "@mui/material/Autocomplete";
 export { default as HighlightOption } from "./HighlightOption.js";

package/Autocomplete/index.js

@@ -1,3 +1,4 @@
 export { default } from "@mui/material/Autocomplete";
+export * from "@mui/material/useAutocomplete";
 export * from "@mui/material/Autocomplete";
 export { default as HighlightOption } from "./HighlightOption.js";

package/ColorInput/ColorInput.js

@@ -67,7 +67,7 @@ const Root = styled(Box)(({ theme: { palette, shape, typography } }) => ({
         },
     },
 }));
-export const ColorInput = forwardRef(function ColorInput({ ButtonProps, className, classes: classesProp, disabled, presetColors, onChange, value: unsanitizedValue, sketchPickerStyle = {}, ...others }, ref) {
+export const ColorInput = forwardRef(function ColorInput({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ButtonProps, className, classes: classesProp, disabled, presetColors, onChange, value: unsanitizedValue, sketchPickerStyle = {}, ...others }, ref) {
     const theme = useTheme();
     const [buttonEl, setButtonEl] = useState();
     const handleColorPopoverOpen = (event) => setButtonEl(event.currentTarget);
@@ -88,7 +88,7 @@ export const ColorInput = forwardRef(function ColorInput({ ButtonProps, classNam
     // The rgb object will be used for passing values to the color picker component
     const rgb = color ? color.rgb().object() : defaultRgbColor;
     const classes = mergeStyles(colorInputClasses, classesProp);
-    return (_jsxs(Root, { className: clsx(classes.root, className), ...others, ref: ref, children: [_jsx(Button, { ...ButtonProps, disabled: disabled ?? muiFormControl?.disabled, className: classes.pickerButton, "data-test": "ColorInput-picker-button", onClick: handleColorPopoverOpen, children: _jsx("div", { className: classes.pickerButtonBackground, children: _jsx("div", { className: classes.pickerButtonColor, "data-test": "ColorInput-picker-button-color", style: {
+    return (_jsxs(Root, { className: clsx(classes.root, className), ...others, ref: ref, children: [_jsx(Button, { "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...ButtonProps, disabled: disabled ?? muiFormControl?.disabled, className: classes.pickerButton, "data-test": "ColorInput-picker-button", onClick: handleColorPopoverOpen, children: _jsx("div", { className: classes.pickerButtonBackground, children: _jsx("div", { className: classes.pickerButtonColor, "data-test": "ColorInput-picker-button-color", style: {
                             // The rgb CSS string will be used for styling the color picker button
                             background: color ? color.rgb().string() : "transparent",
                         } }) }) }), _jsx(Popover, { anchorEl: buttonEl, open: !!buttonEl, anchorOrigin: {

package/FormLabelAutocompleteField/FormLabelAutocompleteField .d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { AutocompleteProps } from "../Autocomplete";
+import type { ChipTypeMap } from "../Chip";
+import type { FormControlProps } from "../FormControl/index.js";
+import { type FormHelperTextProps } from "../FormHelperText/index.js";
+export type FormLabelAutocompleteFieldProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> = Omit<FormControlProps, "defaultValue" | "onBlur" | "onChange" | "onFocus" | "value"> & {
+    /**
+     * The label content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Props applied to the
+     * [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+     */
+    FormHelperTextProps?: Partial<FormHelperTextProps>;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    defaultValue?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["defaultValue"];
+    disableClearable: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["disableClearable"];
+    disabled?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["disabled"];
+    filterOptions?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["filterOptions"];
+    getOptionLabel: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["getOptionLabel"];
+    onBlur?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onBlur"];
+    onChange?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onChange"];
+    onFocus?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["onFocus"];
+    options: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["options"];
+    value: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>["value"];
+    AutocompleteProps?: Partial<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
+};
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+declare const FormLabelAutocompleteField: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormLabelAutocompleteField;

package/FormLabelAutocompleteField/FormLabelAutocompleteField .js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Autocomplete from "../Autocomplete/index.js";
+import FormControl from "../FormControl/index.js";
+import FormHelperText, {} from "../FormHelperText/index.js";
+import FormLabel from "../FormLabel/index.js";
+import Input from "../Input/index.js";
+import { useId } from "../utils/react.js";
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+const FormLabelAutocompleteField = forwardRef(function FormLabelAutocompleteField(props, ref) {
+    const { AutocompleteProps, defaultValue, disableClearable, disabled, filterOptions, FormHelperTextProps, fullWidth = false, getOptionLabel, helperText, id: idProp, label, onBlur, onChange, onFocus, options, placeholder, value, ...other } = props;
+    const id = useId(idProp);
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    const inputLabelId = label && id ? `${id}-label` : undefined;
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: helperText })), _jsx(Autocomplete, { "aria-labelledby": inputLabelId, defaultValue: defaultValue, disableClearable: disableClearable, disabled: disabled, getOptionLabel: getOptionLabel, onBlur: onBlur, onChange: onChange, onFocus: onFocus, options: options, filterOptions: filterOptions, renderInput: params => (_jsx(Input, { ...params.InputProps, inputProps: { ...params.inputProps }, sx: { width: "100%" } })), value: value, ...AutocompleteProps })] }));
+});
+export default FormLabelAutocompleteField;

package/FormLabelAutocompleteField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormLabelAutocompleteField .js";
+export { default } from "./FormLabelAutocompleteField .js";

package/FormLabelAutocompleteField/index.js

@@ -0,0 +1,2 @@
+export * from "./FormLabelAutocompleteField .js";
+export { default } from "./FormLabelAutocompleteField .js";

package/SymbolInput/FontInput.d.ts

@@ -0,0 +1,28 @@
+import { type FC } from "react";
+import type { FontJson } from "./SymbolJson.js";
+import { type FontFamily } from "./fonts.js";
+import type { BoxProps } from "../Box";
+import type { FormLabelAutocompleteFieldProps } from "../FormLabelAutocompleteField/FormLabelAutocompleteField .js";
+import type { FormLabelSliderFieldProps } from "../FormLabelSliderField";
+import type { FormLabelTextFieldProps } from "../FormLabelTextField";
+export interface FontInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: FontJson) => void;
+    font?: FontJson;
+    fontFamilies?: FontFamily[];
+    languageResources?: LanguageResources;
+    AutoCompleteComponent?: FC<FormLabelAutocompleteFieldProps<FontFamily, false, true, false>>;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+}
+export interface LanguageResources {
+    font?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    decoration?: string;
+    decorationNone?: string;
+    decorationLineThrough?: string;
+    decorationLineUnderline?: string;
+}
+export declare const FontInput: FC<FontInputProps>;

package/SymbolInput/FontInput.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { fonts } from "./fonts.js";
+import { DEFAULT_LANGUAGE } from "./utilities.js";
+import Box from "../Box/index.js";
+import FormLabelAutocompleteField from "../FormLabelAutocompleteField/FormLabelAutocompleteField .js";
+import FormLabelSliderField from "../FormLabelSliderField/index.js";
+import FormLabelTextField from "../FormLabelTextField/index.js";
+import { useId } from "../utils/react.js";
+const getDecorationValues = (t) => {
+    return [
+        { id: "none", label: t.decorationNone },
+        { id: "line-through", label: t.decorationLineThrough },
+        { id: "underline", label: t.decorationLineUnderline },
+    ];
+};
+const capitalizeFirstLetter = (value) => `${value.charAt(0).toUpperCase() + value.slice(1)}`;
+const defaultFontJson = {
+    size: 9,
+    style: "normal",
+    decoration: "none",
+    weight: "normal",
+    family: "sans-serif",
+};
+export const FontInput = ({ font, fontFamilies, languageResources, onChange, AutoCompleteComponent, TextInputComponent, NumberInputComponent, ...props }) => {
+    const AutocompleteInput = AutoCompleteComponent ?? FormLabelAutocompleteField;
+    const FormTextInput = TextInputComponent ?? FormLabelTextField;
+    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
+    const { current: fontList } = useRef([...(fontFamilies ?? fonts)]);
+    const text = { ...DEFAULT_LANGUAGE, ...languageResources };
+    const labelId = useId();
+    const clampValue = (key, minValue = 0, maxValue = 100) => {
+        const clampedValue = Math.min(maxValue, Math.max(minValue, font?.[key] ?? minValue));
+        if (font?.[key] !== clampedValue) {
+            onChange({ ...font, [key]: clampedValue });
+        }
+    };
+    const updateValue = (key, value) => {
+        onChange({ ...font, [key]: value });
+    };
+    if (!font) {
+        onChange(defaultFontJson);
+        return null;
+    }
+    // https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Font.html
+    const fontWithDefaults = {
+        family: font.family ?? "sans-serif",
+        style: font.style ?? "normal",
+        weight: font.weight ?? "normal",
+        decoration: font.decoration ?? "none",
+        size: font.size ?? 9,
+    };
+    let fontFamily = fontList.find(f => f.font.family == fontWithDefaults.family &&
+        f.font.style === fontWithDefaults.style &&
+        f.font.weight === fontWithDefaults.weight);
+    if (!fontFamily) {
+        let name = fontWithDefaults.family.split("-").map(capitalizeFirstLetter).join(" ");
+        if (font.style !== "normal") {
+            name += ` ${capitalizeFirstLetter(fontWithDefaults.style)}`;
+        }
+        if (font.weight !== "normal") {
+            name += ` ${capitalizeFirstLetter(fontWithDefaults.weight)}`;
+        }
+        fontFamily = {
+            name,
+            font: {
+                family: fontWithDefaults.family,
+                style: fontWithDefaults.style,
+                weight: fontWithDefaults.weight,
+            },
+        };
+        fontList.push(fontFamily);
+    }
+    return (_jsxs(Box, { ...props, children: [_jsx(AutocompleteInput, { fullWidth: true, disableClearable: true, options: fontList, label: text.fontFamily, "aria-labelledby": labelId, filterOptions: (options, state) => {
+                    return fontList.filter(f => f.name
+                        .toLocaleLowerCase()
+                        .indexOf(state.inputValue.toLocaleLowerCase()) !== -1);
+                }, getOptionLabel: option => option.name, value: fontFamily, onChange: (event, newValue, reason, details) => {
+                    onChange({
+                        ...font,
+                        family: newValue.font.family,
+                        style: newValue.font.style,
+                        weight: newValue.font.weight,
+                    });
+                } }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                    step: 0.5,
+                    min: 0,
+                    max: 100,
+                }, InputProps: {
+                    onBlur: (event) => {
+                        clampValue("size", 0, 100);
+                    },
+                    min: 0,
+                    max: 100,
+                }, label: text.fontSize, value: font.size, onChange: value => {
+                    updateValue("size", value);
+                } }), _jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.decoration, value: font.decoration, onChange: event => {
+                    const { value } = event.target;
+                    updateValue("decoration", value);
+                }, children: getDecorationValues(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) })] }));
+};

package/SymbolInput/SimpleFillSymbolInput.d.ts

@@ -0,0 +1,49 @@
+import { type FC } from "react";
+import type { SymbolJson, SimpleFillSymbolJson, SimpleLineSymbolJson } from "./SymbolJson.js";
+import { type UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import { type SelectValues } from "./utilities.js";
+import { type BoxProps } from "../Box/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 {
+    lineColorTitle?: string;
+    lineStyleTitle?: string;
+    lineWidthTitle?: string;
+    fillColorTitle?: string;
+    fillStyleTitle?: string;
+    lineStyleDash?: string;
+    lineStyleDashDot?: string;
+    lineStyleDot?: string;
+    lineStyleLongDash?: string;
+    lineStyleLongDashDot?: string;
+    lineStyleNone?: string;
+    lineStyleShortDash?: string;
+    lineStyleShortDashDot?: string;
+    lineStyleShortDashDotDot?: string;
+    lineStyleShortDot?: string;
+    lineStyleSolid?: string;
+    fillStyleBackwardDiagonal?: string;
+    fillStyleCross?: string;
+    fillStyleDiagonalCross?: string;
+    fillStyleForwardDiagonal?: string;
+    fillStyleHorizontal?: string;
+    fillStyleNone?: string;
+    fillStyleSolid?: string;
+    fillStyleVertical?: string;
+}
+export declare function symbolIsSupported(symbol: SymbolJson): boolean;
+export interface SimpleFillSymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    symbol: SymbolJson;
+    languageResources?: LanguageResources & UnsupportedSymbolProps["languageResources"];
+    colorResources?: UnsupportedSymbolProps["colorResources"];
+    isSupported?: (symbol: SymbolJson) => symbol is SimpleFillSymbolJson;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+}
+declare const SimpleFillSymbolInput: FC<SimpleFillSymbolInputProps>;
+export default SimpleFillSymbolInput;
+export declare const getSimpleFillStyles: (t: Required<LanguageResources>) => SelectValues<Required<SimpleFillSymbolJson>["style"]>;
+export declare const getSimpleLineStyles: (t: Required<LanguageResources>) => SelectValues<Required<SimpleLineSymbolJson>["style"]>;

package/SymbolInput/SimpleFillSymbolInput.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useState } from "react";
+import UnsupportedSymbol, {} from "./UnsupportedSymbol.js";
+import { DEFAULT_FORMAT_NUMBER, DEFAULT_LANGUAGE, DEFAULT_PARSE_NUMBER, getFillColor, getFillStyle, getLineColor, getLineStyle, getLineWidth, toColor, toRgbaString, } from "./utilities.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";
+export function symbolIsSupported(symbol) {
+    const type = symbol.type;
+    return type === "esriSFS";
+}
+const SimpleFillSymbolInput = props => {
+    const { onChange, symbol, languageResources, colorResources, children, parseNumber, formatNumber, isSupported = symbolIsSupported, TextInputComponent, NumberInputComponent, ColorInputComponent, ...other } = {
+        parseNumber: DEFAULT_PARSE_NUMBER,
+        formatNumber: DEFAULT_FORMAT_NUMBER,
+        ...props,
+    };
+    const isSupportedSymbol = isSupported(symbol);
+    const text = {
+        ...DEFAULT_LANGUAGE,
+        ...languageResources,
+    };
+    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));
+    useEffect(() => {
+        setLineColor(getLineColor(symbol));
+        setLineStyle(getLineStyle(symbol));
+        setLineWidth(getLineWidth(symbol));
+        setFillColor(getFillColor(symbol));
+        setFillStyle(getFillStyle(symbol));
+    }, [symbol]);
+    const handleLineWidthBlur = useCallback((event) => {
+        setLineWidth(Math.min(100, Math.max(0, lineWidth ?? 0)));
+    }, [lineWidth]);
+    // 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,
+                };
+            default:
+                return { type };
+        }
+    };
+    return (_jsxs(Box, { ...other, children: [!isSupportedSymbol && (_jsx(UnsupportedSymbol, { languageResources: languageResources, colorResources: colorResources })), children, isSupportedSymbol && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, label: text.lineColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "lineColor", setLineColor);
+                        }, value: toRgbaString(lineColor) }), _jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.lineStyleTitle, value: lineStyle, onChange: event => {
+                            const { value } = event.target;
+                            handleStateChange(value, "lineStyle", setLineStyle);
+                        }, children: getSimpleLineStyles(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                            step: 0.5,
+                            min: 0,
+                            max: 25,
+                        }, InputProps: {
+                            onBlur: handleLineWidthBlur,
+                            min: 0,
+                            max: 25,
+                        }, label: text.lineWidthTitle, value: lineWidth, onChange: value => {
+                            handleStateChange(value, "lineWidth", setLineWidth);
+                        } }), _jsx(FormColorInput, { fullWidth: true, label: text.fillColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "fillColor", setFillColor);
+                        }, value: toRgbaString(fillColor) }), _jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.fillStyleTitle, value: fillStyle, onChange: event => {
+                            const { value } = event.target;
+                            handleStateChange(value, "fillStyle", setFillStyle);
+                        }, children: getSimpleFillStyles(text).map(fillStyle => (_jsx("option", { value: fillStyle.id, children: fillStyle.label }, fillStyle.id))) })] }))] }));
+};
+export default SimpleFillSymbolInput;
+export 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,
+        },
+    ];
+};
+export 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,
+        },
+    ];
+};

package/SymbolInput/SimpleLineSymbolInput.d.ts

@@ -0,0 +1,38 @@
+import { type FC } from "react";
+import type { SymbolJson, SimpleLineSymbolJson } from "./SymbolJson.js";
+import { type UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import { type SelectValues } from "./utilities.js";
+import { type BoxProps } from "../Box/index.js";
+import { type FormLabelColorFieldProps } from "../FormLabelColorField/index.js";
+import { type FormLabelSliderFieldProps } from "../FormLabelSliderField/index.js";
+import { type FormLabelTextFieldProps } from "../FormLabelTextField/index.js";
+export declare function symbolIsSupported(symbol: SymbolJson): symbol is SimpleLineSymbolJson;
+export interface LanguageResources {
+    lineColorTitle?: string;
+    lineStyleTitle?: string;
+    lineWidthTitle?: string;
+    lineStyleDash?: string;
+    lineStyleDashDot?: string;
+    lineStyleDot?: string;
+    lineStyleLongDash?: string;
+    lineStyleLongDashDot?: string;
+    lineStyleNone?: string;
+    lineStyleShortDash?: string;
+    lineStyleShortDashDot?: string;
+    lineStyleShortDashDotDot?: string;
+    lineStyleShortDot?: string;
+    lineStyleSolid?: string;
+}
+export interface SimpleLineSymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    symbol: SymbolJson;
+    languageResources?: LanguageResources & UnsupportedSymbolProps["languageResources"];
+    colorResources?: UnsupportedSymbolProps["colorResources"];
+    isSupported?: (symbol: SymbolJson) => symbol is SimpleLineSymbolJson;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+}
+declare const SimpleLineSymbolInput: FC<SimpleLineSymbolInputProps>;
+export default SimpleLineSymbolInput;
+export declare const getSimpleLineStyles: (t: Required<LanguageResources>) => SelectValues<Required<SimpleLineSymbolJson>["style"]>;

package/SymbolInput/SimpleLineSymbolInput.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useState } from "react";
+import UnsupportedSymbol, {} from "./UnsupportedSymbol.js";
+import { DEFAULT_PARSE_NUMBER, DEFAULT_FORMAT_NUMBER, DEFAULT_LANGUAGE, toRgbaString, toColor, getLineColor, getLineStyle, getLineWidth, } from "./utilities.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";
+export function symbolIsSupported(symbol) {
+    const type = symbol.type;
+    return type === "esriSLS";
+}
+const SimpleLineSymbolInput = props => {
+    const { onChange, symbol, languageResources, colorResources, children, parseNumber, formatNumber, isSupported = symbolIsSupported, TextInputComponent, NumberInputComponent, ColorInputComponent, ...other } = {
+        parseNumber: DEFAULT_PARSE_NUMBER,
+        formatNumber: DEFAULT_FORMAT_NUMBER,
+        ...props,
+    };
+    const isSupportedSymbol = isSupported(symbol);
+    const text = {
+        ...DEFAULT_LANGUAGE,
+        ...languageResources,
+    };
+    const { type } = symbol;
+    const FormTextInput = TextInputComponent ?? FormLabelTextField;
+    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
+    const FormColorInput = ColorInputComponent ?? FormLabelColorField;
+    const [lineStyle, setLineStyle] = useState(getLineStyle(symbol));
+    const [lineColor, setLineColor] = useState(getLineColor(symbol));
+    const [lineWidth, setLineWidth] = useState(getLineWidth(symbol));
+    useEffect(() => {
+        setLineColor(getLineColor(symbol));
+        setLineStyle(getLineStyle(symbol));
+        setLineWidth(getLineWidth(symbol));
+    }, [symbol]);
+    const handleLineWidthBlur = useCallback((event) => {
+        setLineWidth(Math.min(100, Math.max(0, lineWidth ?? 0)));
+    }, [lineWidth]);
+    // 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 "esriSLS":
+                return {
+                    type,
+                    color: newState.lineColor ?? lineColor,
+                    width: newState.lineWidth ?? lineWidth,
+                    style: newState.lineStyle ?? lineStyle,
+                };
+            default:
+                return { type };
+        }
+    };
+    return (_jsxs(Box, { ...other, children: [!isSupportedSymbol && (_jsx(UnsupportedSymbol, { colorResources: colorResources, languageResources: languageResources })), children, isSupportedSymbol && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, label: text.lineColorTitle, onChange: (value) => {
+                            handleStateChange(toColor(value), "lineColor", setLineColor);
+                        }, value: toRgbaString(lineColor) }), _jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.lineStyleTitle, value: lineStyle, onChange: event => {
+                            const { value } = event.target;
+                            handleStateChange(value, "lineStyle", setLineStyle);
+                        }, children: getSimpleLineStyles(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                            step: 0.5,
+                            min: 0,
+                            max: 25,
+                        }, InputProps: {
+                            onBlur: handleLineWidthBlur,
+                            min: 0,
+                            max: 25,
+                        }, label: text.lineWidthTitle, value: lineWidth, onChange: value => {
+                            handleStateChange(value, "lineWidth", setLineWidth);
+                        } })] }))] }));
+};
+export default SimpleLineSymbolInput;
+export 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,
+        },
+    ];
+};

package/SymbolInput/SimpleMarkerSymbolInput.d.ts

@@ -0,0 +1,38 @@
+import { type FC } from "react";
+import type { SymbolJson, SimpleMarkerSymbolJson } from "./SymbolJson.js";
+import type { UnsupportedSymbolProps } from "./UnsupportedSymbol.js";
+import { type SelectValues } from "./utilities.js";
+import { type BoxProps } from "../Box/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 {
+    lineColorTitle?: string;
+    lineWidthTitle?: string;
+    fillColorTitle?: string;
+    markerSizeTitle?: string;
+    markerStyleTitle?: string;
+    markerAngleTitle?: string;
+    xOffsetTitle?: string;
+    yOffsetTitle?: string;
+    markerStyleCircle?: string;
+    markerStyleCross?: string;
+    markerStyleDiamond?: string;
+    markerStyleSquare?: string;
+    markerStyleTriangle?: string;
+    markerStyleX?: string;
+}
+export declare function symbolIsSupported(symbol: SymbolJson): boolean;
+export interface SimpleMarkerSymbolInputProps extends Omit<BoxProps, "onChange"> {
+    onChange: (symbol: SymbolJson) => void;
+    symbol: SymbolJson;
+    languageResources?: LanguageResources & UnsupportedSymbolProps["languageResources"];
+    colorResources?: UnsupportedSymbolProps["colorResources"];
+    isSupported?: (symbol: SymbolJson) => symbol is SimpleMarkerSymbolJson;
+    TextInputComponent?: FC<FormLabelTextFieldProps>;
+    NumberInputComponent?: FC<FormLabelSliderFieldProps>;
+    ColorInputComponent?: FC<FormLabelColorFieldProps>;
+}
+declare const SimpleMarkerSymbolInput: FC<SimpleMarkerSymbolInputProps>;
+export default SimpleMarkerSymbolInput;
+export declare const getSimpleMarkerStyles: (t: Required<LanguageResources>) => SelectValues<Required<SimpleMarkerSymbolJson>["style"]>;