@vertigis/workflow 5.40.1 → 5.42.0

package/forms/components/Section.js

@@ -1 +1 @@
-import Accordion,{accordionClasses}from"@vertigis/react-ui/Accordion";import AccordionSummary from"@vertigis/react-ui/AccordionSummary";import Box from"@vertigis/react-ui/Box";import FormLabel from"@vertigis/react-ui/FormLabel";import ChevronDown from"@vertigis/react-ui/icons/ChevronDown";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect}from"react";import{defs}from"../FormHost.js";import{renderAccessibleDescription,renderDescription,renderError}from"../common.js";import{isAccordionSection,isCollapsibleSection,isTabSection,makeSafeClassName,makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="WorkflowSection",sectionClasses={root:`${PREFIX}-root`,basicSection:`${PREFIX}-basicSection`,fieldSetSection:`${PREFIX}-fieldSetSection`,tabSection:`${PREFIX}-tabSetSection`,title:`${PREFIX}-title`,unstyledSection:`${PREFIX}-unstyledSection`,description:`${PREFIX}-description`},StyledAccordion=styled(Accordion)(({theme:{spacing:e}})=>({[`.${accordionClasses.region}`]:{padding:e(1),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:e(.5)}}})),StyledTabPage=styled(Box)(({theme:{spacing:e}})=>({padding:e(1)})),StyledSection=styled(Box)(({theme:{palette:e,spacing:t,typography:{pxToRem:o}}})=>({marginBottom:t(4),marginTop:t(4),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:t(.5)},[`&.${sectionClasses.basicSection}`]:{borderLeft:`6px solid ${e.primary[500]}`,paddingLeft:t(1),paddingRight:t(1)},[`&.${sectionClasses.fieldSetSection}`]:{position:"relative",border:`3px solid ${e.primary[500]}`,borderLeft:"none",borderRight:"none",paddingTop:t(3),paddingBottom:t(2),[`.${sectionClasses.title}`]:{backgroundColor:e.background.default,position:"absolute",top:o(-22),left:0,padding:0,"& span":{paddingRight:t(1)}}},[`&.${sectionClasses.unstyledSection}`]:{marginBottom:0,marginTop:0}})),Section=({accessibleDescription:e,className:t,collapsed:o,component:i,description:s,element:a,enabled:n,error:r,hasInvalidChild:c,name:l,refs:d,renderFocus:m,setProperty:p,translateText:S,updateMutuallyExclusiveSections:b})=>{let f;null!=a&&a.format&&(f=a.format),f=void 0!==f&&null!==f?f:defs.DEFAULT_SECTION_FORMAT;const g=isAccordionSection(a);var u=isTabSection(a);const y=g||u||isCollapsibleSection(a);var C=`${makeUniqueId(l)}-input`;useEffect(()=>(d[l]=i,()=>{d[l]=void 0}),[]);var E,R,$=(E=a,R=C,React.createElement(FormLabel,{className:sectionClasses.title,error:y&&(c(E)||!!r),id:`${R}-label`,component:"h6"},React.createElement(Markdown,{inline:!0,text:E.title,translateText:S}))),n=renderDescription(s,C,n,S,sectionClasses.description),e=renderAccessibleDescription(e,s,C,S),s=renderError(r,S),C={"aria-labelledby":$?.props?.id,"aria-details":n?.props?.id,"aria-describedby":e?.props?.id},s=[n,e,s,i.props.children],a=clsx(t,a.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===f,[sectionClasses.fieldSetSection]:"fieldset-section"===f,[sectionClasses.tabSection]:"tab-section"===f,[sectionClasses.unstyledSection]:"unstyled-section"===f,[makeSafeClassName(l)]:!!l,[makeSafeClassName(a.styleName)]:!!a.styleName});return u?React.createElement(StyledTabPage,{"aria-labelledby":`simple-tab-${l}`,className:a,hidden:o,id:`simple-tabpanel-${l}`,role:"tabpanel"},...s):y?React.createElement(StyledAccordion,{className:a,expanded:!0!==o,onChange:(e,t)=>{g&&t?b(l):p("collapsed",!t)},...C},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:e=>{null!==e&&o&&m(e,l)}},$),...s):React.createElement(StyledSection,{className:a,component:"section",...C},$,React.createElement(Box,null,...s))};export default Section;export{sectionClasses};
+import Accordion,{accordionClasses}from"@vertigis/react-ui/Accordion";import AccordionSummary from"@vertigis/react-ui/AccordionSummary";import Box from"@vertigis/react-ui/Box";import FormLabel from"@vertigis/react-ui/FormLabel";import ChevronDown from"@vertigis/react-ui/icons/ChevronDown";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect}from"react";import{defs}from"../FormHost.js";import HostContext from"../hostContext.js";import{getLabelId,isAccordionSection,isCollapsibleSection,isFieldsetSection,isTabSection,makeSafeClassName,makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";import{renderAccessibleDescription,renderDescription,renderError,useFocusCallback}from"./common.js";const PREFIX="WorkflowSection",sectionClasses={root:`${PREFIX}-root`,basicSection:`${PREFIX}-basicSection`,fieldSetSection:`${PREFIX}-fieldSetSection`,tabSection:`${PREFIX}-tabSetSection`,title:`${PREFIX}-title`,unstyledSection:`${PREFIX}-unstyledSection`,description:`${PREFIX}-description`},StyledAccordion=styled(Accordion)(({theme:{spacing:e}})=>({[`.${accordionClasses.region}`]:{padding:e(1),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:e(.5)}}})),StyledTabPage=styled(Box)(({theme:{spacing:e}})=>({padding:e(1)})),StyledSection=styled(Box)(({theme:{palette:e,spacing:t,typography:{pxToRem:o}}})=>({margin:`${t(4)} 0 ${t(4)} 0`,[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:t(.5)},[`&.${sectionClasses.basicSection}`]:{borderLeft:`6px solid ${e.primary[500]}`,paddingLeft:t(1),paddingRight:t(1)},[`&.${sectionClasses.fieldSetSection}`]:{position:"relative",border:`3px solid ${e.primary[500]}`,borderLeft:"none",borderRight:"none",padding:`${t(3)} 0 ${t(2)} 0`,[`.${sectionClasses.title}`]:{backgroundColor:e.background.default,position:"absolute",top:o(-22),left:0,padding:0,"& span":{paddingRight:t(1)}}},[`&.${sectionClasses.unstyledSection}`]:{marginBottom:0,marginTop:0}})),Section=({accessibleDescription:e,className:t,collapsed:o,component:i,description:s,element:n,enabled:r,error:a,name:c,setProperty:l})=>{const d=useContext(HostContext);let m;null!=n&&n.format&&(m=n.format),m=void 0!==m&&null!==m?m:defs.DEFAULT_SECTION_FORMAT;const p=isAccordionSection(n);var S=isFieldsetSection(n),f=isTabSection(n);const b=p||f||isCollapsibleSection(n);var u=`${makeUniqueId(c)}-input`,g=useFocusCallback(r,c,d);useEffect(()=>(d.refs[c]=i,()=>{d.refs[c]=void 0}),[]);var C,y,E,$=(C=n,y=u,E=S?"legend":void 0,React.createElement(FormLabel,{className:sectionClasses.title,error:b&&(d.hasInvalidChild(C)||!!a),id:getLabelId(y),component:E||"h6"},React.createElement(Markdown,{inline:!0,text:C.title}))),r=renderDescription(s,u,r,sectionClasses.description),e=renderAccessibleDescription(e,s,u,d),s=renderError(a),u={"aria-labelledby":$?.props?.id,"aria-details":r?.props?.id,"aria-describedby":e?.props?.id},s=[r,e,s,i.props.children],n=clsx(t,n.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===m,[sectionClasses.fieldSetSection]:"fieldset-section"===m,[sectionClasses.tabSection]:"tab-section"===m,[sectionClasses.unstyledSection]:"unstyled-section"===m,[makeSafeClassName(c)]:!!c,[makeSafeClassName(n.styleName)]:!!n.styleName});if(f)return React.createElement(StyledTabPage,{"aria-labelledby":`simple-tab-${c}`,className:n,hidden:o,id:`simple-tabpanel-${c}`,role:"tabpanel"},...s);if(b)return React.createElement(StyledAccordion,{className:n,expanded:!0!==o,onChange:(e,t)=>{p&&t?d.updateMutuallyExclusiveSections(c):l("collapsed",!t)},...u},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:g},$),...s);{const i=S?"fieldset":"section";return React.createElement(StyledSection,{className:n,component:i,...u},$,React.createElement(Box,null,...s))}};export default Section;export{sectionClasses};

package/forms/components/Signature.d.ts

@@ -8,5 +8,5 @@ export declare const signatureClasses: {
 /**
  * The component for the "Signature" Form Element.
  */
-declare const Signature: ({ className, component, displayDialog, element, enabled, label, name, prompt, renderFocus, renderText, require, setValue, size, title, tooltip: elementTooltip, translateText, value, }: FormElementProps<defs.SignatureRef | undefined>) => React.JSX.Element;
+declare const Signature: ({ className, element, enabled, label, name, prompt, require, setValue, size, title, tooltip: elementTooltip, value, }: FormElementProps<defs.SignatureRef | undefined>) => React.JSX.Element;
 export default Signature;

package/forms/components/Signature.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import SignatureIcon from"@vertigis/react-ui/icons/Signature";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{renderTitle}from"../common.js";import{signatureConfiguration}from"../elements/Signature.js";import{makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";import SignatureDialog from"./SignatureDialog.js";const PREFIX="Signature",signatureClasses={button:`${PREFIX}-button`,image:`${PREFIX}-image`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${signatureClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${signatureClasses.image}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",flexShrink:1,minWidth:0}}})),Signature=({className:e,component:t,displayDialog:a,element:i,enabled:n,label:r,name:o,prompt:l,renderFocus:s,renderText:m,require:c,setValue:u,size:g,title:d,tooltip:p,translateText:f,value:h})=>{const[x,E]=useState(),[C,R]=useState(500),w=m(p),b=m("@common-clear");useEffect(()=>{let e=signatureConfiguration.width.default;"number"!=typeof g||isNaN(g)?"object"!=typeof g||void 0===g.width||isNaN(g.width)||(e=g.width):e=g,e=Math.max(e,signatureConfiguration.width.minimum),e=Math.min(e,signatureConfiguration.width.maximum),R(e)},[g]),useEffect(()=>{E(h?.dataUrl)},[h]);const S=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${o}.png`,{type:t.type});u({refValueType:"signature",dataUrl:e,file:t})}else u(void 0);E(e)};return React.createElement(Root,{className:e,component:t,element:i},x?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:x,alt:w}),React.createElement(IconButton,{"aria-label":b,disabled:!n,onClick:()=>S(void 0),title:b},React.createElement(Trash,null))):null,x?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{disabled:!n,onClick:async()=>{const e=Math.round(.4*C);await a(a=>React.createElement(SignatureDialog,{cancelCaption:m("@common-cancel"),clearCaption:b,doneCaption:m("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{inline:!0,text:r,translateText:f}),onClose:(e,t)=>{e&&S(t),a()},title:renderTitle(makeUniqueId(o+"-dialog"),c,d,f),undoCaption:m("@common-undo"),width:C}),Dialog)},ref:e=>{null===e||e.disabled||s(e,o)},startIcon:React.createElement(SignatureIcon,null),title:w,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:l||"",translateText:f}))))};export default Signature;export{signatureClasses};
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import SignatureIcon from"@vertigis/react-ui/icons/Signature";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useState}from"react";import{signatureConfiguration}from"../elements/Signature.js";import HostContext from"../hostContext.js";import{makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import SignatureDialog from"./SignatureDialog.js";import{renderTitle,useFocusCallback}from"./common.js";const PREFIX="Signature",signatureClasses={button:`${PREFIX}-button`,image:`${PREFIX}-image`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${signatureClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${signatureClasses.image}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",flexShrink:1,minWidth:0}}})),Signature=({className:e,element:t,enabled:a,label:i,name:r,prompt:o,require:n,setValue:s,size:l,title:m,tooltip:c,value:u})=>{const g=useContext(HostContext),[d,f]=useState(),[p,x]=useState(500),C=g.renderText(c),h=useFocusCallback(a,r,g),E=g.renderText("@common-clear");useEffect(()=>{let e=signatureConfiguration.width.default;"number"!=typeof l||isNaN(l)?"object"!=typeof l||void 0===l.width||isNaN(l.width)||(e=l.width):e=l,e=Math.max(e,signatureConfiguration.width.minimum),e=Math.min(e,signatureConfiguration.width.maximum),x(e)},[l]),useEffect(()=>{f(u?.dataUrl)},[u]);const b=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${r}.png`,{type:t.type});s({refValueType:"signature",dataUrl:e,file:t})}else s(void 0);f(e)};return React.createElement(StyledFormElement,{className:e,element:t,name:r},d?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:d,alt:C}),React.createElement(IconButton,{"aria-label":E,disabled:!a,onClick:()=>b(void 0),title:E},React.createElement(Trash,null))):null,d?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{disabled:!a,onClick:async()=>{const e=Math.round(.4*p);await g.displayDialog(a=>React.createElement(SignatureDialog,{cancelCaption:g.renderText("@common-cancel"),clearCaption:E,doneCaption:g.renderText("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{inline:!0,text:i}),host:g,onClose:(e,t)=>{e&&b(t),a()},title:renderTitle(makeUniqueId(r+"-dialog"),n,m),undoCaption:g.renderText("@common-undo"),width:p}),Dialog)},ref:h,startIcon:React.createElement(SignatureIcon,null),title:C,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:o||""}))))};export default Signature;export{signatureClasses};

package/forms/components/SignatureDialog.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { FormHostMembers } from "../hostContext";
 export declare const signatureDialogClasses: {
     canvas: string;
     canvasAnnotations: string;
@@ -13,10 +14,11 @@ export interface StyledDialogProps {
     format: string;
     helperText: React.JSX.Element | null;
     height: number;
+    host: FormHostMembers;
     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, title, undoCaption, width, onClose, }: StyledDialogProps) => React.JSX.Element;
+declare const SignatureDialog: ({ cancelCaption, clearCaption, doneCaption, format, height, helperText, host, title, undoCaption, width, onClose, }: StyledDialogProps) => React.JSX.Element;
 export default SignatureDialog;

package/forms/components/SignatureDialog.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 IconButton from"@vertigis/react-ui/IconButton";import Skeleton from"@vertigis/react-ui/Skeleton";import Stack from"@vertigis/react-ui/Stack";import Typography from"@vertigis/react-ui/Typography";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{lazy,Suspense}from"react";const SignaturePadWrapper=lazy(()=>import("react-signature-pad-wrapper")),DialogPrefix="SignatureDialog",signatureDialogClasses={canvas:`${DialogPrefix}-canvas`,canvasAnnotations:`${DialogPrefix}-canvas-annotations`,container:`${DialogPrefix}-container`,mark:`${DialogPrefix}-mark`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${signatureDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e,typography:t}})=>({[`.${signatureDialogClasses.container}`]:{backgroundColor:"#eee",filter:"drop-shadow(2px 2px 2px grey)",[`.${signatureDialogClasses.canvas}`]:{position:"relative",zIndex:1},[`.${signatureDialogClasses.canvasAnnotations}`]:{alignItems:"center",display:"flex",flexDirection:"column",marginTop:t.pxToRem(-64),paddingLeft:e(1),paddingRight:e(1),position:"relative",zIndex:0,[`.${signatureDialogClasses.mark}`]:{fontSize:"large",borderBottom:"solid 1px black",width:"100%"}}}})),NonItalicCaption=styled(Typography)(()=>({fontStyle:"inherit"})),SignatureDialog=({cancelCaption:e,clearCaption:t,doneCaption:a,format:i,height:o,helperText:r,title:n,undoCaption:l,width:s,onClose:c})=>{let g,m,p;return React.createElement(React.Fragment,null,React.createElement(StyledDialogTitle,null,React.createElement("div",{className:signatureDialogClasses.titleText},n),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":l,onClick:async()=>{if(g){const e=g.toData();e.pop(),g.fromData(e)}},title:l},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":t,onClick:async()=>{m&&m.clear()},title:t},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,{className:signatureDialogClasses.container,sx:{height:`${o}px`,width:`${s}px`}},React.createElement(Suspense,{fallback:React.createElement(Skeleton,{variant:"rectangular",width:s,height:o})},React.createElement(SignaturePadWrapper,{canvasProps:{className:signatureDialogClasses.canvas},ref:e=>{g=e||void 0,m=g?.instance||void 0,p=g?.canvas?.current||void 0,p&&(p.oncontextmenu=()=>!1,p.height=o,p.width=s)}}),React.createElement(Box,{className:signatureDialogClasses.canvasAnnotations},React.createElement(Typography,{"aria-hidden":!0,className:signatureDialogClasses.mark},"X"),React.createElement(NonItalicCaption,{variant:"caption"},r))))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{let e;m&&!m.isEmpty()&&(e=m.toDataURL(i)),c(!0,e)},variant:"contained"},a),React.createElement(Button,{color:"inherit",onClick:()=>{c(!1,void 0)},variant:"outlined"},e)))};export default SignatureDialog;export{signatureDialogClasses};
+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 IconButton from"@vertigis/react-ui/IconButton";import Skeleton from"@vertigis/react-ui/Skeleton";import Stack from"@vertigis/react-ui/Stack";import Typography from"@vertigis/react-ui/Typography";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{lazy,Suspense}from"react";import{HostProvider}from"../hostContext.js";const SignaturePadWrapper=lazy(()=>import("react-signature-pad-wrapper")),DialogPrefix="SignatureDialog",signatureDialogClasses={canvas:`${DialogPrefix}-canvas`,canvasAnnotations:`${DialogPrefix}-canvas-annotations`,container:`${DialogPrefix}-container`,mark:`${DialogPrefix}-mark`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${signatureDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e,typography:t}})=>({[`.${signatureDialogClasses.container}`]:{backgroundColor:"#eee",filter:"drop-shadow(2px 2px 2px grey)",[`.${signatureDialogClasses.canvas}`]:{position:"relative",zIndex:1},[`.${signatureDialogClasses.canvasAnnotations}`]:{alignItems:"center",display:"flex",flexDirection:"column",marginTop:t.pxToRem(-64),paddingLeft:e(1),paddingRight:e(1),position:"relative",zIndex:0,[`.${signatureDialogClasses.mark}`]:{fontSize:"large",borderBottom:"solid 1px black",width:"100%"}}}})),NonItalicCaption=styled(Typography)(()=>({fontStyle:"inherit"})),SignatureDialog=({cancelCaption:e,clearCaption:t,doneCaption:a,format:i,height:o,helperText:r,host:n,title:l,undoCaption:s,width:c,onClose:g})=>{let m,p,u;return React.createElement(HostProvider,{value:n},React.createElement(StyledDialogTitle,null,React.createElement("div",{className:signatureDialogClasses.titleText},l),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":s,onClick:async()=>{if(m){const e=m.toData();e.pop(),m.fromData(e)}},title:s},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":t,onClick:async()=>{p&&p.clear()},title:t},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,{className:signatureDialogClasses.container,sx:{height:`${o}px`,width:`${c}px`}},React.createElement(Suspense,{fallback:React.createElement(Skeleton,{variant:"rectangular",width:c,height:o})},React.createElement(SignaturePadWrapper,{canvasProps:{className:signatureDialogClasses.canvas},ref:e=>{m=e||void 0,p=m?.instance||void 0,u=m?.canvas?.current||void 0,u&&(u.oncontextmenu=()=>!1,u.height=o,u.width=c)}}),React.createElement(Box,{className:signatureDialogClasses.canvasAnnotations},React.createElement(Typography,{"aria-hidden":!0,className:signatureDialogClasses.mark},"X"),React.createElement(NonItalicCaption,{variant:"caption"},r))))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{let e;p&&!p.isEmpty()&&(e=p.toDataURL(i)),g(!0,e)},variant:"contained"},a),React.createElement(Button,{color:"inherit",onClick:()=>{g(!1,void 0)},variant:"outlined"},e)))};export default SignatureDialog;export{signatureDialogClasses};

