@vertigis/workflow 5.35.1 → 5.36.0

package/forms/components/DateTimePicker.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
+import { defs } from "../FormHost";
 /**
  * The component for the "Date Time Picker" Form Element.
  */
-declare const DateTimePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const DateTimePicker: ({ className, component, deriveLocale, element, enabled, error, name, prompt, renderFocus, renderText, tooltip: elementTooltip, value: elementValue, setProperty, setValue: setElementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => JSX.Element;
 export default DateTimePicker;

package/forms/components/DateTimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import{clockClasses}from"@vertigis/react-ui/ClockPicker";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{hasErrorChanged,isInvalidDate,makeProperFormat,makeProperValue,updateElementValue}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const StylableDateTimePicker=e=>{const{PopperProps:t={},className:r,...a}=e;return React.createElement(BaseDateTimePicker,{PopperProps:{...t,className:clsx(t.className,r)},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(!1),[l,s]=useState(!1),[i,m]=useState(null),c=useRef(),n=useRef(!0),{host:u,name:p}=t.props;var d=useFocusCallback(t);const f=u.renderText(r.tooltip),k=makeProperFormat(r.value,r.format),P=Calendar.useNative(),v="datetime";useEffect(()=>{var e=makeProperValue(r.value,P);updateElementValue(r,e,v,k,P),m(e||null)},[r.value]),useEffect(()=>{n.current?n.current=!1:l||a||(isInvalidDate(i)?F({status:"invalid"}):(F(),updateElementValue(r,i,v,k,P)&&u.post("changed",{name:p,value:r.value})))},[l,a]);const F=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())},T=`${makeUniqueId(p)}-input`,E=u.renderText(r.prompt);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:T},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},c.current),React.createElement(StyledDateTimePicker,{disabled:!t.enabled,key:"date-picker",inputRef:d,onChange:e=>{m(e)},onOpen:()=>{s(!0)},onClose:()=>{s(!1)},renderInput:e=>(c.current=e.inputProps?.placeholder,e.error=!!r.error,e.inputProps={...e.inputProps,id:T,onBlur:()=>{o(!1)},onFocus:()=>{o(!0)},placeholder:E||e.inputProps?.placeholder,title:f},React.createElement(FormLabelTextField,{...e})),value:i}))};export default DateTimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import{clockClasses}from"@vertigis/react-ui/ClockPicker";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,getNewElementValue,hasErrorChanged,isInvalidDate,makeProperValue}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const StylableDateTimePicker=e=>{const{PopperProps:t={},className:r,...a}=e;return React.createElement(BaseDateTimePicker,{PopperProps:{...t,className:clsx(t.className,r)},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,component:t,deriveLocale:r,element:a,enabled:o,error:l,name:s,prompt:i,renderFocus:m,renderText:c,tooltip:n,value:u,setProperty:p,setValue:d})=>{const[f,k]=useState(!1),[P,E]=useState(!1),[v,F]=useState(null),T=useRef(),C=useRef(!0);m=useFocusCallback(o,s,m);const b=c(n),g={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},D=Calendar.useNative(),x="datetime";useEffect(()=>{var e=makeProperValue(u,D),t=getNewElementValue(e,x,g,D);areValuesEqual(u,t)||d(t,!1),F(e||null)},[u]),useEffect(()=>{var e;C.current?C.current=!1:P||f||(isInvalidDate(v)?R({status:"invalid"}):(R(),e=getNewElementValue(v,x,g,D),areValuesEqual(u,e)||d(e)))},[P,f]);const R=e=>{hasErrorChanged(l,e)&&p("error",e)},V=`${makeUniqueId(s)}-input`,h=c(i);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:V},l&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},T.current),React.createElement(StyledDateTimePicker,{disabled:!o,key:"date-picker",inputRef:m,onChange:e=>{F(e)},onOpen:()=>{E(!0)},onClose:()=>{E(!1)},renderInput:e=>(T.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:V,onBlur:()=>{k(!1)},onFocus:()=>{k(!0)},placeholder:h||e.inputProps?.placeholder,title:b},React.createElement(FormLabelTextField,{...e})),value:v}))};export default DateTimePicker;

package/forms/components/DropDownList.js

@@ -1 +1 @@
-import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{makeSafeClassName,makeUniqueId,sortItems}from"../utils.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,component:a,element:r})=>{const{host:o,name:n}=a.props;var t=`${makeUniqueId(n)}-input`;const m=sortItems(r);var l=a.enabled,s=o.renderText(r.tooltip);return React.createElement(FormElement,{className:e,component:a,element:r,inputId:t},React.createElement(NativeSelect,{disabled:!l,inputProps:{id:t},inputRef:e=>renderFocus(e,n,o),onChange:e=>{var t=e.currentTarget.value,e=m[t].value;r.current=t,r.value=e,a.forceUpdate(),o.post("changed",{name:n,item:t,value:e})},title:s,value:r.current||DEFAULT_VALUE},void 0===r.current&&React.createElement("option",{key:"none",value:DEFAULT_VALUE,disabled:!0},o.renderText(r.prompt)),Object.keys(m).map(e=>{var t=m[e],a=o.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:o.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;
+import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,component:a,element:r})=>{const{host:n,name:l}=a.props;var t=`${makeUniqueId(l)}-input`,o=inspectItems(r.current,r.items,r.value);const m=o.items;r.current=o.current,r.label=o.label,r.value=o.value;var s=a.enabled,o=n.renderText(r.tooltip);return React.createElement(FormElement,{className:e,component:a,element:r,inputId:t},React.createElement(NativeSelect,{disabled:!s,inputProps:{id:t},inputRef:e=>renderFocus(e,l,n),onChange:e=>{var t=e.currentTarget.value,e=m[t].value;r.current=t,r.value=e,a.forceUpdate(),n.post("changed",{name:l,item:t,value:e})},title:o,value:r.current||DEFAULT_VALUE},void 0===r.current&&React.createElement("option",{key:"none",value:DEFAULT_VALUE,disabled:!0},n.renderText(r.prompt)),Object.keys(m).map(e=>{var t=m[e],a=n.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:n.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;

package/forms/components/FilePicker.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{isFilesRef}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="FilePicker",filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`},Root=styled(FormElement)(({theme:{palette:e,spacing:t}})=>({[`.${filePickerClasses.list}`]:{marginBottom:t(1),marginTop:t(1),[`.${filePickerClasses.file}`]:{alignItems:"center",display:"flex",gap:t(1),[`.${filePickerClasses.label}`]:{border:`1px solid ${e.grey[200]}`,flexGrow:1,fontStyle:"italic",lineHeight:1,overflow:"hidden",padding:t(1),textOverflow:"ellipsis",whiteSpace:"nowrap"}}}})),FilePicker=({className:e,component:i,element:r})=>{const{host:a,name:t}=i.props;var l=r.size;let s=r.value,o=5,n;"number"==typeof l&&(o=1<l?Math.ceil(l):1),s&&(isFilesRef(s)&&Array.isArray(s.files)||(r.value=s=void 0));var c=a.renderText(r.tooltip);let m=i.enabled;const f=[];if(void 0!==s){m=i.enabled&&s.files.length<o;var p=a.renderText("@file-picker-remove-item-label");for(const d of s.files){var u=f.length;f.push(React.createElement(Box,{key:"$"+u,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:d.name},d.name),React.createElement(IconButton,{"aria-label":p,disabled:!i.enabled,onClick:(e=>()=>{s?.files&&1<s.files.length?s.files.splice(e,1):r.value=void 0,i.forceUpdate(),a.post("changed",{name:t,value:r.value})})(u),ref:e=>renderFocus(e,t,a),title:p},React.createElement(Trash,null))))}}f.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{color:"primary",disabled:!m,onClick:()=>{n&&(n.value="",n.click())},ref:e=>{renderFocus(e,t,a)},startIcon:React.createElement(Plus,null),title:c,variant:"outlined"},React.createElement(Markdown,{host:a,inline:!0,text:r.prompt||""}))));l=1!==o;return React.createElement(Root,{className:e,component:i,element:r},React.createElement(Stack,{className:filePickerClasses.list},f),React.createElement("input",{type:"file",style:{display:"none"},title:c,onChange:e=>(e=>{var t=e.files;if(t?.length){const l=s?.files||[];for(let e=0;e<t.length&&l.length!==o;e++)l.push(t[e]);e={refValueType:"files",files:l};r.value=e,i.forceUpdate(),a.post("changed",{name:i.props.name,value:e})}})(e.target),multiple:l,accept:r.fileTypes,ref:e=>{n=e}}))};export default FilePicker;export{filePickerClasses};
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{isFilesRef}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="FilePicker",filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`},Root=styled(FormElement)(({theme:{palette:e,spacing:t}})=>({[`.${filePickerClasses.list}`]:{marginBottom:t(1),marginTop:t(1),[`.${filePickerClasses.file}`]:{alignItems:"center",display:"flex",gap:t(1),[`.${filePickerClasses.label}`]:{border:`1px solid ${e.grey[200]}`,flexGrow:1,fontStyle:"italic",lineHeight:1,overflow:"hidden",padding:t(1),textOverflow:"ellipsis",whiteSpace:"nowrap"}}}})),FilePicker=({className:e,component:i,element:r})=>{const{host:a,name:t}=i.props;var l=r.size;let s=r.value,o=5,n;"number"==typeof l&&(o=1<l?Math.ceil(l):1),s&&(isFilesRef(s)&&Array.isArray(s.files)||(r.value=s=void 0));var c=a.renderText(r.tooltip);let m=i.enabled;const f=[];if(void 0!==s){m=i.enabled&&s.files.length<o;var p=a.renderText("@file-picker-remove-item-label");for(const d of s.files){var u=f.length;f.push(React.createElement(Box,{key:"$"+u,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:d.name},d.name),React.createElement(IconButton,{"aria-label":p,disabled:!i.enabled,onClick:(e=>()=>{s?.files&&1<s.files.length?s.files.splice(e,1):r.value=void 0,i.forceUpdate(),a.post("changed",{name:t,value:r.value})})(u),ref:e=>renderFocus(e,t,a),title:p},React.createElement(Trash,null))))}}f.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{disabled:!m,onClick:()=>{n&&(n.value="",n.click())},ref:e=>{renderFocus(e,t,a)},startIcon:React.createElement(Plus,null),title:c,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:r.prompt||"",translateText:a.translateText.bind(a)}))));l=1!==o;return React.createElement(Root,{className:e,component:i,element:r},React.createElement(Stack,{className:filePickerClasses.list},f),React.createElement("input",{type:"file",style:{display:"none"},title:c,onChange:e=>(e=>{var t=e.files;if(t?.length){const l=s?.files||[];for(let e=0;e<t.length&&l.length!==o;e++)l.push(t[e]);e={refValueType:"files",files:l};r.value=e,i.forceUpdate(),a.post("changed",{name:i.props.name,value:e})}})(e.target),multiple:l,accept:r.fileTypes,ref:e=>{n=e}}))};export default FilePicker;export{filePickerClasses};

package/forms/components/Form.js

