@vertigis/workflow 5.34.0 → 5.35.0

package/forms/common.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabel from"@vertigis/react-ui/FormLabel";import{useCallback}from"react";import*as React from"react";import{formClasses}from"./components/Form.js";import Markdown from"./components/Markdown.js";import{hasContent,isMarkdown,markdownToText}from"./textUtilities.js";const ERROR_SUFFIX="-error",DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function getErrorId(e){return`${e}${ERROR_SUFFIX}`}function renderTitle(e,r,t,n){return hasContent(r.title)?React.createElement(FormLabel,{className:formClasses.formElementTitle,htmlFor:n,id:`${t}-label`},React.createElement(Markdown,{host:e,inline:!0,text:r.title})):null}function renderDescription(e,r,t,n){return hasContent(r.description)?React.createElement(FormHelperText,{className:n,component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return hasContent(r.error)?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};
+import Box from"@vertigis/react-ui/Box";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabel from"@vertigis/react-ui/FormLabel";import{useCallback}from"react";import*as React from"react";import{formClasses}from"./components/Form.js";import Markdown from"./components/Markdown.js";import{hasContent,isMarkdown,markdownToText}from"./textUtilities.js";const ERROR_SUFFIX="-error",DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function getErrorId(e){return`${e}${ERROR_SUFFIX}`}function renderTitle(e,r,t,n){return hasContent(r.title)?React.createElement(FormLabel,{className:formClasses.formElementTitle,htmlFor:n,id:`${t}-label`,required:!!r.require},React.createElement(Markdown,{host:e,inline:!0,text:r.title})):null}function renderDescription(e,r,t,n){return hasContent(r.description)?React.createElement(FormHelperText,{className:n,component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return hasContent(r.error)?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};

package/forms/components/AutoComplete.js

@@ -1 +1 @@
-import BaseAutoComplete,{HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import{getKeyString}from"../keyboard.js";import{getItemId,makeSafeClassName,makeUniqueId,sortItems}from"../utils.js";const Root=styled(FormElement)(({theme:{}})=>({".MuiAutocomplete-endAdornment":{right:1}})),AutoComplete=({className:e,component:t,element:u})=>{const{host:i,name:r}=t.props,[o,n]=useState(""),[a,l]=useState(),[s,m]=useState([]),[c,p]=useState(null),d=`${makeUniqueId(r)}-input`;var f=useRef(i.renderText({status:"trivial"}));const v=i.renderText(u.prompt),g=i.renderText(u.tooltip),y=useFocusCallback(t),C=useRef({}),h=useRef({}),x=useMemo(()=>{let e=u.delay;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[u.delay]),b=useMemo(()=>{let e=u.minLength;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[u.minLength]),E=t.timer||(t.timer=new ExclusiveTimer),T=()=>{i.post("suggest",{name:r,value:u.value,argument:o,cancellationToken:E.cancellationToken})},I=()=>{u.items={},m([])};return useEffect(()=>{"clear"===a?I():"input"===a&&(o.length>=b?(u.current=void 0,E.reset(),E.start(x,T)):0<Object.keys(u.items||{}).length&&I())},[a,o]),useEffect(()=>{var e,t=c?.value;u.value!==t&&(e=getItemId(c,C.current),u.current=e,u.label=e?h.current[e]:void 0,u.value=t,i.post("changed",{name:r,value:u.value,argument:u.label}))},[c]),useEffect(()=>{var e=sortItems(u);const t={};var r="string"==typeof u.current?u.current:void 0;let o=null;const n=[];for(const s in e){var a=e[s];n.push(a);var l=i.renderText(a.label);t[s]=l,r&&s===r&&(o=a)}h.current=t,C.current=e,m(n),p(o)},[u.items]),useEffect(()=>{var e="string"==typeof u.current?u.current:void 0,t=e?C.current[e]:void 0,e=e?h.current[e]:void 0;t?(u.label=e,u.value=t.value,n(e||"")):(u.label=void 0,u.value=void 0),p(t||null)},[u.current]),React.createElement(Root,{className:e,component:t,element:u,inputId:d},React.createElement(BaseAutoComplete,{autoSelect:!0,clearOnEscape:!0,clearOnBlur:!1,disabled:!t.enabled,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,inputValue:o,noOptionsText:f.current,onBlur:()=>{1===s.length&&o.toLowerCase()===h.current[0]?.toLowerCase()?(n(h.current[0]),p(s[0])):u.label=o},onChange:(e,t,r,o)=>{p(t)},onInputChange:(e,t,r)=>{n(t),l(r)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},options:s,renderOption:(e,t,{inputValue:r})=>{var o=getItemId(t,C.current),o={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?i.renderText(t.tooltip):void 0,inputText:r,optionText:o?h.current[o]:""};return React.createElement(HighlightOption,{...o})},renderInput:e=>(e.inputProps={...e.inputProps,id:d,placeholder:v,title:g},React.createElement(FormLabelTextField,{error:!!u.error,...e,fullWidth:!0,inputRef:y})),value:c}))};export default AutoComplete;
+import BaseAutoComplete,{autocompleteClasses,HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Popper from"@vertigis/react-ui/Popper";import Skeleton from"@vertigis/react-ui/Skeleton";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import{getKeyString}from"../keyboard.js";import{getItemId,makeSafeClassName,makeUniqueId,sortAndFilterItems}from"../utils.js";const StyledAutoComplete=styled(BaseAutoComplete)(()=>({[`.${autocompleteClasses.endAdornment}`]:{right:1}})),popperClasses={skeletonOption:"skeleton-option"},StyledPopper=styled(Popper)(()=>({[`.${autocompleteClasses.listbox}`]:{[`.${autocompleteClasses.option}`]:{display:"block",[`&.${popperClasses.skeletonOption}`]:{'&[data-option-index="0"]':{span:{width:"70%"}},'&[data-option-index="1"]':{span:{width:"85%"}},'&[data-option-index="2"]':{span:{width:"55%"}}}}}})),StyledSkeleton=styled(Skeleton)(()=>({fontSize:"1.25rem",lineHeight:"inherit"})),pendingOption={enabled:!1,label:""},pendingOptions=[pendingOption,pendingOption,pendingOption],AutoComplete=({className:e,component:m,element:c})=>{const{host:d,name:r}=m.props,[t,o]=useState(),[n,a]=useState(""),[l,f]=useState([]),[s,g]=useState(null),i=useRef(!1),p=useRef(!1),u=`${makeUniqueId(r)}-input`;var v=useRef(d.renderText({status:"trivial"}));const y=d.renderText(c.prompt),C=d.renderText(c.tooltip),h=useFocusCallback(m),x=useRef({}),b=useRef({}),S=useMemo(()=>{let e=c.delay;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[c.delay]),k=useMemo(()=>{let e=c.minLength;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[c.minLength]),E=m.timer||(m.timer=new ExclusiveTimer),O=()=>{d.post("suggest",{name:r,value:c.value,argument:n,cancellationToken:E.cancellationToken}),f(pendingOptions)},T=()=>{c.items={},f([])};return useEffect(()=>{"clear"===t?T():"input"===t&&(i.current=!0,n.length>=k?(c.current=void 0,m.forceUpdate(),E.reset(),E.start(S,O)):0<Object.keys(c.items||{}).length&&T())},[t,n]),useEffect(()=>{var e,t=s?.value;c.value!==t&&(e=getItemId(s,x.current),e=(c.current=e)?b.current[e]:void 0,c.label=e,c.value=t,m.forceUpdate(),d.post("changed",{name:r,value:t,argument:e}))},[s]),useEffect(()=>{var{current:e,items:t,label:r,value:o}=sortAndFilterItems(c);c.current=e,c.label=r,c.value=o,m.forceUpdate();const n={};var a="string"==typeof e?e:void 0;let l=null;const s=[];for(const u in t){var i=t[u];s.push(i);var p=d.renderText(i.label);n[u]=p,a&&u===a&&(l=i)}b.current=n,x.current=t,f(s),g(l)},[c.items]),useEffect(()=>{var e="string"==typeof c.current?c.current:void 0,t=e?x.current[e]:void 0,e=e?b.current[e]:void 0;t?(c.label=e,c.value=t.value,m.forceUpdate(),a(e||"")):(c.value=void 0,m.forceUpdate(),i.current||a("")),g(t||null)},[c.current]),useEffect(()=>{i.current||p.current||a(""),i.current=!1,p.current=!1},[c.label]),React.createElement(FormElement,{className:e,component:m,element:c,inputId:u},React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnEscape:!0,clearOnBlur:!1,disabled:!m.enabled,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,inputValue:n,noOptionsText:v.current,onBlur:()=>{1===l.length&&n.toLowerCase()===b.current[0]?.toLowerCase()?(a(b.current[0]),g(l[0])):(c.label=n,m.forceUpdate())},onChange:(e,t,r,o)=>{p.current=!0,g(t)},onInputChange:(e,t,r)=>{a(t),o(r)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},options:l,PopperComponent:StyledPopper,renderOption:(e,t,{inputValue:r})=>{if(t===pendingOption){var o=clsx(e.className,popperClasses.skeletonOption);return React.createElement("li",{...e,className:o,key:e.id},React.createElement(StyledSkeleton,null))}o=getItemId(t,x.current),o={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?d.renderText(t.tooltip):void 0,inputText:r,optionText:o?b.current[o]:""};return React.createElement(HighlightOption,{...o})},renderInput:e=>(e.inputProps={...e.inputProps,id:u,placeholder:y,title:C},React.createElement(FormLabelTextField,{error:!!c.error,...e,fullWidth:!0,inputRef:h})),value:s}))};export default AutoComplete;

package/forms/components/ButtonBar.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sort}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({".MuiStack-root":{alignItems:"flex-start",flexWrap:"wrap",marginTop:e(1),marginBottom:e(1)}})),ButtonBar=({className:e,component:c,element:t,spacing:o})=>{const{host:u,name:p}=c.props,d=sort(t.items);let f;void 0===o&&(o=1);return React.createElement(Root,{className:e,component:c,element:t},React.createElement(Stack,{direction:t.orientation===Orientation.VERTICAL?"column":"row",spacing:o},Object.keys(d).map(e=>{var t,o,a,r=d[e],n=r.styleName?makeSafeClassName(r.styleName):void 0,i=!1!==r.visible,m=c.enabled&&!1!==r.enabled&&i,l=u.renderText(r.tooltip),s=d[e]["value"];return m&&void 0===f&&(f=e),i?React.createElement(Button,{onClick:(o=e,a=s,function(e){u.post("clicked",{name:p,item:o,value:a})}),className:n,color:r.default?"primary":"inherit",disabled:!m,key:e,ref:(t=e,function(e){null!==e&&t===f&&u.renderFocus(e,p)}),title:l,variant:r.default?"contained":"outlined"},React.createElement(Markdown,{host:u,inline:!0,text:r.label||""})):null})))};export default ButtonBar;
+import Button from"@vertigis/react-ui/Button";import Stack,{stackClasses}from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sort}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${stackClasses.root}`]:{alignItems:"flex-start",flexWrap:"wrap",marginTop:e(1),marginBottom:e(1)}})),ButtonBar=({className:e,component:c,element:t,spacing:a})=>{const{host:p,name:u}=c.props,d=sort(t.items);let f;void 0===a&&(a=1);return React.createElement(Root,{className:e,component:c,element:t},React.createElement(Stack,{direction:t.orientation===Orientation.VERTICAL?"column":"row",spacing:a},Object.keys(d).map(e=>{var t,a,o,r=d[e],n=r.styleName?makeSafeClassName(r.styleName):void 0,i=!1!==r.visible,s=c.enabled&&!1!==r.enabled&&i,m=p.renderText(r.tooltip),l=d[e]["value"];return s&&void 0===f&&(f=e),i?React.createElement(Button,{onClick:(a=e,o=l,function(e){p.post("clicked",{name:u,item:a,value:o})}),className:n,color:r.default?"primary":"inherit",disabled:!s,key:e,ref:(t=e,function(e){null!==e&&t===f&&p.renderFocus(e,u)}),title:m,variant:r.default?"contained":"outlined"},React.createElement(Markdown,{host:p,inline:!0,text:r.label||""})):null})))};export default ButtonBar;

package/forms/components/CheckGroup.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormGroup from"@vertigis/react-ui/FormGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sortItems}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({".MuiFormGroup-root":{paddingBottom:e(2)}})),CheckGroup=({className:e,component:t,element:a})=>{const[n,m]=useState([]),{host:o,name:s}=t.props,c=sortItems(a);useEffect(()=>{i()});var r=e=>{null===e||e.disabled||o.renderFocus(e,s)};function i(){const e=[],t=[];for(const o in c){var r=c[o];r.checked&&(e.push(r),t.push(o))}0===e.length?a.value=void 0:a.value={refValueType:"items",items:e},a.current=void 0,l(t,n)||m(t)}const l=(t,r)=>{if(!t&&!r)return!0;if(!t||!r)return!1;if(t.length!==r.length)return!1;for(let e=0;e<t.length;e++)if(t[e]!==r[e])return!1;return!0};const u=[];for(const v in c){var p=c[v],f=-1!==n.indexOf(v),d=t.enabled&&!1!==p.enabled,h=o.renderText(p.tooltip),k=p.styleName?makeSafeClassName(p.styleName):void 0;u.push(React.createElement(FormControlLabel,{className:k,control:React.createElement(Checkbox,{checked:f,onChange:((t,r)=>function(e){e=c[t].checked=e.currentTarget.checked;i(),o.post("changed",{name:s,item:t,value:e?r:void 0,argument:e})})(v,p.value),inputRef:r}),disabled:!d,key:v,label:React.createElement(Markdown,{host:o,text:p.label}),title:h}))}return React.createElement(Root,{className:e,component:t,element:a},React.createElement(FormGroup,{row:a.orientation===Orientation.HORIZONTAL},u))};export default CheckGroup;
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormGroup,{formGroupClasses}from"@vertigis/react-ui/FormGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sortItems}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${formGroupClasses.root}`]:{paddingBottom:e(2)}})),CheckGroup=({className:e,component:t,element:a})=>{const[n,m]=useState([]),{host:o,name:s}=t.props,c=sortItems(a);useEffect(()=>{l()});var r=e=>{null===e||e.disabled||o.renderFocus(e,s)};function l(){const e=[],t=[];for(const o in c){var r=c[o];r.checked&&(e.push(r),t.push(o))}0===e.length?a.value=void 0:a.value={refValueType:"items",items:e},a.current=void 0,i(t,n)||m(t)}const i=(t,r)=>{if(!t&&!r)return!0;if(!t||!r)return!1;if(t.length!==r.length)return!1;for(let e=0;e<t.length;e++)if(t[e]!==r[e])return!1;return!0};const u=[];for(const v in c){var f=c[v],p=-1!==n.indexOf(v),d=t.enabled&&!1!==f.enabled,h=o.renderText(f.tooltip),k=f.styleName?makeSafeClassName(f.styleName):void 0;u.push(React.createElement(FormControlLabel,{className:k,control:React.createElement(Checkbox,{checked:p,onChange:((t,r)=>function(e){e=c[t].checked=e.currentTarget.checked;l(),o.post("changed",{name:s,item:t,value:e?r:void 0,argument:e})})(v,f.value),inputRef:r}),disabled:!d,key:v,label:React.createElement(Markdown,{host:o,text:f.label}),title:h}))}return React.createElement(Root,{className:e,component:t,element:a},React.createElement(FormGroup,{row:a.orientation===Orientation.HORIZONTAL},u))};export default CheckGroup;

package/forms/components/DateRangePicker.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useEffect,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,convertToDateRangeRef,hasErrorChanged,isInvalidDate}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const PREFIX="DateRangePicker",dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`},Root=styled(FormElement)(({theme:{spacing:e}})=>({".MuiFormControl-root":{flexGrow:1},[`.${dateRangePickerClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}})),DateRangePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(-1),[n,l]=useState([!1,!1]),s=useRef(),[i,c]=useState(!1),[m,u]=useState([null,null]),p=useRef(!0);useEffect(()=>{var e=convertToDateRangeRef(r.value),e=[e?.startDate||null,e?.endDate||null];u(e),E(e)},[r.value]),useEffect(()=>{var e,t;p.current?p.current=!1:(e=0===a?n[0]:isInvalidDate(m[0]),t=1===a?n[1]:isInvalidDate(m[1]),l([e,t]),e||t?d({status:"invalid"}):d(),i||-1!==a||r.error||E(m)&&f.post("changed",{name:g,value:r.value}))},[i,a]);const d=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())};var R=!t.enabled;const{host:f,name:g}=t.props,v=f.renderText(r.tooltip),F=useFocusCallback(t),E=e=>{if(e[0]&&e[1]){e={refValueType:"daterange",startDate:e[0],endDate:e[1]};if(!areValuesEqual(r,e))return r.value=e,!0}else if(void 0!==r.value)return!(r.value=void 0);return!1},P=`${makeUniqueId(g)}-input`;return React.createElement(Root,{className:clsx(e,dateRangePickerClasses.root),component:t,element:r,inputId:P},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},s.current),React.createElement(BaseDateRangePicker,{disabled:R,onChange:e=>{u(e)},onOpen:()=>{c(!0)},onClose:()=>{c(!1)},renderInput:(e,t)=>(s.current=e.inputProps?.placeholder,e.error=!!r.error&&n[0],e.inputProps={...e.inputProps,id:P,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(0)}},e.inputRef=F,t.error=!!r.error&&n[1],t.inputProps={...t.inputProps,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(1)}},React.createElement(React.Fragment,null,React.createElement(FormLabelTextField,{...e}),React.createElement(Box,{className:dateRangePickerClasses.toLabel}," ",f.renderText("@common-to")," "),React.createElement(FormLabelTextField,{...t}))),value:m}))};export default DateRangePicker;export{dateRangePickerClasses};
+import Box from"@vertigis/react-ui/Box";import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import{formControlClasses}from"@vertigis/react-ui/FormControl";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useEffect,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,convertToDateRangeRef,hasErrorChanged,isInvalidDate}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const PREFIX="DateRangePicker",dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${formControlClasses.root}`]:{flexGrow:1},[`.${dateRangePickerClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}})),DateRangePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(-1),[n,l]=useState([!1,!1]),s=useRef(),[i,c]=useState(!1),[m,u]=useState([null,null]),p=useRef(!0);useEffect(()=>{var e=convertToDateRangeRef(r.value),e=[e?.startDate||null,e?.endDate||null];u(e),E(e)},[r.value]),useEffect(()=>{var e,t;p.current?p.current=!1:(e=0===a?n[0]:isInvalidDate(m[0]),t=1===a?n[1]:isInvalidDate(m[1]),l([e,t]),e||t?d({status:"invalid"}):d(),i||-1!==a||r.error||E(m)&&R.post("changed",{name:g,value:r.value}))},[i,a]);const d=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())};var f=!t.enabled;const{host:R,name:g}=t.props,v=R.renderText(r.tooltip),F=useFocusCallback(t),E=e=>{if(e[0]&&e[1]){e={refValueType:"daterange",startDate:e[0],endDate:e[1]};if(!areValuesEqual(r,e))return r.value=e,!0}else if(void 0!==r.value)return!(r.value=void 0);return!1},P=`${makeUniqueId(g)}-input`;return React.createElement(Root,{className:clsx(e,dateRangePickerClasses.root),component:t,element:r,inputId:P},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},s.current),React.createElement(BaseDateRangePicker,{disabled:f,onChange:e=>{u(e)},onOpen:()=>{c(!0)},onClose:()=>{c(!1)},renderInput:(e,t)=>(s.current=e.inputProps?.placeholder,e.error=!!r.error&&n[0],e.inputProps={...e.inputProps,id:P,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(0)}},e.inputRef=F,t.error=!!r.error&&n[1],t.inputProps={...t.inputProps,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(1)}},React.createElement(React.Fragment,null,React.createElement(FormLabelTextField,{...e}),React.createElement(Box,{className:dateRangePickerClasses.toLabel}," ",R.renderText("@common-to")," "),React.createElement(FormLabelTextField,{...t}))),value:m}))};export default DateRangePicker;export{dateRangePickerClasses};