package/forms/components/Sketch.d.ts

@@ -9,5 +9,5 @@ export declare const sketchClasses: {
 /**
  * The component for the "Sketch" Form Element.
  */
-declare const Sketch: ({ className, component, displayDialog, element, enabled, name, prompt, renderFocus, renderText, require, setValue, size, source, title, tooltip: elementTooltip, translateText, value, }: FormElementProps<defs.SketchRef | undefined>) => React.JSX.Element;
+declare const Sketch: ({ className, element, enabled, name, prompt, require, setValue, size, source, title, tooltip: elementTooltip, value, }: FormElementProps<defs.SketchRef | undefined>) => React.JSX.Element;
 export default Sketch;

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:e=>d(!!e),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

@@ -1,8 +1,12 @@
 import { Calendar } from "./Calendar";
 import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType, FormatRef } from "./FormDefinition";
 import type { defs } from "./FormHost";
-import type { FormPresenterHost } from "./FormPresenterHost";
+import type { PickersLocaleText } from "@mui/x-date-pickers";
 import type { Locale } from "date-fns";
+/**
+ * A list of the locales we currently bundle 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.
@@ -63,6 +67,7 @@ export declare function getDateBounds(format: FormatRef | undefined): {
  * @param language The target language to retrieve the locale for.
  */
 export declare function getDateFnsLocale(language: string): Promise<Locale | undefined>;
