@vertigis/workflow 5.40.0 → 5.41.0

package/forms/components/Sketch.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog,{dialogClasses}from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Edit from"@vertigis/react-ui/icons/Edit";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useRef,useState}from"react";import FormElement from"../FormElement.js";import{renderTitle}from"../common.js";import{makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";import SketchDialog from"./SketchDialog.js";const PREFIX="Sketch",sketchClasses={button:`${PREFIX}-button`,imagePanel:`${PREFIX}-image-panel`,imageScroller:`${PREFIX}-image-scroller`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${sketchClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${sketchClasses.imagePanel}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",maxWidth:"100%",minWidth:0}}})),StyledDialog=styled(Dialog)(()=>({[`.${dialogClasses.paper}`]:{maxWidth:"inherit"}})),Sketch=({className:e,component:t,displayDialog:a,element:r,enabled:i,name:o,prompt:l,renderFocus:s,renderText:c,require:n,setValue:m,size:u,source:d,title:g,tooltip:f,translateText:h,value:p})=>{const[R,k]=useState(),[E,v]=useState(),[b,y]=useState(),[x,S]=useState(),w=useRef([]),B=useRef(),C=c(f);useEffect(()=>{var e,t;"object"==typeof u&&(e=void 0===u.height||isNaN(u.height)?void 0:u.height,t=void 0===u.width||isNaN(u.width)?void 0:u.width,v(e),S(t))},[u]),useEffect(()=>{k("object"==typeof p?p.dataUrl:void 0)},[p]),useEffect(()=>{var e;return B.current&&(URL.revokeObjectURL(B.current),B.current=void 0),"string"==typeof d?y(d):d instanceof File&&(e=URL.createObjectURL(d),y(e),B.current=e),()=>{B.current&&URL.revokeObjectURL(B.current)}},[d]);const U=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${o}.png`,{type:t.type});m({refValueType:"sketch",dataUrl:e,file:t})}else m(void 0);k(e)},I=!!b&&!!R,T=async()=>{await a(a=>React.createElement(SketchDialog,{dataUrl:R,height:E,history:w.current,onClose:(e,t)=>{e&&t&&(U(t.dataUrl),S(t.width),v(t.height),w.current=t.history),a()},renderText:c,source:b,title:renderTitle(makeUniqueId(o+"-dialog"),n,g,h),width:x}),StyledDialog)};return React.createElement(Root,{className:e,component:t,element:r},(()=>{if(!R&&!b)return null;var e=R||b,t=c("@common-clear"),a=c("@common-edit");return React.createElement(Box,{className:sketchClasses.imagePanel},React.createElement("img",{src:e,alt:C}),I&&React.createElement(Stack,null,React.createElement(IconButton,{"aria-label":a,disabled:!i,onClick:T,title:a},React.createElement(Edit,null)),React.createElement(IconButton,{"aria-label":t,disabled:!i,onClick:()=>{U(void 0),w.current=[]},title:t},React.createElement(Trash,null))))})(),I?null:React.createElement(Box,{className:sketchClasses.button},React.createElement(Button,{disabled:!i||!b,onClick:T,ref:e=>{null===e||e.disabled||s(e,o)},title:C,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:l||"",translateText:h}))))};export default Sketch;export{sketchClasses};
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog,{dialogClasses}from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Edit from"@vertigis/react-ui/icons/Edit";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useRef,useState}from"react";import HostContext from"../hostContext.js";import{makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import SketchDialog from"./SketchDialog.js";import{renderTitle,useFocusCallback}from"./common.js";const PREFIX="Sketch",sketchClasses={button:`${PREFIX}-button`,imagePanel:`${PREFIX}-image-panel`,imageScroller:`${PREFIX}-image-scroller`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${sketchClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${sketchClasses.imagePanel}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",maxWidth:"100%",minWidth:0}}})),StyledDialog=styled(Dialog)(()=>({[`.${dialogClasses.paper}`]:{maxWidth:"inherit"}})),Sketch=({className:e,element:t,enabled:a,name:i,prompt:r,require:o,setValue:l,size:s,source:c,title:n,tooltip:m,value:u})=>{const d=useContext(HostContext),[f,g]=useState(),[h,p]=useState(),[k,E]=useState(),[R,v]=useState(),x=useRef([]),y=useRef(),b=d.renderText(m),C=useFocusCallback(a,i,d);useEffect(()=>{var e,t;"object"==typeof s&&(e=void 0===s.height||isNaN(s.height)?void 0:s.height,t=void 0===s.width||isNaN(s.width)?void 0:s.width,p(e),v(t))},[s]),useEffect(()=>{g("object"==typeof u?u.dataUrl:void 0)},[u]),useEffect(()=>{var e;return y.current&&(URL.revokeObjectURL(y.current),y.current=void 0),"string"==typeof c?E(c):c instanceof File&&(e=URL.createObjectURL(c),E(e),y.current=e),()=>{y.current&&URL.revokeObjectURL(y.current)}},[c]);const S=async e=>{if(e){const r=await fetch(e);var t=await r.blob(),t=new File([t],`${i}.png`,{type:t.type});l({refValueType:"sketch",dataUrl:e,file:t})}else l(void 0);g(e)},w=!!k&&!!f,F=async()=>{await d.displayDialog(r=>React.createElement(SketchDialog,{dataUrl:f,height:h,history:x.current,host:d,onClose:(e,t)=>{e&&t&&(S(t.dataUrl),v(t.width),p(t.height),x.current=t.history),r()},source:k,title:renderTitle(makeUniqueId(i+"-dialog"),o,n),width:R}),StyledDialog)};return React.createElement(StyledFormElement,{className:e,element:t,name:i},(()=>{if(!f&&!k)return null;var e=f||k,t=d.renderText("@common-clear"),r=d.renderText("@common-edit");return React.createElement(Box,{className:sketchClasses.imagePanel},React.createElement("img",{src:e,alt:b}),w&&React.createElement(Stack,null,React.createElement(IconButton,{"aria-label":r,disabled:!a,onClick:F,ref:C,title:r},React.createElement(Edit,null)),React.createElement(IconButton,{"aria-label":t,disabled:!a,onClick:()=>{S(void 0),x.current=[]},title:t},React.createElement(Trash,null))))})(),w?null:React.createElement(Box,{className:sketchClasses.button},React.createElement(Button,{disabled:!a||!k,onClick:F,ref:e=>{k&&C(e)},title:b,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:r||""}))))};export default Sketch;export{sketchClasses};

package/forms/components/SketchDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { defs } from "../FormHost";
+import type { FormHostMembers } from "../hostContext";
 export declare const sketchDialogClasses: {
     canvasContainer: string;
     canvasScroller: string;
@@ -44,13 +44,8 @@ export interface StyledDialogProps {
     dataUrl: string | undefined;
     height: number | undefined;
     history: HistoryItem[];
+    host: FormHostMembers;
     onClose: (confirm: boolean, result?: SketchDialogResult) => void;
-    /**
-     * Renders form text as a string.
-     * If `text` is a reference to a language string (e.g. `"@my-language-string"`), it is translated.
-     * If `text` is a `MarkdownRef`, it is converted to plain text.
-     */
-    renderText: (text: defs.Text | undefined) => string;
     source: string;
     title: React.JSX.Element | null;
     width: number | undefined;
@@ -63,5 +58,5 @@ type Point = {
     x: number;
     y: number;
 };
-declare const SketchDialog: ({ dataUrl, height, history: previousHistory, onClose, renderText, source, title, width, }: StyledDialogProps) => React.JSX.Element;
+declare const SketchDialog: ({ dataUrl, height, history: previousHistory, host, onClose, source, title, width, }: StyledDialogProps) => React.JSX.Element;
 export default SketchDialog;

package/forms/components/SketchDialog.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import DialogActions from"@vertigis/react-ui/DialogActions";import DialogContent from"@vertigis/react-ui/DialogContent";import DialogTitle from"@vertigis/react-ui/DialogTitle";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import FormLabelColorField from"@vertigis/react-ui/FormLabelColorField";import IconButton from"@vertigis/react-ui/IconButton";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Slider from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import Trash from"@vertigis/react-ui/icons/Trash";import Undo from"@vertigis/react-ui/icons/Undo";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useRef,useState}from"react";const DialogPrefix="SketchDialog",sketchDialogClasses={canvasContainer:`${DialogPrefix}-canvas-container`,canvasScroller:`${DialogPrefix}-canvas-scroller`,drawingCanvas:`${DialogPrefix}-drawing-canvas`,highlightCanvas:`${DialogPrefix}-highlight-canvas`,size:`${DialogPrefix}-size`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${sketchDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",alignItems:"center",[`.${sketchDialogClasses.size}`]:{marginLeft:e(2),width:"15rem"},[`.${sketchDialogClasses.canvasScroller}`]:{maxWidth:"100%",overflow:"auto",[`.${sketchDialogClasses.canvasContainer}`]:{lineHeight:0,overflow:"clip",canvas:{position:"relative",[`&.${sketchDialogClasses.highlightCanvas}`]:{opacity:.5}}}}}));function isDrawingHistoryItem(e){return Array.isArray(e.points)}const PenColours=["#F13B2F","#42A345","#049FF1","#FFE600","#000000","#FFFFFF"],HighlighterColours=["#FFE600","#26E600","#44C8F5","#EC008C","#FF5500","#6600CC"],SketchDialog=({dataUrl:n,height:e,history:c,onClose:r,renderText:t,source:s,title:a,width:o})=>{const[g,u]=useState(e||0),[m,h]=useState(o||0),[d,l]=useState(PenColours[0]),[C,i]=useState(3),[p,f]=useState(HighlighterColours[0]),[v,R]=useState(12),[x,D]=useState("pen"),y="highlighter"===x,k=useRef(null),E=useRef(null),F=useRef(null),S=useRef([]),w=useRef([]),b=useRef(!1),T=useRef(!1),P=e=>(e?"highlighter"!==e?F:E:y?E:F).current,$=async e=>{let r,a;var t=new Promise((e,t)=>{r=e,a=t});const o=new Image;return o.crossOrigin="anonymous",o.onerror=e=>{a(e)},o.onload=()=>{r(o)},o.src=e,o.complete&&r(o),t};useEffect(()=>{(async()=>{const a=k.current,o=F.current;if(a&&o&&!b.current){let r;try{r=await $(s)}catch(e){console.error(`Error loading image from ${s}.`,e)}if(r){let e=Math.max(m,0),t=Math.max(g,0);var{height:l,width:i}=r;0==e&&0==t?(t=l,e=i):0===t?t=e*(l/i):0===e&&(e=t*(i/l)),a.height=t,a.width=e,o.height=t,o.width=e,a.getContext("2d").drawImage(r,0,0,a.width,a.height),0<c.length?(w.current=[...c],await U()):n&&(w.current=[{tool:"pen",dataUrl:n}],await U()),u(t),h(e),b.current=!0}else I()}})()},[k.current,F.current]);const B=(e,t)=>{t=t.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}};var L=()=>{if(T.current){T.current=!1;const e=P(),t=e.getContext("2d");t.closePath(),w.current.push({lineCap:t.lineCap,lineWidth:t.lineWidth,points:[...S.current],strokeStyle:t.strokeStyle,tool:x}),S.current.length=0}};const I=()=>{r(!1)};const U=async e=>{for(const l of w.current)if(!e||l.tool===e){const i=P(l.tool);if(isDrawingHistoryItem(l)){const n=i.getContext("2d");n.beginPath(),n.lineCap=l.lineCap,n.lineWidth=l.lineWidth,n.strokeStyle=l.strokeStyle;var t=l["points"];for(let e=0;e<t.length;e++){var{x:r,y:a}=t[e];0===e?n.moveTo(r,a):(n.lineTo(r,a),n.stroke())}n.closePath()}else{var o=await $(l.dataUrl);i.getContext("2d").drawImage(o,0,0,i.width,i.height)}}};e=t("@common-clear"),o=t("@common-undo");return React.createElement(React.Fragment,null,React.createElement(StyledDialogTitle,null,React.createElement("div",{className:sketchDialogClasses.titleText},a),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":o,onClick:async()=>{if(0!==w.current.length){var e=w.current.pop()["tool"];const t=P(e),r=t.getContext("2d");r.clearRect(0,0,m,g),await U(e)}},title:o},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":e,onClick:()=>{E.current.getContext("2d").clearRect(0,0,m,g),F.current.getContext("2d").clearRect(0,0,m,g),w.current=[]},title:e},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,t("@sketch-tool")),React.createElement(RadioGroup,{onChange:e=>D(e.currentTarget.value),row:!0,value:x},React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"pen",label:t("@sketch-tool-pen")}),React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"highlighter",label:t("@sketch-tool-highlighter")}))),React.createElement(FormLabelColorField,{label:t("@common-color"),value:y?p:d,ColorInputProps:{presetColors:y?HighlighterColours:PenColours},onChange:e=>{(y?f:l)(e)}}),React.createElement(FormControl,{className:sketchDialogClasses.size},React.createElement(FormLabel,null,t("@sketch-size")),React.createElement(Slider,{min:1,value:y?v:C,onChange:(e,t)=>{(y?R:i)(t)}}))),React.createElement(Box,{className:sketchDialogClasses.canvasScroller},React.createElement(Box,{sx:{width:`${m}px`,height:`${g}px`},className:sketchDialogClasses.canvasContainer},React.createElement("canvas",{ref:k}),React.createElement("canvas",{className:sketchDialogClasses.highlightCanvas,height:g,ref:E,style:{top:`-${g}px`},width:m}),React.createElement("canvas",{className:sketchDialogClasses.drawingCanvas,onMouseDown:e=>{const t=P(),r=t.getContext("2d");var{x:a,y:o}=B(e,t),{lineCap:l,lineWidth:i,strokeStyle:e}=y?{lineCap:"butt",lineWidth:v,strokeStyle:p}:{lineCap:"round",lineWidth:C,strokeStyle:d};r.beginPath(),r.lineCap=l,r.lineWidth=i,r.strokeStyle=e,r.moveTo(a,o),S.current.length=0,S.current.push({x:a,y:o}),T.current=!0},onMouseLeave:L,onMouseMove:e=>{if(T.current){const r=P(),a=r.getContext("2d");var{x:t,y:e}=B(e,r);a.lineTo(t,e),a.stroke(),S.current.push({x:t,y:e})}},onMouseUp:L,ref:F,style:{top:`-${2*g}px`}})))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{if(0!==w.current.length){const t=k.current.getContext("2d");t.globalAlpha=.5,t.drawImage(E.current,0,0),t.globalAlpha=1,t.drawImage(F.current,0,0);var e=k.current.toDataURL("image/png");r(!0,{dataUrl:e,history:[...w.current],width:m,height:g})}else I()},variant:"contained"},t("@common-done")),React.createElement(Button,{color:"inherit",onClick:I,variant:"outlined"},t("@common-cancel"))))};export default SketchDialog;export{sketchDialogClasses};
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import DialogActions from"@vertigis/react-ui/DialogActions";import DialogContent from"@vertigis/react-ui/DialogContent";import DialogTitle from"@vertigis/react-ui/DialogTitle";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import FormLabelColorField from"@vertigis/react-ui/FormLabelColorField";import IconButton from"@vertigis/react-ui/IconButton";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Slider from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import Trash from"@vertigis/react-ui/icons/Trash";import Undo from"@vertigis/react-ui/icons/Undo";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useRef,useState}from"react";import{HostProvider}from"../hostContext.js";const DialogPrefix="SketchDialog",sketchDialogClasses={canvasContainer:`${DialogPrefix}-canvas-container`,canvasScroller:`${DialogPrefix}-canvas-scroller`,drawingCanvas:`${DialogPrefix}-drawing-canvas`,highlightCanvas:`${DialogPrefix}-highlight-canvas`,size:`${DialogPrefix}-size`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${sketchDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",alignItems:"center",[`.${sketchDialogClasses.size}`]:{marginLeft:e(2),width:"15rem"},[`.${sketchDialogClasses.canvasScroller}`]:{maxWidth:"100%",overflow:"auto",[`.${sketchDialogClasses.canvasContainer}`]:{lineHeight:0,overflow:"clip",canvas:{position:"relative",[`&.${sketchDialogClasses.highlightCanvas}`]:{opacity:.5}}}}}));function isDrawingHistoryItem(e){return Array.isArray(e.points)}const PenColours=["#F13B2F","#42A345","#049FF1","#FFE600","#000000","#FFFFFF"],HighlighterColours=["#FFE600","#26E600","#44C8F5","#EC008C","#FF5500","#6600CC"],SketchDialog=({dataUrl:n,height:e,history:c,host:t,onClose:r,source:s,title:o,width:a})=>{const[g,u]=useState(e||0),[m,h]=useState(a||0),[d,l]=useState(PenColours[0]),[C,i]=useState(3),[p,f]=useState(HighlighterColours[0]),[v,x]=useState(12),[R,D]=useState("pen"),y="highlighter"===R,k=useRef(null),E=useRef(null),F=useRef(null),S=useRef([]),w=useRef([]),T=useRef(!1),b=useRef(!1),P=e=>(e?"highlighter"!==e?F:E:y?E:F).current,$=async e=>{let r,o;var t=new Promise((e,t)=>{r=e,o=t});const a=new Image;return a.crossOrigin="anonymous",a.onerror=e=>{o(e)},a.onload=()=>{r(a)},a.src=e,a.complete&&r(a),t};useEffect(()=>{(async()=>{const o=k.current,a=F.current;if(o&&a&&!T.current){let r;try{r=await $(s)}catch(e){console.error(`Error loading image from ${s}.`,e)}if(r){let e=Math.max(m,0),t=Math.max(g,0);var{height:l,width:i}=r;0==e&&0==t?(t=l,e=i):0===t?t=e*(l/i):0===e&&(e=t*(i/l)),o.height=t,o.width=e,a.height=t,a.width=e,o.getContext("2d").drawImage(r,0,0,o.width,o.height),0<c.length?(w.current=[...c],await U()):n&&(w.current=[{tool:"pen",dataUrl:n}],await U()),u(t),h(e),T.current=!0}else I()}})()},[k.current,F.current]);const B=(e,t)=>{t=t.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}};var L=()=>{if(b.current){b.current=!1;const e=P(),t=e.getContext("2d");t.closePath(),w.current.push({lineCap:t.lineCap,lineWidth:t.lineWidth,points:[...S.current],strokeStyle:t.strokeStyle,tool:R}),S.current.length=0}};const I=()=>{r(!1)};const U=async e=>{for(const l of w.current)if(!e||l.tool===e){const i=P(l.tool);if(isDrawingHistoryItem(l)){const n=i.getContext("2d");n.beginPath(),n.lineCap=l.lineCap,n.lineWidth=l.lineWidth,n.strokeStyle=l.strokeStyle;var t=l["points"];for(let e=0;e<t.length;e++){var{x:r,y:o}=t[e];0===e?n.moveTo(r,o):(n.lineTo(r,o),n.stroke())}n.closePath()}else{var a=await $(l.dataUrl);i.getContext("2d").drawImage(a,0,0,i.width,i.height)}}};e=t.renderText("@common-clear"),a=t.renderText("@common-undo");return React.createElement(HostProvider,{value:t},React.createElement(StyledDialogTitle,null,React.createElement("div",{className:sketchDialogClasses.titleText},o),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":a,onClick:async()=>{if(0!==w.current.length){var e=w.current.pop()["tool"];const t=P(e),r=t.getContext("2d");r.clearRect(0,0,m,g),await U(e)}},title:a},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":e,onClick:()=>{E.current.getContext("2d").clearRect(0,0,m,g),F.current.getContext("2d").clearRect(0,0,m,g),w.current=[]},title:e},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,t.renderText("@sketch-tool")),React.createElement(RadioGroup,{onChange:e=>D(e.currentTarget.value),row:!0,value:R},React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"pen",label:t.renderText("@sketch-tool-pen")}),React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"highlighter",label:t.renderText("@sketch-tool-highlighter")}))),React.createElement(FormLabelColorField,{label:t.renderText("@common-color"),value:y?p:d,ColorInputProps:{presetColors:y?HighlighterColours:PenColours},onChange:e=>{(y?f:l)(e)}}),React.createElement(FormControl,{className:sketchDialogClasses.size},React.createElement(FormLabel,null,t.renderText("@sketch-size")),React.createElement(Slider,{min:1,value:y?v:C,onChange:(e,t)=>{(y?x:i)(t)}}))),React.createElement(Box,{className:sketchDialogClasses.canvasScroller},React.createElement(Box,{sx:{width:`${m}px`,height:`${g}px`},className:sketchDialogClasses.canvasContainer},React.createElement("canvas",{ref:k}),React.createElement("canvas",{className:sketchDialogClasses.highlightCanvas,height:g,ref:E,style:{top:`-${g}px`},width:m}),React.createElement("canvas",{className:sketchDialogClasses.drawingCanvas,onMouseDown:e=>{const t=P(),r=t.getContext("2d");var{x:o,y:a}=B(e,t),{lineCap:l,lineWidth:i,strokeStyle:e}=y?{lineCap:"butt",lineWidth:v,strokeStyle:p}:{lineCap:"round",lineWidth:C,strokeStyle:d};r.beginPath(),r.lineCap=l,r.lineWidth=i,r.strokeStyle=e,r.moveTo(o,a),S.current.length=0,S.current.push({x:o,y:a}),b.current=!0},onMouseLeave:L,onMouseMove:e=>{if(b.current){const r=P(),o=r.getContext("2d");var{x:t,y:e}=B(e,r);o.lineTo(t,e),o.stroke(),S.current.push({x:t,y:e})}},onMouseUp:L,ref:F,style:{top:`-${2*g}px`}})))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{if(0!==w.current.length){const t=k.current.getContext("2d");t.globalAlpha=.5,t.drawImage(E.current,0,0),t.globalAlpha=1,t.drawImage(F.current,0,0);var e=k.current.toDataURL("image/png");r(!0,{dataUrl:e,history:[...w.current],width:m,height:g})}else I()},variant:"contained"},t.renderText("@common-done")),React.createElement(Button,{color:"inherit",onClick:I,variant:"outlined"},t.renderText("@common-cancel"))))};export default SketchDialog;export{sketchDialogClasses};

package/forms/components/TabGroup.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{formLabelClasses}from"@vertigis/react-ui/FormLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import Tab from"@vertigis/react-ui/Tab";import Tabs from"@vertigis/react-ui/Tabs";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import Markdown from"./Markdown.js";const Root=styled(Box)(({theme:{spacing:e}})=>({marginBottom:e(4),marginTop:e(4)})),StyledFormLabel=styled(FormLabel)(()=>({[`&.${formLabelClasses.error}`]:{backgroundColor:"transparent"}})),TabGroup=({className:e,component:t})=>{const[r,a]=useState(!1),{children:o,host:l}=t.props;useEffect(()=>{let e=o.filter(e=>!0!==l.form.elements[e.props.name].collapsed)[0]?.props?.name;e?a(e):(e=o[0]?.props?.name,e?l.updateMutuallyExclusiveSections(e):a(!1))},[o]);return React.createElement(Root,{className:e},React.createElement(Tabs,{onChange:(e,t)=>{l.updateMutuallyExclusiveSections(t)},scrollButtons:"auto",value:r,variant:"scrollable"},o.map(e=>{var t,r=e.props["name"];return React.createElement(Tab,{"aria-controls":`simple-tabpanel-${r}`,id:`simple-tab-${r}`,key:r,label:(t=l.form.elements[r],e=r,React.createElement(StyledFormLabel,{error:l.hasInvalidChild(t)||!!t.error,id:`${e}-label`},React.createElement(Markdown,{inline:!0,text:t.title,translateText:l.translateText.bind(l)}))),value:r})})),o)};export default TabGroup;
+import Box from"@vertigis/react-ui/Box";import{formLabelClasses}from"@vertigis/react-ui/FormLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import Tab from"@vertigis/react-ui/Tab";import Tabs from"@vertigis/react-ui/Tabs";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import Markdown from"./Markdown.js";const StyledBox=styled(Box)(({theme:{spacing:e}})=>({marginBottom:e(4),marginTop:e(4)})),StyledFormLabel=styled(FormLabel)(()=>({[`&.${formLabelClasses.error}`]:{backgroundColor:"transparent"}})),TabGroup=({className:e,component:t})=>{const[r,a]=useState(!1),{children:o,host:l}=t.props;useEffect(()=>{let e=o.filter(e=>!0!==l.form.elements[e.props.name].collapsed)[0]?.props?.name;e?a(e):(e=o[0]?.props?.name,e?l.updateMutuallyExclusiveSections(e):a(!1))},[o]);return React.createElement(StyledBox,{className:e},React.createElement(Tabs,{onChange:(e,t)=>{l.updateMutuallyExclusiveSections(t)},scrollButtons:"auto",value:r,variant:"scrollable"},o.map(e=>{var t,r=e.props["name"];return React.createElement(Tab,{"aria-controls":`simple-tabpanel-${r}`,id:`simple-tab-${r}`,key:r,label:(t=l.form.elements[r],e=r,React.createElement(StyledFormLabel,{error:l.hasInvalidChild(t)||!!t.error,id:`${e}-label`},React.createElement(Markdown,{inline:!0,text:t.title}))),value:r})})),o)};export default TabGroup;

package/forms/components/Text.d.ts

@@ -4,5 +4,5 @@ import type { FormElementProps } from "../..";
  * The component for the "Text" Form Element.
  * It just exposes the Title and Description which are common to all.
  */
-declare const Text: ({ className, component, element }: FormElementProps) => React.JSX.Element;
+declare const Text: ({ className, element, name }: FormElementProps) => React.JSX.Element;
 export default Text;

package/forms/components/Text.js

@@ -1 +1 @@
-import*as React from"react";import FormElement from"../FormElement.js";const Text=({className:e,component:t,element:m})=>React.createElement(FormElement,{className:e,component:t,element:m});export default Text;
+import*as React from"react";import FormElement from"./FormElement.js";const Text=({className:e,element:m,name:t})=>React.createElement(FormElement,{className:e,element:m,name:t});export default Text;

package/forms/components/TextArea.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Text Area" Form Element.
  */
-declare const TextArea: ({ className, component, element, enabled, name, maxLength, prompt, readOnly, renderFocus: hostRenderFocus, require, size, tooltip, value: elementValue, wrap: elementWrap, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
+declare const TextArea: ({ className, component, element, enabled, name, maxLength, prompt, readOnly, require, size, tooltip, value: elementValue, wrap: elementWrap, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
 export default TextArea;

package/forms/components/TextArea.js

@@ -1 +1 @@
-import Input from"@vertigis/react-ui/Input";import{useEffect,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{makeUniqueId}from"../utils.js";const TextArea=({className:e,component:t,element:r,enabled:a,name:n,maxLength:o,prompt:u,readOnly:l,renderFocus:m,require:s,size:i,tooltip:p,value:f,wrap:c,renderText:d,setValue:g})=>{const[E,x]=useState(8),[h,v]=useState(""),[y,I]=useState("soft");var b=`${makeUniqueId(n)}-input`,u=d(u),p=d(p);useEffect(()=>{"number"==typeof i&&x(i)},[i]),useEffect(()=>{let e="string"==typeof f?f:"";f!==e&&(g(e,!1),t.forceUpdate()),v(e)},[f]),useEffect(()=>{"string"==typeof c&&-1!==["hard","soft","off"].indexOf(c)&&I(c)},[c]);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:b},React.createElement(Input,{disabled:!a,fullWidth:!0,id:b,inputProps:{maxLength:o,onKeyDown:e=>{e.stopPropagation()},title:p,wrap:y},inputRef:e=>{null===e||e.disabled||m(e,n)},multiline:!0,onBlur:e=>{e=e.target.value;e!=f&&(g(e),v(e))},onChange:e=>{e=e.target.value;e!=h&&v(e)},placeholder:u,readOnly:l,required:s,rows:E,value:h}))};export default TextArea;
+import Input from"@vertigis/react-ui/Input";import{useContext,useEffect,useState}from"react";import*as React from"react";import HostContext from"../hostContext.js";import{makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const TextArea=({className:e,component:t,element:o,enabled:r,name:a,maxLength:n,prompt:s,readOnly:m,require:u,size:l,tooltip:i,value:p,wrap:f,setValue:c})=>{const d=useContext(HostContext),[x,g]=useState(8),[E,C]=useState(""),[h,y]=useState("soft"),I=`${makeUniqueId(a)}-input`,b=d.renderText(s),v=d.renderText(i);useEffect(()=>{"number"==typeof l&&g(l)},[l]),useEffect(()=>{let e="string"==typeof p?p:"";p!==e&&(c(e,!1),t.forceUpdate()),C(e)},[p]),useEffect(()=>{"string"==typeof f&&-1!==["hard","soft","off"].indexOf(f)&&y(f)},[f]);const F=e=>{e=e.target.value;e!=p&&(c(e),C(e))},j=e=>{e=e.target.value;e!=E&&C(e)},k=e=>{e.stopPropagation()},q=useFocusCallback(r,a,d);return React.createElement(FormElement,{className:e,element:o,inputId:I,name:a},e=>React.createElement(Input,{disabled:!r,fullWidth:!0,id:I,inputProps:{...e,maxLength:n,onKeyDown:k,title:v,wrap:h},inputRef:q,multiline:!0,onBlur:F,onChange:j,placeholder:b,readOnly:m,required:u,rows:x,value:E}))};export default TextArea;

package/forms/components/TextBox.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Text Box" and "Password Box" Form Elements.
  */
-declare const TextBox: ({ className, component, element, enabled, formatNumber, type: elementType, maxLength: elementMaxLength, name, prompt, readOnly: elementReadOnly, renderFocus: hostRenderFocus, require, tooltip, value: elementValue, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
+declare const TextBox: ({ className, element, enabled, type: elementType, maxLength: elementMaxLength, name, prompt, readOnly: elementReadOnly, require, tooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
 export default TextBox;

package/forms/components/TextBox.js

@@ -1 +1 @@
-import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{FormElementTypes}from"../constants.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";const TextBox=({className:e,component:t,element:r,enabled:n,formatNumber:o,type:a,maxLength:m,name:l,prompt:u,readOnly:s,renderFocus:p,require:i,tooltip:c,value:d,renderText:f,setValue:g})=>{const[v,y]=useState("");var x=`${makeUniqueId(l)}-input`;const E=a===FormElementTypes.PASSWORDBOX;m=E?void 0:m,u=f(u),s=E?void 0:s,c=f(c);useEffect(()=>{let e="";"string"==typeof d?e=d:"number"!=typeof d||E||(e=o(d)),d!==e&&g(e,!1),v!==e&&y(e)},[d]);const T=e=>{g(e),y(e)};return React.createElement(FormElement,{className:e,component:t,element:r,inputId:x},React.createElement(Input,{disabled:!n,fullWidth:!0,id:x,inputProps:{maxLength:m,onKeyDown:e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==d)return T(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==d)return y(d),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},title:c},inputRef:e=>{null===e||e.disabled||p(e,l)},onBlur:e=>{e=e.target.value;e!=d&&T(e)},onChange:e=>{e=e.target.value;e!=v&&y(e)},placeholder:u,readOnly:s,required:i,type:E?"password":"text",value:v}))};export default TextBox;
+import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useContext,useEffect,useState}from"react";import{FormElementTypes}from"../constants.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const TextBox=({className:e,element:t,enabled:r,type:o,maxLength:n,name:a,prompt:m,readOnly:s,require:u,tooltip:l,value:i,setValue:p})=>{const c=useContext(HostContext),[f,d]=useState(""),g=`${makeUniqueId(a)}-input`,x=o===FormElementTypes.PASSWORDBOX,v=x?void 0:n,y=c.renderText(m),E=x?void 0:s,C=c.renderText(l);useEffect(()=>{let e="";"string"==typeof i?e=i:"number"!=typeof i||x||(e=c.formatNumber(i)),i!==e&&p(e,!1),f!==e&&d(e)},[i]);const T=e=>{p(e),d(e)},b=e=>{e=e.target.value;e!=i&&T(e)},F=e=>{e=e.target.value;e!=f&&d(e)},h=e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==i)return T(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==i)return d(i),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},j=useFocusCallback(r,a,c);return React.createElement(FormElement,{className:e,element:t,inputId:g,name:a},e=>React.createElement(Input,{disabled:!r,fullWidth:!0,id:g,inputProps:{...e,maxLength:v,onKeyDown:h,title:C},inputRef:j,onBlur:b,onChange:F,placeholder:y,readOnly:E,required:u,type:x?"password":"text",value:f}))};export default TextBox;

package/forms/components/TimePicker.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Time Picker" Form Element.
  */
-declare const TimePicker: ({ className, component, element, enabled, error, format: elementFormat, name, prompt, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.JSX.Element;
+declare const TimePicker: ({ className, element, enabled, error, format: elementFormat, name, prompt, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.JSX.Element;
 export default TimePicker;

package/forms/components/TimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{MuiPickersAdapterContext}from"@vertigis/react-ui/LocalizationProvider";import{clockClasses}from"@vertigis/react-ui/TimeClock";import BaseTimePicker from"@vertigis/react-ui/TimePicker";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{DEFAULT_LOCALE}from"../../constants.js";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";const StylableTimePicker=e=>{let{className:t,slotProps:r,...o}=e;return r=r||{},React.createElement(BaseTimePicker,{slotProps:{...r,popper:{...r.popper,className:t}},...o})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,component:t,element:r,enabled:o,error:a,format:i,name:s,prompt:l,renderFocus:m,renderText:n,setProperty:u,setValue:c,tooltip:p,value:d})=>{const[f,T]=useState(!1),[k,E]=useState(!1),[v,C]=useState(!1),[P,F]=useState(null),x=useRef();const g={locale:useContext(MuiPickersAdapterContext)?.utils?.locale?.code||DEFAULT_LOCALE,timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},B=useRef(!0),S=useFocusCallback(o,s,m);var V=n(p);const b=Calendar.useNative(),y="time",R=isInvalidError(a);useEffect(()=>{var e=makeProperValue(d,b),t=getNewElementValue(e,y,g,b);areValuesEqual(d,t)||c(t,!1),F(e||null)},[d]),useEffect(()=>{if(!v&&!k)if(f)R||u("error",{status:"invalid"});else{if(R&&u("error",void 0),B.current)return void(B.current=!1);var e=getNewElementValue(P,y,g,b);areValuesEqual(d,e)||c(e)}B.current=!1},[f,k,v]);var{min:m,max:p}=getDateBounds(i),i=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),l=n(l);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:i},R&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},x.current),React.createElement(StyledTimePicker,{disabled:!o,inputRef:e=>{e&&(x.current=e.dataset.formatString,S(e))},key:"date-picker",maxTime:p,minTime:m,onChange:e=>F(e),onClose:()=>C(!1),onError:()=>T(!0),onOpen:()=>C(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:i,inputProps:{placeholder:l},onBlur:()=>E(!1),onFocus:()=>E(!0),title:V}},value:P}))};export default TimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import BaseTimePicker from"@vertigis/react-ui/TimePicker";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableTimePicker=e=>{let{className:t,slotProps:r,...o}=e;return r=r||{},React.createElement(BaseTimePicker,{slotProps:{...r,popper:{...r.popper,className:t}},...o})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,E]=useState(!1),[x,v]=useState(null),C=useRef();const F={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=useRef(!0),g=useFocusCallback(r,s,c),B=c.renderText(n),R=Calendar.useNative(),S="time",V=isInvalidError(o);useEffect(()=>{var e=makeProperValue(u,R),t=getNewElementValue(e,S,F,R);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)V||l("error",{status:"invalid"});else{if(V&&l("error",void 0),P.current)return void(P.current=!1);var e=getNewElementValue(x,S,F,R);areValuesEqual(u,e)||m(e)}P.current=!1},[p,f,k]);const{min:b,max:y}=getDateBounds(a),j=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),N=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:j,name:s},e=>React.createElement(React.Fragment,null,V&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledTimePicker,{disabled:!r,inputRef:e=>{e&&(C.current=e.dataset.formatString,g(e))},key:"date-picker",maxTime:y,minTime:b,onChange:e=>v(e),onClose:()=>E(!1),onError:()=>d(!0),onOpen:()=>E(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:j,inputProps:{...e,placeholder:N},onBlur:()=>T(!1),onFocus:()=>T(!0),title:B}},value:x})))};export default TimePicker;

package/forms/{common.d.ts → components/common.d.ts}

@@ -1,9 +1,7 @@
 import * as React from "react";
-import type { FormPresenterHost } from "./FormComponent";
-import type { defs } from "./FormHost";
-export declare function getTitleId(elementId: string): string;
-export declare function getDescriptionId(elementId: string): string;
-export declare function getErrorId(elementId: string): string;
+import type { defs } from "../FormHost";
+import type { FormHostMembers } from "../hostContext";
+import type { ElementType } from "react";
 export type TranslateTextFunction = (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
 /**
  * Renders the title for a Form Element.
@@ -11,57 +9,44 @@ export type TranslateTextFunction = (content: defs.Text | undefined) => string |
  * When specified, the title is marked as "for" that DOM element.
  * @param required Indicates if the element is a required field. If so, the title is rendered with an asterisk beside it.
  * @param title The title of the element.
- * @param translateText A function for translating text, replacing placeholders as well.
  * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
+ * @param component (optional) The component type to use for rendering the title.
  * @returns A title component, or `null` if there is no title.
  */
-export declare function renderTitle(elementId: string, required: boolean | undefined, title: defs.Text | undefined, translateText: TranslateTextFunction, inputId?: string): React.JSX.Element | null;
+export declare function renderTitle(elementId: string, required: boolean | undefined, title: defs.Text | undefined, inputId?: string | undefined, component?: ElementType | undefined): React.JSX.Element | null;
 /**
  * Renders the description for a Form Element.
  * @param description The description of the Form Element.
  * @param elementId The id of the DOM element representing the Form Element.
  * @param enabled True if the Form Element is enabled, false otherwise.
- * @param translateText A function for translating text, replacing placeholders as well.
  * @param className (optional) A class name to add to the component.
  * @returns A description component, or `null` if there is no description.
  */
-export declare function renderDescription(description: defs.Text | undefined, elementId: string, enabled: boolean | undefined, translateText: TranslateTextFunction, className?: string): React.JSX.Element | null;
+export declare function renderDescription(description: defs.Text | undefined, elementId: string, enabled: boolean | undefined, className?: string): React.JSX.Element | null;
 /**
  * Renders the accessible description for a Form Element.
  * @param accessibleDescription The element's accessible description.
  * @param description The element's description.
  * @param elementId  The element's id.
- * @param translateText The translate text function.
+ * @param host The FormHost, containing the `translateText()` method.
  * @returns An accessible description component, or `null` if there is no accessible description or description.
  */
-export declare function renderAccessibleDescription(accessibleDescription: string | undefined, description: defs.Text | undefined, elementId: string, translateText: TranslateTextFunction): React.JSX.Element | null;
+export declare function renderAccessibleDescription(accessibleDescription: string | undefined, description: defs.Text | undefined, elementId: string, host: FormHostMembers): React.JSX.Element | null;
 /**
  * Renders the error for a Form Element.
  * @param error The error to be rendered.
- * @param translateText The translate text function.
  * @returns An error component, or `null` if there is no error.
  */
-export declare function renderError(error: defs.Text | undefined, translateText: TranslateTextFunction): React.JSX.Element | null;
-/**
- * Asks the host to focus the provided element when the form is initially shown.
- * Ignores the specified target if it is null or disabled.
- *
- * NOTE: Some elements contain more elaborate forms of this element.
- *       For simplicity, this one replaces the basic cases which were all identical.
- * @param target The HTML Element to receive focus.
- * @param name The name of the Form Element.
- * @param host The form presenter host.
- */
-export declare function renderFocus(target: (HTMLElement & {
-    disabled?: boolean | undefined;
-}) | null, name: string | undefined, host: FormPresenterHost): void;
+export declare function renderError(error: defs.Text | undefined): React.JSX.Element | null;
 /**
  * Returns a memoized function which asks the host to focus the provided element when the form is
  * initially shown. Ignores the specified target if it is null or disabled.
- * @param component The form component
+ * @param enabled True if the Form Element is enabled, false otherwise.
+ * @param name The name of the form element that the target HTML element belongs to.
+ * @param renderFocus The renderFocus function supplied to the Form Element from the host.
  * @returns A memoized function that focuses a target HTML element.
  */
-export declare function useFocusCallback(enabled: boolean, name: string | undefined, renderFocus: (target: Node, name?: string) => boolean): (target: (Node & {
+export declare function useFocusCallback(enabled: boolean, name: string | undefined, host: FormHostMembers): (target: (HTMLElement & {
     disabled?: boolean;
     thumbRefs?: any[];
 }) | null) => void;

package/forms/components/common.js

@@ -0,0 +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";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}}));function renderDescription(e,r,t,o){return hasContent(e)?React.createElement(DescriptionMarkdown,{className:clsx(o,{[formLabelClasses.disabled]:!t}),id:getDescriptionId(r),text:e}):null}function renderAccessibleDescription(e,r,t,o){let s=o.translateText(e);return s||(r=o.translateText(r),s=isMarkdown(r)?markdownToText(r.markdown):r),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}));function renderError(e){return hasContent(e)?React.createElement(ErrorMarkdown,{role:"alert",text:e}):null}function useFocusCallback(e,r,t){return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||t.renderFocus(e,r)},[e,r,t])}export{renderTitle,renderDescription,renderAccessibleDescription,renderError,useFocusCallback};

package/forms/dateUtilities.d.ts

@@ -3,6 +3,7 @@ import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType, FormatRef
 import type { defs } from "./FormHost";
 import type { FormPresenterHost } from "./FormPresenterHost";
 import type { Locale } from "date-fns";
+export declare const SUPPORTED_DATE_FNS_LOCALES: string[];
 /**
  * Checks if a form element's value is equal to the supplied value.
  * @param elementValue The current value of a Form Element.
@@ -98,7 +99,7 @@ export declare function convertToDateRangeRef(value: DateRangeLike): DateRangeRe
  * @param dateFormat The date format to set in cache.
  */
 export declare function __test__setlocaleDateFormatInCache(dateFormat: string): void;
-export declare function loadLocale(host: FormPresenterHost): Promise<Locale | undefined>;
+export declare function getLocale(host: FormPresenterHost): Promise<Locale | undefined>;
 type Partial = void | boolean | number | string | {
     [name: string]: any;
     format?: Partial | void;

package/forms/dateUtilities.js

@@ -1 +1 @@
-import{parse,isAfter}from"date-fns";import{DEFAULT_LOCALE}from"../constants.js";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29,SUPPORTED_DATE_FNS_LOCALES=["cs","da","de","de-AT","en-AU","en-CA","en-GB","en-IN","en-NZ","en-US","en-ZA","fr","fr-CA","fr-CH","it","nb","nl","nl-BE","nn","pt","pt-BR"];let localeDateFormat="",dateFormatSeparator;function areValuesEqual(e,a){return void 0===e&&void 0===a||null===e&&null===a||(isDateTimeRef(e)&&a&&isDateTimeRef(a)?e.display===a.display&&e.refValueType===a.refValueType&&e.value===a.value&&areFormatsEqual(e.format,a.format):!!(isDateRangeRef(e)&&a&&isDateRangeRef(a))&&(e.endDate?.valueOf()===a.endDate?.valueOf()&&e.refValueType===a.refValueType&&e.startDate?.valueOf()===a.startDate?.valueOf()))}function areFormatsEqual(e,a){return void 0===e&&void 0===a||("string"==typeof e&&"string"==typeof a?e===a:"object"==typeof e&&"object"==typeof a&&(null===e||null===a?e===a:e.locale===a.locale&&e.timezone===a.timezone))}function isValidDate(e){return e instanceof Date&&!isNaN(e.valueOf())}function tryParseYear(e){if(/^\d+$/.test(e)&&!(4<e.length)){for(2===e.length&&(e=`${CURRENT_CENTURY_YEAR_CUTOFF>=parseInt(e,10)?20:19}${e}`);e.length<4;)e=`0${e}`;return e}}function tryParseMonth(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||12<a))return e}}function tryParseDay(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||31<a))return e}}function tryParseDateText(e){if(e){const r=(e=e.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===r?.length){var e=getLocaleDateFormatSeparator(),a=getLocaleDateFormatTokenPosition("yyyy"),t=getLocaleDateFormatTokenPosition("MM");for(let e=0;e<3;e++){switch(e){case a:r[e]=tryParseYear(r[e]);break;case t:r[e]=tryParseMonth(r[e]);break;default:r[e]=tryParseDay(r[e])}if(void 0===r[e])return}return`${r[0]}${e}${r[1]}${e}${r[2]}`}}}function getDateBounds(e){var{lowerBound:a,upperBound:e}=e||{};return{min:"number"==typeof a?new Date(a):void 0,max:"number"==typeof e?new Date(e):void 0}}async function getDateFnsLocale(e){const a=[];e=parseLocale(e);if(e){e.territory&&a.push(`${e.language}-${e.territory}`),a.push(e.language);for(const t of a)if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(t)){let e;try{switch(t){case"cs":e=(await import("date-fns/locale/cs")).cs;break;case"da":e=(await import("date-fns/locale/da")).da;break;case"de":e=(await import("date-fns/locale/de")).de;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).deAT;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en-US":e=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).enZA;break;case"fr":e=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).frCH;break;case"it":e=(await import("date-fns/locale/it")).it;break;case"nb":e=(await import("date-fns/locale/nb")).nb;break;case"nl":e=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":e=(await import("date-fns/locale/nn")).nn;break;case"pt":e=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).ptBR}}catch{continue}if(e?.localize)return e}}}function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const e=new Date(1999,11,31,0,0,0);return localeDateFormat=e.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}function getLocaleDateFormatSeparator(){var e;return void 0===dateFormatSeparator&&(e=/[^dMy]+/.exec(getLocaleDateFormat()),dateFormatSeparator=e?e[0]:""),dateFormatSeparator}function getLocaleDateFormatTokenPosition(e){const a=getLocaleDateFormat();var t=a.indexOf("yyyy"),r=a.indexOf("MM"),o=a.indexOf("dd");return"yyyy"===e?0===t?0:r<t&&o<t?2:1:"MM"===e?0===r?0:o<r&&t<r?2:1:0===o?0:r<o&&t<o?2:1}const coerceIntoDate=e=>{if(e instanceof Date&&isValidDate(e))return new Date(e.valueOf());if("string"==typeof e)if(/^\d+$/.test(e))e=Number(e);else{var a=tryParseDateText(e);if(a){var t=getLocaleDateFormat(),t=parse(a,t,0);if(isValidDate(t))return t}}if("number"==typeof e){e=new Date(e);if(isValidDate(e))return e}};function convertToDateRangeRef(e){let a,t,r=!1;Array.isArray(e)?(a=coerceIntoDate(e[0]),t=coerceIntoDate(e[1]),r=!0):"object"==typeof e&&(a=coerceIntoDate(e.startDate),t=coerceIntoDate(e.endDate));var o=!!a&&!!t;let n=o&&!isAfter(a,t);return r&&o&&!n&&(e=a,a=t,t=e,n=!0),o&&n?{refValueType:"daterange",startDate:a,endDate:t}:void 0}function __test__setlocaleDateFormatInCache(e){localeDateFormat=e,dateFormatSeparator=void 0}async function loadLocale(e){e=e.deriveLocale();if("inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE)return getDateFnsLocale(e)}function makeProperValue(e,a){if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const t=a.coerceIntoValue(e);if(void 0!==t&&null!==t&&isFinite(t.valueOf()))return t}}function getNewElementValue(e,a,t,r){if(null!=e&&isFinite(e.valueOf()))return{refValueType:a,format:t,display:r.format(e,Calendar.fullFormat),value:e.valueOf()}}export{areValuesEqual,isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateBounds,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,loadLocale,makeProperValue,getNewElementValue};
+import{parse,isAfter}from"date-fns";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29,SUPPORTED_DATE_FNS_LOCALES=["cs","da","de","de-AT","en-AU","en-CA","en-GB","en-IN","en-NZ","en-US","en-ZA","fr","fr-CA","fr-CH","it","nb","nl","nl-BE","nn","pt","pt-BR"];let localeDateFormat="",dateFormatSeparator;function areValuesEqual(e,a){return void 0===e&&void 0===a||null===e&&null===a||(isDateTimeRef(e)&&a&&isDateTimeRef(a)?e.display===a.display&&e.refValueType===a.refValueType&&e.value===a.value&&areFormatsEqual(e.format,a.format):!!(isDateRangeRef(e)&&a&&isDateRangeRef(a))&&(e.endDate?.valueOf()===a.endDate?.valueOf()&&e.refValueType===a.refValueType&&e.startDate?.valueOf()===a.startDate?.valueOf()))}function areFormatsEqual(e,a){return void 0===e&&void 0===a||("string"==typeof e&&"string"==typeof a?e===a:"object"==typeof e&&"object"==typeof a&&(null===e||null===a?e===a:e.locale===a.locale&&e.timezone===a.timezone))}function isValidDate(e){return e instanceof Date&&!isNaN(e.valueOf())}function tryParseYear(e){if(/^\d+$/.test(e)&&!(4<e.length)){for(2===e.length&&(e=`${CURRENT_CENTURY_YEAR_CUTOFF>=parseInt(e,10)?20:19}${e}`);e.length<4;)e=`0${e}`;return e}}function tryParseMonth(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||12<a))return e}}function tryParseDay(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||31<a))return e}}function tryParseDateText(e){if(e){const r=(e=e.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===r?.length){var e=getLocaleDateFormatSeparator(),a=getLocaleDateFormatTokenPosition("yyyy"),t=getLocaleDateFormatTokenPosition("MM");for(let e=0;e<3;e++){switch(e){case a:r[e]=tryParseYear(r[e]);break;case t:r[e]=tryParseMonth(r[e]);break;default:r[e]=tryParseDay(r[e])}if(void 0===r[e])return}return`${r[0]}${e}${r[1]}${e}${r[2]}`}}}function getDateBounds(e){var{lowerBound:a,upperBound:e}=e||{};return{min:"number"==typeof a?new Date(a):void 0,max:"number"==typeof e?new Date(e):void 0}}async function getDateFnsLocale(e){const a=[];e=parseLocale(e);if(e){e.territory&&a.push(`${e.language}-${e.territory}`),a.push(e.language);for(const t of a)if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(t)){let e;try{switch(t){case"cs":e=(await import("date-fns/locale/cs")).cs;break;case"da":e=(await import("date-fns/locale/da")).da;break;case"de":e=(await import("date-fns/locale/de")).de;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).deAT;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en-US":e=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).enZA;break;case"fr":e=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).frCH;break;case"it":e=(await import("date-fns/locale/it")).it;break;case"nb":e=(await import("date-fns/locale/nb")).nb;break;case"nl":e=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":e=(await import("date-fns/locale/nn")).nn;break;case"pt":e=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).ptBR}}catch{continue}if(e?.localize)return e}}}function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const e=new Date(1999,11,31,0,0,0);return localeDateFormat=e.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}function getLocaleDateFormatSeparator(){var e;return void 0===dateFormatSeparator&&(e=/[^dMy]+/.exec(getLocaleDateFormat()),dateFormatSeparator=e?e[0]:""),dateFormatSeparator}function getLocaleDateFormatTokenPosition(e){const a=getLocaleDateFormat();var t=a.indexOf("yyyy"),r=a.indexOf("MM"),o=a.indexOf("dd");return"yyyy"===e?0===t?0:r<t&&o<t?2:1:"MM"===e?0===r?0:o<r&&t<r?2:1:0===o?0:r<o&&t<o?2:1}const coerceIntoDate=e=>{if(e instanceof Date&&isValidDate(e))return new Date(e.valueOf());if("string"==typeof e)if(/^\d+$/.test(e))e=Number(e);else{var a=tryParseDateText(e);if(a){var t=getLocaleDateFormat(),t=parse(a,t,0);if(isValidDate(t))return t}}if("number"==typeof e){e=new Date(e);if(isValidDate(e))return e}};function convertToDateRangeRef(e){let a,t,r=!1;Array.isArray(e)?(a=coerceIntoDate(e[0]),t=coerceIntoDate(e[1]),r=!0):"object"==typeof e&&(a=coerceIntoDate(e.startDate),t=coerceIntoDate(e.endDate));var o=!!a&&!!t;let n=o&&!isAfter(a,t);return r&&o&&!n&&(e=a,a=t,t=e,n=!0),o&&n?{refValueType:"daterange",startDate:a,endDate:t}:void 0}function __test__setlocaleDateFormatInCache(e){localeDateFormat=e,dateFormatSeparator=void 0}async function getLocale(e){return getDateFnsLocale(e.deriveLocale())}function makeProperValue(e,a){if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const t=a.coerceIntoValue(e);if(void 0!==t&&null!==t&&isFinite(t.valueOf()))return t}}function getNewElementValue(e,a,t,r){if(null!=e&&isFinite(e.valueOf()))return{refValueType:a,format:t,display:r.format(e,Calendar.fullFormat),value:e.valueOf()}}export{SUPPORTED_DATE_FNS_LOCALES,areValuesEqual,isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateBounds,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,getLocale,makeProperValue,getNewElementValue};

package/forms/hostContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const HostContext: import("react").Context<FormHostMembers>;
+export {};

package/forms/hostContext.js

@@ -0,0 +1 @@
+import{createContext}from"react";const HostContext=createContext({}),HostProvider=HostContext.Provider;export default HostContext;export{HostProvider};

package/forms/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { EventArgumentTypes, EventValueTypes } from "./FormComponent";
 import type { defs } from "./FormHost";
-import type { FormatOptions } from "./numberFormatter";
 export { Orientation, TitleLocation } from "./constants";
 export type { Text } from "./elements/types";
 /**
@@ -19,15 +18,7 @@ export interface ITranslateTextFunction {
 /** @public */
 export interface FormElementProps<TValue = undefined> extends FormElementSettableProps<TValue>, FormElementGettableProps {
     className?: string;
-    /** Coerces a number from a value. */
-    coerceNumber: (value: string) => number;
-    /**
-     * Derives the current locale set by the host application (or default if undefined) will be returned.
-     */
-    deriveLocale: () => string;
     enabled: boolean;
-    /** Formats a value into a string. */
-    formatNumber: (value: number, options?: FormatOptions) => string;
     id: string;
     name: string | undefined;
     /**
@@ -39,16 +30,6 @@ export interface FormElementProps<TValue = undefined> extends FormElementSettabl
      * @param eventValue The value of the event.
      */
     raiseEvent: <K extends keyof EventValueTypes>(eventName: K, eventValue: EventValueTypes[K], argument?: EventArgumentTypes[K], item?: string, cancellationToken?: PromiseLike<void>) => void;
-    /** Renders the focus. */
-    renderFocus: (target: Node, name?: string) => boolean;
-    /** Renders a component's state. */
-    renderState(name: string, type: string, state?: {}): boolean;
-    /**
-     * Renders form text as a string.
-     * If `text` is a reference to a language string (e.g. `"@my-language-string"`), it is translated.
-     * If `text` is a `MarkdownRef`, it is converted to plain text.
-     */
-    renderText: (text: defs.Text | undefined) => string;
     /**
      * Set a property on an item in the element.
      * @param property The name of the property to set.
@@ -70,8 +51,6 @@ export interface FormElementProps<TValue = undefined> extends FormElementSettabl
      * @param value The new value to set.
      */
     setValue: (value: this["value"], event?: EventOptions) => void;
-    /** Translates the supplied value. */
-    translateText: ITranslateTextFunction;
 }
 /**
  * Properties of a Form Element that can be read via the component's properties.

package/forms/numberUtilities.d.ts

@@ -129,7 +129,7 @@ export declare function getMarks(maximum: number, minimum: number, step: number,
  * @param decimalPlaces The number of decimal places to round to.
  * @returns An accurately rounded value.
  */
-export declare function roundAccurately(value: number, decimalPlaces: number): number;
+export declare function preciseRound(value: number, decimalPlaces: number): number;
 /**
  * Details about a symbol that is used to represent currency or percentage.
  */

package/forms/numberUtilities.js

@@ -1 +1 @@
-import{format}from"./numberFormatter.js";import{isNumberRef,isNumeric}from"./utils.js";const defaultNumberFormatConfiguration={lowerBound:{default:0},precision:{default:3,minimum:-20,maximum:20},step:{default:1},upperBound:{default:100}};function getNumberConstraints(e,r){var{lowerBound:t,upperBound:n}=e=e||{};let{precision:i,step:u}=e;var o,r=getNumberFormatConfiguration(r);let a=isNumeric(t)?t:r.lowerBound.default,m=isNumeric(n)?n:r.upperBound.default;return void 0!==m&&void 0!==a&&m<=a&&(a=r.lowerBound.default,m=r.upperBound.default),i="number"!=typeof i||Number.isNaN(i)?r.precision.default:i,void 0!==r.precision.minimum&&(i=Math.max(i,r.precision.minimum)),void 0!==r.precision.maximum&&(i=Math.min(i,r.precision.maximum)),i<0?(o=Math.pow(10,-1*i),void 0!==u&&u%o==0||(u=o)):(u=isNumeric(u)&&0<u?u:r.step.default,void 0!==m&&void 0!==a&&(u=Math.min(u,m-a),o=(m-a)/u,Number.isInteger(o)||(r=countDecimalsInValue(u),m=roundAccurately(a+Math.floor(o)*u,r)))),{maximum:m,minimum:a,step:u}}const intlNumberFormat=new Intl.NumberFormat("en-US",{minimumFractionDigits:0,maximumFractionDigits:20,useGrouping:!1}),customDecimals=/\.([#\d]+)/;function countDecimalsInCustomFormat(e){if(e){e=customDecimals.exec(e);if(e)return e[1].length}return 0}function countDecimalsInValue(e){if(Number.isInteger(e))return 0;const r=intlNumberFormat.format(e);e=r.indexOf(".");return-1===e?0:r.length-e-1}function sanitizePrecision(e,r,t){t=getNumberFormatConfiguration(t);void 0===e&&(e=t.precision.default);r=countDecimalsInValue(r);return Math.max(r,e)}function getNumberFormatConfiguration(e){const r={lowerBound:{...defaultNumberFormatConfiguration.lowerBound},precision:{...defaultNumberFormatConfiguration.precision},step:{...defaultNumberFormatConfiguration.step},upperBound:{...defaultNumberFormatConfiguration.upperBound}};if(void 0!==e)for(const t in e)r[t]=Object.assign(r[t]||{},e[t]);return r}function enforceConstraints(e,r){var t,n,{maximum:i,minimum:u,step:r}=r;return void 0!==u?(t=(e-u)/r,Number.isInteger(t)||(n=countDecimalsInValue(r),e=roundAccurately(u+Math.round(t)*r,n))):void 0!==i&&(t=(i-e)/r,Number.isInteger(t)||(n=countDecimalsInValue(r),e=roundAccurately(i-Math.round(t)*r,n))),void 0!==u&&e<u&&(e=u),e=void 0!==i&&i<e?i:e}function getNumberSliderValues(e,r,t=!1){let n=[],i=NaN,u=NaN;if("string"==typeof e){const a=e.split("\n").filter(e=>""!==e);e=a.map(e=>(e=>(e=(e||"").trim(),isNumeric(e)?parseFloat(e):NaN))(e))}else"number"==typeof e?i=e:"number"==typeof e?.numeric&&(i=e.numeric);if(Array.isArray(e)&&1<=e.length&&(i=e[0],u=e[1]),void 0===i||isNaN(i)||(i=enforceConstraints(i,r),void 0===u||isNaN(u)?t&&n.push(i):(u=enforceConstraints(u,r),n.push(i,u))),n.sort((e,r)=>e-r),n.length===(t?1:2))return n;var o=r.maximum,e=r.minimum;return t?[enforceConstraints((e+o)/2,r)]:[e,o]}function areValuesEqual(e,r){if(void 0===e&&void 0===r||null===e&&null===r)return!0;var t,n;return!(!isNumberRef(e)||!isNumberRef(r))&&(e.display===r.display&&e.refValueType===r.refValueType&&e.numeric===r.numeric&&(t=e.format,n=r.format,void 0===t&&void 0===n||void 0!==t&&void 0!==n&&(t.currency===n.currency&&t.customDisplayFormat===n.customDisplayFormat&&t.displayFormat===n.displayFormat&&t.lowerBound===n.lowerBound&&t.precision===n.precision&&t.step===n.step&&t.upperBound===n.upperBound)))}function getMarks(r,t,n,e,i,u){if(i&&u){const o=[{value:t,label:format(e,t)}];for(let e=t+n;e<r;e+=n)o.push({value:e});return o.push({value:r,label:format(e,r)}),o}return i&&!u?[{value:t,label:format(e,t)},{value:r,label:format(e,r)}]:u}function roundAccurately(e,r){return Number(Math.round(Number(e+`e${r}`))+`e-${r}`)}function getCurrencySymbolInfo(e,r){const t=new Intl.NumberFormat(e,{style:"currency",currency:r,minimumFractionDigits:0,maximumFractionDigits:0,useGrouping:!1}),n=t.formatToParts(0);e=n.filter(e=>"currency"===e.type)[0],r=n.filter(e=>"integer"===e.type)[0];if(e&&r)return{position:n.indexOf(e)<n.indexOf(r)?"start":"end",symbol:e.value}}function getPercentSymbolInfo(e){const r=new Intl.NumberFormat(e,{style:"percent",minimumFractionDigits:0,maximumFractionDigits:0,useGrouping:!1}),t=r.formatToParts(0);var n=t.filter(e=>"percentSign"===e.type)[0],e=t.filter(e=>"integer"===e.type)[0];if(n&&e)return{position:t.indexOf(n)<t.indexOf(e)?"start":"end",symbol:n.value}}export{defaultNumberFormatConfiguration,getNumberConstraints,countDecimalsInCustomFormat,countDecimalsInValue,sanitizePrecision,getNumberFormatConfiguration,enforceConstraints,getNumberSliderValues,areValuesEqual,getMarks,roundAccurately,getCurrencySymbolInfo,getPercentSymbolInfo};
+import{format}from"./numberFormatter.js";import{isNumberRef,isNumeric}from"./utils.js";const defaultNumberFormatConfiguration={lowerBound:{default:0},precision:{default:3,minimum:-20,maximum:20},step:{default:1},upperBound:{default:100}};function getNumberConstraints(e,r){var{lowerBound:i,upperBound:t}=e=e||{};let{precision:n,step:o}=e;var u,r=getNumberFormatConfiguration(r);let a=isNumeric(i)?i:r.lowerBound.default,m=isNumeric(t)?t:r.upperBound.default;return void 0!==m&&void 0!==a&&m<=a&&(a=r.lowerBound.default,m=r.upperBound.default),n="number"!=typeof n||Number.isNaN(n)?r.precision.default:n,void 0!==r.precision.minimum&&(n=Math.max(n,r.precision.minimum)),void 0!==r.precision.maximum&&(n=Math.min(n,r.precision.maximum)),n<0?(u=Math.pow(10,-1*n),void 0!==o&&o%u==0||(o=u)):(o=isNumeric(o)&&0<o?o:r.step.default,void 0!==m&&void 0!==a&&(o=Math.min(o,m-a),u=preciseDivide(m-a,o),Number.isInteger(u)||(r=countDecimalsInValue(o),m=preciseRound(a+Math.floor(u)*o,r)))),{maximum:m,minimum:a,step:o}}const intlNumberFormat=new Intl.NumberFormat("en-US",{minimumFractionDigits:0,maximumFractionDigits:20,useGrouping:!1}),customDecimals=/\.([#\d]+)/;function countDecimalsInCustomFormat(e){if(e){e=customDecimals.exec(e);if(e)return e[1].length}return 0}function countDecimalsInValue(e){if(Number.isInteger(e))return 0;const r=intlNumberFormat.format(e);e=r.indexOf(".");return-1===e?0:r.length-e-1}function sanitizePrecision(e,r,i){i=getNumberFormatConfiguration(i);void 0===e&&(e=i.precision.default);r=countDecimalsInValue(r);return Math.max(r,e)}function getNumberFormatConfiguration(e){const r={lowerBound:{...defaultNumberFormatConfiguration.lowerBound},precision:{...defaultNumberFormatConfiguration.precision},step:{...defaultNumberFormatConfiguration.step},upperBound:{...defaultNumberFormatConfiguration.upperBound}};if(void 0!==e)for(const i in e)r[i]=Object.assign(r[i]||{},e[i]);return r}function preciseDivide(e,r){var i=countDecimalsInValue(e),t=countDecimalsInValue(r);if(0<i||0<t){t=Math.max(i,t),t=Math.pow(10,t);return e*t/(r*t)}return e/r}function enforceConstraints(e,r){var i,t,{maximum:n,minimum:o,step:r}=r;return void 0!==o?(i=preciseDivide(e-o,r),Number.isInteger(i)||(t=countDecimalsInValue(r),e=preciseRound(o+Math.round(i)*r,t))):void 0!==n&&(i=preciseDivide(n-e,r),Number.isInteger(i)||(t=countDecimalsInValue(r),e=preciseRound(n-Math.round(i)*r,t))),void 0!==o&&e<o&&(e=o),e=void 0!==n&&n<e?n:e}function getNumberSliderValues(e,r,i=!1){let t=[],n=NaN,o=NaN;if("string"==typeof e){const a=e.split("\n").filter(e=>""!==e);e=a.map(e=>(e=>(e=(e||"").trim(),isNumeric(e)?parseFloat(e):NaN))(e))}else"number"==typeof e?n=e:"number"==typeof e?.numeric&&(n=e.numeric);if(Array.isArray(e)&&1<=e.length&&(n=e[0],o=e[1]),void 0===n||isNaN(n)||(n=enforceConstraints(n,r),void 0===o||isNaN(o)?i&&t.push(n):(o=enforceConstraints(o,r),t.push(n,o))),t.sort((e,r)=>e-r),t.length===(i?1:2))return t;var u=r.maximum,e=r.minimum;return i?[enforceConstraints((e+u)/2,r)]:[e,u]}function areValuesEqual(e,r){if(void 0===e&&void 0===r||null===e&&null===r)return!0;var i,t;return!(!isNumberRef(e)||!isNumberRef(r))&&(e.display===r.display&&e.refValueType===r.refValueType&&e.numeric===r.numeric&&(i=e.format,t=r.format,void 0===i&&void 0===t||void 0!==i&&void 0!==t&&(i.currency===t.currency&&i.customDisplayFormat===t.customDisplayFormat&&i.displayFormat===t.displayFormat&&i.lowerBound===t.lowerBound&&i.precision===t.precision&&i.step===t.step&&i.upperBound===t.upperBound)))}function getMarks(r,i,t,e,n,o){if(n&&o){const u=[{value:i,label:format(e,i)}];for(let e=i+t;e<r;e+=t)u.push({value:e});return u.push({value:r,label:format(e,r)}),u}return n&&!o?[{value:i,label:format(e,i)},{value:r,label:format(e,r)}]:o}function preciseRound(e,r){return Number(Math.round(Number(e+`e${r}`))+`e-${r}`)}function getCurrencySymbolInfo(e,r){const i=new Intl.NumberFormat(e,{style:"currency",currency:r,minimumFractionDigits:0,maximumFractionDigits:0,useGrouping:!1}),t=i.formatToParts(0);e=t.filter(e=>"currency"===e.type)[0],r=t.filter(e=>"integer"===e.type)[0];if(e&&r)return{position:t.indexOf(e)<t.indexOf(r)?"start":"end",symbol:e.value}}function getPercentSymbolInfo(e){const r=new Intl.NumberFormat(e,{style:"percent",minimumFractionDigits:0,maximumFractionDigits:0,useGrouping:!1}),i=r.formatToParts(0);var t=i.filter(e=>"percentSign"===e.type)[0],e=i.filter(e=>"integer"===e.type)[0];if(t&&e)return{position:i.indexOf(t)<i.indexOf(e)?"start":"end",symbol:t.value}}export{defaultNumberFormatConfiguration,getNumberConstraints,countDecimalsInCustomFormat,countDecimalsInValue,sanitizePrecision,getNumberFormatConfiguration,enforceConstraints,getNumberSliderValues,areValuesEqual,getMarks,preciseRound,getCurrencySymbolInfo,getPercentSymbolInfo};

package/forms/presenter.js

@@ -1 +1 @@
-import{createElement}from"react";import*as React from"react";import{createRoot}from"react-dom/client";import{FormComponent}from"./FormComponent.js";import Custom from"./components/Custom.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";import{renderComponent,renderNone as renderers_renderNone}from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}const rootMap=new WeakMap;function refreshForm(e,r){rootMap.has(r)||rootMap.set(r,createRoot(r)),rootMap.get(r).render(React.createElement(FormComponent,{host:e,type:"form",children:[]}))}function releaseForm(e){rootMap.has(e)&&(rootMap.get(e).unmount(),rootMap.delete(e))}function render(e){if(e instanceof FormComponent){var r=e.props.type;if(r!==FormComponentTypes.ELEMENT&&r!==FormComponentTypes.SECTION)return renderComponent(e);var o=e.prepare();if(null==o)return;r=o.type;if("string"!=typeof r)return;if(r===FormElementTypes.CUSTOM)return createElement(Custom,getElementProps(e,o));if(e.elementRegistration)return createElement(e.elementRegistration.component,getElementProps(e,o))}}function renderNone(e){if(e instanceof FormComponent)return renderers_renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};
+import{createElement}from"react";import*as React from"react";import{createRoot}from"react-dom/client";import{FormComponent}from"./FormComponent.js";import Custom from"./components/Custom.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";import{HostProvider}from"./hostContext.js";import{renderComponent,renderNone as renderers_renderNone}from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}const rootMap=new WeakMap;function refreshForm(e,r){rootMap.has(r)||rootMap.set(r,createRoot(r)),rootMap.get(r).render(React.createElement(HostProvider,{value:e},React.createElement(FormComponent,{host:e,type:"form",children:[]})))}function releaseForm(e){rootMap.has(e)&&(rootMap.get(e).unmount(),rootMap.delete(e))}function render(e){if(e instanceof FormComponent){var r=e.props.type;if(r!==FormComponentTypes.ELEMENT&&r!==FormComponentTypes.SECTION)return renderComponent(e);var o=e.prepare();if(null==o)return;r=o.type;if("string"!=typeof r)return;if(r===FormElementTypes.CUSTOM)return createElement(Custom,getElementProps(e,o));if(e.elementRegistration)return createElement(e.elementRegistration.component,getElementProps(e,o))}}function renderNone(e){if(e instanceof FormComponent)return renderers_renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};

package/forms/utils.d.ts

@@ -107,6 +107,11 @@ export declare function inspectItems(current: string | undefined, items: Record<
 export declare function makeSafeClassName(elementName: string | undefined): string;
 /** @public */
 export declare function makeUniqueId(elementName: string | undefined): string;
+export declare function getAccessibleDescriptionId(elementId: string): string;
+export declare function getDescriptionId(elementId: string): string;
+export declare function getErrorId(elementId: string): string;
+export declare function getInputId(elementId: string): string;
+export declare function getLabelId(elementId: string): string;
 export declare function addClass(element: HTMLElement, name: string): void;
 export declare function removeClass(element: HTMLElement, name: string): void;
 export declare function setClass(element: HTMLElement, name: string, exists: boolean): void;
@@ -125,6 +130,7 @@ export declare function isAccordionSection(element?: defs.Element): boolean;
  * @param element The element to be inspected.
  */
 export declare function isCollapsibleSection(element?: defs.Element): boolean;
+export declare function isFieldsetSection(element?: defs.Element): boolean;
 export declare function isMutuallyExclusiveSection(element?: defs.Element): boolean;
 /**
  * Returns `true` if the element has a `type` of `"Section"` and a `format` of `"tab-section"`, `false` otherwise.
@@ -183,3 +189,10 @@ export declare function getElementProps(component: FormComponent, element: defs.
  * @returns The key corresponding to the item, or undefined if no match was found.
  */
 export declare function getItemId(item: defs.Item | null | undefined, items: Record<string, defs.Item>): string | undefined;
+/**
+ * This custom hook returns the locale code for the current locale.
+ * It is expected that a component that uses this hook has a `@vertigis/react-ui/LocalizationProvider` somewhere in its ancestory.
+ * @returns The locale code for the current locale.
+ * @throws If no locale was found.
+ */
+export declare function useLocale(): string;

package/forms/utils.js

@@ -1 +1 @@
-import{FormElementTypes}from"./constants.js";import*as text from"./textUtilities.js";const DEFAULT_DEBOUNCE_DELAY=300,DEFAULT_THROTTLE_DELAY=100;let next=0,seed=(new Date).valueOf();const guid="5DDC9A38-AAAB-44C1-AD87-415160F43D75";function makeId(){return 2147483648<=next&&(seed=(new Date).valueOf(),next=0),`${guid}:${seed}:${next++}`}function indexOf(e,t){if(null!=e){e=e.index;return"number"==typeof e?e:t}}function compareIndex(e,t){return compareNumber(e.index,t.index)}function compareNumber(e,t){return e<t?-1:t<e?1:0}function sortAndFilter(e,t){void 0===t&&(t=indexOf);const n={};if("object"!=typeof e||null===e)return n;let i=0;const r=[];for(const a in e){var s=e[a],o=t(s,i++);"number"==typeof o&&r.push({key:a,index:o,item:s})}for(const c of r.sort(compareIndex))n[c.key]=c.item;return n}function inspectItems(e,t,n){let i;var r=sortAndFilter(t,function(e,t){if(null!=e&&!1!==e.visible){e=e.index;return"number"==typeof e?e:t}});if(void 0===(e=null==e||void 0===r[e]?void 0:e)&&null!=n)for(const s in r){if(r[s].value===n){e=s;break}e=void 0}return n=void 0!==e?(i=r[e].label,r[e].value):i=void 0,{current:e,items:r,label:i,value:n}}function stripClassName(e,t){return e.className.split(" ").filter(e=>0<e.length&&e!==t).join(" ")}function makeSafeClassName(e){return`gcx-forms-${e?.replace(/[\W]/g,"")||"element"}`}let idSuffix=0;function makeUniqueId(e){return`${makeSafeClassName(e)}-${++idSuffix}`}function addClass(e,t){void 0!==e.classList?e.classList.add(t):e.className=stripClassName(e,t)+" "+t}function removeClass(e,t){void 0!==e.classList?e.classList.remove(t):e.className=stripClassName(e,t)}function setClass(e,t,n){(n?addClass:removeClass)(e,t)}function isObjectType(e,t){return"object"==typeof e&&null!==e&&(!Array.isArray(e)&&e.refValueType===t)}function isSection(e){return e?.type===FormElementTypes.SECTION}function isAccordionSection(e){return isSection(e)&&"accordion-section"===e.format}function isCollapsibleSection(e){return isSection(e)&&"collapsible-section"===e.format}function isMutuallyExclusiveSection(e){return isAccordionSection(e)||isTabSection(e)}function isTabSection(e){return isSection(e)&&"tab-section"===e.format}function isBoolean(e){return"boolean"==typeof e}function isNumber(e){return"number"==typeof e}function isString(e){return"string"==typeof e}function isDataRef(e){return isObjectType(e,"data")}function isDateRangeRef(e){return isObjectType(e,"daterange")}function isDateTimeRef(e){return isObjectType(e,"date")||isObjectType(e,"time")||isObjectType(e,"datetime")}function isFilesRef(e){return isObjectType(e,"files")}function isScanRef(e){return isObjectType(e,"scan")}function isGeometryRef(e){return isObjectType(e,"geometry")}function isItemsRef(e){return isObjectType(e,"items")}function isNumberRef(e){return isObjectType(e,"number")}function isSketchRef(e){return isObjectType(e,"sketch")}function sanitizeGeometryRef(e){if(isGeometryRef(e)){var t=e.geometry;if(Array.isArray(t)&&0<t.length)switch(e.format){case"point":case"polygon":case"polyline":case"polygon-freehand":case"polyline-freehand":case"extent":case"line":return e}}}function createGeometryRef(e){return{refValueType:"geometry",format:e,geometry:[]}}function debounce(t,n=DEFAULT_DEBOUNCE_DELAY){let i;return function(){const e=()=>{i=void 0,t.apply(this,arguments)};return clearTimeout(i),i=setTimeout(e,n),{now:()=>{i&&(clearTimeout(i),e())},cancel:()=>{i&&(clearTimeout(i),i=void 0)}}}}function throttle(n,i=DEFAULT_THROTTLE_DELAY){let r,s;return function(){var e=Date.now(),t=()=>{s=void 0,r=Date.now(),n.apply(this,arguments)};r&&e<r+i?(clearTimeout(s),s=setTimeout(t,i)):t()}}function isNumeric(e){return!isNaN(parseFloat(e))&&isFinite(e)}const HostMap=new WeakMap;function getElementProps(e,t){var{enabled:n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a}=e;const c=e.props["host"];let u=HostMap.get(c);u||(u={coerceNumber:c.coerceNumber.bind(c),deriveLocale:c.deriveLocale.bind(c),displayDialog:c.displayDialog.bind(c),formatNumber:c.formatNumber.bind(c),hasInvalidChild:c.hasInvalidChild.bind(c),refs:c.refs,renderFocus:c.renderFocus.bind(c),renderState:c.renderState.bind(c),renderText:c.renderText.bind(c),translateText:c.translateText.bind(c),updateMutuallyExclusiveSections:c.updateMutuallyExclusiveSections.bind(c)},HostMap.set(c,u));var{format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T}=t;return{...t,enabled:!!n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a,format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T,coerceNumber:u.coerceNumber,displayDialog:u.displayDialog,deriveLocale:u.deriveLocale,formatNumber:u.formatNumber,hasInvalidChild:u.hasInvalidChild,refs:u.refs,renderFocus:u.renderFocus,renderState:u.renderState,renderText:u.renderText,translateText:u.translateText,updateMutuallyExclusiveSections:u.updateMutuallyExclusiveSections,element:t,name:e.props.name,component:e}}function getItemId(e,t){if(e)for(const n in t)if(t[n]===e)return n}export{text,makeId,sortAndFilter,inspectItems,makeSafeClassName,makeUniqueId,addClass,removeClass,setClass,isSection,isAccordionSection,isCollapsibleSection,isMutuallyExclusiveSection,isTabSection,isBoolean,isNumber,isString,isDataRef,isDateRangeRef,isDateTimeRef,isFilesRef,isScanRef,isGeometryRef,isItemsRef,isNumberRef,isSketchRef,sanitizeGeometryRef,createGeometryRef,debounce,throttle,isNumeric,getElementProps,getItemId};
+import{MuiPickersAdapterContext}from"@vertigis/react-ui/LocalizationProvider";import{useContext}from"react";import{FormElementTypes}from"./constants.js";import*as text from"./textUtilities.js";const DEFAULT_DEBOUNCE_DELAY=300,DEFAULT_THROTTLE_DELAY=100;let next=0,seed=(new Date).valueOf();const guid="5DDC9A38-AAAB-44C1-AD87-415160F43D75";function makeId(){return 2147483648<=next&&(seed=(new Date).valueOf(),next=0),`${guid}:${seed}:${next++}`}function indexOf(e,t){if(null!=e){e=e.index;return"number"==typeof e?e:t}}function compareIndex(e,t){return compareNumber(e.index,t.index)}function compareNumber(e,t){return e<t?-1:t<e?1:0}function sortAndFilter(e,t){void 0===t&&(t=indexOf);const i={};if("object"!=typeof e||null===e)return i;let n=0;const r=[];for(const a in e){var o=e[a],s=t(o,n++);"number"==typeof s&&r.push({key:a,index:s,item:o})}for(const c of r.sort(compareIndex))i[c.key]=c.item;return i}function inspectItems(e,t,i){let n;var r=sortAndFilter(t,function(e,t){if(null!=e&&!1!==e.visible){e=e.index;return"number"==typeof e?e:t}});if(void 0===(e=null==e||void 0===r[e]?void 0:e)&&null!=i)for(const o in r){if(r[o].value===i){e=o;break}e=void 0}return i=void 0!==e?(n=r[e].label,r[e].value):n=void 0,{current:e,items:r,label:n,value:i}}function stripClassName(e,t){return e.className.split(" ").filter(e=>0<e.length&&e!==t).join(" ")}function makeSafeClassName(e){return`gcx-forms-${e?.replace(/[\W]/g,"")||"element"}`}let idSuffix=0;function makeUniqueId(e){return`${makeSafeClassName(e)}-${++idSuffix}`}function addSuffix(e,t){return`${e}-${t}`}function getAccessibleDescriptionId(e){return addSuffix(e,"accessible-description")}function getDescriptionId(e){return addSuffix(e,"description")}function getErrorId(e){return addSuffix(e,"error")}function getInputId(e){return addSuffix(e,"input")}function getLabelId(e){return addSuffix(e,"label")}function addClass(e,t){void 0!==e.classList?e.classList.add(t):e.className=stripClassName(e,t)+" "+t}function removeClass(e,t){void 0!==e.classList?e.classList.remove(t):e.className=stripClassName(e,t)}function setClass(e,t,i){(i?addClass:removeClass)(e,t)}function isObjectType(e,t){return"object"==typeof e&&null!==e&&(!Array.isArray(e)&&e.refValueType===t)}function isSection(e){return e?.type===FormElementTypes.SECTION}function isAccordionSection(e){return isSection(e)&&"accordion-section"===e.format}function isCollapsibleSection(e){return isSection(e)&&"collapsible-section"===e.format}function isFieldsetSection(e){return isSection(e)&&"fieldset-section"===e.format}function isMutuallyExclusiveSection(e){return isAccordionSection(e)||isTabSection(e)}function isTabSection(e){return isSection(e)&&"tab-section"===e.format}function isBoolean(e){return"boolean"==typeof e}function isNumber(e){return"number"==typeof e}function isString(e){return"string"==typeof e}function isDataRef(e){return isObjectType(e,"data")}function isDateRangeRef(e){return isObjectType(e,"daterange")}function isDateTimeRef(e){return isObjectType(e,"date")||isObjectType(e,"time")||isObjectType(e,"datetime")}function isFilesRef(e){return isObjectType(e,"files")}function isScanRef(e){return isObjectType(e,"scan")}function isGeometryRef(e){return isObjectType(e,"geometry")}function isItemsRef(e){return isObjectType(e,"items")}function isNumberRef(e){return isObjectType(e,"number")}function isSketchRef(e){return isObjectType(e,"sketch")}function sanitizeGeometryRef(e){if(isGeometryRef(e)){var t=e.geometry;if(Array.isArray(t)&&0<t.length)switch(e.format){case"point":case"polygon":case"polyline":case"polygon-freehand":case"polyline-freehand":case"extent":case"line":return e}}}function createGeometryRef(e){return{refValueType:"geometry",format:e,geometry:[]}}function debounce(t,i=DEFAULT_DEBOUNCE_DELAY){let n;return function(){const e=()=>{n=void 0,t.apply(this,arguments)};return clearTimeout(n),n=setTimeout(e,i),{now:()=>{n&&(clearTimeout(n),e())},cancel:()=>{n&&(clearTimeout(n),n=void 0)}}}}function throttle(i,n=DEFAULT_THROTTLE_DELAY){let r,o;return function(){var e=Date.now(),t=()=>{o=void 0,r=Date.now(),i.apply(this,arguments)};r&&e<r+n?(clearTimeout(o),o=setTimeout(t,n)):t()}}function isNumeric(e){return!isNaN(parseFloat(e))&&isFinite(e)}function getElementProps(e,t){var{enabled:i,id:n,raiseEvent:r,setItemProperty:o,setProperty:s,setValue:a}=e,{format:c,manualEntry:u,showMinMaxLabels:f,showTickMarks:l,size:m,type:d,value:p,wrap:y}=t;return{...t,enabled:!!i,id:n,raiseEvent:r,setItemProperty:o,setProperty:s,setValue:a,format:c,manualEntry:u,showMinMaxLabels:f,showTickMarks:l,size:m,type:d,value:p,wrap:y,element:t,name:e.props.name,component:e}}function getItemId(e,t){if(e)for(const i in t)if(t[i]===e)return i}function useLocale(){var e=useContext(MuiPickersAdapterContext)?.utils?.locale?.code;if(!e)throw new Error("Failed to detect locale. Ensure there is a LocalizationProvider in the ancestry of the component that is using this hook.");return e}export{text,makeId,sortAndFilter,inspectItems,makeSafeClassName,makeUniqueId,getAccessibleDescriptionId,getDescriptionId,getErrorId,getInputId,getLabelId,addClass,removeClass,setClass,isSection,isAccordionSection,isCollapsibleSection,isFieldsetSection,isMutuallyExclusiveSection,isTabSection,isBoolean,isNumber,isString,isDataRef,isDateRangeRef,isDateTimeRef,isFilesRef,isScanRef,isGeometryRef,isItemsRef,isNumberRef,isSketchRef,sanitizeGeometryRef,createGeometryRef,debounce,throttle,isNumeric,getElementProps,getItemId,useLocale};

package/libs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "5.40.0+19";
+export declare const VERSION = "5.41.0+34";

package/libs/version.js

@@ -1 +1 @@
-const VERSION="5.40.0+19";export{VERSION};
+const VERSION="5.41.0+34";export{VERSION};

package/licensing/LicenseChecker.js

@@ -1 +1 @@
-import{validate}from"@vertigis-internal/licensing";import*as React from"react";import{createRoot}from"react-dom/client";import Watermark from"./Watermark.js";const workflowSkuCode="GCXWFL";let div,root;function show(){void 0===div&&(div=document.createElement("div"),root=createRoot(div)),div.parentNode!==document.body&&(null!==div.parentNode&&div.parentNode.removeChild(div),document.body.appendChild(div));root.render(React.createElement(Watermark,{hide:()=>{null!==div?.parentNode&&div.parentNode.removeChild(div)},message:"VertiGIS Studio Workflow must be licensed for use in production applications."}))}async function check(o,t){if("localhost"!==location.hostname&&"127.0.0.1"!==location.hostname){t=t?`-${workflowSkuCode}-${t}-`:`${workflowSkuCode}-`;if(void 0===div&&(div=document.createElement("div"),root=createRoot(div)),null===div.parentNode){let e=o?.licenseInfo?.licenseeId;o=o?.licenseInfo?.licenseUrl;o&&!e&&(e="a");try{const i=await validate({sku:t,orgId:e,url:o});if(!i?.isValid){if(i&&!i.isEval&&i.expires)if(((new Date).getTime()-i.expires.getTime())/864e5<60)return;show()}}catch{show()}}}}export{check};
+import{validate}from"@vertigis/licensing";import*as React from"react";import{createRoot}from"react-dom/client";import Watermark from"./Watermark.js";const workflowSkuCode="GCXWFL";let div,root;function show(){void 0===div&&(div=document.createElement("div"),root=createRoot(div)),div.parentNode!==document.body&&(null!==div.parentNode&&div.parentNode.removeChild(div),document.body.appendChild(div));root.render(React.createElement(Watermark,{hide:()=>{null!==div?.parentNode&&div.parentNode.removeChild(div)},message:"VertiGIS Studio Workflow must be licensed for use in production applications."}))}async function check(o,t){if("localhost"!==location.hostname&&"127.0.0.1"!==location.hostname){t=t?`-${workflowSkuCode}-${t}-`:`${workflowSkuCode}-`;if(void 0===div&&(div=document.createElement("div"),root=createRoot(div)),null===div.parentNode){let e=o?.licenseInfo?.licenseeId;o=o?.licenseInfo?.licenseUrl;o&&!e&&(e="a");try{const i=await validate({sku:t,orgId:e,url:o});if(!i?.isValid){if(i&&!i.isEval&&i.expires)if(((new Date).getTime()-i.expires.getTime())/864e5<60)return;show()}}catch{show()}}}}export{check};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/workflow",
-  "version": "5.40.0",
+  "version": "5.41.0",
   "author": "VertiGIS",
   "dependencies": {
     "@date-fns/utc": "^1.2.0",
@@ -13,7 +13,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "@arcgis/core": "4.28.10",
+    "@arcgis/core": "4.29.10",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@swc/core": "^1.3.95",
@@ -22,8 +22,8 @@
     "@types/jest": "^29.2.3",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
-    "@vertigis-internal/licensing": "^5.0.102868",
-    "@vertigis/react-ui": "16.0.2",
+    "@vertigis/licensing": "5.1.1",
+    "@vertigis/react-ui": "16.6.0",
     "cross-env": "7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -37,7 +37,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@arcgis/core": ">= 4.28.10  < 5.0.0",
+    "@arcgis/core": ">= 4.29.0  < 5.0.0",
     "@vertigis/react-ui": ">= 16.0.0-0 < 17.0.0-0",
     "react": ">= 18 < 19",
     "react-dom": ">= 18 < 19"