@vertigis/workflow 5.49.0 → 5.50.0

package/forms/branding/WorkflowColor.js

@@ -1 +1 @@
-import rgba from"color-rgba";export default class WorkflowColor{get r(){return this.values[0]}get g(){return this.values[1]}get b(){return this.values[2]}get a(){return this.values[3]}constructor(t){if(this.values=[0,0,0,1],"string"==typeof t){if(this.values=rgba(t),0===this.values.length)throw new Error("Invalid rgb value: "+t)}else this.values=[...t]}clone(){return new WorkflowColor(this.values)}equals(t){const{r:r,g:s,b:e,a:i}=t;return this.r===r&&this.g===s&&this.b===e&&this.a===i}toCss(){return 1===this.a?`rgb(${this.r},${this.g},${this.b})`:`rgba(${this.r},${this.g},${this.b},${this.a})`}toJSON(){return[...this.values]}toString(){return`rgba(${this.r},${this.g},${this.b},${this.a})`}static fromJSON(t){if(4!==t.length)throw new Error("Invalid JSON. The array must contain four values.");return new WorkflowColor(t)}}
+import rgba from"color-rgba";export default class WorkflowColor{constructor(t){if(this.values=[0,0,0,1],"string"==typeof t){if(this.values=rgba(t),0===this.values.length)throw new Error("Invalid rgb value: "+t)}else this.values=[...t]}get a(){return this.values[3]}get b(){return this.values[2]}get g(){return this.values[1]}get r(){return this.values[0]}static fromJSON(t){if(4!==t.length)throw new Error("Invalid JSON. The array must contain four values.");return new WorkflowColor(t)}clone(){return new WorkflowColor(this.values)}equals(t){const{r:r,g:s,b:e,a:i}=t;return this.r===r&&this.g===s&&this.b===e&&this.a===i}toCss(){return 1===this.a?`rgb(${this.r},${this.g},${this.b})`:`rgba(${this.r},${this.g},${this.b},${this.a})`}toJSON(){return[...this.values]}toString(){return`rgba(${this.r},${this.g},${this.b},${this.a})`}}