package/forms/components/DateTimePicker.js

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

package/forms/components/FormLabelNumberField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { InputBaseProps } from "@vertigis/react-ui/InputBase";
+interface FormLabelNumberFieldProps {
+    disabled: boolean;
+    id?: string;
+    inputProps: InputBaseProps["inputProps"];
+    onChange: (value: number | undefined) => void;
+    label: string;
+    value: number;
+    max: number;
+    maxDecimalPlaces: number;
+    min: number;
+}
+declare const FormLabelNumberField: (props: FormLabelNumberFieldProps) => JSX.Element;
+export default FormLabelNumberField;

package/forms/components/FormLabelNumberField.js

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

package/forms/components/ItemPicker.js

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

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

package/forms/components/Number.js

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

package/forms/components/NumberRangeSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Slider from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{isNumeric,makeUniqueId,throttle}from"../utils.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",".MuiSlider-markLabel":{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1)," .MuiFormControl-root":{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,component:t,element:i})=>{const{host:r,name:a}=t.props;var n=!t.enabled;const{currency:o,customDisplayFormat:m,decimals:s,displayFormat:l,inputNumberFormat:u,numberConstraints:c}=useMemo(()=>{var e=i.format,t=getNumberConstraints(e,numberFormatConfiguration),r=sanitizePrecision(e?.precision,t.step,numberFormatConfiguration),a=0<=r?r:void 0,n=0<=r?r:void 0,n=new Intl.NumberFormat(DEFAULT_LOCALE,{minimumFractionDigits:a,maximumFractionDigits:n,useGrouping:!1});return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:r,displayFormat:e?.displayFormat,inputNumberFormat:n,numberConstraints:t}},[i.format]);var d=c["step"],p=c.maximum,g=c.minimum;const[b,f]=useState(!1),[F,v]=useState(!1),[R,C]=useState(["",""]),[S,x]=useState([g,p]),E=useRef(!0),y=useRef(!1),L=`${makeUniqueId(a)}-input`;var N=!1!==i.showMinMaxLabels,T=!!i.showTickMarks,h=!1!==i.manualEntry;const D={currency:o,customDisplayFormat:m,format:l,fractionalDigits:s,locale:r.deriveLocale()},k=e=>null===e?"":u.format(e);useEffect(()=>{if(E.current)E.current=!1;else if(F)M(S);else if(!b){let t=[...S];for(let e=0;e<R.length;e++)isNumeric(R[e])&&(t[e]=parseFloat(R[e]));t=getNumberSliderValues(t,c),S[0]===t[0]&&S[1]===t[1]||x(t),A(i.value,t)||(i.value=t,r.post("changed",{name:a,value:i.value}));var e=[k(t[0]),k(t[1])];e[0]===R[0]&&e[1]===R[1]||C(e)}},[b,F,R]),useEffect(()=>{var e=getNumberSliderValues(i.value,c);A(i.value,e)||(i.value=e),A(S,e)||x(e);e=[k(e[0]),k(e[1])];R[0]===e[0]&&R[1]===e[1]||C(e)},[i.value]);const A=(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])),M=useMemo(()=>throttle(e=>{r.post("dragged",{name:a,value:e})}),[]),U=useFocusCallback(t);var $=r.renderText(i.tooltip),P=n&&!F,I=n&&!y.current,n=h?{max:p,min:g,onBlur:()=>{f(!1)},onFocus:()=>{f(!0)},onMouseDown:()=>{y.current=!0},onMouseUp:()=>{y.current=!1},step:d,title:$}:void 0;return React.createElement(Root,{className:e,component:t,element:i,inputId:`${L}-0`},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:P,getAriaLabel:()=>r.renderText(i.title),getAriaValueText:e=>r.formatNumber(e,D),marks:getMarks(p,g,d,D,N,T),max:p,min:g,onChange:(e,t)=>{v(!0),Array.isArray(t)&&(x(t),C([k(t[0]),k(t[1])]))},onChangeCommitted:()=>{v(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${L}-${e.attributes["data-index"].value}`),U(e))})},step:d,title:$,value:S,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>r.formatNumber(e,D)}),!1!=h&&React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelTextField,{disabled:I,inputProps:n,label:r.renderText("@common-start"),onChange:e=>{C([e.target.value,R[1]])},size:"small",type:"number",value:R[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",r.renderText("@common-to")," "),React.createElement(FormLabelTextField,{disabled:I,inputProps:n,label:r.renderText("@common-end"),onChange:e=>{C([R[0],e.target.value])},size:"small",type:"number",value:R[1]}))))};export default NumberRangeSlider;export{numberRangeSliderClasses};
+import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormLabelNumberField from"./FormLabelNumberField.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,component:r,element:a})=>{const{host:t,name:o}=r.props;var n=!r.enabled;const{currency:i,customDisplayFormat:m,decimals:s,displayFormat:l,numberConstraints:u}=useMemo(()=>{var e=a.format,r=getNumberConstraints(e,numberFormatConfiguration),t=sanitizePrecision(e?.precision,r.step,numberFormatConfiguration);return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:t,displayFormat:e?.displayFormat,numberConstraints:r}},[a.format]);var c=u["step"];const d=u.maximum,p=u.minimum,[b,g]=useState(!1),[f,v]=useState(!1),[C,F]=useState([p,d]),R=useRef(!0);var N=makeUniqueId(o);const x=`${N}-slider-input`;var S=!1!==a.showMinMaxLabels,E=!!a.showTickMarks,y=!1!==a.manualEntry;const L={currency:i,customDisplayFormat:m,format:l,fractionalDigits:s,locale:t.deriveLocale()};useEffect(()=>{var e;R.current?R.current=!1:f?$(C):b||(e=getNumberSliderValues(C,u),C[0]===e[0]&&C[1]===e[1]||F(e),h(a.value,e)||(a.value=e,t.post("changed",{name:o,value:a.value})))},[b,f,C]),useEffect(()=>{var e=getNumberSliderValues(a.value,u);h(a.value,e)||(a.value=e),h(C,e)||F(e)},[a.value]);const h=(e,r)=>void 0===e&&void 0===r[0]&&void 0===r[1]||(void 0===e&&null===r[0]&&null===r[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==r[0]||e[1]!==r[1])),$=useMemo(()=>throttle(e=>{t.post("dragged",{name:o,value:e})}),[]),k=useFocusCallback(r);var D=t.renderText(a.tooltip),P=n&&!f,T=y?{max:d,min:p,onBlur:()=>{g(!1)},onFocus:()=>{g(!0)},step:c,title:D}:void 0;return React.createElement(Root,{className:e,component:r,element:a,inputId:`${x}-0`},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:P,getAriaLabel:()=>t.renderText(a.title),getAriaValueText:e=>t.formatNumber(e,L),marks:getMarks(d,p,c,L,S,E),max:d,min:p,onChange:(e,r)=>{v(!0),Array.isArray(r)&&F(r)},onChangeCommitted:()=>{v(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${x}-${e.attributes["data-index"].value}`),k(e))})},step:c,title:D,value:C,valueLabelDisplay:"on",valueLabelFormat:(e,r)=>t.formatNumber(e,L)}),!1!=y&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{var r={fractionalDigits:L.fractionalDigits,locale:L.locale};return t.formatNumber(e,r)},parseNumber:e=>t.coerceNumber(e)}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:n,id:`${N}-startInput`,inputProps:T,label:t.renderText("@common-start"),max:d,maxDecimalPlaces:s,min:p,onChange:e=>{void 0===e&&(e=p),F([e,C[1]])},value:C[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",t.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:n,id:`${N}-endInput`,inputProps:T,label:t.renderText("@common-end"),max:d,maxDecimalPlaces:s,min:p,onChange:e=>{void 0===e&&(e=d),F([C[0],e])},value:C[1]})))))};export default NumberRangeSlider;export{numberRangeSliderClasses};

package/forms/components/NumberSlider.js

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

package/forms/components/Section.js

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

package/forms/components/Signature.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const signatureClasses: {
+    button: string;
+    image: string;
+};
+/**
+ * The component for the "Signature" Form Element.
+ */
+declare const Signature: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default Signature;

package/forms/components/Signature.js

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

package/forms/components/SignatureDialog.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const signatureDialogClasses: {
+    canvas: string;
+    canvasAnnotations: string;
+    container: string;
+    mark: string;
+    titleText: string;
+};
+export interface StyledDialogProps {
+    cancelCaption: string;
+    clearCaption: string;
+    doneCaption: string;
+    format: string;
+    helperText: JSX.Element | null;
+    height: number;
+    title: JSX.Element | null;
+    undoCaption: string;
+    width: number;
+    onClose: (confirm: boolean, dataUrl: string | undefined) => void;
+}
+declare const SignatureDialog: ({ cancelCaption, clearCaption, doneCaption, format, height, helperText, title, undoCaption, width, onClose, }: StyledDialogProps) => JSX.Element;
+export default SignatureDialog;

package/forms/components/SignatureDialog.js

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

package/forms/components/TextArea.js

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

package/forms/components/TextBox.js

@@ -1 +1 @@
-import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";const TextBox=({className:e,component:r,element:a,type:t})=>{const[n,o]=useState(""),{host:u,name:l}=r.props;var p=`${makeUniqueId(l)}-input`,m="password"===t,i=m?void 0:a.maxLength,s=u.renderText(a.prompt),c=m?void 0:a.readOnly,m=u.renderText(a.tooltip);useEffect(()=>{let e="";var t=a.value;"string"==typeof t?e=t:"number"==typeof t&&(e=u.formatNumber(t)),a.value!==e&&(a.value=e,r.forceUpdate()),o(e)},[a.value]);const d=e=>{a.value=e,u.post("changed",{name:l,value:e})};return React.createElement(FormElement,{className:e,component:r,element:a,inputId:p},React.createElement(Input,{disabled:!r.enabled,fullWidth:!0,id:p,inputProps:{maxLength:i,onKeyDown:e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==a.value)return d(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==a.value)return o(a.value),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},title:m},inputRef:e=>{null===e||e.disabled||u.renderFocus(e,l)},onBlur:e=>{e=e.target.value;e!=a.value&&d(e)},onChange:e=>{e=e.target.value;e!=n&&o(e)},placeholder:s,readOnly:c,required:a.require,type:t,value:n}))};export default TextBox;
+import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";const TextBox=({className:e,component:r,element:a,type:t})=>{const[n,o]=useState(""),{host:u,name:l}=r.props;var p=`${makeUniqueId(l)}-input`,m="password"===t,i=m?void 0:a.maxLength,s=u.renderText(a.prompt),c=m?void 0:a.readOnly,m=u.renderText(a.tooltip);useEffect(()=>{let e="";var t=a.value;"string"==typeof t?e=t:"number"==typeof t&&(e=u.formatNumber(t)),a.value!==e&&(a.value=e,r.forceUpdate()),o(e)},[a.value]);const d=e=>{a.value=e,u.post("changed",{name:l,value:e}),o(e)};return React.createElement(FormElement,{className:e,component:r,element:a,inputId:p},React.createElement(Input,{disabled:!r.enabled,fullWidth:!0,id:p,inputProps:{maxLength:i,onKeyDown:e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==a.value)return d(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==a.value)return o(a.value),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},title:m},inputRef:e=>{null===e||e.disabled||u.renderFocus(e,l)},onBlur:e=>{e=e.target.value;e!=a.value&&d(e)},onChange:e=>{e=e.target.value;e!=n&&o(e)},placeholder:s,readOnly:c,required:a.require,type:t,value:n}))};export default TextBox;

package/forms/components/TimePicker.js

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

package/forms/constants.d.ts

@@ -1,3 +1,19 @@
+/**
+ * All of the types of component used in forms within VertiGIS Studio Workflow.
+ * Most are containers that hold other things. In the case of "element",
+ * we use `FormElementTypes` to specify which type of element it represents.
+ */
+export declare const FormComponentTypes: {
+    ACCORDIONGROUP: string;
+    BODY: string;
+    ELEMENT: string;
+    FOOTER: string;
+    FORM: string;
+    HEADER: string;
+    MAIN: string;
+    ROW: string;
+    SECTION: string;
+};
 /**
  * All of the types of Form Element that are included in VertiGIS Studio Workflow.
  *
@@ -29,6 +45,7 @@ export declare const FormElementTypes: {
     RADIOGROUP: string;
     SCANNER: string;
     SECTION: string;
+    SIGNATURE: string;
     TEXT: string;
     TEXTAREA: string;
     TEXTBOX: string;

package/forms/constants.js

@@ -1 +1 @@
-const FormElementTypes={AUTOCOMPLETE:"AutoComplete",BUTTONBAR:"ButtonBar",CHECKBOX:"CheckBox",CHECKGROUP:"CheckGroup",CUSTOM:"Custom",DATEPICKER:"DatePicker",DATERANGEPICKER:"DateRangePicker",DATETIMEPICKER:"DateTimePicker",DROPDOWNLIST:"DropDownList",FILEPICKER:"FilePicker",GEOMETRYPICKER:"GeometryPicker",HEADER:"Header",HORIZONTALRULE:"HorizontalRule",IMAGE:"Image",ITEMPICKER:"ItemPicker",LISTBOX:"ListBox",NUMBER:"Number",NUMBERRANGESLIDER:"NumberRangeSlider",NUMBERSLIDER:"NumberSlider",PASSWORDBOX:"PasswordBox",RADIOGROUP:"RadioGroup",SCANNER:"Scanner",SECTION:"Section",TEXT:"Text",TEXTAREA:"TextArea",TEXTBOX:"TextBox",TIMEPICKER:"TimePicker"},Orientation={HORIZONTAL:"horizontal",VERTICAL:"vertical"};var ScanType;!function(e){e.BarCode="barcode",e.QrCode="qrcode"}(ScanType=ScanType||{});const TitleLocation={ABOVE:"above",BESIDE:"beside"};export{FormElementTypes,Orientation,ScanType,TitleLocation};
+const FormComponentTypes={ACCORDIONGROUP:"accordionGroup",BODY:"body",ELEMENT:"element",FOOTER:"footer",FORM:"form",HEADER:"header",MAIN:"main",ROW:"row",SECTION:"section"},FormElementTypes={AUTOCOMPLETE:"AutoComplete",BUTTONBAR:"ButtonBar",CHECKBOX:"CheckBox",CHECKGROUP:"CheckGroup",CUSTOM:"Custom",DATEPICKER:"DatePicker",DATERANGEPICKER:"DateRangePicker",DATETIMEPICKER:"DateTimePicker",DROPDOWNLIST:"DropDownList",FILEPICKER:"FilePicker",GEOMETRYPICKER:"GeometryPicker",HEADER:"Header",HORIZONTALRULE:"HorizontalRule",IMAGE:"Image",ITEMPICKER:"ItemPicker",LISTBOX:"ListBox",NUMBER:"Number",NUMBERRANGESLIDER:"NumberRangeSlider",NUMBERSLIDER:"NumberSlider",PASSWORDBOX:"PasswordBox",RADIOGROUP:"RadioGroup",SCANNER:"Scanner",SECTION:"Section",SIGNATURE:"Signature",TEXT:"Text",TEXTAREA:"TextArea",TEXTBOX:"TextBox",TIMEPICKER:"TimePicker"},Orientation={HORIZONTAL:"horizontal",VERTICAL:"vertical"};var ScanType;!function(e){e.BarCode="barcode",e.QrCode="qrcode"}(ScanType=ScanType||{});const TitleLocation={ABOVE:"above",BESIDE:"beside"};export{FormComponentTypes,FormElementTypes,Orientation,ScanType,TitleLocation};

package/forms/elements/Signature.d.ts

@@ -0,0 +1,16 @@
+import { SignatureRef } from "../FormDefinition";
+import { FormElementPropertyConstraints, PropertyConstraintsWithDefault, PropertyConstraintsWithMaximum, PropertyConstraintsWithMinimum } from "../utils";
+import * as types from "./types";
+export interface Signature extends types.ElementBase, types.EditableElement, types.ElementWithRequire {
+    /** Indicates the current value. */
+    readonly value: SignatureRef;
+}
+interface SignatureConfiguration extends FormElementPropertyConstraints {
+    height: PropertyConstraintsWithDefault<number>;
+    width: PropertyConstraintsWithDefault<number> & PropertyConstraintsWithMaximum<number> & PropertyConstraintsWithMinimum<number>;
+}
+/**
+ * Constraints that the Signature enforces on the size.
+ */
+export declare const signatureConfiguration: SignatureConfiguration;
+export {};

