ebta-workflow-prod 4.0.24 → 4.1.1

package/eslint.config.js

@@ -0,0 +1,12 @@
+
+import { defineConfig, globalIgnores } from "eslint/config";
+import baseConfig from "@vertigis/workflow-sdk/config/eslint.config.js";
+
+export default defineConfig([
+    globalIgnores(["**/*.js", "**/*.d.ts"]),
+    baseConfig,
+    {
+        // Add your custom rules or other eslint config overrides here.
+        rules: {}
+    }
+]);

package/package.json

@@ -1,47 +1,56 @@
 {
-  "name": "ebta-workflow-prod",
-  "private": false,
-  "version": "4.0.24",
-  "description": "",
-  "license": "UNLICENSED",
-  "author": "",
-  "scripts": {
-    "build": "vertigis-workflow-sdk build",
-    "generate": "vertigis-workflow-sdk generate",
-    "start": "vertigis-workflow-sdk start"
-  },
-  "devDependencies": {
-    "@vertigis/workflow": "^5.44.0",
-    "@vertigis/workflow-sdk": "^4.1.0",
-    "typescript": "^5.7.3"
-  },
-  "browserslist": [
-    "last 2 chrome versions",
-    "last 2 edge versions",
-    "last 2 firefox versions",
-    "last 2 safari versions",
-    "ie 11"
-  ],
-  "dependencies": {
-    "@arcgis/core": "^4.29.10",
-    "@fseehawer/react-circular-slider": "^3.2.7",
-    "@mantine/core": "^7.16.0",
-    "@mui/icons-material": "^5.17.1",
-    "@mui/material": "^5.17.1",
-    "@mui/x-charts": "^7.6.2",
-    "@turf/turf": "^6.5.0",
-    "@types/arcgis-js-api": "^4.28.0",
-    "@vertigis/web": "^5.34.0",
-    "@xmldom/xmldom": "^0.8.10",
-    "arcgis-js-api": "^4.30.8",
-    "axios": "^1.7.7",
-    "html2canvas": "^1.4.1",
-    "pannellum-react-update": "^1.0.0",
-    "pdf-lib": "^1.17.1",
-    "qrcode": "^1.5.4",
-    "react-color": "^2.19.3",
-    "react-color-palette": "^7.3.0",
-    "react-simple-image-slider": "^2.4.1",
-    "react-slideshow-image": "^4.3.1"
-  }
-}
+    "name": "ebta-workflow-prod",
+    "private": false,
+    "version": "4.1.1",
+    "description": "",
+    "license": "UNLICENSED",
+    "author": "",
+    "scripts": {
+        "build": "vertigis-workflow-sdk build",
+        "generate": "vertigis-workflow-sdk generate",
+        "start": "vertigis-workflow-sdk start"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@vertigis/workflow": "^5.52.2",
+        "@vertigis/workflow-sdk": "^6.1.1",
+        "node-fetch": "^3.3.2",
+        "typescript": "^5.4.0"
+    },
+    "browserslist": [
+        "last 2 chrome versions",
+        "last 2 edge versions",
+        "last 2 firefox versions",
+        "last 2 safari versions",
+        "ie 11"
+    ],
+    "dependencies": {
+        "@arcgis/core": "^5.1.19",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@fseehawer/react-circular-slider": "^3.2.7",
+        "@mantine/core": "^7.16.0",
+        "@mantine/hooks": "^9.5.1",
+        "@mui/icons-material": "^5.17.1",
+        "@mui/base": "5.0.0-beta.70",
+        "@mui/material": "^5.17.1",
+        "@mui/x-charts": "^7.6.2",
+        "@turf/turf": "^6.5.0",
+        "@types/arcgis-js-api": "^4.28.0",
+        "@vertigis/web": "^5.43.1",
+        "@xmldom/xmldom": "^0.8.10",
+        "arcgis-js-api": "^4.30.8",
+        "axios": "^1.7.7",
+        "dayjs": "^1.11.23",
+        "html2canvas": "^1.4.1",
+        "pannellum-react-update": "^1.0.0",
+        "pdf-lib": "^1.17.1",
+        "qrcode": "^1.5.4",
+        "react-color": "^2.19.3",
+        "react-color-palette": "^7.3.0",
+        "react-simple-image-slider": "^2.4.1",
+        "react-slideshow-image": "^4.3.1"
+    },
+    "type": "module"
+}