@@ -1 +1 @@
-import AdapterDateFns from"@vertigis/react-ui/AdapterDateFns";import Box from"@vertigis/react-ui/Box";import{LicenseInfo}from"@vertigis/react-ui/LicenseInfo";import LocalizationProvider from"@vertigis/react-ui/LocalizationProvider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import{FormComponent,FormElementComponent}from"../FormComponent.js";import{loadLocale}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{sort}from"../utils.js";const PREFIX="Form",formClasses={body:`${PREFIX}-body`,footer:`${PREFIX}-footer`,formElementContent:`${PREFIX}-element-content`,formElementTitle:`${PREFIX}-element-title`,formElementWithTitleBeside:`${PREFIX}-element-with-title-beside`,header:`${PREFIX}-header`,main:`${PREFIX}-main`,root:`${PREFIX}-root`,row:`${PREFIX}-row`},Root=styled(Box)(e=>({"h1, h2, h3":{margin:0},[`.${formClasses.formElementWithTitleBeside}`]:{alignItems:"start",display:"grid",gridTemplateColumns:"1fr 2fr",[`> .${formClasses.formElementTitle}`]:{gridColumnStart:1,margin:0,overflowWrap:"anywhere"},[`> .${formClasses.formElementContent}`]:{display:"inline-flex",flexDirection:"column",gridColumnStart:2,overflow:"auto"}},[`.${formClasses.row}`]:{display:"flex",gap:"0.5em","> *":{flexGrow:1},"> .CheckBox, > .CheckGroup, > .Image, > .Number, > .RadioGroup":{flexGrow:0},[`.${formClasses.formElementWithTitleBeside}`]:{gridTemplateColumns:"1fr 1fr"}}}));LicenseInfo.setLicenseKey("dc21e4b722db0484344d94e6f3db523fT1JERVI6NjQ4MTMsRVhQSVJZPTE3MTM2Nzk1MDEyNzQsS0VZVkVSU0lPTj0x");const Form=({className:e,component:t})=>{const[o,r]=useState();useEffect(()=>{let t=!0;return loadLocale(i).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]);const i=t.props.host,n={host:i,type:"header",children:[]},a={host:i,type:"body",children:[]},l={host:i,type:"main",children:[]},m={host:i,type:"footer",children:[]},s={host:i,type:"body",children:[]},c={},d=[];function f(e){return"Section"!==e}function p(e){e=u[e];return null==e||!f(e.type)&&(!0!==e.hoisted&&!1!==e.visible)}function h(e){return e===n||e===a||e===m?`${e.type}-section`:e.name}const u=sort(t.props.host.form.elements);for(const b in u){var y,E=u[b];if(!0!==(g=E).hoisted&&(!1!==g.visible&&f(g.type)))if(!0!==E.overlay){let e=function(e){if(void 0===e)return a;if("header"===e)return n;if("footer"===e)return m;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of d)if(t.name===e)return t})(t);return void 0===o&&(o={host:i,name:t,type:"section",children:[]},d.push(o)),o}(E.section);void 0!==E.rowNumber&&(y=h(e),e=function(e,t){let o=c[t];o=o||(c[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:i,type:"row",children:[]}),r}(E.rowNumber,y)),e.children.push(React.createElement(FormElementComponent,{key:b,host:i,type:"element",name:b}))}else s.children.push(React.createElement(FormElementComponent,{key:b,host:i,type:"element",name:b}))}var g;const C=[];if(0<n.children.length&&C.push(React.createElement(FormComponent,{key:"header",...n})),0<s.children.length)C.push(React.createElement(FormComponent,{key:"main",...s}));else{R(a);let e=void 0,t=0;for(const k of d){var F=k.name;i.isAccordionSection(u[F])?p(F)&&(e?e.push(k):e=[k]):(e&&(x(e,++t),e=void 0),p(F)&&R(k))}e&&(x(e,++t),e=void 0),0<l.children.length&&C.push(React.createElement(FormComponent,{key:"main",...l}))}function v(e){if(!function(e){var t=h(e),o=c[t];if(o)for(const i of Object.keys(o).sort((e,t)=>parseInt(e)-parseInt(t))){var r,n=o[i];1<n.children.length?(r=`row-${i}`,e.children.push(React.createElement(FormComponent,{key:r,...n}))):1===n.children.length&&e.children.push(...n.children)}}(e),0<e.children.length){var t=e===a?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function R(e){e=v(e);e&&l.children.push(e)}function x(e,t){const o=[];for(const n of e){var r=v(n);r&&o.push(r)}e={children:o,host:i,name:`accordionGroup${t}`,type:"accordionGroup"};l.children.push(React.createElement(FormComponent,{key:`accordionGroup${t}`,...e}))}return 0<m.children.length&&C.push(React.createElement(FormComponent,{key:"footer",...m})),React.createElement(Root,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||i.post("clicked"))},ref:function(e){i.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{start:i.renderText("@date-range-picker-start-text"),end:i.renderText("@date-range-picker-end-text"),cancelButtonLabel:i.renderText("@common-cancel"),clearButtonLabel:i.renderText("@common-clear"),okButtonLabel:i.renderText("@common-ok"),todayButtonLabel:i.renderText("@common-today")}},C))};export default Form;export{formClasses};
+import AdapterDateFns from"@vertigis/react-ui/AdapterDateFns";import Box from"@vertigis/react-ui/Box";import{LicenseInfo}from"@vertigis/react-ui/LicenseInfo";import LocalizationProvider from"@vertigis/react-ui/LocalizationProvider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import{FormComponent,FormElementComponent}from"../FormComponent.js";import{FormElementTypes}from"../constants.js";import{loadLocale}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{sortAndFilter}from"../utils.js";const PREFIX="Form",formClasses={body:`${PREFIX}-body`,footer:`${PREFIX}-footer`,formElementContent:`${PREFIX}-element-content`,formElementTitle:`${PREFIX}-element-title`,formElementWithTitleBeside:`${PREFIX}-element-with-title-beside`,header:`${PREFIX}-header`,main:`${PREFIX}-main`,root:`${PREFIX}-root`,row:`${PREFIX}-row`},Root=styled(Box)(e=>({"h1, h2, h3":{margin:0},[`.${formClasses.formElementWithTitleBeside}`]:{alignItems:"start",display:"grid",gridTemplateColumns:"1fr 2fr",[`> .${formClasses.formElementTitle}`]:{gridColumnStart:1,margin:0,overflowWrap:"anywhere"},[`> .${formClasses.formElementContent}`]:{display:"inline-flex",flexDirection:"column",gridColumnStart:2,overflow:"auto"}},[`.${formClasses.row}`]:{display:"flex",gap:"0.5em","> *":{flexGrow:1},"> .CheckBox, > .CheckGroup, > .Image, > .Number, > .RadioGroup":{flexGrow:0},[`.${formClasses.formElementWithTitleBeside}`]:{gridTemplateColumns:"1fr 1fr"}}}));LicenseInfo.setLicenseKey("dc21e4b722db0484344d94e6f3db523fT1JERVI6NjQ4MTMsRVhQSVJZPTE3MTM2Nzk1MDEyNzQsS0VZVkVSU0lPTj0x");const Form=({className:e,component:t})=>{const[o,r]=useState();useEffect(()=>{let t=!0;return loadLocale(i).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]);const i=t.props.host,n={host:i,type:"header",children:[]},l={host:i,type:"body",children:[]},m={host:i,type:"main",children:[]},a={host:i,type:"footer",children:[]},s={host:i,type:"body",children:[]},c={},d=[];function f(e){return e!==FormElementTypes.SECTION}function p(e){e=u[e];return null==e||!f(e.type)&&(!0!==e.hoisted&&!1!==e.visible)}function h(e){return e===n||e===l||e===a?`${e.type}-section`:e.name}const u=sortAndFilter(t.props.host.form.elements);for(const T in u){var y,E=u[T];if(!0!==(F=E).hoisted&&(!1!==F.visible&&f(F.type)))if(!0!==E.overlay){let e=function(e){if(void 0===e)return l;if("header"===e)return n;if("footer"===e)return a;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of d)if(t.name===e)return t})(t);return void 0===o&&(o={host:i,name:t,type:"section",children:[]},d.push(o)),o}(E.section);void 0!==E.rowNumber&&(y=h(e),e=function(e,t){let o=c[t];o=o||(c[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:i,type:"row",children:[]}),r}(E.rowNumber,y)),e.children.push(React.createElement(FormElementComponent,{key:T,host:i,type:"element",name:T}))}else s.children.push(React.createElement(FormElementComponent,{key:T,host:i,type:"element",name:T}))}var F;const g=[];if(0<n.children.length&&g.push(React.createElement(FormComponent,{key:"header",...n})),0<s.children.length)g.push(React.createElement(FormComponent,{key:"main",...s}));else{R(l);let e=void 0,t=0;for(const b of d){var C=b.name;i.isAccordionSection(u[C])?p(C)&&(e?e.push(b):e=[b]):(e&&(x(e,++t),e=void 0),p(C)&&R(b))}e&&(x(e,++t),e=void 0),0<m.children.length&&g.push(React.createElement(FormComponent,{key:"main",...m}))}function v(e){if(!function(e){var t=h(e),o=c[t];if(o)for(const i of Object.keys(o).sort((e,t)=>parseInt(e)-parseInt(t))){var r,n=o[i];1<n.children.length?(r=`row-${i}`,e.children.push(React.createElement(FormComponent,{key:r,...n}))):1===n.children.length&&e.children.push(...n.children)}}(e),0<e.children.length){var t=e===l?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function R(e){e=v(e);e&&m.children.push(e)}function x(e,t){const o=[];for(const n of e){var r=v(n);r&&o.push(r)}e={children:o,host:i,name:`accordionGroup${t}`,type:"accordionGroup"};m.children.push(React.createElement(FormComponent,{key:`accordionGroup${t}`,...e}))}return 0<a.children.length&&g.push(React.createElement(FormComponent,{key:"footer",...a})),React.createElement(Root,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||i.post("clicked"))},ref:function(e){i.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{start:i.renderText("@date-range-picker-start-text"),end:i.renderText("@date-range-picker-end-text"),cancelButtonLabel:i.renderText("@common-cancel"),clearButtonLabel:i.renderText("@common-clear"),okButtonLabel:i.renderText("@common-ok"),todayButtonLabel:i.renderText("@common-today")}},g))};export default Form;export{formClasses};

package/forms/components/FormLabelNumberField.d.ts

@@ -1,10 +1,12 @@
-/// <reference types="react" />
 import { InputBaseProps } from "@vertigis/react-ui/InputBase";