package/forms/elements/Signature.js

@@ -0,0 +1 @@
+const signatureConfiguration={height:{default:160},width:{default:400,maximum:550,minimum:200}};export{signatureConfiguration};

package/forms/presenter.js

@@ -1 +1 @@
-import{createElement}from"react";import*as React from"react";import{unmountComponentAtNode,render as reactRender}from"react-dom";import{FormComponent}from"./FormComponent.js";import*as renderers from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}function refreshForm(e,r){reactRender(React.createElement(FormComponent,{host:e,type:"form"}),r)}function releaseForm(e){unmountComponentAtNode(e)}function render(e){if(e instanceof FormComponent){switch(e.props.type){case"form":return renderers.renderForm(e);case"header":return renderers.renderHeader(e);case"main":return renderers.renderMain(e);case"footer":return renderers.renderFooter(e);case"body":return renderers.renderBody(e);case"row":return renderers.renderRow(e);case"section":return renderers.element.renderSection(e,e.prepare());case"accordionGroup":return renderers.renderAccordionGroup(e);case"element":break;default:return}var r=e.prepare();if(null==r)return;var n=r.type;if("string"!=typeof n)return;if("Custom"===n)return e.props.host.renderCustom(e,r);if(e.elementRegistration)return createElement(e.elementRegistration.component,getElementProps(e,r));const o=renderers.element["render"+n];if("function"==typeof o)return o(e,r)}}function renderNone(e){if(e instanceof FormComponent)return renderers.renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};
+import{createElement}from"react";import*as React from"react";import{unmountComponentAtNode,render as reactRender}from"react-dom";import{FormComponent}from"./FormComponent.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";import{renderComponent,renderElement,renderNone as renderers_renderNone}from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}function refreshForm(e,r){reactRender(React.createElement(FormComponent,{host:e,type:"form"}),r)}function releaseForm(e){unmountComponentAtNode(e)}function render(e){if(e instanceof FormComponent){if(e.props.type!==FormComponentTypes.ELEMENT)return renderComponent(e);var r=e.prepare();if(null==r)return;var n=r.type;return"string"!=typeof n?void 0:n===FormElementTypes.CUSTOM?e.props.host.renderCustom(e,r):e.elementRegistration?createElement(e.elementRegistration.component,getElementProps(e,r)):renderElement(n,e,r)}}function renderNone(e){if(e instanceof FormComponent)return renderers_renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};