+export declare function getLocaleText(language: string): Promise<Partial<PickersLocaleText<any>> | undefined>;
 /**
  * Gets the date format based on the current browser locale. This function will always return four digit year tokens
  * and two digit month and day tokens. The browser locale however, will determine their placement and the separator.
@@ -98,15 +103,15 @@ 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>;
-type Partial = void | boolean | number | string | {
+export declare function getLocale(language: string): Promise<Locale | undefined>;
+type PartialValue = void | boolean | number | string | {
     [name: string]: any;
-    format?: Partial | void;
+    format?: PartialValue | void;
     locale?: string;
     timezone?: string;
     refValueType?: string;
     value?: number;
 };
-export declare function makeProperValue(value: number | string | Partial, calendar: Calendar): Date | undefined;
+export declare function makeProperValue(value: number | string | PartialValue, calendar: Calendar): Date | undefined;
 export declare function getNewElementValue(date: Date | undefined | null, refValueType: DateTimeType, format: DateTimeFormat, calendar: Calendar): DateTimeRef | undefined;
 export {};

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{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}}function getTargetLanguages(e){e=parseLocale(e);if(!e)return[DEFAULT_LOCALE];const a=[];return e.territory&&a.push(`${e.language}-${e.territory}`),a.push(e.language),a.push(DEFAULT_LOCALE),a}async function getDateFnsLocale(e){for(const a of getTargetLanguages(e))if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(a)){let e;try{switch(a){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}}async function getLocaleText(e){for(const a of getTargetLanguages(e))if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(a)){let e;try{switch(a){case"cs":e=(await import("@mui/x-date-pickers/locales/csCZ")).csCZ;break;case"da":e=(await import("@mui/x-date-pickers/locales/daDK")).daDK;break;case"de":case"de-AT":e=(await import("@mui/x-date-pickers/locales/deDE")).deDE;break;case"en-AU":case"en-CA":case"en-GB":case"en-IN":case"en-NZ":case"en-US":case"en-ZA":case"nn":e=(await import("@mui/x-date-pickers/locales/enUS")).enUS;break;case"fr":case"fr-CA":case"fr-CH":e=(await import("@mui/x-date-pickers/locales/frFR")).frFR;break;case"it":e=(await import("@mui/x-date-pickers/locales/itIT")).itIT;break;case"nb":e=(await import("@mui/x-date-pickers/locales/nbNO")).nbNO;break;case"nl":case"nl-BE":e=(await import("@mui/x-date-pickers/locales/nlNL")).nlNL;break;case"pt":case"pt-BR":e=(await import("@mui/x-date-pickers/locales/ptBR")).ptBR}}catch{continue}return e?e.components.MuiLocalizationProvider.defaultProps.localeText:{}}}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)}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,getLocaleText,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,getLocale,makeProperValue,getNewElementValue};

package/forms/hostContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const HostContext: import("react").Context<FormHostMembers>;
+export declare const HostProvider: import("react").Provider<FormHostMembers>;
+export default HostContext;

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};