+import * as React from "react";
 interface FormLabelNumberFieldProps {
     disabled: boolean;
+    endAdornment?: React.ReactNode;
     id?: string;
     inputProps: InputBaseProps["inputProps"];
     onChange: (value: number | undefined) => void;
+    startAdornment?: React.ReactNode;
     label: string;
     value: number;
     max: number;

package/forms/components/FormLabelNumberField.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import FormLabel from"@vertigis/react-ui/FormLabel";import NumberInput from"@vertigis/react-ui/NumberInput";import{useId}from"@vertigis/react-ui/utils/react";import*as React from"react";const FormLabelNumberField=e=>{var{disabled:r,id:t,inputProps:a,label:m,max:i,maxDecimalPlaces:o,min:l,onChange:u,value:n}=e,e=useId(t),t=`${e}-label`;return React.createElement(FormControl,{disabled:r},React.createElement(FormLabel,{htmlFor:e,id:t},m),React.createElement(NumberInput,{id:e,inputProps:a,max:i,maxDecimalPlaces:o,min:l,onChange:u,size:"small",value:n}))};export default FormLabelNumberField;
+import FormControl from"@vertigis/react-ui/FormControl";import FormLabel from"@vertigis/react-ui/FormLabel";import NumberInput from"@vertigis/react-ui/NumberInput";import{useId}from"@vertigis/react-ui/utils/react";import*as React from"react";const FormLabelNumberField=e=>{var{disabled:r,endAdornment:t,id:a,inputProps:m,label:o,max:i,maxDecimalPlaces:l,min:n,onChange:u,startAdornment:s,value:c}=e,e=useId(a),a=`${e}-label`;return React.createElement(FormControl,{disabled:r},React.createElement(FormLabel,{htmlFor:e,id:a},o),React.createElement(NumberInput,{id:e,inputProps:m,endAdornment:t,max:i,maxDecimalPlaces:l,min:n,onChange:u,size:"small",startAdornment:s,value:c}))};export default FormLabelNumberField;

package/forms/components/GeometryPicker.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import List from"@vertigis/react-ui/List";import ListItemButton from"@vertigis/react-ui/ListItemButton";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import*as React from"react";import{useState}from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{sanitizeGeometryRef,text}from"../utils.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";const GeometryPicker=({className:e,component:t,element:r})=>{const{host:i,name:n}=t.props;var o=r.size;let a=5;"number"==typeof o&&(a=1<o?Math.ceil(o):1),"number"==typeof o&&(a=1<o?Math.ceil(o):1);let l=[],c=[],s="",m=r.value=sanitizeGeometryRef(r.value);void 0!==m&&(l=m.geometry,B=r.itemLabel,Array.isArray(B)?c=B:(c=[],text.isMarkdown(B)?B.markdown&&(s=B):text.isStatus(B)?B.status&&(s=B.status):B&&(s=B)));let u=r.state;void 0!==u&&null!==u||(u=r.state=[]);const[d,p]=useState([]);const f=e=>{let t=u[e];return void 0!==t&&null!==t||(u.length<=e&&(u.length=e,u.push({})),t=u[e]),t},v=t=>()=>{1<l.length?(l.splice(t,1),u.splice(t,1),t<c.length&&c.splice(t,1)):(r.value=void 0,r.state=void 0);let e=[];for(const m of d)m<t?e.push(m):m>t&&e.push(m-1);p(e),i.post("changed",{name:n,value:m})};var h=e=>{t.enabled&&v(e)()},g=(e,t,r)=>{const o=f(e);o.focused=t,o.pending=r,i.renderState(n,"geometry",u)};let k=t.enabled;const y=[];if(void 0!==m){k=t.enabled&&m.geometry.length<a;var b=i.renderText("@geometry-picker-remove-item-label");for(const I of m.geometry){var x=y.length;f(x).content=I;var E=`checkbox-list-label-${x}`;y.push(React.createElement(GeometryPickerListItem,{deleteItem:h,disablePadding:!0,itemIndex:x,key:"$"+x,secondaryAction:React.createElement(IconButton,{"aria-label":b,className:"delete",disabled:!t.enabled,edge:"end",onClick:v(x),ref:e=>renderFocus(e,n,i),title:b},React.createElement(Trash,null)),updateHighlight:g},React.createElement(ListItemButton,{onClick:(o=>()=>{var e=d.indexOf(o);const t=[...d],r=f(o);-1===e?(r.checked=!0,t.push(o)):(r.checked=!1,t.splice(e,1)),p(t)})(x),ref:(t=>e=>{null!==e&&(e.disabled||i.renderFocus(e,n),e.checked=!!f(t).checked)})(x),selected:-1!==d.indexOf(x)},React.createElement(Markdown,{host:i,id:E,inline:!0,text:c[x]||s}))))}}const R=()=>{i.post("clicked",{name:n,value:m})};var B=i.renderText(r.tooltip);return t.enabled&&r.autoActivate&&(k&&setTimeout(()=>R()),delete r.autoActivate),React.createElement(FormElement,{className:e,component:t,element:r,ref:e=>{i.renderState(n,"geometry",null===e?void 0:u)}},React.createElement(List,null,y),React.createElement(Box,null,React.createElement(Button,{color:"primary",disabled:!k,onClick:R,ref:e=>renderFocus(e,n,i),startIcon:React.createElement(Plus,null),title:B,variant:"outlined"},React.createElement(Markdown,{host:i,inline:!0,text:r.prompt||""}))))};export default GeometryPicker;
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import List from"@vertigis/react-ui/List";import ListItemButton from"@vertigis/react-ui/ListItemButton";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import*as React from"react";import{useState}from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{sanitizeGeometryRef,text}from"../utils.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";const GeometryPicker=({className:e,component:t,element:r})=>{const{host:n,name:a}=t.props;var o=r.size;let i=5;"number"==typeof o&&(i=1<o?Math.ceil(o):1),"number"==typeof o&&(i=1<o?Math.ceil(o):1);let l=[],s=[],c="",m=r.value=sanitizeGeometryRef(r.value);void 0!==m&&(l=m.geometry,B=r.itemLabel,Array.isArray(B)?s=B:(s=[],text.isMarkdown(B)?B.markdown&&(c=B):text.isStatus(B)?B.status&&(c=B.status):B&&(c=B)));let d=r.state;void 0!==d&&null!==d||(d=r.state=[]);const[u,p]=useState([]);const f=e=>{let t=d[e];return void 0!==t&&null!==t||(d.length<=e&&(d.length=e,d.push({})),t=d[e]),t},v=t=>()=>{1<l.length?(l.splice(t,1),d.splice(t,1),t<s.length&&s.splice(t,1)):(r.value=void 0,r.state=void 0);let e=[];for(const m of u)m<t?e.push(m):m>t&&e.push(m-1);p(e),n.post("changed",{name:a,value:m})};var g=e=>{t.enabled&&v(e)()},h=(e,t,r)=>{const o=f(e);o.focused=t,o.pending=r,n.renderState(a,"geometry",d)};let k=t.enabled;const x=[];if(void 0!==m){k=t.enabled&&m.geometry.length<i;var y=n.renderText("@geometry-picker-remove-item-label");for(const I of m.geometry){var b=x.length;f(b).content=I;var E=`checkbox-list-label-${b}`;x.push(React.createElement(GeometryPickerListItem,{deleteItem:g,disablePadding:!0,itemIndex:b,key:"$"+b,secondaryAction:React.createElement(IconButton,{"aria-label":y,className:"delete",disabled:!t.enabled,edge:"end",onClick:v(b),ref:e=>renderFocus(e,a,n),title:y},React.createElement(Trash,null)),updateHighlight:h},React.createElement(ListItemButton,{onClick:(o=>()=>{var e=u.indexOf(o);const t=[...u],r=f(o);-1===e?(r.checked=!0,t.push(o)):(r.checked=!1,t.splice(e,1)),p(t)})(b),ref:(t=>e=>{null!==e&&(e.disabled||n.renderFocus(e,a),e.checked=!!f(t).checked)})(b),selected:-1!==u.indexOf(b)},React.createElement(Markdown,{id:E,inline:!0,text:s[b]||c,translateText:n.translateText.bind(n)}))))}}const R=()=>{n.post("clicked",{name:a,value:m})};var B=n.renderText(r.tooltip);return t.enabled&&r.autoActivate&&(k&&setTimeout(()=>R()),delete r.autoActivate),React.createElement(FormElement,{className:e,component:t,element:r,ref:e=>{n.renderState(a,"geometry",null===e?void 0:d)}},React.createElement(List,null,x),React.createElement(Box,null,React.createElement(Button,{disabled:!k,onClick:R,ref:e=>renderFocus(e,a,n),startIcon:React.createElement(Plus,null),title:B,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:r.prompt||"",translateText:n.translateText.bind(n)}))))};export default GeometryPicker;

package/forms/components/HorizontalRule.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
 /**
  * The component for the "Horizontal Rule" Form Element.
  */
-declare const HorizontalRule: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const HorizontalRule: ({ className, component, element }: FormElementProps) => JSX.Element;
 export default HorizontalRule;

package/forms/components/Image.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
 /**
  * The component for the "Image" Form Element.
  */
-declare const Image: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const Image: ({ className, component, element, renderText, size, tooltip: elementTooltip, value, }: FormElementProps<string>) => JSX.Element;
 export default Image;

package/forms/components/Image.js

@@ -1 +1 @@
-import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";const Root=styled(FormElement)(()=>({overflow:"hidden",img:{alignSelf:"start"}})),Image=({className:e,component:t,element:o})=>{const r=t.props["host"];let m,l;var n=o.size;"number"==typeof n&&(l=n,m=n),"object"==typeof n&&("number"==typeof n.width&&(m=n.width),"number"==typeof n.height&&(l=n.height));let a;n=o.value;"string"==typeof n&&(a=n);n=r.renderText(o.tooltip);return React.createElement(Root,{className:e,component:t,element:o},React.createElement("img",{src:a,alt:n,title:n,width:m,height:l}))};export default Image;
+import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";const Root=styled(FormElement)(()=>({overflow:"hidden",img:{alignSelf:"start"}})),Image=({className:e,component:t,element:o,renderText:m,size:r,tooltip:l,value:i})=>{let n,a;"number"==typeof r&&(a=r,n=r),"object"==typeof r&&("number"==typeof r.width&&(n=r.width),"number"==typeof r.height&&(a=r.height));let s;"string"==typeof i&&(s=i);l=m(l);return React.createElement(Root,{className:e,component:t,element:o},React.createElement("img",{src:s,alt:l,title:l,width:n,height:a}))};export default Image;