package/forms/renderers.d.ts

@@ -1,40 +1,8 @@
 /// <reference types="react" />
 import { FormComponent } from "./FormComponent";
 import { Element } from "./FormDefinition";
-export declare function renderForm(component: FormComponent): JSX.Element;
-export declare function renderHeader(component: FormComponent): JSX.Element;
-export declare function renderFooter(component: FormComponent): JSX.Element;
-export declare function renderBody(component: FormComponent): JSX.Element;
-export declare function renderRow(component: FormComponent): JSX.Element;
-export declare function renderMain(component: FormComponent): JSX.Element;
-export declare function renderAccordionGroup(component: FormComponent): JSX.Element;
+/** @product This is intended for internal use only within VertiGIS Studio products. */
+export declare function renderComponent(component: FormComponent): JSX.Element;
 export declare function renderNone(component: FormComponent): any;
 /** @product This is intended for internal use only within VertiGIS Studio products. */
-export declare namespace element {
-    function renderAutoComplete(component: FormComponent, element: Element): JSX.Element;
-    function renderButtonBar(component: FormComponent, element: Element): JSX.Element;
-    function renderCheckBox(component: FormComponent, element: Element): JSX.Element;
-    function renderCheckGroup(component: FormComponent, element: Element): JSX.Element;
-    function renderCustom(component: FormComponent, element: Element): JSX.Element;
-    function renderDatePicker(component: FormComponent, element: Element): JSX.Element;
-    function renderDateRangePicker(component: FormComponent, element: Element): JSX.Element;
-    function renderDateTimePicker(component: FormComponent, element: Element): JSX.Element;
-    function renderDropDownList(component: FormComponent, element: Element): JSX.Element;
-    function renderFilePicker(component: FormComponent, element: Element): JSX.Element;
-    function renderGeometryPicker(component: FormComponent, element: Element): JSX.Element;
-    function renderHorizontalRule(component: FormComponent, element: Element): JSX.Element;
-    function renderImage(component: FormComponent, element: Element): JSX.Element;
-    function renderItemPicker(component: FormComponent, element: Element): JSX.Element;
-    function renderListBox(component: FormComponent, element: Element): JSX.Element;
-    function renderNumber(component: FormComponent, element: Element): JSX.Element;
-    function renderNumberRangeSlider(component: FormComponent, element: Element): JSX.Element;
-    function renderNumberSlider(component: FormComponent, element: Element): JSX.Element;
-    function renderPasswordBox(component: FormComponent, element: Element): JSX.Element;
-    function renderRadioGroup(component: FormComponent, element: Element): JSX.Element;
-    function renderScanner(component: FormComponent, element: Element): JSX.Element;
-    function renderSection(component: FormComponent, element: Element): JSX.Element;
-    function renderText(component: FormComponent, element: Element): JSX.Element;
-    function renderTextArea(component: FormComponent, element: Element): JSX.Element;
-    function renderTextBox(component: FormComponent, element: Element): JSX.Element;
-    function renderTimePicker(component: FormComponent, element: Element): JSX.Element;
-}
+export declare function renderElement(type: string, component: FormComponent, element: Element): JSX.Element;