package/forms/components/Button.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import{NoIcon}from"@vertigis/react-ui/icons";import{styled,useTheme}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef,Children,useMemo,Suspense,lazy}from"react";import WorkflowColor from"../branding/WorkflowColor.js";import{createPalette}from"../branding/createPalette.js";import{getBorderStyle,getEmphasis,getIconPosition,getItemColors,getItemSize,getShowBorder}from"../utils.js";function emphasisToButtonProps(e,o){switch(o&&(e="high"),e){case"low":return{variant:"text",color:"inherit"};case"custom":case"medium":return{variant:"outlined",color:"inherit"};case"high":return{variant:"contained",color:"primary"};default:throw new Error(`Invalid value "${e}" for Emphasis.`)}}function generateButtonOverrides(e,o){const t=e=>Object.fromEntries(Object.entries(e).map(([e,o])=>[e,o.toCss()])),r=e&&t(createPalette(e)),n=o&&t(createPalette(o)),{accentIconForeground:s,buttonForegroundDisabled:a,buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,buttonBorderDisabled:l,buttonBorderHover:c,emphasizedButtonBackgroundDisabled:m}=r??{},{buttonBackgroundDisabled:b,emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForegroundDisabled:p,primaryBackground:h}=n??{};return{accentIconForeground:s,buttonBackground:o?.toCss(),buttonBackgroundDisabled:b,buttonBackgroundHover:e?.toCss(),buttonBorder:e?.toCss(),buttonBorderDisabled:l,buttonBorderHover:c,buttonForeground:e?.toCss(),buttonForegroundDisabled:a,buttonForegroundHover:o?.toCss(),buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,emphasizedButtonBackground:e?.toCss(),emphasizedButtonBackgroundDisabled:m,emphasizedButtonBackgroundHover:o?.toCss(),emphasizedButtonBorder:o?.toCss(),emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForeground:o?.toCss(),emphasizedButtonForegroundDisabled:p,emphasizedButtonForegroundHover:e?.toCss(),primaryBackground:h}}const PREFIX="WorkflowButton";export const buttonClasses={iconOnly:`${PREFIX}-icon-only`,iconStacked:`${PREFIX}-icon-stacked`,styleRounded:`${PREFIX}-rounded`,border:`${PREFIX}-border`,noBorder:`${PREFIX}-noBorder`};export default forwardRef(({children:e,className:o,disabled:t,item:r,onClick:n,title:s},a)=>{const i=useTheme(),d=r.appearance??{},{backgroundColor:u,foregroundColor:l}=getItemColors(d,i),c=useMemo(()=>{const e=u||l?generateButtonOverrides(l?new WorkflowColor(l):void 0,u?new WorkflowColor(u):void 0):void 0,o=e?Object.fromEntries(Object.keys(e).map(o=>e[o]&&[[`--${o}`],e[o]]).filter(e=>!!e)):{};return styled(Button)({[`&.${buttonClasses.iconOnly}`]:{minWidth:"auto",padding:8,lineHeight:0,"&.MuiButton-sizeSmall":{padding:6},"&.MuiButton-sizeLarge":{padding:10},"& .MuiButton-startIcon":{margin:0},"& .MuiButton-endIcon":{margin:0}},[`&.${buttonClasses.iconStacked}`]:{flexDirection:"column","& .MuiButton-startIcon":{marginTop:6,marginRight:0,marginLeft:0},"& .MuiButton-endIcon":{marginBottom:6,marginRight:0,marginLeft:0}},[`&.${buttonClasses.styleRounded}`]:{borderRadius:"1000px"},[`&.${buttonClasses.noBorder}`]:{border:0,outline:0},[`&.${buttonClasses.border}`]:{border:1,borderStyle:"solid"},[`&.${buttonClasses.border}:hover`]:{border:1,borderStyle:"solid",borderColor:"transparent"},...o})},[u,l]),{icon:m}=d,b=getIconPosition(d.iconPosition),g=useMemo(()=>{let e;return m&&(e=lazy(()=>import("@vertigis/react-ui/icons").then(e=>Promise.resolve({default:e[m]??NoIcon})))),e},[m]);let B,p;if(g){const e=React.createElement(Suspense,{fallback:m},React.createElement(g,null));switch(b){case"above":case"before":B=e;break;case"below":case"after":p=e}}const h=getEmphasis(d.emphasis),f=getShowBorder(h,d.showBorder),C=getItemSize(d.size),I=getBorderStyle(d.borderStyle),v=(B??p)&&0===Children.toArray(e).length,k=clsx({classNameProp:o,[buttonClasses.iconOnly]:v,[buttonClasses.iconStacked]:!v&&("above"===b||"below"===b),[buttonClasses.styleRounded]:"rounded"===I,[buttonClasses.border]:f,[buttonClasses.noBorder]:!f});return React.createElement(c,{className:k,disabled:t,endIcon:p,onClick:n,ref:a,size:C,startIcon:B,title:s,...emphasisToButtonProps(h,r.default)},e)});
+import Button from"@vertigis/react-ui/Button";import{NoIcon}from"@vertigis/react-ui/icons";import{styled,useTheme}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef,Children,useMemo,Suspense,lazy}from"react";import WorkflowColor from"../branding/WorkflowColor.js";import{createPalette}from"../branding/createPalette.js";import{getBorderStyle,getEmphasis,getIconPosition,getItemColors,getItemSize,getShowBorder}from"../utils.js";function emphasisToButtonProps(e,o){switch(o&&(e="high"),e){case"low":return{variant:"text",color:"inherit"};case"custom":case"medium":return{variant:"outlined",color:"inherit"};case"high":return{variant:"contained",color:"primary"};default:throw new Error(`Invalid value "${e}" for Emphasis.`)}}function generateButtonOverrides(e,o){const t=e=>Object.fromEntries(Object.entries(e).map(([e,o])=>[e,o.toCss()])),r=e&&t(createPalette(e)),n=o&&t(createPalette(o)),{accentIconForeground:s,buttonForegroundDisabled:a,buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,buttonBorderDisabled:l,buttonBorderHover:c,emphasizedButtonBackgroundDisabled:m}=r??{},{buttonBackgroundDisabled:b,emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForegroundDisabled:p,primaryBackground:h}=n??{};return{accentIconForeground:s,buttonBackground:o?.toCss(),buttonBackgroundDisabled:b,buttonBackgroundHover:e?.toCss(),buttonBorder:e?.toCss(),buttonBorderDisabled:l,buttonBorderHover:c,buttonForeground:e?.toCss(),buttonForegroundDisabled:a,buttonForegroundHover:o?.toCss(),buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,emphasizedButtonBackground:e?.toCss(),emphasizedButtonBackgroundDisabled:m,emphasizedButtonBackgroundHover:o?.toCss(),emphasizedButtonBorder:o?.toCss(),emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForeground:o?.toCss(),emphasizedButtonForegroundDisabled:p,emphasizedButtonForegroundHover:e?.toCss(),primaryBackground:h}}const PREFIX="WorkflowButton";export const buttonClasses={iconOnly:`${PREFIX}-icon-only`,iconStacked:`${PREFIX}-icon-stacked`,styleRounded:`${PREFIX}-rounded`,border:`${PREFIX}-border`,noBorder:`${PREFIX}-noBorder`};export default forwardRef(({children:e,className:o,disabled:t,item:r,onClick:n,title:s},a)=>{const i=useTheme(),d=r.appearance??{},{backgroundColor:u,foregroundColor:l}=getItemColors(d,i),c=useMemo(()=>{const e=u||l?generateButtonOverrides(l?new WorkflowColor(l):void 0,u?new WorkflowColor(u):void 0):void 0,o=e?Object.fromEntries(Object.keys(e).map(o=>e[o]&&[[`--${o}`],e[o]]).filter(e=>!!e)):{};return styled(Button)({[`&.${buttonClasses.iconOnly}`]:{minWidth:"auto",padding:8,lineHeight:0,"&.MuiButton-sizeSmall":{padding:6},"&.MuiButton-sizeLarge":{padding:10},"& .MuiButton-startIcon":{margin:0},"& .MuiButton-endIcon":{margin:0}},[`&.${buttonClasses.iconStacked}`]:{flexDirection:"column","& .MuiButton-startIcon":{marginTop:6,marginRight:0,marginLeft:0},"& .MuiButton-endIcon":{marginBottom:6,marginRight:0,marginLeft:0}},[`&.${buttonClasses.styleRounded}`]:{borderRadius:"1000px"},[`&.${buttonClasses.noBorder}`]:{border:0,outline:0},[`&.${buttonClasses.border}`]:{border:1,borderStyle:"solid"},[`&.${buttonClasses.border}:hover`]:{border:1,borderStyle:"solid",borderColor:"transparent"},...o})},[u,l]),{icon:m}=d,b=getIconPosition(d.iconPosition),g=useMemo(()=>{let e;return m&&(e=lazy(()=>import("@vertigis/react-ui/icons").then(e=>Promise.resolve({default:e[m]??NoIcon})))),e},[m]);let B,p;if(g){const e=React.createElement(Suspense,{fallback:m},React.createElement(g,null));switch(b){case"above":case"before":B=e;break;case"below":case"after":p=e}}const h=getEmphasis(d.emphasis),f=getShowBorder(h,d.showBorder),C=getItemSize(d.size),I=getBorderStyle(d.borderStyle),v=(B??p)&&0===Children.toArray(e).length,k=clsx(o,{[buttonClasses.iconOnly]:v,[buttonClasses.iconStacked]:!v&&("above"===b||"below"===b),[buttonClasses.styleRounded]:"rounded"===I,[buttonClasses.border]:f,[buttonClasses.noBorder]:!f});return React.createElement(c,{className:k,disabled:t,endIcon:p,onClick:n,ref:a,size:C,startIcon:B,title:s,...emphasisToButtonProps(h,r.default)},e)});