package/forms/components/ItemPicker.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import ButtonGroup from"@vertigis/react-ui/ButtonGroup";import Checkbox from"@vertigis/react-ui/Checkbox";import IconButton from"@vertigis/react-ui/IconButton";import Input from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import List from"@vertigis/react-ui/List";import ListItem from"@vertigis/react-ui/ListItem";import ListItemButton from"@vertigis/react-ui/ListItemButton";import ListItemIcon from"@vertigis/react-ui/ListItemIcon";import ListItemText,{listItemTextClasses}from"@vertigis/react-ui/ListItemText";import Radio from"@vertigis/react-ui/Radio";import Stack from"@vertigis/react-ui/Stack";import Close from"@vertigis/react-ui/icons/Close";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{Orientation}from"../constants.js";import{getKeyString}from"../keyboard.js";import{isDataRef,isGeometryRef,makeSafeClassName}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="ItemPicker",itemPickerClasses={button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`},Root=styled(FormElement)(({theme:{typography:e}})=>({[`.${itemPickerClasses.clearIcon}`]:{height:e.pxToRem(20),width:e.pxToRem(20)},[`.${itemPickerClasses.items}`]:{[`&.${itemPickerClasses.horizontal}`]:{display:"flex",flexWrap:"wrap",[`.${itemPickerClasses.item}`]:{width:"auto"}},[`.${itemPickerClasses.item}`]:{[`.${itemPickerClasses.button}`]:{paddingBottom:0,paddingTop:0,[`.${listItemTextClasses.primary}`]:{fontWeight:e.fontWeightRegular}}}}})),ItemPicker=({className:e,component:r,element:n,spacing:t})=>{const a=r.props["host"],i=r.props.name;void 0===t&&(t=1);const s=n.items||{};let c,m,l,d=n.state;function u(){const e=[];for(const o in s){var t=s[o];t.checked&&e.push(t)}c=0===e.length?n.value=void 0:n.value={refValueType:"items",items:e}}function p(e,t=!0){let o=d.keyToIndex[e];if(null==o||null===o){if(!t)return;d.keyToIndex[e]=d.length,d.push({}),o=d.keyToIndex[e]}return d[o]}function f(e,t){s[e].checked=t;const o=p(e);o&&(o.checked=t)}function o(t){return function(e){null!==e&&(e.disabled||a.renderFocus(e,i),e=!0===s[t].checked,p(t).checked=e)}}u(),function(){void 0!==d&&null!==d||(d=n.state=[]),d.keyToIndex||(d.keyToIndex={});const e={};for(const o in n.items){var t=p(o,!1);t&&(e[o]=t)}d=n.state=[],d.keyToIndex={};for(const i in e)d.keyToIndex[i]=d.length,d.push(e[i])}();const g=[];let k;switch(n.selectionMode){case"single":k="radio";break;case"multiple":k="checkbox"}for(const P in s){var I,v,h,R,x=s[P];p(P).content=function(e){if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}}(x.value),!1!==x.visible&&(v=(I=r.enabled&&!1!==x.enabled)&&!!k,h=a.renderText(x.tooltip),R=clsx(itemPickerClasses.item,x.styleName?makeSafeClassName(x.styleName):void 0),x=React.createElement(Markdown,{host:a,text:x.label}),g.push(React.createElement(ListItem,{className:R,disabled:!I,disablePadding:!0,key:P},React.createElement(ListItemButton,{className:itemPickerClasses.button,onClick:v?(o=>()=>{var e=s[o].checked;if("single"===n.selectionMode){if(!e)for(const t in s)f(t,t===o)}else f(o,!e);u(),r.forceUpdate(),a.post("changed",{name:i,value:c}),a.renderState(i,"geometry",d)})(P):void 0,tabIndex:I?void 0:-1,title:h,"data-id":P,onBlur:I?e=>{delete p(e.currentTarget.dataset.id).focused,a.renderState(i,"geometry",d)}:void 0,onFocus:I?e=>{p(e.currentTarget.dataset.id).focused=!0,a.renderState(i,"geometry",d)}:void 0,onMouseOver:I?e=>{p(e.currentTarget.dataset.id).pending=!0,a.renderState(i,"geometry",d)}:void 0,onMouseOut:I?e=>{delete p(e.currentTarget.dataset.id).pending,a.renderState(i,"geometry",d)}:void 0},"checkbox"===k&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===s[P]?.checked,disableRipple:!0,inputRef:o(P),tabIndex:-1,value:P})),"radio"===k&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===s[P]?.checked,disableRipple:!0,inputRef:o(P),name:r.id,tabIndex:-1,value:P})),React.createElement(ListItemText,null,x)))))}var b=a.renderText(n.prompt);function y(){var e=m.value.toLowerCase();for(const t in s){const o=s[t];if(e){const i=a.renderText(o.label).toLowerCase();o.visible=-1!==i.indexOf(e)}else o.visible=!0}l.hidden=!e,r.forceUpdate()}function C(){m.value="",y()}var E="multiple"===n.selectionMode&&0<g.length,T=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:n.orientation===Orientation.HORIZONTAL});return React.createElement(Root,{className:e,component:r,element:n,ref:function(e){null===e?a.renderState(i,"geometry"):a.renderState(i,"geometry",d)}},React.createElement(Stack,{spacing:t},n.showFilter&&React.createElement(Input,{disabled:!r.enabled,endAdornment:React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r.enabled,onClick:C,ref:e=>l=e,title:a.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))),error:!1,fullWidth:!0,inputRef:e=>{m=e,renderFocus(e,i,a)},onChange:y,onKeyDown:e=>{"escape"===getKeyString(e)&&C()},placeholder:b,type:"text"}),E&&React.createElement(ButtonGroup,{color:"primary",variant:"outlined"},React.createElement(Button,{disabled:!r.enabled,onClick:function(){for(const e in s)f(e,!0);u(),r.forceUpdate(),a.post("changed",{name:i,value:c})}},a.renderText("@common-all")),React.createElement(Button,{disabled:!r.enabled,onClick:function(){for(const e in s)f(e,!1);u(),r.forceUpdate(),a.post("changed",{name:i,value:c})}},a.renderText("@common-none"))),React.createElement(List,{className:T,dense:!0},g)))};export default ItemPicker;export{itemPickerClasses};
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import IconButton from"@vertigis/react-ui/IconButton";import Input from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import List from"@vertigis/react-ui/List";import ListItem from"@vertigis/react-ui/ListItem";import ListItemButton from"@vertigis/react-ui/ListItemButton";import ListItemIcon from"@vertigis/react-ui/ListItemIcon";import ListItemText,{listItemTextClasses}from"@vertigis/react-ui/ListItemText";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Stack from"@vertigis/react-ui/Stack";import Close from"@vertigis/react-ui/icons/Close";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{Orientation}from"../constants.js";import{getKeyString}from"../keyboard.js";import{isDataRef,isGeometryRef,makeSafeClassName}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="ItemPicker",itemPickerClasses={button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`},Root=styled(FormElement)(({theme:{typography:e}})=>({[`.${itemPickerClasses.clearIcon}`]:{height:e.pxToRem(20),width:e.pxToRem(20)},[`.${itemPickerClasses.items}`]:{[`&.${itemPickerClasses.horizontal}`]:{display:"flex",flexWrap:"wrap",[`.${itemPickerClasses.item}`]:{width:"auto"}},[`.${itemPickerClasses.item}`]:{[`.${itemPickerClasses.button}`]:{paddingBottom:0,paddingTop:0,[`.${listItemTextClasses.primary}`]:{fontWeight:e.fontWeightRegular}}}}})),ItemPicker=({className:e,component:i,element:n,spacing:t})=>{const a=i.props["host"],r=i.props.name;void 0===t&&(t=1);const s=n.items||{};let c,l,m,d=n.state;function u(){const e=[];for(const o in s){var t=s[o];t.checked&&e.push(t)}c=0===e.length?n.value=void 0:n.value={refValueType:"items",items:e}}function p(e,t=!0){let o=d.keyToIndex[e];if(null==o||null===o){if(!t)return;d.keyToIndex[e]=d.length,d.push({}),o=d.keyToIndex[e]}return d[o]}function f(e,t){s[e].checked=t;const o=p(e);o&&(o.checked=t)}function o(t){return function(e){null!==e&&(e.disabled||a.renderFocus(e,r),e=!0===s[t].checked,p(t).checked=e)}}u(),function(){void 0!==d&&null!==d||(d=n.state=[]),d.keyToIndex||(d.keyToIndex={});const e={};for(const o in n.items){var t=p(o,!1);t&&(e[o]=t)}d=n.state=[],d.keyToIndex={};for(const r in e)d.keyToIndex[r]=d.length,d.push(e[r])}();const g=[];let k;switch(n.selectionMode){case"single":k="radio";break;case"multiple":k="checkbox"}let I=0;for(const F in s){var R,h,v,b,x=s[F];p(F).content=function(e){if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}}(x.value),!1!==x.visible&&(x.checked&&I++,h=(R=i.enabled&&!1!==x.enabled)&&!!k,v=a.renderText(x.tooltip),b=clsx(itemPickerClasses.item,x.styleName?makeSafeClassName(x.styleName):void 0),x=React.createElement(Markdown,{text:x.label,translateText:a.translateText.bind(a)}),g.push(React.createElement(ListItem,{className:b,disabled:!R,disablePadding:!0,key:F},React.createElement(ListItemButton,{className:itemPickerClasses.button,onClick:h?(o=>()=>{var e=s[o].checked;if("single"===n.selectionMode){if(!e)for(const t in s)f(t,t===o)}else f(o,!e);u(),i.forceUpdate(),a.post("changed",{name:r,value:c}),a.renderState(r,"geometry",d)})(F):void 0,tabIndex:R?void 0:-1,title:v,"data-id":F,onBlur:R?e=>{delete p(e.currentTarget.dataset.id).focused,a.renderState(r,"geometry",d)}:void 0,onFocus:R?e=>{p(e.currentTarget.dataset.id).focused=!0,a.renderState(r,"geometry",d)}:void 0,onMouseOver:R?e=>{p(e.currentTarget.dataset.id).pending=!0,a.renderState(r,"geometry",d)}:void 0,onMouseOut:R?e=>{delete p(e.currentTarget.dataset.id).pending,a.renderState(r,"geometry",d)}:void 0},"checkbox"===k&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===s[F]?.checked,disableRipple:!0,inputRef:o(F),tabIndex:-1,value:F})),"radio"===k&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===s[F]?.checked,disableRipple:!0,inputRef:o(F),name:i.id,tabIndex:-1,value:F})),React.createElement(ListItemText,null,x)))))}var y=a.renderText(n.prompt);function C(){var e=l.value.toLowerCase();for(const t in s){const o=s[t];if(e){const r=a.renderText(o.label).toLowerCase();o.visible=-1!==r.indexOf(e)}else o.visible=!0}m.hidden=!e,i.forceUpdate()}function E(){l.value="",C()}var T="multiple"===n.selectionMode&&0<g.length,L=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:n.orientation===Orientation.HORIZONTAL});let P;return 0===I?P="none":I===g.length&&(P="all"),React.createElement(Root,{className:e,component:i,element:n,ref:function(e){null===e?a.renderState(r,"geometry"):a.renderState(r,"geometry",d)}},React.createElement(Stack,{spacing:t},n.showFilter&&React.createElement(Input,{disabled:!i.enabled,endAdornment:React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!i.enabled,onClick:E,ref:e=>m=e,title:a.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))),error:!1,fullWidth:!0,inputRef:e=>{l=e,renderFocus(e,r,a)},onChange:C,onKeyDown:e=>{"escape"===getKeyString(e)&&E()},placeholder:y,type:"text"}),T&&React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===P,control:React.createElement(Radio,null),disabled:!i.enabled,onClick:function(){for(const e in s)f(e,!0);u(),i.forceUpdate(),a.post("changed",{name:r,value:c})},label:a.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===P,control:React.createElement(Radio,null),disabled:!i.enabled,onClick:function(){for(const e in s)f(e,!1);u(),i.forceUpdate(),a.post("changed",{name:r,value:c})},label:a.renderText("@common-none")})),React.createElement(List,{className:L,dense:!0},g)))};export default ItemPicker;export{itemPickerClasses};

package/forms/components/ListBox.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
 export declare const listBoxClasses: {
     select: string;
 };
-declare const ListBox: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const ListBox: ({ className, component, current, element, enabled, items: elementItems, name, renderFocus, renderText, require, setItemProperty, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => JSX.Element;
 export default ListBox;

package/forms/components/ListBox.js

@@ -1 +1 @@
-import{inputClasses}from"@vertigis/react-ui/Input";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{nativeSelectClasses}from"@vertigis/react-ui/NativeSelect";import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{makeSafeClassName,makeUniqueId,sortItems}from"../utils.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${nativeSelectClasses.select}.${nativeSelectClasses.standard}.${nativeSelectClasses.multiple}.${inputBaseClasses.input}.${inputClasses.input}.${listBoxClasses.select}`]:{paddingRight:e(1)}})),ListBox=({className:e,component:i,element:a})=>{const{host:l,name:o}=i.props;var t=`${makeUniqueId(o)}-input`;const r=sortItems(a);!function(){const e=[];for(const s in r){var t=r[s];t.checked&&e.push(t)}0===e.length?a.value=void 0:a.value={refValueType:"items",items:e}}();const s=[],n=[];for(const v in r){const f=r[v];var c=l.renderText(f.label);const u=l.renderText(f.tooltip);f.checked=!0===f.checked;var m=clsx(f.styleName?makeSafeClassName(f.styleName):void 0);f.checked&&n.push(v);var p=!1===f.enabled?void 0:!!f.checked;s.push(React.createElement("option",{"aria-selected":p,className:m,key:v,title:u,value:v,disabled:!1===f.enabled},c))}s.length<1&&(i.enabled=!1);const u=l.renderText(a.tooltip)||void 0;let d;return"number"==typeof a.size&&(d=a.size),React.createElement(Root,{className:e,component:i,element:a,inputId:t},React.createElement(Select,{disabled:!i.enabled,inputProps:{"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":a.require,className:listBoxClasses.select,id:t,role:"listbox",size:d,title:u},inputRef:e=>renderFocus(e,o,l),multiple:!0,native:!0,onChange:e=>{const t=e.target["options"];for(let e=0;e<t.length;e++){var s=t.item(e),a=s.value;r[a].checked=s.selected}i.forceUpdate(),l.post("changed",{name:o})},value:n},s))};export default ListBox;export{listBoxClasses};
+import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},Root=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,component:t,current:s,element:a,enabled:l,items:o,name:i,renderFocus:r,renderText:c,require:m,setItemProperty:n,setValue:u,size:p,tooltip:d,value:f})=>{var v=`${makeUniqueId(i)}-input`;const h=inspectItems(s,o,f)["items"],[x,E]=useState([]);r=useFocusCallback(l,i,r);useEffect(()=>{const e=[];for(const t in o)o[t].checked&&e.push(t);arrayEqual(x,e)||E(e),k(e,!1)});const k=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>h[e])};areValuesEqual(f,e)||u(e,t)};const b=[];for(const F in h){const I=h[F];var y=c(I.label);const C=c(I.tooltip);I.checked=!0===I.checked;var g=clsx(I.styleName?makeSafeClassName(I.styleName):void 0),R=!1===I.enabled?void 0:!!I.checked;b.push(React.createElement("option",{"aria-selected":R,className:g,key:F,title:C,value:F,disabled:!1===I.enabled},y))}const C=c(d)||void 0;let q;return"number"==typeof p&&(q=p),React.createElement(Root,{className:e,component:t,element:a,inputId:v},React.createElement(Select,{disabled:!l||0===b.length,inputProps:{"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":m,className:listBoxClasses.select,id:v,role:"listbox",size:q,title:C},inputRef:r,multiple:!0,native:!0,onChange:e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const r in h){var o=h[r].checked,i=-1!==s.indexOf(r);o!==i&&n(r,"checked",i)}k(s,!0)},value:x},b))};export default ListBox;export{listBoxClasses};

