@vertigis/workflow 5.46.1 → 5.48.0

package/forms/components/DropDownList.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../../activities/forms/FormRenderer";
 /**
  * The component for the "Drop Down List" Form Element.
  */
-declare const DropDownList: ({ className, current, element, enabled, items: elementItems, name, prompt, raiseEvent, setProperty, setValue, tooltip, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
+declare const DropDownList: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default DropDownList;

package/forms/components/DropDownList.js

@@ -1 +1 @@
-import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{getInputId,inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,current:l,element:t,enabled:a,items:o,name:r,prompt:n,raiseEvent:s,setProperty:m,setValue:i,tooltip:c,value:u})=>{const p=useContext(HostContext);var d=makeUniqueId(r);const v=getInputId(d),[f,E]=useState({});useEffect(()=>{var{current:e,items:t,label:a,value:r}=inspectItems(l,o,u);m("current",e),m("label",a),m("value",r,!1),E(t)},[o]);const b=p.renderText(c),x=e=>{var t=e.currentTarget.value,e=f[t].value;m("current",t),m("label",f[t].label),e!==u?i(e,{item:t}):s("changed",e,void 0,t)},C=useFocusCallback(a,r,p);return React.createElement(FormElement,{className:e,element:t,inputId:v,name:r},e=>React.createElement(NativeSelect,{disabled:!a,inputProps:{...e,id:v},inputRef:C,onChange:x,title:b,value:l||DEFAULT_VALUE},void 0===l&&React.createElement("option",{key:"none",value:DEFAULT_VALUE,disabled:!0},p.renderText(n)),Object.keys(f).map(e=>{var t=f[e],a=p.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:p.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;
+import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import{forwardRef,useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{getInputId,inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DEFAULT_VALUE="__default",DropDownList=forwardRef(({className:e,current:t,element:a,enabled:r,items:o,name:l,prompt:n,raiseEvent:s,setProperty:m,setValue:c,tooltip:i,value:u},d)=>{const p=useContext(HostContext),f=makeUniqueId(l),v=getInputId(f),[b,E]=useState({});useEffect(()=>{const{current:e,items:a,label:r,value:l}=inspectItems(t,o,u);m("current",e),m("label",r),m("value",l,!1),E(a)},[o]);const x=p.renderText(i),C=e=>{const t=e.currentTarget.value,a=b[t].value;m("current",t),m("label",b[t].label),a!==u?c(a,{item:t}):s("changed",a,void 0,t)},N=useFocusCallback(r,l,p);return React.createElement(FormElement,{className:e,element:a,inputId:v,name:l,ref:d},e=>React.createElement(NativeSelect,{disabled:!r,inputProps:{...e,id:v},inputRef:N,onChange:C,title:x,value:t||"__default"},void 0===t&&React.createElement("option",{key:"none",value:"__default",disabled:!0},p.renderText(n)),Object.keys(b).map(e=>{const t=b[e],a=p.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:p.renderText(t.tooltip),disabled:!1===t.enabled},a)})))});export default DropDownList;

package/forms/components/FilePicker.d.ts

@@ -9,5 +9,5 @@ export declare const filePickerClasses: {
 /**
  * The component for the "File Picker" Form Element.
  */
-declare const FilePicker: ({ className, element, enabled, fileTypes, name, setValue, size, value, }: FormElementProps<defs.FilesRef | undefined>) => React.JSX.Element;
+declare const FilePicker: React.ForwardRefExoticComponent<FormElementProps<defs.FilesRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default FilePicker;

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{useContext,useEffect}from"react";import HostContext from"../hostContext.js";import{isFilesRef}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="FilePicker",filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`},StyledFormElement=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,element:t,enabled:l,fileTypes:i,name:r,setValue:s,size:a,value:o})=>{const n=useContext(HostContext);let c=5,m;"number"==typeof a&&(c=1<a?Math.ceil(a):1),useEffect(()=>{o&&(isFilesRef(o)&&Array.isArray(o.files)||s(void 0,!1))},[o]);var f=n.renderText(t.tooltip);let p=l;const u=[];var d=useFocusCallback(l,r,n);if(void 0!==o){p=l&&o.files.length<c;var k=n.renderText("@file-picker-remove-item-label");for(const E of o.files){var g=u.length;u.push(React.createElement(Box,{key:"$"+g,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:E.name},E.name),React.createElement(IconButton,{"aria-label":k,disabled:!l,onClick:(l=>()=>{let e;if(o?.files&&1<o.files.length){const t=[...o.files];t.splice(l,1),e={...o,files:t}}s(e)})(g),ref:d,title:k},React.createElement(Trash,null))))}}u.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{disabled:!p,onClick:()=>{m&&(m.value="",m.click())},ref:d,startIcon:React.createElement(Plus,null),title:f,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:t.prompt||""}))));a=1!==c;return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:r},React.createElement(Stack,{className:filePickerClasses.list},u),React.createElement("input",{type:"file",style:{display:"none"},title:f,onChange:e=>(e=>{var t=e.files;if(t?.length){const l=o?.files||[];for(let e=0;e<t.length&&l.length!==c;e++)l.push(t[e]);e={refValueType:"files",files:l};s(e)}})(e.target),multiple:a,accept:i,ref:e=>{m=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{forwardRef,useContext,useEffect}from"react";import HostContext from"../hostContext.js";import{isFilesRef}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="FilePicker";export const filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`};const StyledFormElement=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=forwardRef(({className:e,element:t,enabled:l,fileTypes:i,name:s,setValue:r,size:o,value:a},n)=>{const c=useContext(HostContext);let m,f=5;"number"==typeof o&&(f=o>1?Math.ceil(o):1),useEffect(()=>{a&&(isFilesRef(a)&&Array.isArray(a.files)||r(void 0,!1))},[a]);const p=c.renderText(t.tooltip);let u=l;const d=[],k=useFocusCallback(l,s,c);if(void 0!==a){const e=e=>()=>{let t;if(a?.files&&a.files.length>1){const l=[...a.files];l.splice(e,1),t={...a,files:l}}r(t)};u=l&&a.files.length<f;const t=c.renderText("@file-picker-remove-item-label");for(const i of a.files){const s=d.length;d.push(React.createElement(Box,{key:"$"+s,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:i.name},i.name),React.createElement(IconButton,{"aria-label":t,disabled:!l,onClick:e(s),ref:k,title:t},React.createElement(Trash,null))))}}d.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{disabled:!u,onClick:()=>{m&&(m.value="",m.click())},ref:k,startIcon:React.createElement(Plus,null),title:p,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:t.prompt||""}))));const g=1!==f;return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:s,ref:n},React.createElement(Stack,{className:filePickerClasses.list},d),React.createElement("input",{type:"file",style:{display:"none"},title:p,onChange:e=>(e=>{const t=e.files;if(t?.length){const e=a?.files||[];for(let l=0;l<t.length&&e.length!==f;l++)e.push(t[l]);r({refValueType:"files",files:e})}})(e.target),multiple:g,accept:i,ref:e=>{m=e}}))});export default FilePicker;

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{FormElementTypes}from"../constants.js";import{getLocale,getLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection}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`},StyledBox=styled(Box)(()=>({"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("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),[n,i]=useState(),a=t.props["host"];var l,m,t=a["form"];if(useEffect(()=>{let t=!0;var e=a.deriveLocale();return getLocale(e).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),getLocaleText(e).then(e=>{t?i(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]),!o)return null;const s={host:a,type:"header",children:[]},c={host:a,type:"body",children:[]},d={host:a,type:"main",children:[]},f={host:a,type:"footer",children:[]},u={host:a,type:"body",children:[]},p={},h=[];function y(e){return e!==FormElementTypes.SECTION}function E(e){return e===s||e===c||e===f?`${e.type}-section`:e.name}const g=t.elements;for(const L of Object.keys(g).map(e=>[e,g[e]]).sort((e,t)=>{var o=e[1].section,r=t[1].section;return"header"===o||"footer"===r?Number.MIN_SAFE_INTEGER:"footer"===o||"header"===r?Number.MAX_SAFE_INTEGER:e[1].rowNumber===t[1].rowNumber?e[1].rowIndex-t[1].rowIndex:e[1].rowNumber-t[1].rowNumber})){var F,[v,x]=L;if(!0!==(l=x).hoisted&&(!1!==l.visible&&y(l.type)))if(!0!==x.overlay){let e=function(e){if(void 0===e)return c;if("header"===e)return s;if("footer"===e)return f;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of h)if(t.name===e)return t})(t);return void 0===o&&(o={host:a,name:t,type:"section",children:[]},h.push(o)),o}(x.section);void 0!==x.rowNumber&&(F=E(e),e=function(e,t){let o=p[t];o=o||(p[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:a,type:"row",children:[]}),r}(x.rowNumber,F)),e.children.push(React.createElement(FormElementComponent,{key:v,host:a,type:"element",name:v,children:[]}))}else u.children.push(React.createElement(FormElementComponent,{key:v,host:a,type:"element",name:v,children:[]}))}const C=[];if(0<s.children.length&&C.push(React.createElement(FormComponent,{key:"header",...s})),0<u.children.length)C.push(React.createElement(FormComponent,{key:"main",...u}));else{k(c);let e,t,o=0;var b=()=>{if(e){switch(t){case"accordion-section":$(e,++o,"accordionGroup");break;case"tab-section":$(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const N of h){var w=N.name,T=g[w],R=T.format;t&&R!==t&&b(),null!=(m=g[m=w])&&(y(m.type)||!0===m.hoisted||!1===m.visible)||(isMutuallyExclusiveSection(T)?e?e.push(N):(e=[N],t=R):k(N))}b(),0<d.children.length&&C.push(React.createElement(FormComponent,{key:"main",...d}))}function I(e){if(!function(e){var t=E(e),o=p[t];if(o)for(const i of Object.keys(o).map(e=>parseInt(e)).sort((e,t)=>e-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===c?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function k(e){e=I(e);e&&d.children.push(e)}function $(e,t,o){const r=[];for(const i of e){var n=I(i);n&&r.push(n)}t=`${o}${t}`,o={children:r,host:a,name:t,type:o};d.children.push(React.createElement(FormComponent,{key:t,...o}))}return 0<f.children.length&&C.push(React.createElement(FormComponent,{key:"footer",...f})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||a.post("clicked"))},ref:function(e){a.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...n,start:a.renderText("@date-range-picker-start-text"),end:a.renderText("@date-range-picker-end-text"),cancelButtonLabel:a.renderText("@common-cancel"),clearButtonLabel:a.renderText("@common-clear"),okButtonLabel:a.renderText("@common-ok"),todayButtonLabel:a.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{getDateFnsLocale,getMuiLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection}from"../utils.js";const PREFIX="Form";export const formClasses={body:"Form-body",footer:"Form-footer",formElementContent:"Form-element-content",formElementTitle:"Form-element-title",formElementWithTitleBeside:"Form-element-with-title-beside",header:"Form-header",main:"Form-main",root:"Form-root",row:"Form-row"};const StyledBox=styled(Box)(()=>({"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("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),[n,i]=useState(),{host:c}=t.props,{form:s}=c;if(useEffect(()=>{let e=!0;const t=c.deriveLocale();return getDateFnsLocale(t).then(t=>{e?r(t):console.warn("Component was unmounted while loading the locale.")}),getMuiLocaleText(t).then(t=>{e?i(t):console.warn("Component was unmounted while loading the locale.")}),()=>{e=!1}},[]),!o)return null;const m={host:c,type:"header",children:[]},l={host:c,type:"body",children:[]},a={host:c,type:"main",children:[]},d={host:c,type:"footer",children:[]},f={host:c,type:"body",children:[]},u={},p=[];function h(e,t){let o=u[t];o||(o=u[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:c,type:"row",children:[]}),r}function y(e){if(void 0===e)return l;if("header"===e)return m;if("footer"===e)return d;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of p)if(t.name===e)return t})(t);return void 0===o&&(o={host:c,name:t,type:"section",children:[]},p.push(o)),o}function E(e){return e!==FormElementTypes.SECTION}function F(e){return!0!==e.hoisted&&(!1!==e.visible&&E(e.type))}function g(e){const t=C[e];return null==t||!E(t.type)&&(!0!==t.hoisted&&!1!==t.visible)}function x(e){return e===m||e===l||e===d?`${e.type}-section`:e.name}const C=s.elements,b=Object.keys(C).map(e=>[e,C[e]]).sort((e,t)=>{const o=e[1].section,r=t[1].section;return"header"===o||"footer"===r?Number.MIN_SAFE_INTEGER:"footer"===o||"header"===r?Number.MAX_SAFE_INTEGER:e[1].rowNumber===t[1].rowNumber?e[1].rowIndex-t[1].rowIndex:e[1].rowNumber-t[1].rowNumber});for(const e of b){const[t,o]=e;if(F(o))if(!0!==o.overlay){let e=y(o.section);if(void 0!==o.rowNumber){const t=x(e);e=h(o.rowNumber,t)}e.children.push(React.createElement(FormElementComponent,{key:t,host:c,type:"element",name:t,children:[]}))}else f.children.push(React.createElement(FormElementComponent,{key:t,host:c,type:"element",name:t,children:[]}))}const w=[];if(m.children.length>0&&w.push(React.createElement(FormComponent,{key:"header",...m})),f.children.length>0)w.push(React.createElement(FormComponent,{key:"main",...f}));else{let e,t;v(l);let o=0;const r=()=>{if(e){switch(t){case"accordion-section":k(e,++o,"accordionGroup");break;case"tab-section":k(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const o of p){const n=o.name,i=C[n],c=i.format;t&&c!==t&&r(),g(n)&&(isMutuallyExclusiveSection(i)?e?e.push(o):(e=[o],t=c):v(o))}r(),a.children.length>0&&w.push(React.createElement(FormComponent,{key:"main",...a}))}function T(e){if(function(e){const t=x(e),o=u[t];if(o){const t=Object.keys(o).map(e=>parseInt(e)).sort((e,t)=>e-t);for(const r of t){const t=o[r];if(t.children.length>1){const o=`row-${r}`;e.children.push(React.createElement(FormComponent,{key:o,...t}))}else 1===t.children.length&&e.children.push(...t.children)}}}(e),e.children.length>0){const t=e===l?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function v(e){const t=T(e);t&&a.children.push(t)}function k(e,t,o){const r=[];for(const t of e){const e=T(t);e&&r.push(e)}const n=`${o}${t}`,i={children:r,host:c,name:n,type:o};a.children.push(React.createElement(FormComponent,{key:n,...i}))}return d.children.length>0&&w.push(React.createElement(FormComponent,{key:"footer",...d})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||c.post("clicked"))},ref:function(e){c.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...n,start:c.renderText("@date-range-picker-start-text"),end:c.renderText("@date-range-picker-end-text"),cancelButtonLabel:c.renderText("@common-cancel"),clearButtonLabel:c.renderText("@common-clear"),okButtonLabel:c.renderText("@common-ok"),todayButtonLabel:c.renderText("@common-today")}},w))};export default Form;

package/forms/components/FormElement.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";const StyledFormControl=styled(FormControl)(({theme:{palette:e,spacing:r}})=>({code:{backgroundColor:"rgba(0, 0, 0, .06)",fontFamily:'"Consolas", monospace'},table:{borderCollapse:"collapse","td, th":{border:`1px solid ${e.grey[400]}`,padding:r(.5)},th:{backgroundColor:e.grey[100]}}}));export default forwardRef((e,r)=>{var{children:o,className:t,component:s,element:i,inputId:a,name:n}=e,l=useContext(HostContext),m=makeUniqueId(n),c=renderTitle(m,i.require,i.title,a,"fieldset"===s?"legend":void 0),e=renderDescription(i.description,m,i.enabled),a=renderAccessibleDescription(i.accessibleDescription,i.description,m,l),l=renderError(i.error);const d={className:clsx(t,i.type,{[formClasses.formElementWithTitleBeside]:i.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(n)]:!!n,[makeSafeClassName(i.styleName)]:!!i.styleName}),component:s,error:!!l,id:m,ref:r,required:i.require};m=c?.props?.id,r=a?.props?.id;const p=o instanceof Function?o:void 0;let f=o instanceof Function?void 0:o;p?f=p({"aria-labelledby":m,"aria-describedby":r}):(d["aria-labelledby"]=m,d["aria-describedby"]=r);const u=[c];return i.titleLocation===TitleLocation.BESIDE?u.push(React.createElement("div",{className:formClasses.formElementContent},e,a,l,f)):(u.push(e),u.push(a),u.push(l),u.push(f)),React.createElement(StyledFormControl,{fullWidth:!0,...d},...u)});
+import FormControl from"@vertigis/react-ui/FormControl";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";const StyledFormControl=styled(FormControl)(({theme:{palette:e,spacing:r}})=>({code:{backgroundColor:"rgba(0, 0, 0, .06)",fontFamily:'"Consolas", monospace'},table:{borderCollapse:"collapse","td, th":{border:`1px solid ${e.grey[400]}`,padding:r(.5)},th:{backgroundColor:e.grey[100]}}}));export default forwardRef((e,r)=>{const{children:o,className:t,component:s,element:i,inputId:a,name:n}=e,l=useContext(HostContext),m=makeUniqueId(n),c=renderTitle(m,i.require,i.title,a,"fieldset"===s?"legend":void 0),d=renderDescription(i.description,m,i.enabled),p=renderAccessibleDescription(i.accessibleDescription,i.description,m,l),f=renderError(i.error),u={className:clsx(t,i.type,{[formClasses.formElementWithTitleBeside]:i.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(n)]:!!n,[makeSafeClassName(i.styleName)]:!!i.styleName}),component:s,error:!!f,id:m,ref:r,required:i.require},C=c?.props?.id,b=p?.props?.id,y=o instanceof Function?o:void 0;let h=o instanceof Function?void 0:o;y?h=y({"aria-labelledby":C,"aria-describedby":b}):(u["aria-labelledby"]=C,u["aria-describedby"]=b);const g=[c];return i.titleLocation===TitleLocation.BESIDE?g.push(React.createElement("div",{className:formClasses.formElementContent},d,p,f,h)):(g.push(d),g.push(p),g.push(f),g.push(h)),React.createElement(StyledFormControl,{fullWidth:!0,...u},...g)});

package/forms/components/FormLabelNumberField.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import type { InputBaseProps } from "@vertigis/react-ui/InputBase";
+import type { KeyboardEvent } from "react";
 interface FormLabelNumberFieldProps {
     disabled: boolean;
     endAdornment?: React.ReactNode;
     id?: string;
     inputProps: InputBaseProps["inputProps"];
     onChange: (value: number | undefined) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
     startAdornment?: React.ReactNode;
     label: string;
     value: number;

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,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;
+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=>{const{disabled:r,endAdornment:t,id:m,inputProps:o,label:a,max:n,maxDecimalPlaces:i,min:l,onChange:u,onKeyDown:s,startAdornment:c,value:d}=e,b=useId(m),p=`${b}-label`;return React.createElement(FormControl,{disabled:r},React.createElement(FormLabel,{htmlFor:b,id:p},a),React.createElement(NumberInput,{id:b,inputProps:o,endAdornment:t,max:n,maxDecimalPlaces:i,min:l,onChange:u,onKeyDown:s,size:"small",startAdornment:c,value:d}))};export default FormLabelNumberField;

package/forms/components/GeometryPicker.d.ts

@@ -4,5 +4,5 @@ import type * as defs from "../FormDefinition";
 /**
  * The component for the "Geometry Picker" Form Element.
  */
-declare const GeometryPicker: ({ autoActivate, className, element, enabled, itemLabel: elementItemLabel, name, prompt, raiseEvent, setProperty, setValue, size, state: elementState, tooltip: elementTooltip, value, }: FormElementProps<defs.GeometryRef | undefined>) => React.JSX.Element;
+declare const GeometryPicker: React.ForwardRefExoticComponent<FormElementProps<defs.GeometryRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default GeometryPicker;

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{useContext,useEffect,useRef,useState}from"react";import HostContext from"../hostContext.js";import{sanitizeGeometryRef,text}from"../utils.js";import FormElement from"./FormElement.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const GeometryPicker=({autoActivate:e,className:t,element:r,enabled:o,itemLabel:i,name:n,prompt:s,raiseEvent:a,setProperty:c,setValue:l,size:m,state:u,tooltip:d,value:f})=>{const p=useContext(HostContext),[g,v]=useState([]),[h,k]=useState(""),y=u,x=useRef(!1);let E=5;"number"==typeof m&&(E=1<m?Math.ceil(m):1),useEffect(()=>{var e=sanitizeGeometryRef(f);f!==e&&l(e,!1),void 0!==f&&(Array.isArray(i)?v(i):(v([]),text.isMarkdown(i)?i.markdown&&k(i):text.isStatus(i)?i.status&&k(i.status):i&&k(i))),void 0!==y&&null!==y||c("state",[])},[f]);const[R,b]=useState([]),B=useFocusCallback(o,n,p);const I=e=>{let t=y[e];return void 0!==t&&null!==t||(y.length<=e&&(y.length=e,y.push({})),t=y[e]),t},C=n=>()=>{let e;if(1<f.geometry.length){const r=[...f.geometry];if(r.splice(n,1),e={...f,geometry:r},y.splice(n,1),n<g.length){const o=[...g];o.splice(n,1),v(o)}}else y.length=0;const t=[];for(const i of R)i<n?t.push(i):i>n&&t.push(i-1);b(t),l(e,{argument:"remove"})};var L=e=>{o&&C(e)()},P=(e,t,r)=>{const o=I(e);o.focused=t,o.pending=r,p.renderState(n,"geometry",y)};let G=o;const S=[];if(void 0!==f&&void 0!==y){G=o&&f.geometry.length<E;var j=p.renderText("@geometry-picker-remove-item-label");for(const A of f.geometry){var w=S.length;I(w).content=A;var M=`checkbox-list-label-${w}`;S.push(React.createElement(GeometryPickerListItem,{deleteItem:L,disablePadding:!0,itemIndex:w,key:"$"+w,secondaryAction:React.createElement(IconButton,{"aria-label":j,className:"delete",disabled:!o,edge:"end",onClick:C(w),ref:B,title:j},React.createElement(Trash,null)),updateHighlight:P},React.createElement(ListItemButton,{onClick:(o=>()=>{var e=R.indexOf(o);const t=[...R],r=I(o);-1===e?(r.checked=!0,t.push(o)):(r.checked=!1,t.splice(e,1)),b(t)})(w),ref:(t=>e=>{B(e),null!==e&&(e.checked=!!I(t).checked)})(w),selected:-1!==R.indexOf(w)},React.createElement(Markdown,{id:M,inline:!0,text:g[w]||h}))))}}const T=()=>{a("clicked",f)};d=p.renderText(d);return o&&e&&!x.current&&(setTimeout(()=>{c("autoActivate",void 0),x.current=!1,G&&T()}),x.current=!0),React.createElement(FormElement,{className:t,component:"fieldset",element:r,name:n,ref:e=>{let t=y;null===e&&(r.visible||c("state",[]),t=void 0),p.renderState(n,"geometry",t)}},React.createElement(List,null,S),React.createElement(Box,null,React.createElement(Button,{disabled:!G,onClick:T,ref:B,startIcon:React.createElement(Plus,null),title:d,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:s||""}))))};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{forwardRef,useContext,useEffect,useRef,useState}from"react";import HostContext from"../hostContext.js";import{sanitizeGeometryRef,text}from"../utils.js";import FormElement from"./FormElement.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const GeometryPicker=forwardRef(({autoActivate:e,className:t,element:r,enabled:o,itemLabel:n,name:i,prompt:s,raiseEvent:c,setProperty:a,setValue:l,size:m,state:u,tooltip:d,value:f},p)=>{const g=useContext(HostContext),[h,k]=useState([]),[y,v]=useState(""),x=u,E=useRef(!1);let R=5;"number"==typeof m&&(R=m>1?Math.ceil(m):1),useEffect(()=>{F(p.current)},[p]),useEffect(()=>{const e=sanitizeGeometryRef(f);f!==e&&l(e,!1),void 0!==f&&(Array.isArray(n)?k(n):(k([]),text.isMarkdown(n)?n.markdown&&v(n):text.isStatus(n)?n.status&&v(n.status):n&&v(n))),null==x&&a("state",[])},[f]);const[b,B]=useState([]),I=useFocusCallback(o,i,g),C=e=>()=>{const t=b.indexOf(e),r=[...b],o=L(e);-1===t?(o.checked=!0,r.push(e)):(o.checked=!1,r.splice(t,1)),B(r)},L=e=>{let t=x[e];return null==t&&(x.length<=e&&(x.length=e,x.push({})),t=x[e]),t},P=e=>()=>{let t;if(f.geometry.length>1){const r=[...f.geometry];if(r.splice(e,1),t={...f,geometry:r},x.splice(e,1),e<h.length){const t=[...h];t.splice(e,1),k(t)}}else x.length=0;const r=[];for(const t of b)t<e?r.push(t):t>e&&r.push(t-1);B(r),l(t,{argument:"remove"})},w=e=>t=>{I(t),null!==t&&(t.checked=!!L(e).checked)},G=e=>{o&&P(e)()},S=(e,t,r)=>{const o=L(e);o.focused=t,o.pending=r,g.renderState(i,"geometry",x)};let j=o;const M=[];if(void 0!==f&&void 0!==x){j=o&&f.geometry.length<R;const e=g.renderText("@geometry-picker-remove-item-label");for(const t of f.geometry){const r=M.length;L(r).content=t;const n=`checkbox-list-label-${r}`;M.push(React.createElement(GeometryPickerListItem,{deleteItem:G,disablePadding:!0,itemIndex:r,key:"$"+r,secondaryAction:React.createElement(IconButton,{"aria-label":e,className:"delete",disabled:!o,edge:"end",onClick:P(r),ref:I,title:e},React.createElement(Trash,null)),updateHighlight:S},React.createElement(ListItemButton,{onClick:C(r),ref:w(r),selected:-1!==b.indexOf(r)},React.createElement(Markdown,{id:n,inline:!0,text:h[r]||y}))))}}const T=()=>{c("clicked",f)},A=g.renderText(d),F=e=>{let t=x;null===e&&(r.visible||null==x&&a("state",[]),t=void 0),g.renderState(i,"geometry",t)};return o&&e&&!E.current&&(setTimeout(()=>{a("autoActivate",void 0),E.current=!1,j&&T()}),E.current=!0),React.createElement(FormElement,{className:t,component:"fieldset",element:r,name:i,ref:p},React.createElement(List,null,M),React.createElement(Box,null,React.createElement(Button,{disabled:!j,onClick:T,ref:I,startIcon:React.createElement(Plus,null),title:A,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:s||""}))))});export default GeometryPicker;

package/forms/components/HorizontalRule.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Horizontal Rule" Form Element.
  */
-declare const HorizontalRule: ({ className, element, name }: FormElementProps) => React.JSX.Element;
+declare const HorizontalRule: React.ForwardRefExoticComponent<FormElementProps<undefined> & React.RefAttributes<HTMLHRElement>>;
 export default HorizontalRule;

package/forms/components/HorizontalRule.js

@@ -1 +1 @@
-import Divider from"@vertigis/react-ui/Divider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{FormElementTypes}from"../constants.js";import{makeSafeClassName}from"../utils.js";const StyledDivider=styled(Divider)(({theme:{spacing:e}})=>({marginBottom:e(3),marginTop:e(3)})),HorizontalRule=({className:e,element:t,name:a})=>React.createElement(StyledDivider,{className:clsx(e,FormElementTypes.HORIZONTALRULE,{[makeSafeClassName(a)]:!!a,[makeSafeClassName(t.styleName)]:!!t.styleName})});export default HorizontalRule;
+import Divider from"@vertigis/react-ui/Divider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef}from"react";import{FormElementTypes}from"../constants.js";import{makeSafeClassName}from"../utils.js";const StyledDivider=styled(Divider)(({theme:{spacing:e}})=>({marginBottom:e(3),marginTop:e(3)})),HorizontalRule=forwardRef(({className:e,element:t,name:r},a)=>React.createElement(StyledDivider,{className:clsx(e,FormElementTypes.HORIZONTALRULE,{[makeSafeClassName(r)]:!!r,[makeSafeClassName(t.styleName)]:!!t.styleName})}));export default HorizontalRule;

package/forms/components/Image.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Image" Form Element.
  */
-declare const Image: ({ className, element, name, size, tooltip: elementTooltip, value, }: FormElementProps<string>) => React.JSX.Element;
+declare const Image: React.ForwardRefExoticComponent<FormElementProps<string> & React.RefAttributes<HTMLHRElement>>;
 export default Image;

package/forms/components/Image.js

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

package/forms/components/ItemPicker.d.ts

@@ -9,7 +9,7 @@ export declare const itemPickerClasses: {
     item: string;
     items: string;
 };
-declare const ItemPicker: ({ className, component, element, enabled, items: elementItems, name, orientation, prompt, selectionMode, setProperty, setValue, showFilter, spacing, state: elementState, value, }: FormElementProps<defs.ItemsRef | undefined> & {
-    spacing?: number | undefined;
-}) => React.JSX.Element;
+declare const ItemPicker: React.ForwardRefExoticComponent<FormElementProps<defs.ItemsRef | undefined> & {
+    spacing?: number;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ItemPicker;

package/forms/components/ItemPicker.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";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 Typography from"@vertigis/react-ui/Typography";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{useContext,useEffect,useMemo,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual}from"../listUtilities.js";import{debounce,isDataRef,isGeometryRef,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="ItemPicker",itemPickerClasses={allNone:`${PREFIX}-all-none`,button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`},StyledFormElement=styled(FormElement)(({theme:{typography:e,spacing:t}})=>({[`.${itemPickerClasses.allNone}`]:{marginLeft:t(2)},[`.${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:o,element:t,enabled:r,items:a,name:i,orientation:s,prompt:n,selectionMode:l,setProperty:c,setValue:m,showFilter:d,spacing:u,state:p,value:f})=>{const k=useContext(HostContext);void 0===u&&(u=1);const[g,I]=useState(""),h=a||{};let R=p;const v=useFocusCallback(r,i,k),b=e=>{const t=[];for(const o in h){var r=h[o];r.checked&&t.push(r)}let i;0<t.length&&(i={refValueType:"items",items:t}),areValuesEqual(f,i)||m(i,e)};useEffect(()=>{void 0!==R&&null!==R||(R={items:[],keyToIndex:{}});const e={};for(const r in a){var t=x(r,!1);t&&(e[r]=t)}R.items.length=0,R.keyToIndex={};for(const i in e)R.keyToIndex[i]=R.items.length,R.items.push(e[i]);p!==R&&c("state",R),b(!1)});const x=(e,t=!0)=>{let r=R.keyToIndex[e];if(null==r||null===r){if(!t)return;R.keyToIndex[e]=R.items.length,R.items.push({}),r=R.keyToIndex[e]}return R.items[r]},C=(e,t)=>{h[e].checked=t;const r=x(e);r&&(r.checked=t)};var E=t=>e=>{null!==e&&(v(e),e=!0===h[t].checked,x(t).checked=e)};const y=[];let T;switch(l){case"single":T="radio";break;case"multiple":T="checkbox"}const P={},L={};if(R)for(const K in h){var F,S,$,N,w=h[K];w.checked&&(P[K]=w),x(K).content=(e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}})(w.value),!1!==w.visible&&(L[K]=w,S=(F=r&&!1!==w.enabled)&&!!T,$=k.renderText(w.tooltip),N=clsx(itemPickerClasses.item,w.styleName?makeSafeClassName(w.styleName):void 0),w=React.createElement(Markdown,{text:w.label}),y.push(React.createElement(ListItem,{className:N,disablePadding:!0,key:K},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!F,onClick:S?(r=>()=>{var e=h[r].checked;if("single"===l){if(!e)for(const t in h)C(t,t===r)}else C(r,!e);b(!0),k.renderState(i,"item-picker",R)})(K):void 0,tabIndex:F?void 0:-1,title:$,"data-id":K,onBlur:F?e=>{delete x(e.currentTarget.dataset.id).focused,k.renderState(i,"item-picker",R)}:void 0,onFocus:F?e=>{x(e.currentTarget.dataset.id).focused=!0,k.renderState(i,"item-picker",R)}:void 0,onMouseOver:F?e=>{x(e.currentTarget.dataset.id).pending=!0,k.renderState(i,"item-picker",R)}:void 0,onMouseOut:F?e=>{delete x(e.currentTarget.dataset.id).pending,k.renderState(i,"item-picker",R)}:void 0},"checkbox"===T&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===h[K]?.checked,disabled:!F,disableRipple:!0,slotProps:{input:{ref:E(K)}},tabIndex:-1,value:K})),"radio"===T&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===h[K]?.checked,disabled:!F,disableRipple:!0,name:i,slotProps:{input:{ref:E(K)}},tabIndex:-1,value:K})),React.createElement(ListItemText,null,w)))))}var M=k.renderText(n);const j=useMemo(()=>e=>{for(const t in h){const r=h[t];if(e){const i=k.renderText(r.label).toLowerCase();r.visible=0<=i.indexOf(e)}else r.visible=!0}o.forceUpdate()},[h]),B=useMemo(()=>debounce(j),[h]);const O=()=>{I(""),j("")};var X="multiple"===l&&0<y.length,z=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:s===Orientation.HORIZONTAL});let A,G=0,q=0,U=0,V=0;for(const Z in h){var W=L[Z];W?(U++,W.checked&&G++):(V++,h[Z].checked&&q++)}0===G?A="none":G===U&&(A="all");n=g?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r,onClick:O,title:k.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,s=d?`${makeUniqueId(i)}-filter`:void 0;let D,H=k.renderText("@item-picker-select");return X&&0<V&&(H=k.renderText("@item-picker-select-visible"),0<q&&(D=1===q?k.renderText("@item-picker-hidden-selected-item"):`${q} ${k.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,inputId:s,name:i,ref:e=>{null===e?k.renderState(i,"item-picker"):k.renderState(i,"item-picker",R)}},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!r,endAdornment:n,error:!1,fullWidth:!0,id:s,inputRef:v,onChange:e=>{const t=e.target.value;I(t),B(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&O()},placeholder:M,type:"text",value:g}),X&&React.createElement(FormControl,{className:itemPickerClasses.allNone},React.createElement(FormLabel,null,H),React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===A,control:React.createElement(Radio,{size:"small"}),disabled:!r,inputRef:v,onClick:()=>{for(const e in L)C(e,!0);b(!0)},label:k.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===A,control:React.createElement(Radio,{size:"small"}),disabled:!r,onClick:()=>{for(const e in L)C(e,!1);b(!0)},label:k.renderText("@common-none")})),D&&React.createElement(Typography,{variant:"subtitle2"},D)),React.createElement(List,{className:z,dense:!0},y)))};export default ItemPicker;export{itemPickerClasses};
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";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 Typography from"@vertigis/react-ui/Typography";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{forwardRef,useContext,useEffect,useMemo,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual}from"../listUtilities.js";import{debounce,isDataRef,isGeometryRef,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="ItemPicker";export const itemPickerClasses={allNone:`${PREFIX}-all-none`,button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`};const StyledFormElement=styled(FormElement)(({theme:{typography:e,spacing:t}})=>({[`.${itemPickerClasses.allNone}`]:{marginLeft:t(2)},[`.${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=forwardRef(({className:e,component:t,element:i,enabled:r,items:o,name:s,orientation:a,prompt:n,selectionMode:c,setProperty:l,setValue:m,showFilter:d,spacing:u,state:p,value:f},k)=>{const g=useContext(HostContext);void 0===u&&(u=1);const I=e=>()=>{const t=b[e].checked;if("single"===c){if(!t)for(const t in b)y(t,t===e)}else y(e,!t);v(!0),g.renderState(s,"item-picker",x)},[R,h]=useState(""),b=o||{};let x=p;const C=useFocusCallback(r,s,g),v=e=>{const t=[];for(const e in b){const i=b[e];i.checked&&t.push(i)}let i;t.length>0&&(i={refValueType:"items",items:t}),areValuesEqual(f,i)||m(i,e)};useEffect(()=>{B(k.current)},[k]),useEffect(()=>{null==x&&(x={items:[],keyToIndex:{}});const e={};for(const t in o){const i=E(t,!1);i&&(e[t]=i)}x.items.length=0,x.keyToIndex={};for(const t in e)x.keyToIndex[t]=x.items.length,x.items.push(e[t]);p!==x&&l("state",x),v(!1)});const E=(e,t=!0)=>{let i=x.keyToIndex[e];if(null==i||null===i){if(!t)return;x.keyToIndex[e]=x.items.length,x.items.push({}),i=x.keyToIndex[e]}return x.items[i]},y=(e,t)=>{b[e].checked=t;const i=E(e);i&&(i.checked=t)},T=e=>t=>{if(C(t),null!==t){const t=!0===b[e].checked;E(e).checked=t}},P=e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}},L=[];let F;switch(c){case"single":F="radio";break;case"multiple":F="checkbox"}const S={},$={};if(x)for(const e in b){const t=b[e];if(t.checked&&(S[e]=t),E(e).content=P(t.value),!1!==t.visible){$[e]=t;const i=r&&!1!==t.enabled,o=i&&!!F,a=g.renderText(t.tooltip),n=clsx(itemPickerClasses.item,t.styleName?makeSafeClassName(t.styleName):void 0),c=React.createElement(Markdown,{text:t.label});L.push(React.createElement(ListItem,{className:n,disablePadding:!0,key:e},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!i,onClick:o?I(e):void 0,tabIndex:i?void 0:-1,title:a,"data-id":e,onBlur:i?e=>{delete E(e.currentTarget.dataset.id).focused,g.renderState(s,"item-picker",x)}:void 0,onFocus:i?e=>{E(e.currentTarget.dataset.id).focused=!0,g.renderState(s,"item-picker",x)}:void 0,onMouseOver:i?e=>{E(e.currentTarget.dataset.id).pending=!0,g.renderState(s,"item-picker",x)}:void 0,onMouseOut:i?e=>{delete E(e.currentTarget.dataset.id).pending,g.renderState(s,"item-picker",x)}:void 0},"checkbox"===F&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===b[e]?.checked,disabled:!i,disableRipple:!0,slotProps:{input:{ref:T(e)}},tabIndex:-1,value:e})),"radio"===F&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===b[e]?.checked,disabled:!i,disableRipple:!0,name:s,slotProps:{input:{ref:T(e)}},tabIndex:-1,value:e})),React.createElement(ListItemText,null,c))))}}const N=g.renderText(n),w=useMemo(()=>e=>{for(const t in b){const i=b[t];if(e){const t=g.renderText(i.label).toLowerCase();i.visible=t.indexOf(e)>=0}else i.visible=!0}t.forceUpdate()},[b]),M=useMemo(()=>debounce(w),[b]),j=()=>{h(""),w("")},B=e=>{null===e?g.renderState(s,"item-picker"):g.renderState(s,"item-picker",x)},O="multiple"===c&&L.length>0,X=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:a===Orientation.HORIZONTAL});let z,A=0,G=0,q=0,U=0;for(const e in b){const t=$[e];t?(q++,t.checked&&A++):(U++,b[e].checked&&G++)}0===A?z="none":A===q&&(z="all");const V=R?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r,onClick:j,title:g.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,W=d?`${makeUniqueId(s)}-filter`:void 0;let D,H=g.renderText("@item-picker-select");return O&&U>0&&(H=g.renderText("@item-picker-select-visible"),G>0&&(D=1===G?g.renderText("@item-picker-hidden-selected-item"):`${G} ${g.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:i,inputId:W,name:s,ref:k},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!r,endAdornment:V,error:!1,fullWidth:!0,id:W,inputRef:C,onChange:e=>{const t=e.target.value;h(t),M(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&j()},placeholder:N,type:"text",value:R}),O&&React.createElement(FormControl,{className:itemPickerClasses.allNone},React.createElement(FormLabel,null,H),React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===z,control:React.createElement(Radio,{size:"small"}),disabled:!r,inputRef:C,onClick:()=>{for(const e in $)y(e,!0);v(!0)},label:g.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===z,control:React.createElement(Radio,{size:"small"}),disabled:!r,onClick:()=>{for(const e in $)y(e,!1);v(!0)},label:g.renderText("@common-none")})),D&&React.createElement(Typography,{variant:"subtitle2"},D)),React.createElement(List,{className:X,dense:!0},L)))});export default ItemPicker;