package/forms/components/DateTimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import{areValuesEqual,getAmPm,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{const{className:t,slotProps:r,...o}=e;return React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r?.popper,className:t}},...o})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:c},u)=>{const p=useContext(HostContext),[d,f]=useState(!1),[T,k]=useState(!1),[g,x]=useState(!1),[E,D]=useState(null),P=useRef(),v=p.deriveLocale();console.log(`DateTimePicker: locale ${v}`);const F={locale:v,timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},C=useRef(!0),y=useFocusCallback(r,s,p),R=p.renderText(n),B="datetime",S=isInvalidError(o);useEffect(()=>{const e=makeProperValue(c),t=getNewElementValue(e,B,F);areValuesEqual(c,t)||m(t,!1),D(e||null)},[c]),useEffect(()=>{if(!g&&!T)if(d)S||l("error",{status:"invalid"});else{if(S&&l("error",void 0),C.current)return void(C.current=!1);b()}C.current=!1},[d,T,g]);const b=()=>{const e=getNewElementValue(E,B,F);areValuesEqual(c,e)||m(e)},V=e=>{"enter"!==getKeyString(e)||b()},{min:j,max:w}=getDateBounds(a),N=getAmPm(a),I=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),q=p.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:I,name:s,ref:u},e=>React.createElement(React.Fragment,null,S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},P.current),React.createElement(StyledDateTimePicker,{ampm:N,disabled:!r,key:"date-picker",inputRef:e=>{y(e),e&&(P.current=e.dataset.formatString)},maxDateTime:w,minDateTime:j,onChange:e=>D(e),onClose:()=>x(!1),onError:e=>f(!!e),onOpen:()=>x(!0),open:g,slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:I,inputProps:{...e,placeholder:q},onBlur:()=>k(!1),onFocus:()=>k(!0),onKeyDown:V,title:R}},value:E})))});export default DateTimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import{areValuesEqual,getAmPm,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{const{className:t,slotProps:r,...o}=e;return React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r?.popper,className:t}},...o})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:m,setValue:l,tooltip:n,value:c},u)=>{const p=useContext(HostContext),[d,f]=useState(!1),[T,k]=useState(!1),[x,E]=useState(!1),[g,D]=useState(null),P=useRef(),v={locale:p.deriveLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},F=useRef(!0),C=useFocusCallback(r,s,p),y=p.renderText(n),R="datetime",B=isInvalidError(o);useEffect(()=>{const e=makeProperValue(c),t=getNewElementValue(e,R,v);areValuesEqual(c,t)||l(t,!1),D(e||null)},[c]),useEffect(()=>{if(!x&&!T)if(d)B||m("error",{status:"invalid"});else{if(B&&m("error",void 0),F.current)return void(F.current=!1);S()}F.current=!1},[d,T,x]);const S=()=>{const e=getNewElementValue(g,R,v);areValuesEqual(c,e)||l(e)},b=e=>{"enter"!==getKeyString(e)||S()},{min:V,max:j}=getDateBounds(a),w=getAmPm(a),N=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=p.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:N,name:s,ref:u},e=>React.createElement(React.Fragment,null,B&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},P.current),React.createElement(StyledDateTimePicker,{ampm:w,disabled:!r,key:"date-picker",inputRef:e=>{C(e),e&&(P.current=e.dataset.formatString)},maxDateTime:j,minDateTime:V,onChange:e=>D(e),onClose:()=>E(!1),onError:e=>f(!!e),onOpen:()=>E(!0),open:x,slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:N,inputProps:{...e,placeholder:I},onBlur:()=>k(!1),onFocus:()=>k(!0),onKeyDown:b,title:y}},value:g})))});export default DateTimePicker;