package/forms/components/Markdown.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import { MarkdownProps as BaseMarkdownProps } from "@vertigis/react-ui/Markdown";
 import { defs } from "../FormHost";
-import { FormPresenterHost } from "../FormPresenterHost";
 /**
  * Properties for the `Markdown` component.
  */
 export interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "sanitize"> {
-    /** The host that translatest text. */
-    host: FormPresenterHost;
     /** The text to be rendered. */
     text: defs.Text | undefined;
+    /** Translates the supplied value. */
+    translateText: (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
 }
-declare const Markdown: ({ host, text, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => JSX.Element;
+declare const Markdown: ({ text, translateText, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => JSX.Element;
 export default Markdown;

package/forms/components/Markdown.js

@@ -1 +1 @@
-import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({host:t,text:e,escapeHtml:a=!0,linkTarget:r="_blank",...n})=>{e=t.translateText(e);return hasContent(e)?isMarkdown(e)?React.createElement(BaseMarkdown,{markdown:e.markdown,escapeHtml:a,linkTarget:r,...n}):React.createElement(React.Fragment,null,e):null};export default Markdown;
+import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({text:t,translateText:e,escapeHtml:a=!0,linkTarget:r="_blank",...n})=>{t=e(t);return hasContent(t)?isMarkdown(t)?React.createElement(BaseMarkdown,{markdown:t.markdown,escapeHtml:a,linkTarget:r,...n}):React.createElement(React.Fragment,null,t):null};export default Markdown;

package/forms/components/Number.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
 /**
  * The component for the "Number" Form Elements.
  */
-declare const NumberComponent: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const NumberComponent: ({ className, coerceNumber, component, deriveLocale, element, enabled, error, format, formatNumber, name, prompt, renderFocus: hostRenderFocus, renderText, require, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<defs.NumberRef | undefined>) => JSX.Element;
 export default NumberComponent;

package/forms/components/Number.js

@@ -1 +1 @@
-import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import*as React from"react";import{useEffect,useMemo,useRef,useState}from"react";import FormElement from"../FormElement.js";import{numberFormatConfiguration}from"../elements/Number.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual,enforceConstraints,getNumberConstraints,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId}from"../utils.js";const NumberComponent=({className:e,component:r,element:n})=>{const{host:t,name:o}=r.props;var a=!r.enabled;const[m,i]=useState(!1),[u,s]=useState(),l=useRef(!0);var c=`${makeUniqueId(o)}-input`,p=t.deriveLocale();const{decimals:f,numberConstraints:b}=useMemo(()=>{var e=n.format,r=getNumberConstraints(e,numberFormatConfiguration);return{decimals:sanitizePrecision(e?.precision,r.step,numberFormatConfiguration),numberConstraints:r}},[n.format]),{maximum:d,minimum:v,step:N}=b,g={fractionalDigits:f,locale:p},C=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:v,precision:f,step:N,upperBound:d},display:t.formatNumber(e,g),numeric:e}},E=()=>{e=void 0===(e=u)?void 0:enforceConstraints(e,b),e=C(e);areValuesEqual(n,e)||(n.value=e,t.post("changed",{name:o,value:e}));var e=e?.numeric;e!==u&&s(e)};useEffect(()=>{l.current?l.current=!1:m||E()},[m,u]),useEffect(()=>{var e=F(n.value),r=void 0===e?void 0:C(e);areValuesEqual(n,r)||(n.value=r),e!==u&&s(e)},[n.value]);const F=e=>{let r=void 0;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=t.coerceNumber(e)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,b)};var x=t.renderText(n.prompt),p=t.renderText(n.tooltip);return React.createElement(FormElement,{className:e,component:r,element:n,inputId:c},React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>t.formatNumber(e,g),parseNumber:e=>t.coerceNumber(e)}},React.createElement(NumberInput,{allowUndefined:!0,correctOnBlur:!0,disabled:a,error:!!n.error,inputProps:{id:c,onKeyDown:e=>{var r,t=getKeyString(e);return"enter"===t?(r=e,E(),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1):"escape"===t?(t=e,(e=isNumberRef(n.value)?n.value.numeric:void 0)!==u&&s(e),t.currentTarget.select(),t.stopPropagation(),t.preventDefault(),!1):void 0}},inputRef:e=>{null===e||e.disabled||t.renderFocus(e,o)},max:d,maxDecimalPlaces:f,min:v,onBlur:()=>{i(!1)},onChange:e=>s(e),onFocus:()=>{i(!0)},placeholder:x,required:n.require,size:"small",title:p,value:u})))};export default NumberComponent;
+import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import*as React from"react";import{useEffect,useMemo,useRef,useState}from"react";import FormElement from"../FormElement.js";import{numberFormatConfiguration}from"../elements/Number.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual,enforceConstraints,getNumberConstraints,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId}from"../utils.js";const NumberComponent=({className:e,coerceNumber:t,component:r,deriveLocale:n,element:o,enabled:i,error:m,format:u,formatNumber:a,name:s,prompt:l,renderFocus:c,renderText:p,require:f,tooltip:b,value:d,setValue:v})=>{const[N,g]=useState(!1),[C,E]=useState(),F=useRef(!0);var y=`${makeUniqueId(s)}-input`,n=n(),l=p(l),b=p(b);const{decimals:R,numberConstraints:x}=useMemo(()=>{var e=u,r=getNumberConstraints(e,numberFormatConfiguration);return{decimals:sanitizePrecision(e?.precision,r.step,numberFormatConfiguration),numberConstraints:r}},[u]),{maximum:q,minimum:P,step:S}=x,I={fractionalDigits:R,locale:n},j=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:P,precision:R,step:S,upperBound:q},display:a(e,I),numeric:e}},D=()=>{e=void 0===(e=C)?void 0:enforceConstraints(e,x),e=j(e);areValuesEqual(d,e)||v(e);var e=e?.numeric;e!==C&&E(e)};useEffect(()=>{F.current?F.current=!1:N||D()},[N,C]),useEffect(()=>{var e=V(d),r=void 0===e?void 0:j(e);areValuesEqual(d,r)||v(r,!1),e!==C&&E(e)},[d]);const V=e=>{let r=void 0;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=t(e)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,x)};return React.createElement(FormElement,{className:e,component:r,element:o,inputId:y},React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>a(e,I),parseNumber:e=>t(e)}},React.createElement(NumberInput,{allowUndefined:!0,correctOnBlur:!0,disabled:!i,error:!!m,inputProps:{id:y,onKeyDown:e=>{var r,t=getKeyString(e);return"enter"===t?(r=e,D(),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1):"escape"===t?(t=e,(e=isNumberRef(d)?d.numeric:void 0)!==C&&E(e),t.currentTarget.select(),t.stopPropagation(),t.preventDefault(),!1):void 0},title:b},inputRef:e=>{null===e||e.disabled||c(e,s)},max:q,maxDecimalPlaces:R,min:P,onBlur:()=>{g(!1)},onChange:e=>E(e),onFocus:()=>{g(!0)},placeholder:l,required:f,size:"small",value:C})))};export default NumberComponent;

package/forms/components/NumberRangeSlider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
 export declare const numberRangeSliderClasses: {
     container: string;
     inputContainer: string;
@@ -8,5 +8,5 @@ export declare const numberRangeSliderClasses: {
 /**
  * The component for the "Number Range Slider" Form Element.
  */
-declare const NumberRangeSlider: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const NumberRangeSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<number[] | undefined>) => JSX.Element;
 export default NumberRangeSlider;

package/forms/components/NumberRangeSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormLabelNumberField from"./FormLabelNumberField.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,component:r,element:a})=>{const{host:t,name:o}=r.props;var n=!r.enabled;const{currency:i,customDisplayFormat:m,decimals:s,displayFormat:l,numberConstraints:u}=useMemo(()=>{var e=a.format,r=getNumberConstraints(e,numberFormatConfiguration),t=sanitizePrecision(e?.precision,r.step,numberFormatConfiguration);return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:t,displayFormat:e?.displayFormat,numberConstraints:r}},[a.format]);var c=u["step"];const d=u.maximum,p=u.minimum,[b,g]=useState(!1),[f,v]=useState(!1),[C,F]=useState([p,d]),R=useRef(!0);var N=makeUniqueId(o);const x=`${N}-slider-input`;var S=!1!==a.showMinMaxLabels,E=!!a.showTickMarks,y=!1!==a.manualEntry;const L={currency:i,customDisplayFormat:m,format:l,fractionalDigits:s,locale:t.deriveLocale()};useEffect(()=>{var e;R.current?R.current=!1:f?$(C):b||(e=getNumberSliderValues(C,u),C[0]===e[0]&&C[1]===e[1]||F(e),h(a.value,e)||(a.value=e,t.post("changed",{name:o,value:a.value})))},[b,f,C]),useEffect(()=>{var e=getNumberSliderValues(a.value,u);h(a.value,e)||(a.value=e),h(C,e)||F(e)},[a.value]);const h=(e,r)=>void 0===e&&void 0===r[0]&&void 0===r[1]||(void 0===e&&null===r[0]&&null===r[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==r[0]||e[1]!==r[1])),$=useMemo(()=>throttle(e=>{t.post("dragged",{name:o,value:e})}),[]),k=useFocusCallback(r);var D=t.renderText(a.tooltip),P=n&&!f,T=y?{max:d,min:p,onBlur:()=>{g(!1)},onFocus:()=>{g(!0)},step:c,title:D}:void 0;return React.createElement(Root,{className:e,component:r,element:a,inputId:`${x}-0`},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:P,getAriaLabel:()=>t.renderText(a.title),getAriaValueText:e=>t.formatNumber(e,L),marks:getMarks(d,p,c,L,S,E),max:d,min:p,onChange:(e,r)=>{v(!0),Array.isArray(r)&&F(r)},onChangeCommitted:()=>{v(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${x}-${e.attributes["data-index"].value}`),k(e))})},step:c,title:D,value:C,valueLabelDisplay:"on",valueLabelFormat:(e,r)=>t.formatNumber(e,L)}),!1!=y&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{var r={fractionalDigits:L.fractionalDigits,locale:L.locale};return t.formatNumber(e,r)},parseNumber:e=>t.coerceNumber(e)}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:n,id:`${N}-startInput`,inputProps:T,label:t.renderText("@common-start"),max:d,maxDecimalPlaces:s,min:p,onChange:e=>{void 0===e&&(e=p),F([e,C[1]])},value:C[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",t.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:n,id:`${N}-endInput`,inputProps:T,label:t.renderText("@common-end"),max:d,maxDecimalPlaces:s,min:p,onChange:e=>{void 0===e&&(e=d),F([C[0],e])},value:C[1]})))))};export default NumberRangeSlider;export{numberRangeSliderClasses};
+import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import{DEFAULT_CURRENCY,NumberDisplayFormat}from"../numberFormatter.js";import{countDecimalsInCustomFormat,getCurrencySymbolInfo,getPercentSymbolInfo,roundAccurately}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormLabelNumberField from"./FormLabelNumberField.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,coerceNumber:r,component:t,deriveLocale:a,element:n,enabled:o,format:u,formatNumber:i,manualEntry:m,showMinMaxLabels:s,showTickMarks:l,name:c,raiseEvent:d,renderFocus:p,renderText:b,title:g,tooltip:f,value:C,setValue:F})=>{const R=a(),{currency:y,customDisplayFormat:N,decimals:v,displayFormat:S,endAdornment:E,isPercent:x,numberConstraints:A,startAdornment:D}=useMemo(()=>{var e,t,r=u,a=r?.currency||DEFAULT_CURRENCY,n=r?.displayFormat,o=n===NumberDisplayFormat.PERCENT,i=getNumberConstraints(r,numberFormatConfiguration),m=r?.customDisplayFormat,r=n===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(m):r?.precision,r=sanitizePrecision(r,i.step,numberFormatConfiguration);let s=null,l=null;return n===NumberDisplayFormat.CURRENCY||n===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(R,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?s=t:l=t):!o||(e=getPercentSymbolInfo(R))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?s=t:l=t),{currency:a,customDisplayFormat:m,decimals:r,displayFormat:n,endAdornment:l,isPercent:o,numberConstraints:i,startAdornment:s}},[u]);var I=A["step"];const L=A.maximum,P=A.minimum,[h,$]=useState(!1),[k,M]=useState(!1),[T,U]=useState([P,L]),j=useRef(!0),[w,B]=useMemo(()=>{var e=makeUniqueId(c);return[e,`${e}-slider-input`]},[c]);a=!1!==s,s=!!l,l=!1!==m,m=x?v-2:v;const V={currency:y,customDisplayFormat:N,format:S,fractionalDigits:m=Math.max(0,m),locale:R};useEffect(()=>{var e;j.current?j.current=!1:k?Y(T):h||(e=getNumberSliderValues(T,A),T[0]===e[0]&&T[1]===e[1]||U(e),X(C,e)||F(e))},[h,k,T]),useEffect(()=>{var e=getNumberSliderValues(C,A);X(C,e)||F(e,!1),X(T,e)||U(e)},[C]);const X=(e,t)=>void 0===e&&void 0===t[0]&&void 0===t[1]||(void 0===e&&null===t[0]&&null===t[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==t[0]||e[1]!==t[1])),Y=useMemo(()=>throttle(e=>{d("dragged",e)}),[]),q=useFocusCallback(o,c,p);m=b(f),p=!o&&!k,f=l?{max:L,min:P,onBlur:()=>{$(!1)},onFocus:()=>{$(!0)},step:I,title:m}:void 0;return React.createElement(Root,{className:e,component:t,element:n,inputId:`${B}-0`},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:p,getAriaLabel:()=>b(g),getAriaValueText:e=>i(e,V),marks:getMarks(L,P,I,V,a,s),max:L,min:P,onChange:(e,t)=>{M(!0),Array.isArray(t)&&U(t)},onChangeCommitted:()=>{M(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${B}-${e.attributes["data-index"].value}`),q(e))})},step:I,title:m,value:T,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>i(e,V)}),!1!=l&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{x&&(e*=100);var t={fractionalDigits:V.fractionalDigits,locale:V.locale};return i(e,t)},parseNumber:e=>{let t=r(e);return x&&(t=roundAccurately(t/100,v)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!o,id:`${w}-startInput`,inputProps:f,endAdornment:E,label:b("@common-start"),max:L,maxDecimalPlaces:v,min:P,onChange:e=>{void 0===e&&(e=P),U([e,T[1]])},startAdornment:D,value:T[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",b("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!o,endAdornment:E,id:`${w}-endInput`,inputProps:f,label:b("@common-end"),max:L,maxDecimalPlaces:v,min:P,onChange:e=>{void 0===e&&(e=L),U([T[0],e])},startAdornment:D,value:T[1]})))))};export default NumberRangeSlider;export{numberRangeSliderClasses};

package/forms/components/NumberSlider.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
+import { NumberRef } from "../FormDefinition";
 export declare const numberSliderClasses: {
     container: string;
 };
 /**
  * The component for the "Number Slider" Form Element.
  */
-declare const NumberSlider: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const NumberSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, error, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<NumberRef | undefined>) => JSX.Element;
 export default NumberSlider;