package/src/activities/DrapGeometry.ts

@@ -4,8 +4,8 @@ import Multipoint from "@arcgis/core/geometry/Multipoint";
 import Polyline from "@arcgis/core/geometry/Polyline";
 import Polygon from "@arcgis/core/geometry/Polygon";
 import ElevationLayer from "@arcgis/core/layers/ElevationLayer";
-import { Geometry } from "@arcgis/core/geometry";
-import { SpatialReference } from "esri/geometry";
+import Geometry from "@arcgis/core/geometry/Geometry";
+import SpatialReference from "@arcgis/core/geometry/SpatialReference";
 
 
 /** An interface that defines the inputs of the activity. */
@@ -57,7 +57,7 @@ export default class DrapGeometryActivity implements IActivityHandler {
             return result.geometry as Polyline;
         };
 
-        let geometry3D: Geometry;
+        let geometry3D:Point | Multipoint | Polyline | Polygon;
 
         // Handle different types of geometry
         if (inputs.inputGeometry instanceof Point) {

package/src/elements/AttributeFilter.tsx

@@ -18,14 +18,10 @@ import Box from "@vertigis/web/ui/Box"
 import Checkbox from "@vertigis/web/ui/Checkbox"
 import { ThemeProvider } from "@emotion/react";
 import Typography from '@vertigis/web/ui/Typography';
-import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import dayjs, { Dayjs } from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import customParseFormat from 'dayjs/plugin/customParseFormat'
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import 'dayjs/locale/en-au';
 import Chip from '@mui/material/Chip';
 import Button from '@vertigis/web/ui/Button';
@@ -34,8 +30,8 @@ import RadioGroup from '@vertigis/web/ui/RadioGroup';
 import FormControlLabel from '@vertigis/web/ui/FormControlLabel';
 import AttributeFilterEasyComp from './modules/AttributeFilterEasyComp';
 import Stack from '@vertigis/web/ui/Stack';
-import Graphic from "esri/Graphic";
-const { Search, SearchIconWrapper, StyledInputBase, StyledBadge, LightTooltip, defaultTheme, CustomNumberInput } = AttributeFilterEasyComp;
+import Graphic from "@arcgis/core/Graphic";
+const { Search, SearchIconWrapper, StyledInputBase, StyledBadge, LightTooltip, defaultTheme, CustomNumberInput} = AttributeFilterEasyComp;
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
@@ -1392,42 +1388,30 @@ function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
                     {attribute.uniqValue ?
                         (<Collapse in={attribute.display} timeout="auto" unmountOnExit>
                             {attribute.type && attribute.type == 'date' && (attribute.uniqValue.length > 6) ?
-                                <Box display="flex" alignItems="center" >
-                                    <LocalizationProvider dateAdapter={AdapterDayjs} >
-                                        <DemoContainer components={['DatePicker', 'DatePicker']} >
-                                            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-au">
-                                                <DateRangePicker defaultValue={[dayjs.unix(minDate.current), dayjs.unix(maxDate.current)]} maxDate={dayjs.unix(maxDate.current)} minDate={dayjs.unix(minDate.current)}
-                                                    value={[startDate, endDate]}
-                                                    onChange={([newstart, newend]) => handleDateRangeChange(newstart || startDate, newend || endDate)}
-                                                    sx={{
-                                                        // Customize the date text color
-                                                        '& .MuiInputBase-input': {
-                                                            color: 'var(--accentIconBorder)', // Change text color for the selected date
-                                                        },
-
-                                                        // Customize the start & end labels
-                                                        '& .MuiInputLabel-root': {
-                                                            color: 'var(--accentIconBorder)', // Change label color for both start and end dates
-                                                        },
-
-                                                        // Customize the border color of the input
-                                                        '& .MuiOutlinedInput-root': {
-                                                            '& fieldset': {
-                                                                borderColor: 'var(--accentIconBorder)', // Change border color when the input is not focused
-                                                            },
-                                                            '&:hover fieldset': {
-                                                                borderColor: 'var(--accentIconBorder)', // Change border color on hover
-                                                            },
-                                                            '&.Mui-focused fieldset': {
-                                                                borderColor: 'var(--accentIconBorder)', // Change border color when focused
-                                                            },
-                                                        },
-                                                    }}
-
-                                                />
-                                            </LocalizationProvider>
-                                        </DemoContainer>
-                                    </LocalizationProvider>
+                                <Box display="flex" alignItems="center" gap={1}>
+                                    <input
+                                        type="date"
+                                        value={startDate ? startDate.format('YYYY-MM-DD') : ''}
+                                        min={dayjs.unix(minDate.current).format('YYYY-MM-DD')}
+                                        max={dayjs.unix(maxDate.current).format('YYYY-MM-DD')}
+                                        onChange={(event) => {
+                                            const newStart = event.target.value ? dayjs(event.target.value) : startDate;
+                                            handleDateRangeChange(newStart, endDate);
+                                        }}
+                                        style={{ color: 'var(--accentIconBorder)', border: '1px solid var(--accentIconBorder)', borderRadius: 4, padding: '4px 8px', marginRight: 8 }}
+                                    />
+                                    <span>to</span>
+                                    <input
+                                        type="date"
+                                        value={endDate ? endDate.format('YYYY-MM-DD') : ''}
+                                        min={dayjs.unix(minDate.current).format('YYYY-MM-DD')}
+                                        max={dayjs.unix(maxDate.current).format('YYYY-MM-DD')}
+                                        onChange={(event) => {
+                                            const newEnd = event.target.value ? dayjs(event.target.value) : endDate;
+                                            handleDateRangeChange(startDate, newEnd);
+                                        }}
+                                        style={{ color: 'var(--accentIconBorder)', border: '1px solid var(--accentIconBorder)', borderRadius: 4, padding: '4px 8px', marginLeft: 8 }}
+                                    />
                                 </Box>
                                 :
                                 ISnumberAttribute && (attribute.uniqValue.length > 6) ?

package/src/elements/CsColorPicker.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import { MantineProvider } from '@mantine/core';
 import { FormElementProps, FormElementRegistration  } from "@vertigis/workflow";
 import { ColorInput, ColorPicker } from '@mantine/core';
-import type { ColorFormat } from "@mantine/core/lib/components/ColorPicker/ColorPicker.types";
+type ColorFormat = "hex" | "rgba" | "rgb" | "hsl" | "hsla";
 
 import "@mantine/core/styles.css";
 
-import Color from "esri/Color";
+import Color from "@arcgis/core/Color";
 
 
 declare module "@vertigis/workflow" {
@@ -73,7 +73,7 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
             esriColor = new Color(color);
         }
 
-        setProperty("esriColor", esriColor);
+    setProperty("esriColor" as any, esriColor);
         setValue(color);
         raiseEvent("changed", color);
     };

package/src/elements/ItemSearcher.tsx

@@ -195,7 +195,7 @@ function ItemSearcherDEV(props: ItemSearcherDEVProps): React.ReactElement {
     const [data, setData] = React.useState<Category[]>(props.itemData);
     const isFirstRender = React.useRef(true);
     const preSearchOpenCategories = React.useRef<Set<string>>(new Set());
-    const loadDataTime = React.useRef<number>();
+    const loadDataTime = React.useRef<number | undefined>(undefined);
     const currentOpenCategories = React.useRef<Set<string>>(new Set());
     const prevSearchValue = React.useRef<string>('')
     const [selection, setSelection] = React.useState<{ [key: string]: { [key: string]: Item[] } }>({});

package/src/elements/ItemSearcher_v2.tsx

@@ -183,7 +183,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
     const [filteredData, setFilteredData] = React.useState<Category[]>([]); // New state for filtered data
     const requestTime = React.useRef<number | null>(null)
     const [inputValue, setInputValue] = React.useState<string>(searchQuery);
-    const debounceTimer = React.useRef<ReturnType<typeof setTimeout>>();
+    const debounceTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
     const latestOpenCategories = React.useRef<Set<string>>(openCategories);
 
 

package/src/elements/modules/AttributeFilterEasyComp.tsx

@@ -5,9 +5,8 @@ import Badge, { BadgeProps } from '@mui/material/Badge';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 import { createTheme } from "@mui/material/styles";
 import {
-    Unstable_NumberInput as BaseNumberInput,
-    NumberInputProps,
-    numberInputClasses,
+  Unstable_NumberInput as BaseNumberInput,
+  NumberInputProps,
 } from '@mui/base/Unstable_NumberInput';
 
 const Search =styled('div')(({ theme }) => ({
@@ -107,38 +106,8 @@ const StyledButton =  styled('button')(
       color: #FFF;
       background: var(--accentIconForeground) !important;
       border-color: var(--accentIconBorder) !important;
-    }
-  
-    &.${numberInputClasses.incrementButton} {
-      grid-column: 2/3;
-      grid-row: 1/2;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      border: 1px solid;
-      border-bottom: 0;
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  
-      &:hover {
-        cursor: pointer;
-        color: #FFF;
-        background: var(--accentIconForeground) !important;
-        border-color: var(--accentIconBorder);
-      }
-    }
-  
-    &.${numberInputClasses.decrementButton} {
-      grid-column: 2/3;
-      grid-row: 2/3;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border: 1px solid;
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-    }
-  
+    };
+    
     & .arrow {
       transform: translateY(-1px);
     }
@@ -173,31 +142,33 @@ const defaultTheme = createTheme({
     },
 });
 
-const CustomNumberInput =React.forwardRef(function CustomNumberInputfunction(
-    props: NumberInputProps,
-    ref: React.ForwardedRef<HTMLDivElement>,
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(
+  props: NumberInputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-    return (
-        <BaseNumberInput
-            slots={{
-                root: StyledInputRoot,
-                input: StyledInputElement,
-                incrementButton: StyledButton,
-                decrementButton: StyledButton,
-            }}
-            slotProps={{
-                incrementButton: {
-                    children: '▴',
-                },
-                decrementButton: {
-                    children: '▾',
-                },
-            }}
-            {...props}
-            ref={ref}
-        />
-    );
-})
+  return (
+    <BaseNumberInput
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        incrementButton: StyledButton,
+        decrementButton: StyledButton,
+      }}
+      slotProps={{
+        incrementButton: {
+          children: 'Increase value',
+          'aria-label': 'Increase value',
+        },
+        decrementButton: {
+          children: 'Decrease value',
+          'aria-label': 'Decrease value',
+        },
+      }}
+      {...props}
+      ref={ref}
+    />
+  );
+});
 
   const StyledInputElement = styled('input')(
     () => `

package/tsconfig.json

@@ -1,6 +1,8 @@
 {
     "extends": "@vertigis/workflow-sdk/config/tsconfig.json",
     "compilerOptions": {
+        "ignoreDeprecations": "5.0",
+        "noImplicitAny": false,
         "target": "es5",
         "baseUrl": ".",
         "suppressImplicitAnyIndexErrors": false,