package/forms/components/ListBox.d.ts

@@ -7,5 +7,5 @@ export declare const listBoxClasses: {
 /**
  * The component for the "List Box" Form Element.
  */
-declare const ListBox: ({ className, current, element, enabled, items: elementItems, name, require, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
+declare const ListBox: React.ForwardRefExoticComponent<FormElementProps<defs.ItemsRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default ListBox;

package/forms/components/ListBox.js

@@ -1 +1 @@
-import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:i,setValue:r,size:c,tooltip:m,value:n})=>{const u=useContext(HostContext),d=`${makeUniqueId(o)}-input`,p=inspectItems(t,l,n)["items"],[f,x]=useState([]),h=useFocusCallback(a,o,u);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(f,e)||x(e),v(e,!1)});const v=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>p[e])};areValuesEqual(n,e)||r(e,t)},E=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 p){var o=p[r].checked,i=-1!==s.indexOf(r);o!==i&&(p[r].checked=i)}v(s,!0)},C=[];for(const S in p){const q=p[S];var k=u.renderText(q.label);const g=u.renderText(q.tooltip);q.checked=!0===q.checked;var y=clsx(q.styleName?makeSafeClassName(q.styleName):void 0),b=!1===q.enabled?void 0:!!q.checked;C.push(React.createElement("option",{"aria-selected":b,className:y,key:S,title:g,value:S,disabled:!1===q.enabled},k))}const g=u.renderText(m)||void 0;let F;return"number"==typeof c&&(F=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:d,name:o},e=>React.createElement(Select,{disabled:!a||0===C.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":i,className:listBoxClasses.select,id:d,role:"listbox",size:F,title:g},inputRef:h,multiple:!0,native:!0,onChange:E,value:f},C))};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{forwardRef,useContext}from"react";import HostContext from"../hostContext.js";import{areValuesEqual}from"../listUtilities.js";import{inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox";export const listBoxClasses={select:`${PREFIX}-select`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=forwardRef(({className:e,current:t,element:s,enabled:o,items:l,name:a,require:i,setValue:r,size:c,tooltip:m,value:n},d)=>{const u=useContext(HostContext),p=`${makeUniqueId(a)}-input`,{items:f}=inspectItems(t,l,n),x=useFocusCallback(o,a,u),b=Object.entries(f).filter(([,e])=>e.checked).map(([e])=>e),h=e=>{const{options:t}=e.target,s=[];for(const e of t){const{selected:t,value:o}=e;t&&s.push(o)}((e,t)=>{const s=0===e.length?void 0:{refValueType:"items",items:e.map(e=>f[e])};areValuesEqual(n,s)||r(s,t)})(s,!0);for(const[e,t]of Object.entries(l??{}))t.checked=s.includes(e)},C=[];for(const e in f){const t=f[e],s=u.renderText(t.label),o=u.renderText(t.tooltip);t.checked=!0===t.checked;const l=clsx(t.styleName?makeSafeClassName(t.styleName):void 0),a=!1===t.enabled?void 0:!!t.checked;C.push(React.createElement("option",{"aria-selected":a,className:l,key:e,title:o,value:e,disabled:!1===t.enabled},s))}const k=u.renderText(m)||void 0;let v;return"number"==typeof c&&(v=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:p,name:a,ref:d},e=>React.createElement(Select,{disabled:!o||0===C.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":i,className:listBoxClasses.select,id:p,role:"listbox",size:v,title:k},inputRef:x,multiple:!0,native:!0,onChange:h,value:b},C))});export default ListBox;

package/forms/components/Markdown.js

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

package/forms/components/Number.d.ts

@@ -9,5 +9,5 @@ export declare const numberClasses: {
 /**
  * The component for the "Number" Form Elements.
  */
-declare const NumberComponent: ({ className, element, enabled, error, format, name, prompt, require, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<defs.NumberRef | undefined>) => React.JSX.Element;
+declare const NumberComponent: React.ForwardRefExoticComponent<FormElementProps<defs.NumberRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default NumberComponent;

package/forms/components/Number.js

@@ -1 +1 @@
-import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT}from"../numberFormatter.js";import{areValuesEqual,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number",numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`},StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=({className:e,element:r,enabled:t,error:m,format:p,name:o,prompt:s,require:n,tooltip:a,value:i,setValue:u})=>{const l=useContext(HostContext),[c,f]=useState(!1),[b,d]=useState(),F=useRef(!0),C=`${makeUniqueId(o)}-input`,N=useLocale(),y=l.renderText(s),E=l.renderText(a),{currency:g,customDisplayFormat:R,decimals:D,displayFormat:I,endAdornment:S,isCustom:v,isFixedPoint:x,isPercent:P,numberConstraints:T,startAdornment:A}=useMemo(()=>{var e,r,t=p,m=t?.currency||DEFAULT_CURRENCY,o=t?.displayFormat,s=o===NumberDisplayFormat.CUSTOM,n=o===NumberDisplayFormat.FIXED_POINT,a=o===NumberDisplayFormat.PERCENT,i=getNumberConstraints(t,numberFormatConfiguration),u=t?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,t=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(t?.precision,i.step,numberFormatConfiguration);let l=null,c=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(N,m))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=r:c=r):!a||(e=getPercentSymbolInfo(N))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=r:c=r),{currency:m,customDisplayFormat:u,decimals:t,displayFormat:o,endAdornment:c,isCustom:s,isFixedPoint:n,isPercent:a,numberConstraints:i,startAdornment:l}},[p]);s=useMemo(()=>I===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(R,b):-1,[b]);const{maximum:U,minimum:M,step:j}=T;a=P?D-2:D,a=Math.max(0,a);const z={currency:g,customDisplayFormat:R,format:I,fractionalDigits:a,locale:N},O=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:M,precision:D,step:j,upperBound:U},display:l.formatNumber(e,z),numeric:e}},$=()=>{e=void 0===(e=b)?void 0:enforceConstraints(e,T),e=O(e);areValuesEqual(i,e)||u(e);var e=e?.numeric;e!==b&&d(e)};useEffect(()=>{F.current?F.current=!1:c||$()},[c,b]),useEffect(()=>{var e=h(i),r=void 0===e?void 0:O(e);areValuesEqual(i,r)||u(r,!1),e!==b&&d(e)},[i]);const h=e=>{let r;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=l.coerceNumber(e,N)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,T)},q=e=>{var r=getKeyString(e);if("enter"===r)$();else if("escape"===r)return r=e,(e=isNumberRef(i)?i.numeric:void 0)!==b&&d(e),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1},L=useFocusCallback(t,o,l);a="string"==typeof r.size?r.size:FormElementSize.Full;const _=v?s:D,w=clsx({[numberClasses.large]:a===FormElementSize.Large,[numberClasses.medium]:a===FormElementSize.Medium,[numberClasses.small]:a===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:r,inputId:C,name:o},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(v)return customFormatNumber(e,R,z.locale);P&&(e*=100);var r={format:x?z.format:void 0,fractionalDigits:z.fractionalDigits,locale:z.locale};return l.formatNumber(e,r)},parseNumber:e=>{if(v)return parseCustomFormattedNumber(e,R,z.locale);let r=l.coerceNumber(e,N);return P&&(r=preciseRound(r/100,D)),r}}},React.createElement(NumberInput,{allowUndefined:!0,className:w,correctOnBlur:!0,disabled:!t,endAdornment:S,error:!!m,inputProps:{...e,id:C,onKeyDown:q,title:E},inputRef:L,max:U,maxDecimalPlaces:_,min:M,onBlur:()=>{f(!1)},onChange:e=>d(e),onFocus:()=>{f(!0)},placeholder:y,required:n,size:"small",startAdornment:A,value:b})))};export default NumberComponent;export{numberClasses};
+import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT}from"../numberFormatter.js";import{areValuesEqual,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number";export const numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`};const StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=forwardRef(({className:e,element:t,enabled:r,error:o,format:m,name:n,prompt:s,require:i,setValue:a,tooltip:u,value:l},c)=>{const p=useContext(HostContext),[f,d]=useState(!1),[b,F]=useState(),C=useRef(!0),N=`${makeUniqueId(n)}-input`,y=p.deriveLocale(),E=p.renderText(s),g=p.renderText(u),{currency:R,customDisplayFormat:D,decimals:I,displayFormat:S,endAdornment:x,isCustom:v,isFixedPoint:P,isPercent:T,numberConstraints:A,startAdornment:U}=useMemo(()=>{const e=m,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,o=r===NumberDisplayFormat.CUSTOM,n=r===NumberDisplayFormat.FIXED_POINT,s=r===NumberDisplayFormat.PERCENT,i=getNumberConstraints(e,numberFormatConfiguration),a=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,u=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,i.step,numberFormatConfiguration);let l=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(y,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}else if(s){const e=getPercentSymbolInfo(y);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}return{currency:t,customDisplayFormat:a,decimals:u,displayFormat:r,endAdornment:c,isCustom:o,isFixedPoint:n,isPercent:s,numberConstraints:i,startAdornment:l}},[m]),M=useMemo(()=>S===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(D,b):-1,[b]),{maximum:j,minimum:z,step:O}=A;let w=T?I-2:I;w=Math.max(0,w);const $={currency:R,customDisplayFormat:D,format:S,fractionalDigits:w,locale:y},h=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:z,precision:I,step:O,upperBound:j},display:p.formatNumber(e,$),numeric:e}},q=()=>{const e=(e=>void 0===e?void 0:enforceConstraints(e,A))(b),t=h(e);areValuesEqual(l,t)||a(t);const r=t?.numeric;r!==b&&F(r)};useEffect(()=>{C.current?C.current=!1:f||q()},[f,b]),useEffect(()=>{const e=_(l),t=void 0===e?void 0:h(e);areValuesEqual(l,t)||a(t,!1),e!==b&&F(e)},[l]);const _=e=>{let t;if(isNumber(e))t=e;else if(isString(e)){if(!e)return;t=p.coerceNumber(e,y)}else"number"==typeof e?.numeric&&(t=e.numeric);return"number"==typeof t&&0*t!=0&&(t=void 0),void 0===t?t:enforceConstraints(t,A)},L=e=>{const t=getKeyString(e);if("enter"!==t)return"escape"===t?(e=>{const t=isNumberRef(l)?l.numeric:void 0;return t!==b&&F(t),e.currentTarget.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0;q()},k=useFocusCallback(r,n,p),V="string"==typeof t.size?t.size:FormElementSize.Full,X=v?M:I,B=clsx({[numberClasses.large]:V===FormElementSize.Large,[numberClasses.medium]:V===FormElementSize.Medium,[numberClasses.small]:V===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:t,inputId:N,name:n,ref:c},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(v)return customFormatNumber(e,D,$.locale);T&&(e*=100);const t={format:P?$.format:void 0,fractionalDigits:$.fractionalDigits,locale:$.locale};return p.formatNumber(e,t)},parseNumber:e=>{if(v)return parseCustomFormattedNumber(e,D,$.locale);let t=p.coerceNumber(e,y);return T&&(t=preciseRound(t/100,I)),t}}},React.createElement(NumberInput,{allowUndefined:!0,className:B,correctOnBlur:!0,disabled:!r,endAdornment:x,error:!!o,inputProps:{...e,id:N,onKeyDown:L,title:g},inputRef:k,max:j,maxDecimalPlaces:X,min:z,onBlur:()=>{d(!1)},onChange:e=>F(e),onFocus:()=>{d(!0)},placeholder:E,required:i,size:"small",startAdornment:U,value:b})))});export default NumberComponent;

package/forms/components/NumberRangeSlider.d.ts

@@ -8,5 +8,5 @@ export declare const numberRangeSliderClasses: {
 /**
  * The component for the "Number Range Slider" Form Element.
  */
-declare const NumberRangeSlider: ({ className, element, enabled, format, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<number[] | undefined>) => React.JSX.Element;
+declare const NumberRangeSlider: React.ForwardRefExoticComponent<FormElementProps<number[] | undefined> & React.RefAttributes<HTMLDivElement>>;
 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 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{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},StyledFormElement=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,element:t,enabled:r,format:d,manualEntry:a,showMinMaxLabels:o,showTickMarks:m,name:n,raiseEvent:i,title:s,tooltip:l,value:u,setValue:c})=>{const p=useContext(HostContext),b=useLocale(),{currency:C,customDisplayFormat:F,decimals:f,displayFormat:g,endAdornment:N,isCustom:R,isFixedPoint:y,isPercent:S,numberConstraints:x,startAdornment:E}=useMemo(()=>{var e,t,r=d,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,m=o===NumberDisplayFormat.CUSTOM,n=o===NumberDisplayFormat.FIXED_POINT,i=o===NumberDisplayFormat.PERCENT,s=getNumberConstraints(r,numberFormatConfiguration),l=r?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,r=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(r?.precision,s.step,numberFormatConfiguration);let u=null,c=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(b,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=t:c=t):!i||(e=getPercentSymbolInfo(b))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=t:c=t),{currency:a,customDisplayFormat:l,decimals:r,displayFormat:o,endAdornment:c,isCustom:m,isFixedPoint:n,isPercent:i,numberConstraints:s,startAdornment:u}},[d]);var v=x["step"];const D=x.maximum,A=x.minimum,[T,I]=useState(!1),[L,P]=useState(!1),[M,U]=useState([A,D]);var h=useMemo(()=>g===NumberDisplayFormat.CUSTOM?[countDecimalsInCustomFormat(F,M[0]),countDecimalsInCustomFormat(F,M[1])]:[-1,-1],[M]);const $=useRef(!0),[k,j]=useMemo(()=>{var e=makeUniqueId(n);return[e,`${e}-slider-input`]},[n]);var O=!1!==o,_=!!m,o=!1!==a,m=S?f-2:f,m=Math.max(0,m);const X={currency:C,customDisplayFormat:F,format:g,fractionalDigits:m,locale:b};useEffect(()=>{var e;$.current?$.current=!1:L?B(M):T||(e=getNumberSliderValues(M,x),M[0]===e[0]&&M[1]===e[1]||U(e),w(u,e)||c(e))},[T,L,M]),useEffect(()=>{var e=getNumberSliderValues(u,x);w(u,e)||c(e,!1),w(M,e)||U(e)},[u]);const w=(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])),B=useMemo(()=>throttle(e=>{i("dragged",e)}),[]),V=useFocusCallback(r,n,p);a=p.renderText(l),m=!r&&!L,l=o?{max:D,min:A,onBlur:()=>{I(!1)},onFocus:()=>{I(!0)},step:v,title:a}:void 0,h=R?h:[f,f];return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${j}-0`,name:n},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:m,getAriaLabel:()=>p.renderText(s),getAriaValueText:e=>p.formatNumber(e,X),marks:getMarks(D,A,v,X,O,_),max:D,min:A,onChange:(e,t)=>{P(!0),Array.isArray(t)&&U(t)},onChangeCommitted:()=>{P(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${j}-${e.getAttribute("data-index")}`),V(e))})},step:v,title:a,value:M,valueLabelDisplay:"on",valueLabelFormat:e=>p.formatNumber(e,X)}),!1!=o&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(R)return customFormatNumber(e,F,X.locale);S&&(e*=100);var t={format:y?X.format:void 0,fractionalDigits:X.fractionalDigits,locale:X.locale};return p.formatNumber(e,t)},parseNumber:e=>{if(R)return parseCustomFormattedNumber(e,F,X.locale);let t=p.coerceNumber(e,b);return S&&(t=preciseRound(t/100,f)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${k}-startInput`,inputProps:l,endAdornment:N,label:p.renderText("@common-start"),max:D,maxDecimalPlaces:h[0],min:A,onChange:e=>{void 0===e&&(e=A),U([e,M[1]])},startAdornment:E,value:M[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",p.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:N,id:`${k}-endInput`,inputProps:l,label:p.renderText("@common-end"),max:D,maxDecimalPlaces:h[1],min:A,onChange:e=>{void 0===e&&(e=D),U([M[0],e])},startAdornment:E,value:M[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{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider";export const numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`};const StyledFormElement=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=forwardRef(({className:e,element:t,enabled:r,format:o,manualEntry:a,showMinMaxLabels:n,showTickMarks:m,name:i,raiseEvent:s,title:l,tooltip:u,value:c,setValue:d},p)=>{const b=useContext(HostContext),f=b.deriveLocale(),{currency:C,customDisplayFormat:F,decimals:g,displayFormat:N,endAdornment:y,isCustom:R,isFixedPoint:S,isPercent:x,numberConstraints:E,startAdornment:D}=useMemo(()=>{const e=o,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,a=r===NumberDisplayFormat.CUSTOM,n=r===NumberDisplayFormat.FIXED_POINT,m=r===NumberDisplayFormat.PERCENT,i=getNumberConstraints(e,numberFormatConfiguration),s=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,l=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,i.step,numberFormatConfiguration);let u=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(f,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}else if(m){const e=getPercentSymbolInfo(f);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}return{currency:t,customDisplayFormat:s,decimals:l,displayFormat:r,endAdornment:c,isCustom:a,isFixedPoint:n,isPercent:m,numberConstraints:i,startAdornment:u}},[o]),{step:A}=E,v=E.maximum,T=E.minimum,[I,P]=useState(!1),[L,M]=useState(!1),[U,h]=useState([T,v]),k=useMemo(()=>N===NumberDisplayFormat.CUSTOM?[countDecimalsInCustomFormat(F,U[0]),countDecimalsInCustomFormat(F,U[1])]:[-1,-1],[U]),$=useRef(!0),[j,w]=useMemo(()=>{const e=makeUniqueId(i);return[e,`${e}-slider-input`]},[i]),O=!1!==n,_=!!m,X=!1!==a;let B=x?g-2:g;B=Math.max(0,B);const V={currency:C,customDisplayFormat:F,format:N,fractionalDigits:B,locale:f},K=()=>{const e=getNumberSliderValues(U,E);U[0]===e[0]&&U[1]===e[1]||h(e),Y(c,e)||d(e)};useEffect(()=>{$.current?$.current=!1:L?q(U):I||K()},[I,L,U]),useEffect(()=>{const e=getNumberSliderValues(c,E);Y(c,e)||d(e,!1),Y(U,e)||h(e)},[c]);const Y=(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])),q=useMemo(()=>throttle(e=>{s("dragged",e)}),[]),z=useFocusCallback(r,i,b),G=b.renderText(u),H=!r&&!L,J=X?{max:v,min:T,onBlur:()=>{P(!1)},onFocus:()=>{P(!0)},step:A,title:G}:void 0,Q=R?k:[g,g],W=e=>{"enter"===getKeyString(e)&&K()};return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${w}-0`,name:i,ref:p},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:H,getAriaLabel:()=>b.renderText(l),getAriaValueText:e=>b.formatNumber(e,V),marks:getMarks(v,T,A,V,O,_),max:v,min:T,onChange:(e,t)=>{M(!0),Array.isArray(t)&&h(t)},onChangeCommitted:()=>{M(!1)},slotProps:{input:()=>({ref:e=>{null===e||e.id||(e.id=`${w}-${e.getAttribute("data-index")}`),z(e)}})},step:A,title:G,value:U,valueLabelDisplay:"on",valueLabelFormat:e=>b.formatNumber(e,V)}),!1!==X&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(R)return customFormatNumber(e,F,V.locale);x&&(e*=100);const t={format:S?V.format:void 0,fractionalDigits:V.fractionalDigits,locale:V.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(R)return parseCustomFormattedNumber(e,F,V.locale);let t=b.coerceNumber(e,f);return x&&(t=preciseRound(t/100,g)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${j}-startInput`,inputProps:J,endAdornment:y,label:b.renderText("@common-start"),max:v,maxDecimalPlaces:Q[0],min:T,onChange:e=>{void 0===e&&(e=T),h([e,U[1]])},onKeyDown:W,startAdornment:D,value:U[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",b.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:y,id:`${j}-endInput`,inputProps:J,label:b.renderText("@common-end"),max:v,maxDecimalPlaces:Q[1],min:T,onChange:e=>{void 0===e&&(e=v),h([U[0],e])},onKeyDown:W,startAdornment:D,value:U[1]})))))});export default NumberRangeSlider;

package/forms/components/NumberSlider.d.ts

@@ -7,5 +7,5 @@ export declare const numberSliderClasses: {
 /**
  * The component for the "Number Slider" Form Element.
  */
-declare const NumberSlider: ({ className, element, enabled, error, format, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<NumberRef | undefined>) => React.JSX.Element;
+declare const NumberSlider: React.ForwardRefExoticComponent<FormElementProps<NumberRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default NumberSlider;

package/forms/components/NumberSlider.js

@@ -1 +1 @@
-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{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},StyledFormElement=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,element:t,enabled:r,error:a,format:p,manualEntry:o,showMinMaxLabels:m,showTickMarks:s,name:n,raiseEvent:i,title:u,tooltip:l,value:c,setValue:d})=>{const b=useContext(HostContext),f=useLocale(),{currency:C,customDisplayFormat:F,decimals:N,displayFormat:y,endAdornment:g,isCustom:E,isFixedPoint:S,isPercent:x,numberConstraints:D,startAdornment:R}=useMemo(()=>{var e,t,r=p,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,m=o===NumberDisplayFormat.CUSTOM,s=o===NumberDisplayFormat.FIXED_POINT,n=o===NumberDisplayFormat.PERCENT,i=getNumberConstraints(r),u=r?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,r=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(r?.precision,i.step);let l=null,c=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(f,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=t:c=t):!n||(e=getPercentSymbolInfo(f))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=t:c=t),{currency:a,customDisplayFormat:u,decimals:r,displayFormat:o,endAdornment:c,isCustom:m,isFixedPoint:s,isPercent:n,numberConstraints:i,startAdornment:l}},[p]),v=D["step"],I=D.maximum,A=D.minimum,[T,M]=useState(!1),[P,U]=useState(!1),[h,L]=useState(A);var k=useMemo(()=>y===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(F,h):-1,[h]);const B=useRef(!0);var O=`${makeUniqueId(n)}-input`,V=!1!==m,j=!!s,m=!1!==o,s=x?N-2:N,s=Math.max(0,s);const _={currency:C,customDisplayFormat:F,format:y,fractionalDigits:s,locale:f},q=e=>({refValueType:"number",format:{currency:C,customDisplayFormat:F,displayFormat:y,lowerBound:A,precision:N,step:v,upperBound:I},display:b.formatNumber(e,_),numeric:e});useEffect(()=>{var e;B.current?B.current=!1:P?$(h):T||((e=getNumberSliderValues(h,D,!0)[0])!==h&&L(e),e=q(e),areValuesEqual(c,e)||d(e))},[T,P,h]),useEffect(()=>{var e=getNumberSliderValues(c,D,!0)[0],t=q(e);areValuesEqual(c,t)||d(t,!1),h!==e&&L(e)},[c]);const $=useMemo(()=>throttle(e=>{i("dragged",q(e))}),[]);o=useFocusCallback(r,n,b),s=b.renderText(l),l=!r&&!P,r=!r,k=E?k:N;return React.createElement(StyledFormElement,{className:e,element:t,inputId:O,name:n},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:l,getAriaLabel:()=>b.renderText(u),getAriaValueText:e=>b.formatNumber(e,_),marks:getMarks(I,A,v,_,V,j),max:I,min:A,onChange:(e,t)=>{U(!0);t=Array.isArray(t)?t[0]:t;L(t)},onChangeCommitted:()=>{U(!1)},slotProps:{input:{id:O,ref:o}},step:v,title:s,value:"number"==typeof h?h:0,valueLabelDisplay:"on",valueLabelFormat:e=>b.formatNumber(e,_)}),!1!=m&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(E)return customFormatNumber(e,F,_.locale);x&&(e*=100);var t={format:S?_.format:void 0,fractionalDigits:_.fractionalDigits,locale:_.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(E)return parseCustomFormattedNumber(e,F,_.locale);let t=b.coerceNumber(e,f);return x&&(t=preciseRound(t/100,N)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:r,endAdornment:g,error:!!a,inputProps:{step:v,title:s},max:I,maxDecimalPlaces:k,min:A,onChange:e=>{void 0===e?L(A):L(e)},onFocus:()=>{M(!0)},onBlur:()=>{M(!1)},size:"small",startAdornment:R,value:h}))))};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{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider";export const numberSliderClasses={container:`${PREFIX}-container`};const StyledFormElement=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=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,manualEntry:m,showMinMaxLabels:s,showTickMarks:n,name:i,raiseEvent:u,title:l,tooltip:c,value:p,setValue:d},f)=>{const b=useContext(HostContext),F=b.deriveLocale(),{currency:y,customDisplayFormat:C,decimals:N,displayFormat:g,endAdornment:E,isCustom:S,isFixedPoint:x,isPercent:D,numberConstraints:R,startAdornment:I}=useMemo(()=>{const e=a,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,o=r===NumberDisplayFormat.CUSTOM,m=r===NumberDisplayFormat.FIXED_POINT,s=r===NumberDisplayFormat.PERCENT,n=getNumberConstraints(e),i=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,u=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,n.step);let l=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(F,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}else if(s){const e=getPercentSymbolInfo(F);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}return{currency:t,customDisplayFormat:i,decimals:u,displayFormat:r,endAdornment:c,isCustom:o,isFixedPoint:m,isPercent:s,numberConstraints:n,startAdornment:l}},[a]),{step:A}=R,T=R.maximum,v=R.minimum,[M,P]=useState(!1),[U,h]=useState(!1),[k,L]=useState(v),B=useMemo(()=>g===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(C,k):-1,[k]),O=useRef(!0),V=`${makeUniqueId(i)}-input`,j=!1!==s,w=!!n,_=!1!==m;let q=D?N-2:N;q=Math.max(0,q);const $={currency:y,customDisplayFormat:C,format:g,fractionalDigits:q,locale:F},X=e=>({refValueType:"number",format:{currency:y,customDisplayFormat:C,displayFormat:g,lowerBound:v,precision:N,step:A,upperBound:T},display:b.formatNumber(e,$),numeric:e}),z=()=>{const e=getNumberSliderValues(k,R,!0)[0];e!==k&&L(e);const t=X(e);areValuesEqual(p,t)||d(t)};useEffect(()=>{O.current?O.current=!1:U?K(k):M||z()},[M,U,k]),useEffect(()=>{const e=getNumberSliderValues(p,R,!0)[0],t=X(e);areValuesEqual(p,t)||d(t,!1),k!==e&&L(e)},[p]);const K=useMemo(()=>throttle(e=>{u("dragged",X(e))}),[]),Y=useFocusCallback(r,i,b),H=b.renderText(c),G=!r&&!U,J=!r,Q=S?B:N;return React.createElement(StyledFormElement,{className:e,element:t,inputId:V,name:i,ref:f},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:G,getAriaLabel:()=>b.renderText(l),getAriaValueText:e=>b.formatNumber(e,$),marks:getMarks(T,v,A,$,j,w),max:T,min:v,onChange:(e,t)=>{h(!0);const r=Array.isArray(t)?t[0]:t;L(r)},onChangeCommitted:()=>{h(!1)},slotProps:{input:{id:V,ref:Y}},step:A,title:H,value:"number"==typeof k?k:0,valueLabelDisplay:"on",valueLabelFormat:e=>b.formatNumber(e,$)}),!1!==_&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(S)return customFormatNumber(e,C,$.locale);D&&(e*=100);const t={format:x?$.format:void 0,fractionalDigits:$.fractionalDigits,locale:$.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(S)return parseCustomFormattedNumber(e,C,$.locale);let t=b.coerceNumber(e,F);return D&&(t=preciseRound(t/100,N)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:J,endAdornment:E,error:!!o,inputProps:{step:A,title:H},max:T,maxDecimalPlaces:Q,min:v,onBlur:()=>{P(!1)},onChange:e=>{L(void 0===e?v:e)},onFocus:()=>{P(!0)},onKeyDown:e=>{"enter"===getKeyString(e)&&z()},size:"small",startAdornment:I,value:k}))))});export default NumberSlider;

package/forms/components/RadioGroup.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Radio Group" Form Element.
  */
-declare const RadioGroup: ({ className, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
+declare const RadioGroup: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
 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{useContext,useEffect}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=({className:e,current:t,element:o,enabled:r,id:a,items:m,label:l,name:s,orientation:n,raiseEvent:i,setProperty:c,setValue:u,value:p})=>{const d=useContext(HostContext),f=inspectItems(t,m,p);var v=f.items;const R=[];var b=useFocusCallback(r,s,d);useEffect(()=>{t!==f.current&&c("current",f.current),l!==f.label&&c("label",f.label),p!==f.value&&u(f.value,!1)});for(const k in v){const y=v[k];var C=r&&!1!==y.enabled,E=d.renderText(y.tooltip),F=y.styleName?makeSafeClassName(y.styleName):void 0;R.push(React.createElement(FormControlLabel,{className:F,control:React.createElement(Radio,{onClick:()=>{t!==k&&(c("current",k),y.value!==p?u(y.value,{item:k}):i("changed",y.value,void 0,k))},slotProps:{input:{ref:b}}}),disabled:!C,key:k,label:React.createElement(Markdown,{text:y.label}),title:E,value:k}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:o,name:s},React.createElement(BaseRadioGroup,{name:a,row:n===Orientation.HORIZONTAL,value:t||""},R))};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{forwardRef,useContext,useEffect}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=forwardRef(({className:e,current:t,element:o,enabled:r,id:a,items:m,label:l,name:s,orientation:n,raiseEvent:i,setProperty:c,setValue:u,value:d},f)=>{const p=useContext(HostContext),R=inspectItems(t,m,d),v=R.items,b=[],C=useFocusCallback(r,s,p);useEffect(()=>{t!==R.current&&c("current",R.current),l!==R.label&&c("label",R.label),d!==R.value&&u(R.value,!1)});for(const e in v){const o=v[e],a=r&&!1!==o.enabled,m=p.renderText(o.tooltip),l=o.styleName?makeSafeClassName(o.styleName):void 0;b.push(React.createElement(FormControlLabel,{className:l,control:React.createElement(Radio,{onClick:()=>{t!==e&&(c("current",e),o.value!==d?u(o.value,{item:e}):i("changed",o.value,void 0,e))},slotProps:{input:{ref:C}}}),disabled:!a,key:e,label:React.createElement(Markdown,{text:o.label}),title:m,value:e}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:o,name:s,ref:f},React.createElement(BaseRadioGroup,{name:a,row:n===Orientation.HORIZONTAL,value:t||""},b))});export default RadioGroup;

package/forms/components/Scanner.d.ts

@@ -1,11 +1,10 @@
 import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { ScanRef } from "../FormDefinition";
-import type * as defs from "../FormDefinition";
 export declare const scannerClasses: {
     container: string;
     button: string;
     inputContainer: string;
 };
-declare const Scanner: ({ autoActivate, className, element, enabled, manualEntry, name, raiseEvent, require, scanType, setProperty, setValue: setElementValue, size, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ScanRef | undefined>) => React.JSX.Element;
+declare const Scanner: React.ForwardRefExoticComponent<FormElementProps<ScanRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default Scanner;

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,useContext}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},StyledFormElement=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 n=typeof e,n="number"==n||"string"==n?e.toString():e?.value?.toString();if(n)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:n,scanType:a=a||e?.scanType,entryMethod:t}},Scanner=({autoActivate:e,className:t,element:a,enabled:n,manualEntry:r,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:p})=>{const E=useContext(HostContext),[f,C]=useState(!0),[S,v]=useState(null),[y,R]=useState(""),[T,g]=useState(!1),[M,w]=useState(scannerConfiguration.rows.default),h=useRef(null);var A=`${makeUniqueId(o)}-input`;const I="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),w(e)},[m]),useEffect(()=>(g(!0),()=>g(!1)),[]),useEffect(()=>{T&&n&&e&&(l("autoActivate",!1),b())},[T]),useEffect(()=>{S&&(C(!1),setTimeout(()=>{T&&C(!0)},CAMERA_READY_TIMEOUT_MS))},[S]);var _=useFocusCallback(n,o,E);useEffect(()=>{let e=p;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));var t=e?.value||"";y!==t&&R(t)},[p]);var D=E.renderText(d),d=!n,r=d||!r;const F=(e,t,a)=>{e&&p?.value!==e&&(a=convertToScanRef(e,t,a),u(a),R(e))},x=async e=>{var t=(await import("@zxing/browser"))["BarcodeFormat"];let a;return e===ScanType.QrCode?a=[t.AZTEC,t.DATA_MATRIX,t.MAXICODE,t.PDF_417,t.QR_CODE]:e===ScanType.BarCode&&(a=[t.CODABAR,t.CODE_39,t.CODE_93,t.CODE_128,t.EAN_8,t.EAN_13,t.ITF,t.RSS_14,t.RSS_EXPANDED,t.UPC_A,t.UPC_E,t.UPC_EAN_EXTENSION]),a},b=async()=>{if(S)return v(null),void c("cancel",void 0);const{BrowserCodeReader:o,BrowserMultiFormatReader:e}=await import("@zxing/browser");var t;T&&(t=await(async e=>{var t=(await import("@zxing/library"))["DecodeHintType"],e=await x(e);const a=new Map;return a.set(t.POSSIBLE_FORMATS,e),a})(i),t=new e(t),v(t),await(async e=>{try{var t=await o.listVideoInputDevices();if(!t||0==t.length)throw new DOMException("No video input devices detected.");const n=await e.decodeOnceFromVideoDevice(void 0,h.current||void 0),r=await x(ScanType.QrCode);var a=r.indexOf(n.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;F(n.toString(),EntryMethod.Camera,a),v(null)}catch(e){e instanceof DOMException&&(l("error",e.message),v(null))}})(t))};return React.createElement(StyledFormElement,{className:t,element:a,inputId:A,name:o},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!S,ref:h}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:r,fullWidth:!0,id:A,inputProps:{title:D},inputRef:_,multiline:I,onBlur:e=>{0<e.currentTarget.value.length&&(v(null),F(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{R(e.currentTarget.value)},onKeyDown:e=>{I||(e=e.currentTarget,v(null),F(e.value,EntryMethod.Manual))},required:s,rows:I?M:void 0,spellCheck:!1,value:y}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:d||!f,onClick:b,ref:_,title:D},S?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===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,useContext,forwardRef}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner";export const scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`};const StyledFormElement=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,n)=>{const a=typeof e,r="number"===a||"string"===a?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:n=n||e?.scanType,entryMethod:t}},Scanner=forwardRef(({autoActivate:e,className:t,element:n,enabled:a,manualEntry:r,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:f},p)=>{const E=useContext(HostContext),[C,S]=useState(!0),[y,R]=useState(null),[v,g]=useState(""),[T,w]=useState(!1),[M,h]=useState(scannerConfiguration.rows.default),I=useRef(null),A=`${makeUniqueId(o)}-input`,F="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),h(e)},[m]),useEffect(()=>(w(!0),()=>w(!1)),[]),useEffect(()=>{T&&a&&e&&(l("autoActivate",!1),P())},[T]),useEffect(()=>{y&&(S(!1),setTimeout(()=>{T&&S(!0)},1500))},[y]);const _=useFocusCallback(a,o,E);useEffect(()=>{let e=f;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));const t=e?.value||"";v!==t&&g(t)},[f]);const D=E.renderText(d),x=!a,b=x||!r,B=(e,t,n)=>{if(e){if(f?.value===e)return;const a=convertToScanRef(e,t,n);u(a),g(e)}},O=async e=>{const{BarcodeFormat:t}=await import("@zxing/browser");let n;return e===ScanType.QrCode?n=[t.AZTEC,t.DATA_MATRIX,t.MAXICODE,t.PDF_417,t.QR_CODE]:e===ScanType.BarCode&&(n=[t.CODABAR,t.CODE_39,t.CODE_93,t.CODE_128,t.EAN_8,t.EAN_13,t.ITF,t.RSS_14,t.RSS_EXPANDED,t.UPC_A,t.UPC_E,t.UPC_EAN_EXTENSION]),n},P=async()=>{if(y)return R(null),void c("cancel",void 0);const{BrowserCodeReader:e,BrowserMultiFormatReader:t}=await import("@zxing/browser");if(!T)return;const n=await(async e=>{const{DecodeHintType:t}=await import("@zxing/library"),n=await O(e),a=new Map;return a.set(t.POSSIBLE_FORMATS,n),a})(i),a=new t(n);R(a),await(async t=>{try{const n=await e.listVideoInputDevices();if(!n||0==n.length)throw new DOMException("No video input devices detected.");const a=await t.decodeOnceFromVideoDevice(void 0,I.current||void 0),r=(await O(ScanType.QrCode)).indexOf(a.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;B(a.toString(),EntryMethod.Camera,r),R(null)}catch(e){e instanceof DOMException&&(l("error",e.message),R(null))}})(a)};return React.createElement(StyledFormElement,{className:t,element:n,inputId:A,name:o,ref:p},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!y,ref:I}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:b,fullWidth:!0,id:A,inputProps:{onKeyDown:e=>{if(F)e.stopPropagation();else{const t=e.currentTarget;R(null),B(t.value,EntryMethod.Manual)}},title:D},inputRef:_,multiline:F,onBlur:e=>{e.currentTarget.value.length>0&&(R(null),B(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{g(e.currentTarget.value)},required:s,rows:F?M:void 0,spellCheck:!1,value:v}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:x||!C,onClick:P,ref:_,title:D},y?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))});export default Scanner;

package/forms/components/Section.d.ts

@@ -12,5 +12,5 @@ export declare const sectionClasses: {
 /**
  * The component for the "Section" Form Element.
  */
-declare const Section: ({ accessibleDescription: elementAccessibleDescription, className, collapsed, component, description: elementDescription, element, enabled, error: elementError, name, setProperty, }: FormElementProps) => React.JSX.Element;
+declare const Section: React.ForwardRefExoticComponent<FormElementProps<undefined> & React.RefAttributes<HTMLDivElement>>;
 export default Section;

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

package/forms/components/Signature.d.ts

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