package/forms/components/NumberSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getNumberSliderValues,areValuesEqual,getMarks,getNumberConstraints,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=({className:e,component:r,element:a})=>{const{host:t,name:s}=r.props;var o=!r.enabled;const{currency:m,customDisplayFormat:i,decimals:l,displayFormat:n,numberConstraints:u}=useMemo(()=>{var e=a.format,r=getNumberConstraints(e),t=sanitizePrecision(e?.precision,r.step);return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:t,displayFormat:e?.displayFormat,numberConstraints:r}},[a.format]),c=u["step"],p=u.maximum,d=u.minimum,[f,b]=useState(!1),[g,v]=useState(!1),[N,y]=useState(d),C=useRef(!0);var F=`${makeUniqueId(s)}-input`,E=t.deriveLocale(),x=!1!==a.showMinMaxLabels,R=!!a.showTickMarks,S=!1!==a.manualEntry;const D={currency:m,customDisplayFormat:i,format:n,fractionalDigits:l,locale:E},h=e=>({refValueType:"number",format:{currency:m,customDisplayFormat:i,displayFormat:n,lowerBound:d,precision:l,step:c,upperBound:p},display:t.formatNumber(e,D),numeric:e});useEffect(()=>{var e;C.current?C.current=!1:g?k(N):f||((e=getNumberSliderValues(N,u,!0)[0])!==N&&y(e),e=h(e),areValuesEqual(a,e)||(a.value=e,t.post("changed",{name:s,value:a.value})))},[f,g,N]),useEffect(()=>{var e=getNumberSliderValues(a.value,u,!0)[0],r=h(e);areValuesEqual(a,r)||(a.value=r),N!==e&&y(e)},[a.value]);const k=useMemo(()=>throttle(e=>{t.post("dragged",{name:s,value:h(e)})}),[]);var B=useFocusCallback(r),I=t.renderText(a.tooltip),E=o&&!g,o=o;return React.createElement(Root,{className:e,component:r,element:a,inputId:F},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:E,getAriaLabel:()=>t.renderText(a.title),getAriaValueText:e=>t.formatNumber(e,D),marks:getMarks(p,d,c,D,x,R),max:p,min:d,onChange:(e,r)=>{v(!0);r=Array.isArray(r)?r[0]:r;y(r)},onChangeCommitted:()=>{v(!1)},slotProps:{input:{id:F,ref:B}},step:c,title:I,value:"number"==typeof N?N:0,valueLabelDisplay:"on",valueLabelFormat:(e,r)=>t.formatNumber(e,D)}),!1!=S&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{var r={fractionalDigits:D.fractionalDigits,locale:D.locale};return t.formatNumber(e,r)},parseNumber:e=>t.coerceNumber(e)}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:o,error:!!a.error,inputProps:{step:c,title:I},max:p,maxDecimalPlaces:l,min:d,onChange:e=>{void 0===e?y(d):y(e)},onFocus:()=>{b(!0)},onBlur:()=>{b(!1)},size:"small",value:N}))))};export default NumberSlider;export{numberSliderClasses};
+import Box from"@vertigis/react-ui/Box";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{DEFAULT_CURRENCY,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,countDecimalsInCustomFormat,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,roundAccurately,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=({className:e,coerceNumber:r,component:t,deriveLocale:a,element:o,enabled:n,error:s,format:u,formatNumber:m,manualEntry:i,showMinMaxLabels:l,showTickMarks:c,name:p,raiseEvent:d,renderFocus:b,renderText:f,title:y,tooltip:C,value:g,setValue:F})=>{const N=a(),{currency:E,customDisplayFormat:v,decimals:R,displayFormat:S,endAdornment:D,isPercent:I,numberConstraints:x,startAdornment:A}=useMemo(()=>{var e,t,r=u,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,n=o===NumberDisplayFormat.PERCENT,s=getNumberConstraints(r),m=r?.customDisplayFormat,r=o===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(m):r?.precision,r=sanitizePrecision(r,s.step);let i=null,l=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(N,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=t:l=t):!n||(e=getPercentSymbolInfo(N))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=t:l=t),{currency:a,customDisplayFormat:m,decimals:r,displayFormat:o,endAdornment:l,isPercent:n,numberConstraints:s,startAdornment:i}},[u]),P=x["step"],h=x.maximum,T=x.minimum,[k,B]=useState(!1),[M,U]=useState(!1),[L,V]=useState(T),j=useRef(!0);var q=`${makeUniqueId(p)}-input`,a=!1!==l,l=!!c,c=!1!==i,i=I?R-2:R,i=Math.max(0,i);const $={currency:E,customDisplayFormat:v,format:S,fractionalDigits:i,locale:N},w=e=>({refValueType:"number",format:{currency:E,customDisplayFormat:v,displayFormat:S,lowerBound:T,precision:R,step:P,upperBound:h},display:m(e,$),numeric:e});useEffect(()=>{var e;j.current?j.current=!1:M?z(L):k||((e=getNumberSliderValues(L,x,!0)[0])!==L&&V(e),e=w(e),areValuesEqual(g,e)||F(e))},[k,M,L]),useEffect(()=>{var e=getNumberSliderValues(g,x,!0)[0],t=w(e);areValuesEqual(g,t)||F(t,!1),L!==e&&V(e)},[g]);const z=useMemo(()=>throttle(e=>{d("dragged",w(e))}),[]);p=useFocusCallback(n,p,b),b=f(C),C=!n&&!M,n=!n;return React.createElement(Root,{className:e,component:t,element:o,inputId:q},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:C,getAriaLabel:()=>f(y),getAriaValueText:e=>m(e,$),marks:getMarks(h,T,P,$,a,l),max:h,min:T,onChange:(e,t)=>{U(!0);t=Array.isArray(t)?t[0]:t;V(t)},onChangeCommitted:()=>{U(!1)},slotProps:{input:{id:q,ref:p}},step:P,title:b,value:"number"==typeof L?L:0,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>m(e,$)}),!1!=c&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{I&&(e*=100);var t={fractionalDigits:$.fractionalDigits,locale:$.locale};return m(e,t)},parseNumber:e=>{let t=r(e);return I&&(t=roundAccurately(t/100,R)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:n,endAdornment:D,error:!!s,inputProps:{step:P,title:b},max:h,maxDecimalPlaces:R,min:T,onChange:e=>{void 0===e?V(T):V(e)},onFocus:()=>{B(!0)},onBlur:()=>{B(!1)},size:"small",startAdornment:A,value:L}))))};export default NumberSlider;export{numberSliderClasses};

package/forms/components/RadioGroup.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
+import { defs } from "../FormHost";
 /**
  * The component for the "Radio Group" Form Element.
  */