package/forms/renderers.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import*as React from"react";import AccordionGroup from"./components/AccordionGroup.js";import AutoComplete from"./components/AutoComplete.js";import ButtonBar from"./components/ButtonBar.js";import CheckBox from"./components/CheckBox.js";import CheckGroup from"./components/CheckGroup.js";import Custom from"./components/Custom.js";import DatePicker from"./components/DatePicker.js";import DateRangePicker from"./components/DateRangePicker.js";import DateTimePicker from"./components/DateTimePicker.js";import DropDownList from"./components/DropDownList.js";import FilePicker from"./components/FilePicker.js";import Form,{formClasses}from"./components/Form.js";import GeometryPicker from"./components/GeometryPicker.js";import HorizontalRule from"./components/HorizontalRule.js";import Image from"./components/Image.js";import ItemPicker from"./components/ItemPicker.js";import ListBox from"./components/ListBox.js";import Number from"./components/Number.js";import NumberRangeSlider from"./components/NumberRangeSlider.js";import NumberSlider from"./components/NumberSlider.js";import RadioGroup from"./components/RadioGroup.js";import Scanner from"./components/Scanner.js";import Section from"./components/Section.js";import Text from"./components/Text.js";import TextArea from"./components/TextArea.js";import TextBox from"./components/TextBox.js";import TimePicker from"./components/TimePicker.js";function renderForm(e){return React.createElement(Form,{component:e})}function renderHeader(e){return renderBox(e.props.children,formClasses.header)}function renderFooter(e){return renderBox(e.props.children,formClasses.footer)}function renderBody(e){return renderBox(e.props.children,formClasses.body)}function renderRow(e){return renderBox(e.props.children,formClasses.row)}function renderMain(e){return renderBox(e.props.children,formClasses.main)}function renderAccordionGroup(e){return React.createElement(AccordionGroup,{component:e})}function renderNone(e){return renderBox([`--- Unsupported Form Element (name=${e.props.name}) ---`],"None")}function renderBox(e,r){return React.createElement(Box,{className:r},e)}var element;!function(e){e.renderAutoComplete=function(e,r){return React.createElement(AutoComplete,{component:e,element:r})},e.renderButtonBar=function(e,r){return React.createElement(ButtonBar,{component:e,element:r})},e.renderCheckBox=function(e,r){return React.createElement(CheckBox,{component:e,element:r})},e.renderCheckGroup=function(e,r){return React.createElement(CheckGroup,{component:e,element:r})},e.renderCustom=function(e,r){return React.createElement(Custom,{component:e,element:r})},e.renderDatePicker=function(e,r){return React.createElement(DatePicker,{component:e,element:r})},e.renderDateRangePicker=function(e,r){return React.createElement(DateRangePicker,{component:e,element:r})},e.renderDateTimePicker=function(e,r){return React.createElement(DateTimePicker,{component:e,element:r})},e.renderDropDownList=function(e,r){return React.createElement(DropDownList,{component:e,element:r})},e.renderFilePicker=function(e,r){return React.createElement(FilePicker,{component:e,element:r})},e.renderGeometryPicker=function(e,r){return React.createElement(GeometryPicker,{component:e,element:r})},e.renderHorizontalRule=function(e,r){return React.createElement(HorizontalRule,{component:e,element:r})},e.renderImage=function(e,r){return React.createElement(Image,{component:e,element:r})},e.renderItemPicker=function(e,r){return React.createElement(ItemPicker,{component:e,element:r})},e.renderListBox=function(e,r){return React.createElement(ListBox,{component:e,element:r})},e.renderNumber=function(e,r){return React.createElement(Number,{component:e,element:r})},e.renderNumberRangeSlider=function(e,r){return React.createElement(NumberRangeSlider,{component:e,element:r})},e.renderNumberSlider=function(e,r){return React.createElement(NumberSlider,{component:e,element:r})},e.renderPasswordBox=function(e,r){return React.createElement(TextBox,{component:e,element:r,type:"password"})},e.renderRadioGroup=function(e,r){return React.createElement(RadioGroup,{component:e,element:r})},e.renderScanner=function(e,r){return React.createElement(Scanner,{component:e,element:r})},e.renderSection=function(e,r){return React.createElement(Section,{component:e,element:r})},e.renderText=function(e,r){return React.createElement(Text,{component:e,element:r})},e.renderTextArea=function(e,r){return React.createElement(TextArea,{component:e,element:r})},e.renderTextBox=function(e,r){return React.createElement(TextBox,{component:e,element:r})},e.renderTimePicker=function(e,r){return React.createElement(TimePicker,{component:e,element:r})}}(element=element||{});export{renderForm,renderHeader,renderFooter,renderBody,renderRow,renderMain,renderAccordionGroup,renderNone,element};
+import Box from"@vertigis/react-ui/Box";import*as React from"react";import AccordionGroup from"./components/AccordionGroup.js";import AutoComplete from"./components/AutoComplete.js";import ButtonBar from"./components/ButtonBar.js";import CheckBox from"./components/CheckBox.js";import CheckGroup from"./components/CheckGroup.js";import Custom from"./components/Custom.js";import DatePicker from"./components/DatePicker.js";import DateRangePicker from"./components/DateRangePicker.js";import DateTimePicker from"./components/DateTimePicker.js";import DropDownList from"./components/DropDownList.js";import FilePicker from"./components/FilePicker.js";import Form,{formClasses}from"./components/Form.js";import GeometryPicker from"./components/GeometryPicker.js";import HorizontalRule from"./components/HorizontalRule.js";import Image from"./components/Image.js";import ItemPicker from"./components/ItemPicker.js";import ListBox from"./components/ListBox.js";import Number from"./components/Number.js";import NumberRangeSlider from"./components/NumberRangeSlider.js";import NumberSlider from"./components/NumberSlider.js";import RadioGroup from"./components/RadioGroup.js";import Scanner from"./components/Scanner.js";import Section from"./components/Section.js";import Signature from"./components/Signature.js";import Text from"./components/Text.js";import TextArea from"./components/TextArea.js";import TextBox from"./components/TextBox.js";import TimePicker from"./components/TimePicker.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";function renderComponent(e){switch(e.props.type){case FormComponentTypes.FORM:return React.createElement(Form,{component:e});case FormComponentTypes.HEADER:return renderBox(e.props.children,formClasses.header);case FormComponentTypes.MAIN:return renderBox(e.props.children,formClasses.main);case FormComponentTypes.FOOTER:return renderBox(e.props.children,formClasses.footer);case FormComponentTypes.BODY:return renderBox(e.props.children,formClasses.body);case FormComponentTypes.ROW:return renderBox(e.props.children,formClasses.row);case FormComponentTypes.SECTION:return renderElement(FormElementTypes.SECTION,e,e.prepare());case FormComponentTypes.ACCORDIONGROUP:return React.createElement(AccordionGroup,{component:e});default:return null}}function renderNone(e){return renderBox([`--- Unsupported Form Element (name=${e.props.name}) ---`],"None")}function renderBox(e,t){return React.createElement(Box,{className:t},e)}function renderElement(e,t,r){switch(e){case FormElementTypes.AUTOCOMPLETE:return React.createElement(AutoComplete,{component:t,element:r});case FormElementTypes.BUTTONBAR:return React.createElement(ButtonBar,{component:t,element:r});case FormElementTypes.CHECKBOX:return React.createElement(CheckBox,{component:t,element:r});case FormElementTypes.CHECKGROUP:return React.createElement(CheckGroup,{component:t,element:r});case FormElementTypes.CUSTOM:return React.createElement(Custom,{component:t,element:r});case FormElementTypes.DATEPICKER:return React.createElement(DatePicker,{component:t,element:r});case FormElementTypes.DATERANGEPICKER:return React.createElement(DateRangePicker,{component:t,element:r});case FormElementTypes.DATETIMEPICKER:return React.createElement(DateTimePicker,{component:t,element:r});case FormElementTypes.DROPDOWNLIST:return React.createElement(DropDownList,{component:t,element:r});case FormElementTypes.FILEPICKER:return React.createElement(FilePicker,{component:t,element:r});case FormElementTypes.GEOMETRYPICKER:return React.createElement(GeometryPicker,{component:t,element:r});case FormElementTypes.HORIZONTALRULE:return React.createElement(HorizontalRule,{component:t,element:r});case FormElementTypes.IMAGE:return React.createElement(Image,{component:t,element:r});case FormElementTypes.ITEMPICKER:return React.createElement(ItemPicker,{component:t,element:r});case FormElementTypes.LISTBOX:return React.createElement(ListBox,{component:t,element:r});case FormElementTypes.NUMBER:return React.createElement(Number,{component:t,element:r});case FormElementTypes.NUMBERRANGESLIDER:return React.createElement(NumberRangeSlider,{component:t,element:r});case FormElementTypes.NUMBERSLIDER:return React.createElement(NumberSlider,{component:t,element:r});case FormElementTypes.PASSWORDBOX:return React.createElement(TextBox,{component:t,element:r,type:"password"});case FormElementTypes.RADIOGROUP:return React.createElement(RadioGroup,{component:t,element:r});case FormElementTypes.SCANNER:return React.createElement(Scanner,{component:t,element:r});case FormElementTypes.SECTION:return React.createElement(Section,{component:t,element:r});case FormElementTypes.SIGNATURE:return React.createElement(Signature,{component:t,element:r});case FormElementTypes.TEXT:return React.createElement(Text,{component:t,element:r});case FormElementTypes.TEXTAREA:return React.createElement(TextArea,{component:t,element:r});case FormElementTypes.TEXTBOX:return React.createElement(TextBox,{component:t,element:r});case FormElementTypes.TIMEPICKER:return React.createElement(TimePicker,{component:t,element:r});default:return null}}export{renderComponent,renderNone,renderElement};