package/forms/components/FormLabelNumberField.d.ts

@@ -6,14 +6,14 @@ interface FormLabelNumberFieldProps {
     endAdornment?: React.ReactNode;
     id?: string;
     inputProps: InputBaseProps["inputProps"];
-    onChange: (value: number | undefined) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    startAdornment?: React.ReactNode;
     label: string;
-    value: number;
     max: number;
     maxDecimalPlaces?: number;
     min: number;
+    onChange: (value: number | undefined) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    startAdornment?: React.ReactNode;
+    value: number;
 }
 declare const FormLabelNumberField: (props: FormLabelNumberFieldProps) => React.JSX.Element;
 export default FormLabelNumberField;

package/forms/components/GeometryPickerListItem.d.ts

@@ -1,14 +1,14 @@
 import * as React from "react";
 import type { ListItemProps } from "@vertigis/react-ui/ListItem";
 interface GeometryPickerListItemProps extends ListItemProps {
-    /**
-     * Numeric index referring to this item's position in the list.
-     */
-    itemIndex: number;
     /**
      * Callback for when the user presses "Delete" while this item is focused.
      */
     deleteItem: (itemIndex: number) => void;
+    /**
+     * Numeric index referring to this item's position in the list.
+     */
+    itemIndex: number;
     /**
      * Callback for updating the highlight style of the associated graphic on the map.
      */

package/forms/components/SignatureDialog.d.ts

@@ -12,13 +12,13 @@ interface StyledDialogProps {
     clearCaption: string;
     doneCaption: string;
     format: string;
-    helperText: React.JSX.Element | null;
     height: number;
+    helperText: React.JSX.Element | null;
     host: FormHostMembers;
+    onClose: (confirm: boolean, dataUrl: string | undefined) => void;
     title: React.JSX.Element | null;
     undoCaption: string;
     width: number;
-    onClose: (confirm: boolean, dataUrl: string | undefined) => void;
 }
 declare const SignatureDialog: ({ cancelCaption, clearCaption, doneCaption, format, height, helperText, host, title, undoCaption, width, onClose, }: StyledDialogProps) => React.JSX.Element;
 export default SignatureDialog;

package/forms/components/SketchDialog.d.ts

@@ -13,8 +13,6 @@ export type HistoryItem = DrawingHistoryItem | ImageHistoryItem;
  * A history item for the end user drawing a line on the dialog.
  */
 type DrawingHistoryItem = {
-    /** The tool used to draw the line. This determines which canvas the line is drawn onto. */
-    tool: ToolType;
     /** The style for the ends of the line. */
     lineCap: CanvasLineCap;
     /** The thickness of the line. */
@@ -23,22 +21,24 @@ type DrawingHistoryItem = {
     points: Point[];
     /** The style used to draw the line. This is typically a colour. */
     strokeStyle: string | CanvasGradient | CanvasPattern;
+    /** The tool used to draw the line. This determines which canvas the line is drawn onto. */
+    tool: ToolType;
 };
 /**
  * A history item for re-editing an existing sketch.
  * This replaces the `DrawingHistoryItem` entries from the initial editing of the form.
  */
 type ImageHistoryItem = {
-    /** The pen tool is specified here to ensure the image is drawn on the correct canvas. */
-    tool: "pen";
     /** A data url representing the previous annotations.  */
     dataUrl: string;
+    /** The pen tool is specified here to ensure the image is drawn on the correct canvas. */
+    tool: "pen";
 };
 export interface SketchDialogResult {
     dataUrl: string;
+    height: number;
     history: HistoryItem[];
     width: number;
-    height: number;
 }
 interface StyledDialogProps {
     dataUrl: string | undefined;

package/forms/components/common.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import FormLabel,{formLabelClasses}from"@vertigis/react-ui/FormLabel";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useCallback}from"react";import*as React from"react";import{hasContent,isMarkdown,markdownToText}from"../textUtilities.js";import{getAccessibleDescriptionId,getDescriptionId,getLabelId}from"../utils.js";import{formClasses}from"./Form.js";import Markdown from"./Markdown.js";export function renderTitle(e,r,t,o,s){return hasContent(t)?React.createElement(FormLabel,{className:formClasses.formElementTitle,component:s,htmlFor:o,id:getLabelId(e),required:!!r},React.createElement(Markdown,{inline:!0,text:t})):null}const DescriptionMarkdown=styled(Markdown)(({theme:{palette:e}})=>({[`&.${formLabelClasses.disabled}`]:{color:e.text.disabled}," p:first-of-type":{marginTop:0}}));export function renderDescription(e,r,t,o){return hasContent(e)?React.createElement(DescriptionMarkdown,{className:clsx(o,{[formLabelClasses.disabled]:!t}),id:getDescriptionId(r),text:e}):null}export function renderAccessibleDescription(e,r,t,o){let s=o.translateText(e);if(!s){const e=o.translateText(r);s=isMarkdown(e)?markdownToText(e.markdown):e}return s?React.createElement(Box,{hidden:!0,id:getAccessibleDescriptionId(t)},s):null}const ErrorMarkdown=styled(Markdown)(({theme:{palette:e}})=>({color:e.custom.errorText,fontStyle:"italic",backgroundColor:e.custom.errorBackground}));export function renderError(e){return hasContent(e)?React.createElement(ErrorMarkdown,{role:"alert",text:e}):null}export function useFocusCallback(e,r,t){return useCallback(e=>{Array.isArray(e?.thumbRefs)&&e.thumbRefs.length>0&&(e=e.thumbRefs[0].current),null===e||e.disabled||t.renderFocus(e,r)},[e,r,t])}
+import Box from"@vertigis/react-ui/Box";import FormLabel,{formLabelClasses}from"@vertigis/react-ui/FormLabel";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useCallback}from"react";import*as React from"react";import{hasContent,isMarkdown,markdownToText}from"../textUtilities.js";import{getAccessibleDescriptionId,getDescriptionId,getLabelId}from"../utils.js";import{formClasses}from"./Form.js";import Markdown from"./Markdown.js";export function renderTitle(e,r,t,o,s){return hasContent(t)?React.createElement(FormLabel,{className:formClasses.formElementTitle,component:s,htmlFor:o,id:getLabelId(e),required:!!r},React.createElement(Markdown,{inline:!0,text:t})):null}const DescriptionMarkdown=styled(Markdown)(({theme:{palette:e}})=>({[`&.${formLabelClasses.disabled}`]:{color:e.text.disabled}," p:first-of-type":{marginTop:0}}));export function renderDescription(e,r,t,o){return hasContent(e)?React.createElement(DescriptionMarkdown,{className:clsx(o,{[formLabelClasses.disabled]:!1===t}),id:getDescriptionId(r),text:e}):null}export function renderAccessibleDescription(e,r,t,o){let s=o.translateText(e);if(!s){const e=o.translateText(r);s=isMarkdown(e)?markdownToText(e.markdown):e}return s?React.createElement(Box,{hidden:!0,id:getAccessibleDescriptionId(t)},s):null}const ErrorMarkdown=styled(Markdown)(({theme:{palette:e}})=>({color:e.custom.errorText,fontStyle:"italic",backgroundColor:e.custom.errorBackground}));export function renderError(e){return hasContent(e)?React.createElement(ErrorMarkdown,{role:"alert",text:e}):null}export function useFocusCallback(e,r,t){return useCallback(e=>{Array.isArray(e?.thumbRefs)&&e.thumbRefs.length>0&&(e=e.thumbRefs[0].current),null===e||e.disabled||t.renderFocus(e,r)},[e,r,t])}

package/forms/dateUtilities.d.ts

@@ -103,8 +103,8 @@ export declare function getLocaleDateFormatTokenPosition(token: "yyyy" | "dd" |
  * start and end dates
  */
 type DateRangeLike = (Date | number | string)[] | {
-    startDate: Date | string;
     endDate: Date | string;
+    startDate: Date | string;
 };
 /**
  * Attempts to convert user input into a valid DateRangeRef if possible. If arrays of dates,
@@ -126,8 +126,8 @@ type PartialValue = void | boolean | number | string | {
     [name: string]: any;
     format?: PartialValue | void;
     locale?: string;
-    timezone?: string;
     refValueType?: string;
+    timezone?: string;
     value?: number;
 };
 export declare function makeProperValue(value: number | string | PartialValue): Date | undefined;

package/forms/elements/types.d.ts

@@ -7,12 +7,12 @@ import type * as defs from "../FormDefinition";
 export type Text = string | defs.MarkdownRef;
 /** Properties common to all Elements, except the Header. */
 export interface ElementBase {
+    /** Indicates the name of the style that will be applied to the element. */
+    readonly styleName?: string;
     /** Indicates the type of the element. */
     readonly type?: string;
     /** Indicates that the element is visible or not. */
     readonly visible?: boolean;
-    /** Indicates the name of the style that will be applied to the element. */
-    readonly styleName?: string;
 }
 /** Exposes the Element.enabled and Element.error properties. */
 export interface EditableElement {

package/forms/index.d.ts

@@ -83,13 +83,13 @@ export type PropertyChangeEvent<TSettableProps, TSetProperty> = Unionize<{
 export interface FormElementRegistration<TProps extends FormElementProps<any> = FormElementProps, TSettableProps extends SettablePropsFromProps<TProps> = SettablePropsFromProps<TProps>> {
     /** The React component definition of the form element. */
     component: React.ComponentType<TProps>;
-    /** The unique identifier of the element. */
-    id: string;
     /**
      * Generate the initial properties of the form element. This will be assigned to
      * the element properties before first render.
      */
     getInitialProperties?: () => Partial<TSettableProps>;
+    /** The unique identifier of the element. */
+    id: string;
     /**
      * This function will be invoked prior to updating a property of the element
      * state. It will be invoked even if the element isn't currently visible.

package/forms/numberFormatter.d.ts

@@ -42,14 +42,6 @@ export declare enum NumberDisplayFormat {
  * Options supported by {@link format}.
  */
 export interface FormatOptions {
-    /**
-     * The locale to use when formatting the number.
-     */
-    locale: string;
-    /**
-     * The number format. See {@link NumberFormatter.format}.
-     */
-    format?: NumberDisplayFormat;
     /**
      * See NumberFormat.currency.
      */
@@ -58,10 +50,18 @@ export interface FormatOptions {
      * The custom number format. Required for a format type of 'Custom'
      */
     customDisplayFormat?: string;
+    /**
+     * The number format. See {@link NumberFormatter.format}.
+     */
+    format?: NumberDisplayFormat;
     /**
      * See NumberFormat.precision.
      */
     fractionalDigits?: number;
+    /**
+     * The locale to use when formatting the number.
+     */
+    locale: string;
 }
 export declare const DEFAULT_CURRENCY = "USD";
 export declare const DEFAULT_CUSTOM_FORMAT = "#.##";

package/forms/numberUtilities.d.ts

@@ -93,8 +93,8 @@ export declare function areValuesEqual(elementValue: defs.Value | undefined, new
  * We use string rather than React.Node so that we can share this between runtime and designer without discrepancies between the typings.
  */
 interface Mark {
-    value: number;
     label?: string;
+    value: number;
 }
 /**
  * Gets marks to be used with the @vertigis/react-ui/Slider component.

package/forms/utils.d.ts

@@ -4,6 +4,12 @@ import type { ElementTuple } from "./FormDefinition";
 import type * as defs from "./FormDefinition";
 import type { FormElementProps } from "./index";
 import type { Theme } from "@vertigis/react-ui/styles";
+export interface DebounceResult {
+    /** Do not invoke the scheduled function at all. */
+    cancel: () => void;
+    /** Invoke the scheduled function immediately, without any further delay. */
+    now: () => void;
+}
 /**
  * Constraints for a property that may specify a default value and bounds.
  */
@@ -33,12 +39,6 @@ export interface PropertyConstraintsWithMinimum<T> extends PropertyConstraints<T
 export interface FormElementPropertyConstraints {
     [key: string]: PropertyConstraints<any> | undefined;
 }
-export interface DebounceResult {
-    /** Invoke the scheduled function immediately, without any further delay. */
-    now: () => void;
-    /** Do not invoke the scheduled function at all. */
-    cancel: () => void;
-}
 /**
  * Exporting text since it was split out from here into it's own file as part of the designer
  * CRA migration. This was necessary since babel does not support namespaces.
@@ -151,12 +151,6 @@ export declare function isNumberRef(value: defs.Value | undefined): value is def
 export declare function sanitizeGeometryRef(value: defs.Value | undefined): defs.GeometryRef | undefined;
 /** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function createGeometryRef(format: defs.GeometryFormat): defs.GeometryRef;
-export interface DebounceResult {
-    /** Invoke the scheduled function immediately, without any further delay. */
-    now: () => void;
-    /** Do not invoke the scheduled function at all. */
-    cancel: () => void;
-}
 /**
  * Creates a debounced function that will invoke the given function
  * only after the function has not been called for the duration of the delay.

package/libs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "5.49.0+7";
+export declare const VERSION = "5.50.0+14";

package/libs/version.js

@@ -1 +1 @@
-export const VERSION="5.49.0+7";
+export const VERSION="5.50.0+14";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/workflow",
-  "version": "5.49.0",
+  "version": "5.50.0",
   "author": "VertiGIS",
   "dependencies": {
     "@date-fns/utc": "^1.2.0",

package/ui/UIService.d.ts

@@ -6,8 +6,8 @@ import type { ElementType, ReactNode } from "react";
  * to allow Web to call its version.
  */
 export declare class UIService {
-    private _children;
     private _DialogComponent;
+    private _children;
     private resolve;
     private root;
     private readonly rootElementId;
@@ -16,8 +16,8 @@ export declare class UIService {
      * @param rootElementId The id of the element in the DOM that will contain the dialog.
      */
     constructor(rootElementId: string);
-    displayDialog: (children: (closeDialog: () => void) => ReactNode, DialogComponent: ElementType<any>) => Promise<void>;
     closeDialog: () => void;
+    displayDialog: (children: (closeDialog: () => void) => ReactNode, DialogComponent: ElementType<any>) => Promise<void>;
     renderDialog: (open: boolean) => null | undefined;
     wrapProviders: (content: React.JSX.Element) => React.JSX.Element;
 }

package/ui/UIService.js

@@ -1 +1 @@
-import React from"react";import{createRoot}from"react-dom/client";export class UIService{constructor(e){this.displayDialog=(e,o)=>new Promise(t=>{this._children=e(this.closeDialog),this._DialogComponent=o,this.resolve=t,this.renderDialog(!0)}),this.closeDialog=()=>{this.renderDialog(!1),this.resolve(),this._children=void 0,this._DialogComponent=void 0,this.resolve=void 0},this.renderDialog=e=>{const o=this._DialogComponent,t=this._children;if(!o)return null;if(!this.root){const e=document.getElementById(this.rootElementId);this.root=createRoot(e)}this.root.render(this.wrapProviders(React.createElement(o,{open:e},t)))},this.wrapProviders=e=>(console.warn("UIService.wrapProviders should be overridden by the client."),e),this.rootElementId=e}}
+import React from"react";import{createRoot}from"react-dom/client";export class UIService{constructor(e){this.closeDialog=()=>{this.renderDialog(!1),this.resolve(),this._children=void 0,this._DialogComponent=void 0,this.resolve=void 0},this.displayDialog=(e,o)=>new Promise(t=>{this._children=e(this.closeDialog),this._DialogComponent=o,this.resolve=t,this.renderDialog(!0)}),this.renderDialog=e=>{const o=this._DialogComponent,t=this._children;if(!o)return null;if(!this.root){const e=document.getElementById(this.rootElementId);this.root=createRoot(e)}this.root.render(this.wrapProviders(React.createElement(o,{open:e},t)))},this.wrapProviders=e=>(console.warn("UIService.wrapProviders should be overridden by the client."),e),this.rootElementId=e}}