-declare const RadioGroup: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+declare const RadioGroup: ({ className, component, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, setValue, translateText, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
 export default RadioGroup;

package/forms/components/RadioGroup.js

@@ -1 +1 @@
-import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import Radio from"@vertigis/react-ui/Radio";import BaseRadioGroup from"@vertigis/react-ui/RadioGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sortItems as sortAndFilterItems}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=({className:e,component:t,element:o})=>{const[r,a]=useState(""),{host:m,name:n}=t.props;var s=sortAndFilterItems(o);useEffect(()=>{a(o.current||"")},[o.current]);var i=e=>{null===e||e.disabled||m.renderFocus(e,n)};const l=[];for(const p in s){const f=s[p];var c=t.enabled&&!1!==f.enabled,u=m.renderText(f.tooltip),d=f.styleName?makeSafeClassName(f.styleName):void 0;l.push(React.createElement(FormControlLabel,{className:d,control:React.createElement(Radio,{inputRef:i,onClick:e=>{o.current!==p&&(o.current=p,o.value=f.value,m.post("changed",{name:n,item:p,value:f.value}),a(p))}}),disabled:!c,key:p,label:React.createElement(Markdown,{host:m,text:f.label}),title:u,value:p}))}return React.createElement(Root,{className:e,component:t,element:o},React.createElement(BaseRadioGroup,{name:t.id,row:o.orientation===Orientation.HORIZONTAL,value:r},l))};export default RadioGroup;
+import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import Radio from"@vertigis/react-ui/Radio";import BaseRadioGroup from"@vertigis/react-ui/RadioGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect}from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,inspectItems}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=({className:e,component:t,current:a,element:r,enabled:o,id:l,items:n,label:m,name:i,orientation:s,raiseEvent:c,renderFocus:u,renderText:d,setProperty:p,setValue:f,translateText:v,value:R})=>{const b=inspectItems(a,n,R);var E=b.items;const N=[];var g=e=>{null===e||e.disabled||u(e,i)};useEffect(()=>{a!==b.current&&p("current",b.current),m!==b.label&&p("label",b.label),R!==b.value&&f(b.value,!1)});for(const C in E){const x=E[C];var k=o&&!1!==x.enabled,y=d(x.tooltip),F=x.styleName?makeSafeClassName(x.styleName):void 0;N.push(React.createElement(FormControlLabel,{className:F,control:React.createElement(Radio,{inputRef:g,onClick:()=>{a!==C&&(p("current",C),x.value!==R?f(x.value,{item:C}):c("changed",x.value,void 0,C))}}),disabled:!k,key:C,label:React.createElement(Markdown,{text:x.label,translateText:v}),title:y,value:C}))}return React.createElement(Root,{className:e,component:t,element:r},React.createElement(BaseRadioGroup,{name:l,row:s===Orientation.HORIZONTAL,value:a||""},N))};export default RadioGroup;

package/forms/components/Scanner.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import Input from"@vertigis/react-ui/Input";import Stack from"@vertigis/react-ui/Stack";import{Close as CloseIcon,ScanBarcode,ScanMulti,ScanQr}from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import{useState,useEffect,useRef}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import{getKeyString}from"../keyboard.js";import{isScanRef,makeUniqueId}from"../utils.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${scannerClasses.container}`]:{gap:e(.5),video:{width:"100%"},[`.${scannerClasses.inputContainer}`]:{alignItems:"flex-start",gap:e(.5),[`.${scannerClasses.button}`]:{minWidth:0,padding:e(.5)}}}})),CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod=EntryMethod||{});const convertToScanRef=(e,t,a)=>{var r=typeof e,r="number"==r||"string"==r?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:a=a||e?.scanType,entryMethod:t}},Scanner=({className:e,component:t,element:o})=>{const[a,r]=useState(!0),[n,c]=useState(null),[s,i]=useState(""),[l,u]=useState(!1),[m,d]=useState(scannerConfiguration.rows.default),p=useRef(null),{host:f,name:E}=t.props;var S=`${makeUniqueId(E)}-input`;const v="barcode"!==o.scanType;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof o.size&&(e=Math.max(scannerConfiguration.rows.minimum,o.size)),d(e)},[o.size]),useEffect(()=>(u(!0),()=>u(!1)),[]),useEffect(()=>{l&&o.enabled&&o.autoActivate&&(o.autoActivate=!1,B())},[l]),useEffect(()=>{const e=()=>{r(!1),setTimeout(()=>{l&&r(!0)},CAMERA_READY_TIMEOUT_MS)};return n&&e(),()=>{n&&(n.reset(),e())}},[n]);var y=useFocusCallback(t);useEffect(()=>{let e=o.value;!isScanRef(e)&&e&&(o.value=e=convertToScanRef(e));var t=e?.value||"";s!==t&&i(t)},[o.value]);var C=f.renderText(o.tooltip),g=!t.enabled,R=g||!o.manualEntry;const T=(e,t,a)=>{e&&o.value?.value!==e&&(a=convertToScanRef(e,t,a),o.value=a,i(e),f.post("changed",{name:E,value:a}))},F=async e=>{var t=await import("@zxing/library");let a=void 0;return e===ScanType.QrCode?a=[t.BarcodeFormat.AZTEC,t.BarcodeFormat.DATA_MATRIX,t.BarcodeFormat.MAXICODE,t.BarcodeFormat.PDF_417,t.BarcodeFormat.QR_CODE]:e===ScanType.BarCode&&(a=[t.BarcodeFormat.CODABAR,t.BarcodeFormat.CODE_39,t.BarcodeFormat.CODE_93,t.BarcodeFormat.CODE_128,t.BarcodeFormat.EAN_8,t.BarcodeFormat.EAN_13,t.BarcodeFormat.ITF,t.BarcodeFormat.RSS_14,t.BarcodeFormat.RSS_EXPANDED,t.BarcodeFormat.UPC_A,t.BarcodeFormat.UPC_E,t.BarcodeFormat.UPC_EAN_EXTENSION]),a},B=async()=>{if(n)return c(null),void f.post("cancel",{name:E,type:"cancel"});if(l){var e=await(async e=>{var t=await import("@zxing/library"),e=await F(e);const a=new Map;return a.set(t.DecodeHintType.POSSIBLE_FORMATS,e),a})(o.scanType);const t=await import("@zxing/library");e=new t.BrowserMultiFormatReader(e);c(e),await(async e=>{try{var t=await e.listVideoInputDevices();if(!t||0==t.length)throw new DOMException("No video input devices detected.");const r=await e.decodeOnceFromVideoDevice(void 0,p.current||void 0),n=await F(ScanType.QrCode);var a=n.indexOf(r.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;T(r.toString(),EntryMethod.Camera,a),c(null)}catch(e){e instanceof DOMException&&(o.error=e.message,c(null))}})(e)}};return React.createElement(Root,{className:e,component:t,element:o,inputId:S},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!n,ref:p}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:R,fullWidth:!0,id:S,inputProps:{title:C},inputRef:y,multiline:v,onBlur:e=>{0<e.currentTarget.value.length&&(c(null),T(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{i(e.currentTarget.value)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation(),v||(e=e.currentTarget,c(null),T(e.value,EntryMethod.Manual))},required:o.require,rows:v?m:void 0,spellCheck:!1,value:s}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:g||!a,onClick:B,ref:y,title:C},n?React.createElement(CloseIcon,null):o.scanType===ScanType.BarCode?React.createElement(ScanBarcode,null):o.scanType===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))};export default Scanner;export{scannerClasses};
+import Button from"@vertigis/react-ui/Button";import Input from"@vertigis/react-ui/Input";import Stack from"@vertigis/react-ui/Stack";import{Close as CloseIcon,ScanBarcode,ScanMulti,ScanQr}from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import{useState,useEffect,useRef}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import{getKeyString}from"../keyboard.js";import{isScanRef,makeUniqueId}from"../utils.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${scannerClasses.container}`]:{gap:e(.5),video:{width:"100%"},[`.${scannerClasses.inputContainer}`]:{alignItems:"flex-start",gap:e(.5),[`.${scannerClasses.button}`]:{minWidth:0,padding:e(.5)}}}})),CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod=EntryMethod||{});const convertToScanRef=(e,t,a)=>{var r=typeof e,r="number"==r||"string"==r?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:a=a||e?.scanType,entryMethod:t}},Scanner=({className:e,component:t,element:o})=>{const[a,r]=useState(!0),[n,c]=useState(null),[s,i]=useState(""),[l,u]=useState(!1),[m,d]=useState(scannerConfiguration.rows.default),p=useRef(null),{host:f,name:E}=t.props;var S=`${makeUniqueId(E)}-input`;const v="barcode"!==o.scanType;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof o.size&&(e=Math.max(scannerConfiguration.rows.minimum,o.size)),d(e)},[o.size]),useEffect(()=>(u(!0),()=>u(!1)),[]),useEffect(()=>{l&&o.enabled&&o.autoActivate&&(o.autoActivate=!1,B())},[l]),useEffect(()=>{const e=()=>{r(!1),setTimeout(()=>{l&&r(!0)},CAMERA_READY_TIMEOUT_MS)};return n&&e(),()=>{n&&(n.reset(),e())}},[n]);var y=useFocusCallback(t.enabled,E,f.renderFocus.bind(f));useEffect(()=>{let e=o.value;!isScanRef(e)&&e&&(o.value=e=convertToScanRef(e));var t=e?.value||"";s!==t&&i(t)},[o.value]);var C=f.renderText(o.tooltip),g=!t.enabled,R=g||!o.manualEntry;const T=(e,t,a)=>{e&&o.value?.value!==e&&(a=convertToScanRef(e,t,a),o.value=a,i(e),f.post("changed",{name:E,value:a}))},F=async e=>{var t=await import("@zxing/library");let a=void 0;return e===ScanType.QrCode?a=[t.BarcodeFormat.AZTEC,t.BarcodeFormat.DATA_MATRIX,t.BarcodeFormat.MAXICODE,t.BarcodeFormat.PDF_417,t.BarcodeFormat.QR_CODE]:e===ScanType.BarCode&&(a=[t.BarcodeFormat.CODABAR,t.BarcodeFormat.CODE_39,t.BarcodeFormat.CODE_93,t.BarcodeFormat.CODE_128,t.BarcodeFormat.EAN_8,t.BarcodeFormat.EAN_13,t.BarcodeFormat.ITF,t.BarcodeFormat.RSS_14,t.BarcodeFormat.RSS_EXPANDED,t.BarcodeFormat.UPC_A,t.BarcodeFormat.UPC_E,t.BarcodeFormat.UPC_EAN_EXTENSION]),a},B=async()=>{if(n)return c(null),void f.post("cancel",{name:E,type:"cancel"});if(l){var e=await(async e=>{var t=await import("@zxing/library"),e=await F(e);const a=new Map;return a.set(t.DecodeHintType.POSSIBLE_FORMATS,e),a})(o.scanType);const t=await import("@zxing/library");e=new t.BrowserMultiFormatReader(e);c(e),await(async e=>{try{var t=await e.listVideoInputDevices();if(!t||0==t.length)throw new DOMException("No video input devices detected.");const r=await e.decodeOnceFromVideoDevice(void 0,p.current||void 0),n=await F(ScanType.QrCode);var a=n.indexOf(r.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;T(r.toString(),EntryMethod.Camera,a),c(null)}catch(e){e instanceof DOMException&&(o.error=e.message,c(null))}})(e)}};return React.createElement(Root,{className:e,component:t,element:o,inputId:S},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!n,ref:p}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:R,fullWidth:!0,id:S,inputProps:{title:C},inputRef:y,multiline:v,onBlur:e=>{0<e.currentTarget.value.length&&(c(null),T(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{i(e.currentTarget.value)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation(),v||(e=e.currentTarget,c(null),T(e.value,EntryMethod.Manual))},required:o.require,rows:v?m:void 0,spellCheck:!1,value:s}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:g||!a,onClick:B,ref:y,title:C},n?React.createElement(CloseIcon,null):o.scanType===ScanType.BarCode?React.createElement(ScanBarcode,null):o.scanType===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))};export default Scanner;export{scannerClasses};

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{makeSafeClassName,makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="WorkflowSection",sectionClasses={root:`${PREFIX}-root`,basicSection:`${PREFIX}-basicSection`,fieldSetSection:`${PREFIX}-fieldSetSection`,title:`${PREFIX}-title`,description:`${PREFIX}-description`},AccordionRoot=styled(Accordion)(({theme:{spacing:e}})=>({[`.${accordionClasses.region}`]:{padding:e(1),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:e(.5)}}})),BoxRoot=styled(Box)(({theme:{palette:e,spacing:o,typography:{pxToRem:t}}})=>({marginBottom:o(4),marginTop:o(4),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:o(.5)},[`&.${sectionClasses.basicSection}`]:{borderLeft:`6px solid ${e.primary[500]}`,paddingLeft:o(1),paddingRight:o(1)},[`&.${sectionClasses.fieldSetSection}`]:{position:"relative",border:`3px solid ${e.primary[500]}`,borderLeft:"none",borderRight:"none",paddingTop:o(3),paddingBottom:o(2),[`.${sectionClasses.title}`]:{backgroundColor:e.background.default,position:"absolute",top:t(-22),left:0,padding:0,"& span":{paddingRight:o(1)}}}})),Section=({className:e,component:t,element:i})=>{const r=t.props["host"],s=t.props.name;let o;null!=i&&i.format&&(o=i.format),o=void 0!==o&&null!==o?o:defs.DEFAULT_SECTION_FORMAT;const a=r.isAccordionSection(i),n=a||r.isCollapsibleSection(i);var c=`${makeUniqueId(s)}-input`;useEffect(()=>(r.refs[s]=t,()=>{r.refs[s]=void 0}),[]);var l,d,m=(l=i,d=c,React.createElement(FormLabel,{className:sectionClasses.title,error:n&&r.hasInvalidChild(l),id:`${d}-label`,component:"h6"},React.createElement(Markdown,{host:r,inline:!0,text:l.title}))),p=renderDescription(r,i,c,sectionClasses.description),f=renderAccessibleDescription(r,i,c),g=renderError(r,i),c={"aria-labelledby":m?.props?.id,"aria-details":p?.props?.id,"aria-describedby":f?.props?.id},g=[p,f,g,t.props.children],e=clsx(e,i.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===o,[sectionClasses.fieldSetSection]:"fieldset-section"===o,[makeSafeClassName(s)]:!!s,[makeSafeClassName(i.styleName)]:!!i.styleName});return n?React.createElement(AccordionRoot,{className:e,expanded:!0!==i.collapsed,onChange:(e,o)=>{a&&o?r.updateAccordionSections(s):(i.collapsed=!o,t.forceUpdate())},...c},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:e=>{null!==e&&i.collapsed&&r.renderFocus(e,s)}},m),...g):React.createElement(BoxRoot,{className:e,component:"section",...c},m,React.createElement(Box,null,...g))};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{useEffect}from"react";import{defs}from"../FormHost.js";import{renderAccessibleDescription,renderDescription,renderError}from"../common.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="WorkflowSection",sectionClasses={root:`${PREFIX}-root`,basicSection:`${PREFIX}-basicSection`,fieldSetSection:`${PREFIX}-fieldSetSection`,title:`${PREFIX}-title`,description:`${PREFIX}-description`},AccordionRoot=styled(Accordion)(({theme:{spacing:e}})=>({[`.${accordionClasses.region}`]:{padding:e(1),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:e(.5)}}})),BoxRoot=styled(Box)(({theme:{palette:e,spacing:o,typography:{pxToRem:t}}})=>({marginBottom:o(4),marginTop:o(4),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:o(.5)},[`&.${sectionClasses.basicSection}`]:{borderLeft:`6px solid ${e.primary[500]}`,paddingLeft:o(1),paddingRight:o(1)},[`&.${sectionClasses.fieldSetSection}`]:{position:"relative",border:`3px solid ${e.primary[500]}`,borderLeft:"none",borderRight:"none",paddingTop:o(3),paddingBottom:o(2),[`.${sectionClasses.title}`]:{backgroundColor:e.background.default,position:"absolute",top:t(-22),left:0,padding:0,"& span":{paddingRight:o(1)}}}})),Section=({className:e,component:t,element:i})=>{const r=t.props["host"],s=t.props.name;let o;null!=i&&i.format&&(o=i.format),o=void 0!==o&&null!==o?o:defs.DEFAULT_SECTION_FORMAT;const a=r.isAccordionSection(i),n=a||r.isCollapsibleSection(i);var c=`${makeUniqueId(s)}-input`;useEffect(()=>(r.refs[s]=t,()=>{r.refs[s]=void 0}),[]);var l,d,m=(l=i,d=c,React.createElement(FormLabel,{className:sectionClasses.title,error:n&&r.hasInvalidChild(l),id:`${d}-label`,component:"h6"},React.createElement(Markdown,{inline:!0,text:l.title,translateText:r.translateText.bind(r)}))),p=renderDescription(r,i,c,sectionClasses.description),f=renderAccessibleDescription(r,i,c),g=renderError(r,i),c={"aria-labelledby":m?.props?.id,"aria-details":p?.props?.id,"aria-describedby":f?.props?.id},g=[p,f,g,t.props.children],e=clsx(e,i.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===o,[sectionClasses.fieldSetSection]:"fieldset-section"===o,[makeSafeClassName(s)]:!!s,[makeSafeClassName(i.styleName)]:!!i.styleName});return n?React.createElement(AccordionRoot,{className:e,expanded:!0!==i.collapsed,onChange:(e,o)=>{a&&o?r.updateAccordionSections(s):(i.collapsed=!o,t.forceUpdate())},...c},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:e=>{null!==e&&i.collapsed&&r.renderFocus(e,s)}},m),...g):React.createElement(BoxRoot,{className:e,component:"section",...c},m,React.createElement(Box,null,...g))};export default Section;export{sectionClasses};

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,element:i})=>{const r=t.props["host"],o=t.props.name,[a,n]=useState(),[s,l]=useState(500),m=r.renderText(i.tooltip),c=r.renderText("@common-clear");useEffect(()=>{var e=i.size;let t=signatureConfiguration.width.default;"number"!=typeof e||isNaN(e)?"object"!=typeof e||void 0===e.width||isNaN(e.width)||(t=e.width):t=e,t=Math.max(t,signatureConfiguration.width.minimum),t=Math.min(t,signatureConfiguration.width.maximum),l(t)},[i.size]),useEffect(()=>{var e=i.value;n(e?.dataUrl)},[i.value]);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});i.value={refValueType:"signature",dataUrl:e,file:t}}else i.value=void 0;n(e)};return React.createElement(Root,{className:e,component:t,element:i},a?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:a,alt:m}),React.createElement(IconButton,{"aria-label":c,disabled:!t.enabled,onClick:()=>u(void 0),title:c},React.createElement(Trash,null))):null,a?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{color:"primary",disabled:!1===i.enabled,onClick:async()=>{const e=Math.round(.4*s);await r.displayDialog(a=>React.createElement(SignatureDialog,{cancelCaption:r.renderText("@common-cancel"),clearCaption:c,doneCaption:r.renderText("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{host:r,inline:!0,text:i.label}),onClose:(e,t)=>{e&&u(t),a()},title:renderTitle(r,i,makeUniqueId(t.props.name+"-dialog")),undoCaption:r.renderText("@common-undo"),width:s}),Dialog)},startIcon:React.createElement(SignatureIcon,null),title:m,variant:"outlined"},React.createElement(Markdown,{host:r,inline:!0,text:i.prompt||""}))))};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{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,element:i})=>{const a=t["enabled"],r=t.props["host"],n=t.props.name,[o,s]=useState(),[l,m]=useState(500),c=r.renderText(i.tooltip),u=r.renderText("@common-clear");useEffect(()=>{var e=i.size;let t=signatureConfiguration.width.default;"number"!=typeof e||isNaN(e)?"object"!=typeof e||void 0===e.width||isNaN(e.width)||(t=e.width):t=e,t=Math.max(t,signatureConfiguration.width.minimum),t=Math.min(t,signatureConfiguration.width.maximum),m(t)},[i.size]),useEffect(()=>{var e=i.value;s(e?.dataUrl)},[i.value]);const g=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${n}.png`,{type:t.type});i.value={refValueType:"signature",dataUrl:e,file:t}}else i.value=void 0;s(e)};return React.createElement(Root,{className:e,component:t,element:i},o?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:o,alt:c}),React.createElement(IconButton,{"aria-label":u,disabled:!a,onClick:()=>g(void 0),title:u},React.createElement(Trash,null))):null,o?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{disabled:!a,onClick:async()=>{const e=Math.round(.4*l);await r.displayDialog(a=>React.createElement(SignatureDialog,{cancelCaption:r.renderText("@common-cancel"),clearCaption:u,doneCaption:r.renderText("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{inline:!0,text:i.label,translateText:r.translateText.bind(r)}),onClose:(e,t)=>{e&&g(t),a()},title:renderTitle(r,i,makeUniqueId(t.props.name+"-dialog")),undoCaption:r.renderText("@common-undo"),width:l}),Dialog)},startIcon:React.createElement(SignatureIcon,null),title:c,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:i.prompt||"",translateText:r.translateText.bind(r)}))))};export default Signature;export{signatureClasses};

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%"}}}})),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(Typography,{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"},React.createElement(Typography,null,a)),React.createElement(Button,{color:"inherit",onClick:()=>{c(!1,void 0)},variant:"outlined"},React.createElement(Typography,null,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";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%"}}}})),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(Typography,{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};

package/forms/components/Text.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { 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 }: BaseFormElementProps) => JSX.Element;
+declare const Text: ({ className, component, element }: FormElementProps) => JSX.Element;
 export default Text;