package/forms/utils.d.ts

@@ -17,6 +17,12 @@ export interface PropertyConstraints<T> {
 export interface PropertyConstraintsWithDefault<T> extends PropertyConstraints<T> {
     default: T;
 }
+/**
+ * Constraints for a property that specifies a maximum value.
+ */
+export interface PropertyConstraintsWithMaximum<T> extends PropertyConstraints<T> {
+    maximum: T;
+}
 /**
  * Constraints for a property that specifies a minimum value.
  */
@@ -54,9 +60,32 @@ export declare function sort<T>(items: T | undefined, predicate?: (item: T[keyof
  * @param element The element whose items are to be sorted.
  * @returns An array of visible items, sorted by index.
  */
-export declare function sortItems(element: defs.Element): {
-    [key: string]: defs.Item;
+export declare function sortItems(element: defs.Element): Lookup<defs.Item>;
+/**
+ * Details returned by `sortAndFilterItems()`.
+ */
+declare type sortAndFilterItemsResult = {
+    /** The index of the now-selected item, based on the new value of `items`. */
+    current: string | undefined;
+    /** The sorted and filtered items. */
+    items: Lookup<defs.Item>;
+    /** The new `label` of the element, based on the new value of `current`. */
+    label: defs.Text | undefined;
+    /** The new `value` of the element, based on the new value of `current`. */
+    value: defs.Value | undefined;
 };
+/**
+ * This function produces a set of `items` based on the supplied `element`.
+ * They are sorted based on `element.index` or the ordinal position.
+ * They are filtered to exclude `undefined`, `null` or elements with `visible` set to `false.`
+ *
+ * Unlike `sortItems()`, this function does not attempt to change `element`.
+ * Instead, new values for `current`, `label` and `value` are included in the result.
+ * It is then the responsibility of the caller to update them in the original `element` if necessary.
+ * @param element The element whose items are to be sorted.
+ * @returns A sorted and filtered set if items, along with a few properties that should be updated on `element`.
+ */
+export declare function sortAndFilterItems(element: defs.Element): sortAndFilterItemsResult;
 /** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function makeSafeClassName(elementName: string | undefined): string;
 /** @public */