package/forms/components/TextArea.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
+import { FormElementProps } from "../..";
 /**
  * The component for the "Text Area" Form Element.
  */
-declare const TextArea: ({ className, component, element }: BaseFormElementProps) => JSX.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>) => 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:a,element:r})=>{const[t,n]=useState(8),[o,u]=useState(""),[l,s]=useState("soft"),{host:p,name:m}=a.props;var i=`${makeUniqueId(m)}-input`,f=r.maxLength,c=p.renderText(r.prompt),d=r.readOnly,v=p.renderText(r.tooltip);useEffect(()=>{"number"==typeof r.size&&n(r.size)},[r.size]),useEffect(()=>{let e="";var t=r.value;"string"==typeof t&&(e=t),r.value!==e&&(r.value=e,a.forceUpdate()),u(e)},[r.value]),useEffect(()=>{"string"==typeof r.wrap&&-1!==["hard","soft","off"].indexOf(r.wrap)&&s(r.wrap)},[r.wrap]);return React.createElement(FormElement,{className:e,component:a,element:r,inputId:i},React.createElement(Input,{disabled:!a.enabled,fullWidth:!0,id:i,inputProps:{maxLength:f,onKeyDown:e=>{e.stopPropagation()},title:v,wrap:l},inputRef:e=>{null===e||e.disabled||p.renderFocus(e,m)},multiline:!0,onBlur:e=>{e=e.target.value;e!=r.value&&(r.value=e,p.post("changed",{name:m,value:e}),u(e))},onChange:e=>{e=e.target.value;e!=o&&u(e)},placeholder:c,readOnly:d,required:r.require,rows:t,value:o}))};export default TextArea;
+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;

package/forms/components/TextBox.d.ts

@@ -1,21 +1,7 @@
 /// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-interface TextBoxProps extends BaseFormElementProps {
-    /**
-     * Whether this is a text box or a password input. Default is "text".
-     *
-     * The differences are:
-     *
-     * - `"text"` renders as a text box, `"password"` as a password.
-     * (Obvious, but there you go.)
-     * - `"text"` will convert a numeric value to a string, `"password"` will not.
-     * - `"password"` does not support `element.maxLength` or `element.readOnly`.
-     *
-     */
-    type?: "text" | "password";
-}
+import { FormElementProps } from "../..";
 /**
  * The component for the "Text Box" and "Password Box" Form Elements.
  */
-declare const TextBox: ({ className, component, element, type }: TextBoxProps) => JSX.Element;
+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>) => JSX.Element;
 export default TextBox;