@vertigis/workflow 5.47.0 → 5.48.1

package/forms/components/ItemPicker.js

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

package/forms/components/ListBox.d.ts

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

package/forms/components/ListBox.js

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

package/forms/components/Number.d.ts

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

package/forms/components/Number.js

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

package/forms/components/NumberRangeSlider.d.ts

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

package/forms/components/NumberRangeSlider.js

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

package/forms/components/NumberSlider.d.ts

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

package/forms/components/NumberSlider.js

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

package/forms/components/RadioGroup.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Radio Group" Form Element.
  */
-declare const RadioGroup: ({ className, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
+declare const RadioGroup: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default RadioGroup;

package/forms/components/RadioGroup.js

@@ -1 +1 @@
-import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import Radio from"@vertigis/react-ui/Radio";import BaseRadioGroup from"@vertigis/react-ui/RadioGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=({className:e,current:t,element:o,enabled:r,id:a,items:m,label:l,name:s,orientation:n,raiseEvent:i,setProperty:c,setValue:u,value:p})=>{const d=useContext(HostContext),f=inspectItems(t,m,p),v=f.items,R=[],b=useFocusCallback(r,s,d);useEffect(()=>{t!==f.current&&c("current",f.current),l!==f.label&&c("label",f.label),p!==f.value&&u(f.value,!1)});for(const e in v){const o=v[e],a=r&&!1!==o.enabled,m=d.renderText(o.tooltip),l=o.styleName?makeSafeClassName(o.styleName):void 0;R.push(React.createElement(FormControlLabel,{className:l,control:React.createElement(Radio,{onClick:()=>{t!==e&&(c("current",e),o.value!==p?u(o.value,{item:e}):i("changed",o.value,void 0,e))},slotProps:{input:{ref:b}}}),disabled:!a,key:e,label:React.createElement(Markdown,{text:o.label}),title:m,value:e}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:o,name:s},React.createElement(BaseRadioGroup,{name:a,row:n===Orientation.HORIZONTAL,value:t||""},R))};export default RadioGroup;
+import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import Radio from"@vertigis/react-ui/Radio";import BaseRadioGroup from"@vertigis/react-ui/RadioGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{forwardRef,useContext,useEffect}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=forwardRef(({className:e,current:t,element:o,enabled:r,id:a,items:m,label:l,name:s,orientation:n,raiseEvent:i,setProperty:c,setValue:u,value:d},f)=>{const p=useContext(HostContext),R=inspectItems(t,m,d),v=R.items,b=[],C=useFocusCallback(r,s,p);useEffect(()=>{t!==R.current&&c("current",R.current),l!==R.label&&c("label",R.label),d!==R.value&&u(R.value,!1)});for(const e in v){const o=v[e],a=r&&!1!==o.enabled,m=p.renderText(o.tooltip),l=o.styleName?makeSafeClassName(o.styleName):void 0;b.push(React.createElement(FormControlLabel,{className:l,control:React.createElement(Radio,{onClick:()=>{t!==e&&(c("current",e),o.value!==d?u(o.value,{item:e}):i("changed",o.value,void 0,e))},slotProps:{input:{ref:C}}}),disabled:!a,key:e,label:React.createElement(Markdown,{text:o.label}),title:m,value:e}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:o,name:s,ref:f},React.createElement(BaseRadioGroup,{name:a,row:n===Orientation.HORIZONTAL,value:t||""},b))});export default RadioGroup;

package/forms/components/Scanner.d.ts

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

package/forms/components/Scanner.js

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

package/forms/components/Section.d.ts

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

package/forms/components/Section.js

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

package/forms/components/Signature.d.ts

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

package/forms/components/Signature.js

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

package/forms/components/Sketch.d.ts

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

package/forms/components/Sketch.js

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

package/forms/components/Text.d.ts

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

package/forms/components/Text.js

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

package/forms/components/TextArea.d.ts

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

package/forms/components/TextArea.js

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

package/forms/components/TextBox.d.ts

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

package/forms/components/TextBox.js

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

package/forms/components/TimePicker.d.ts

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

package/forms/components/TimePicker.js

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

package/forms/dateUtilities.d.ts

@@ -1,4 +1,3 @@
-import { Calendar } from "./Calendar";
 import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType, FormatRef } from "./FormDefinition";
 import type { defs } from "./FormHost";
 import type { PickersLocaleText } from "@mui/x-date-pickers";
@@ -87,7 +86,7 @@ export declare function getDateBounds(format: FormatRef | undefined): {
  * @param language The target language to retrieve the locale for.
  */
 export declare function getDateFnsLocale(language: string): Promise<Locale | undefined>;
-export declare function getLocaleText(language: string): Promise<Partial<PickersLocaleText<any>> | undefined>;
+export declare function getMuiLocaleText(language: string): Promise<Partial<PickersLocaleText<any>> | undefined>;
 /**
  * Gets the date format based on the current browser locale. This function will always return four digit year tokens
  * and two digit month and day tokens. The browser locale however, will determine their placement and the separator.
@@ -123,7 +122,6 @@ export declare function convertToDateRangeRef(value: DateRangeLike | undefined):
  * @param dateFormat The date format to set in cache.
  */
 export declare function __test__setlocaleDateFormatInCache(dateFormat: string): void;
-export declare function getLocale(language: string): Promise<Locale | undefined>;
 type PartialValue = void | boolean | number | string | {
     [name: string]: any;
     format?: PartialValue | void;
@@ -132,6 +130,6 @@ type PartialValue = void | boolean | number | string | {
     refValueType?: string;
     value?: number;
 };
-export declare function makeProperValue(value: number | string | PartialValue, calendar: Calendar): Date | undefined;
-export declare function getNewElementValue(date: Date | undefined | null, refValueType: DateTimeType, format: DateTimeFormat, calendar: Calendar): DateTimeRef | undefined;
+export declare function makeProperValue(value: number | string | PartialValue): Date | undefined;
+export declare function getNewElementValue(date: Date | undefined | null, refValueType: DateTimeType, format: DateTimeFormat): DateTimeRef | undefined;
 export {};

package/forms/dateUtilities.js

@@ -1 +1 @@
-import{parse,isAfter}from"date-fns";import{DEFAULT_LOCALE}from"../constants.js";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29,SUPPORTED_DATE_FNS_LOCALES=["cs","da","de","de-AT","en-AU","en-CA","en-GB","en-IN","en-NZ","en-US","en-ZA","fr","fr-CA","fr-CH","it","nb","nl","nl-BE","nn","pt","pt-BR"];let dateFormatSeparator,localeDateFormat="";export function areValuesEqual(e,a){return void 0===e&&void 0===a||null===e&&null===a||(isDateTimeRef(e)&&a&&isDateTimeRef(a)?e.display===a.display&&e.refValueType===a.refValueType&&e.value===a.value&&areFormatsEqual(e.format,a.format):!!(isDateRangeRef(e)&&a&&isDateRangeRef(a))&&(e.endDate?.valueOf()===a.endDate?.valueOf()&&e.refValueType===a.refValueType&&e.startDate?.valueOf()===a.startDate?.valueOf()))}function areFormatsEqual(e,a){return void 0===e&&void 0===a||("string"==typeof e&&"string"==typeof a?e===a:"object"==typeof e&&"object"==typeof a&&(null===e||null===a?e===a:e.locale===a.locale&&e.timezone===a.timezone))}export function isValidDate(e){return e instanceof Date&&!isNaN(e.valueOf())}export function tryParseYear(e){if(/^\d+$/.test(e)&&!(e.length>4)){if(2===e.length){e=`${29>=parseInt(e,10)?20:19}${e}`}for(;e.length<4;)e=`0${e}`;return e}}export function tryParseMonth(e){if(!/^\d+$/.test(e)||e.length>2)return;1===e.length&&(e=`0${e}`);const a=parseInt(e,10);return a<1||a>12?void 0:e}export function tryParseDay(e){if(!/^\d+$/.test(e)||e.length>2)return;1===e.length&&(e=`0${e}`);const a=parseInt(e,10);return a<1||a>31?void 0:e}export function tryParseDateText(e){if(!e)return;const a=(e=e.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===a?.length){const e=getLocaleDateFormatSeparator(),t=getLocaleDateFormatTokenPosition("yyyy"),r=getLocaleDateFormatTokenPosition("MM");for(let e=0;e<3;e++){switch(e){case t:a[e]=tryParseYear(a[e]);break;case r:a[e]=tryParseMonth(a[e]);break;default:a[e]=tryParseDay(a[e])}if(void 0===a[e])return}return`${a[0]}${e}${a[1]}${e}${a[2]}`}}export const MinUIDate=new Date(0,0);MinUIDate.setFullYear(1);export const MaxUIDate=new Date(9999,11,31,23,59,59,999);export var TimeFormat;!function(e){e.AUTO="auto",e.HOURS_12="12-hour",e.HOURS_24="24-hour"}(TimeFormat||(TimeFormat={}));export function getAmPm(e){const{timeFormat:a}=e||{};switch(a){case"12-hour":return!0;case"24-hour":return!1;default:return}}export function getDateBounds(e){const{lowerBound:a,upperBound:t}=e||{};return{min:a?new Date(a):MinUIDate,max:t?new Date(t):MaxUIDate}}function getTargetLanguages(e){const a=parseLocale(e);if(!a)return[DEFAULT_LOCALE];const t=[];return a.territory&&t.push(`${a.language}-${a.territory}`),t.push(a.language),t.push(DEFAULT_LOCALE),t}export async function getDateFnsLocale(e){const a=getTargetLanguages(e);for(const e of a){if(-1===SUPPORTED_DATE_FNS_LOCALES.indexOf(e))continue;let a;try{switch(e){case"cs":a=(await import("date-fns/locale/cs")).cs;break;case"da":a=(await import("date-fns/locale/da")).da;break;case"de":a=(await import("date-fns/locale/de")).de;break;case"de-AT":a=(await import("date-fns/locale/de-AT")).deAT;break;case"en-AU":a=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":a=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":a=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IN":a=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":a=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en-US":a=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":a=(await import("date-fns/locale/en-ZA")).enZA;break;case"fr":a=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":a=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":a=(await import("date-fns/locale/fr-CH")).frCH;break;case"it":a=(await import("date-fns/locale/it")).it;break;case"nb":a=(await import("date-fns/locale/nb")).nb;break;case"nl":a=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":a=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":a=(await import("date-fns/locale/nn")).nn;break;case"pt":a=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":a=(await import("date-fns/locale/pt-BR")).ptBR}}catch{continue}if(a?.localize)return a}}export async function getLocaleText(e){const a=getTargetLanguages(e);for(const e of a){if(-1===SUPPORTED_DATE_FNS_LOCALES.indexOf(e))continue;let a;try{switch(e){case"cs":a=(await import("@mui/x-date-pickers/locales/csCZ")).csCZ;break;case"da":a=(await import("@mui/x-date-pickers/locales/daDK")).daDK;break;case"de":case"de-AT":a=(await import("@mui/x-date-pickers/locales/deDE")).deDE;break;case"en-AU":case"en-CA":case"en-GB":case"en-IN":case"en-NZ":case"en-US":case"en-ZA":case"nn":a=(await import("@mui/x-date-pickers/locales/enUS")).enUS;break;case"fr":case"fr-CA":case"fr-CH":a=(await import("@mui/x-date-pickers/locales/frFR")).frFR;break;case"it":a=(await import("@mui/x-date-pickers/locales/itIT")).itIT;break;case"nb":a=(await import("@mui/x-date-pickers/locales/nbNO")).nbNO;break;case"nl":case"nl-BE":a=(await import("@mui/x-date-pickers/locales/nlNL")).nlNL;break;case"pt":case"pt-BR":a=(await import("@mui/x-date-pickers/locales/ptBR")).ptBR}}catch{continue}return a?a.components.MuiLocalizationProvider.defaultProps.localeText:{}}}export function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const e=new Date(1999,11,31,0,0,0);return localeDateFormat=e.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}export function getLocaleDateFormatSeparator(){if(void 0===dateFormatSeparator){const e=/[^dMy]+/.exec(getLocaleDateFormat());dateFormatSeparator=e?e[0]:""}return dateFormatSeparator}export function getLocaleDateFormatTokenPosition(e){const a=getLocaleDateFormat(),t=a.indexOf("yyyy"),r=a.indexOf("MM"),o=a.indexOf("dd");return"yyyy"===e?0===t?0:t>r&&t>o?2:1:"MM"===e?0===r?0:r>o&&r>t?2:1:0===o?0:o>r&&o>t?2:1}const coerceIntoDate=e=>{if(e instanceof Date&&isValidDate(e))return new Date(e.valueOf());if("string"==typeof e)if(/^\d+$/.test(e))e=Number(e);else{const a=tryParseDateText(e);if(a){const e=getLocaleDateFormat(),t=parse(a,e,0);if(isValidDate(t))return t}}if("number"==typeof e){const a=new Date(e);if(isValidDate(a))return a}};export function convertToDateRangeRef(e){let a,t,r=!1;Array.isArray(e)?(a=coerceIntoDate(e[0]),t=coerceIntoDate(e[1]),r=!0):"object"==typeof e&&(a=coerceIntoDate(e.startDate),t=coerceIntoDate(e.endDate));const o=!!a&&!!t;let n=o&&!isAfter(a,t);if(r&&o&&!n){const e=a;a=t,t=e,n=!0}return o&&n?{refValueType:"daterange",startDate:a,endDate:t}:void 0}export function __test__setlocaleDateFormatInCache(e){localeDateFormat=e,dateFormatSeparator=void 0}export async function getLocale(e){return await getDateFnsLocale(e)}export function makeProperValue(e,a){if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const t=a.coerceIntoValue(e);if(null!=t&&isFinite(t.valueOf()))return t}}export function getNewElementValue(e,a,t,r){return null!=e&&isFinite(e.valueOf())?{refValueType:a,format:t,display:r.format(e,Calendar.fullFormat),value:e.valueOf()}:void 0}
+import{parse,isAfter}from"date-fns";import{DEFAULT_LOCALE}from"../constants.js";import{parseLocale}from"../definition/ProgramInspector.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29;let dateFormatSeparator,localeDateFormat="";export function areValuesEqual(a,e){return void 0===a&&void 0===e||null===a&&null===e||(isDateTimeRef(a)&&e&&isDateTimeRef(e)?a.display===e.display&&a.refValueType===e.refValueType&&a.value===e.value&&areFormatsEqual(a.format,e.format):!!(isDateRangeRef(a)&&e&&isDateRangeRef(e))&&(a.endDate?.valueOf()===e.endDate?.valueOf()&&a.refValueType===e.refValueType&&a.startDate?.valueOf()===e.startDate?.valueOf()))}function areFormatsEqual(a,e){return void 0===a&&void 0===e||("string"==typeof a&&"string"==typeof e?a===e:"object"==typeof a&&"object"==typeof e&&(null===a||null===e?a===e:a.locale===e.locale&&a.timezone===e.timezone))}export function isValidDate(a){return a instanceof Date&&!isNaN(a.valueOf())}export function tryParseYear(a){if(/^\d+$/.test(a)&&!(a.length>4)){if(2===a.length){a=`${29>=parseInt(a,10)?20:19}${a}`}for(;a.length<4;)a=`0${a}`;return a}}export function tryParseMonth(a){if(!/^\d+$/.test(a)||a.length>2)return;1===a.length&&(a=`0${a}`);const e=parseInt(a,10);return e<1||e>12?void 0:a}export function tryParseDay(a){if(!/^\d+$/.test(a)||a.length>2)return;1===a.length&&(a=`0${a}`);const e=parseInt(a,10);return e<1||e>31?void 0:a}export function tryParseDateText(a){if(!a)return;const e=(a=a.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===e?.length){const a=getLocaleDateFormatSeparator(),t=getLocaleDateFormatTokenPosition("yyyy"),r=getLocaleDateFormatTokenPosition("MM");for(let a=0;a<3;a++){switch(a){case t:e[a]=tryParseYear(e[a]);break;case r:e[a]=tryParseMonth(e[a]);break;default:e[a]=tryParseDay(e[a])}if(void 0===e[a])return}return`${e[0]}${a}${e[1]}${a}${e[2]}`}}export const MinUIDate=new Date(0,0);MinUIDate.setFullYear(1);export const MaxUIDate=new Date(9999,11,31,23,59,59,999);export var TimeFormat;!function(a){a.AUTO="auto",a.HOURS_12="12-hour",a.HOURS_24="24-hour"}(TimeFormat||(TimeFormat={}));export function getAmPm(a){const{timeFormat:e}=a||{};switch(e){case"12-hour":return!0;case"24-hour":return!1;default:return}}export function getDateBounds(a){const{lowerBound:e,upperBound:t}=a||{};return{min:e?new Date(e):MinUIDate,max:t?new Date(t):MaxUIDate}}function getTargetLanguages(a){const e=parseLocale(a);if(!e)return[DEFAULT_LOCALE];const t=[];return e.territory&&t.push(`${e.language}-${e.territory}`),t.push(e.language),t.push(DEFAULT_LOCALE),t}export async function getDateFnsLocale(a){const e=getTargetLanguages(a);for(const a of e){let e;try{switch(a){case"af":e=(await import("date-fns/locale/af")).af;break;case"ar":e=(await import("date-fns/locale/ar")).ar;break;case"ar-DZ":e=(await import("date-fns/locale/ar-DZ")).arDZ;break;case"ar-EG":e=(await import("date-fns/locale/ar-EG")).arEG;break;case"ar-MA":e=(await import("date-fns/locale/ar-MA")).arMA;break;case"ar-SA":e=(await import("date-fns/locale/ar-SA")).arSA;break;case"ar-TN":e=(await import("date-fns/locale/ar-TN")).arTN;break;case"az":e=(await import("date-fns/locale/az")).az;break;case"be":e=(await import("date-fns/locale/be")).be;break;case"be-tarask":e=(await import("date-fns/locale/be-tarask")).beTarask;break;case"bg":e=(await import("date-fns/locale/bg")).bg;break;case"bn":e=(await import("date-fns/locale/bn")).bn;break;case"bs":e=(await import("date-fns/locale/bs")).bs;break;case"ca":e=(await import("date-fns/locale/ca")).ca;break;case"ckb":e=(await import("date-fns/locale/ckb")).ckb;break;case"cs":e=(await import("date-fns/locale/cs")).cs;break;case"cy":e=(await import("date-fns/locale/cy")).cy;break;case"da":e=(await import("date-fns/locale/da")).da;break;case"de":e=(await import("date-fns/locale/de")).de;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).deAT;break;case"el":e=(await import("date-fns/locale/el")).el;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IE":e=(await import("date-fns/locale/en-IE")).enIE;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en":case"en-US":e=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).enZA;break;case"eo":e=(await import("date-fns/locale/eo")).eo;break;case"es":e=(await import("date-fns/locale/es")).es;break;case"et":e=(await import("date-fns/locale/et")).et;break;case"eu":e=(await import("date-fns/locale/eu")).eu;break;case"fa":case"fa-IR":e=(await import("date-fns/locale/fa-IR")).faIR;break;case"fi":e=(await import("date-fns/locale/fi")).fi;break;case"fr":e=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).frCH;break;case"fy":e=(await import("date-fns/locale/fy")).fy;break;case"gd":e=(await import("date-fns/locale/gd")).gd;break;case"gl":e=(await import("date-fns/locale/gl")).gl;break;case"gu":e=(await import("date-fns/locale/gu")).gu;break;case"he":e=(await import("date-fns/locale/he")).he;break;case"hi":e=(await import("date-fns/locale/hi")).hi;break;case"hr":e=(await import("date-fns/locale/hr")).hr;break;case"ht":e=(await import("date-fns/locale/ht")).ht;break;case"hu":e=(await import("date-fns/locale/hu")).hu;break;case"hy":e=(await import("date-fns/locale/hy")).hy;break;case"id":e=(await import("date-fns/locale/id")).id;break;case"is":e=(await import("date-fns/locale/is")).is;break;case"it":e=(await import("date-fns/locale/it")).it;break;case"it-CH":e=(await import("date-fns/locale/it-CH")).itCH;break;case"ja":e=(await import("date-fns/locale/ja")).ja;break;case"ja-Hira":e=(await import("date-fns/locale/ja-Hira")).jaHira;break;case"ka":e=(await import("date-fns/locale/ka")).ka;break;case"kk":e=(await import("date-fns/locale/kk")).kk;break;case"km":e=(await import("date-fns/locale/km")).km;break;case"kn":e=(await import("date-fns/locale/kn")).kn;break;case"ko":e=(await import("date-fns/locale/ko")).ko;break;case"lb":e=(await import("date-fns/locale/lb")).lb;break;case"lt":e=(await import("date-fns/locale/lt")).lt;break;case"lv":e=(await import("date-fns/locale/lv")).lv;break;case"mk":e=(await import("date-fns/locale/mk")).mk;break;case"mn":e=(await import("date-fns/locale/mn")).mn;break;case"ms":e=(await import("date-fns/locale/ms")).ms;break;case"mt":e=(await import("date-fns/locale/mt")).mt;break;case"nb":e=(await import("date-fns/locale/nb")).nb;break;case"nl":e=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":e=(await import("date-fns/locale/nn")).nn;break;case"oc":e=(await import("date-fns/locale/oc")).oc;break;case"pl":e=(await import("date-fns/locale/pl")).pl;break;case"pt":e=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).ptBR;break;case"ro":e=(await import("date-fns/locale/ro")).ro;break;case"ru":e=(await import("date-fns/locale/ru")).ru;break;case"se":e=(await import("date-fns/locale/se")).se;break;case"sk":e=(await import("date-fns/locale/sk")).sk;break;case"sl":e=(await import("date-fns/locale/sl")).sl;break;case"sq":e=(await import("date-fns/locale/sq")).sq;break;case"sr":e=(await import("date-fns/locale/sr")).sr;break;case"sr-Latn":e=(await import("date-fns/locale/sr-Latn")).srLatn;break;case"sv":e=(await import("date-fns/locale/sv")).sv;break;case"ta":e=(await import("date-fns/locale/ta")).ta;break;case"te":e=(await import("date-fns/locale/te")).te;break;case"th":e=(await import("date-fns/locale/th")).th;break;case"tr":e=(await import("date-fns/locale/tr")).tr;break;case"ug":e=(await import("date-fns/locale/ug")).ug;break;case"uk":e=(await import("date-fns/locale/uk")).uk;break;case"uz":e=(await import("date-fns/locale/uz")).uz;break;case"uz-Cyrl":e=(await import("date-fns/locale/uz-Cyrl")).uzCyrl;break;case"vi":e=(await import("date-fns/locale/vi")).vi;break;case"zh":case"zh-CN":e=(await import("date-fns/locale/zh-CN")).zhCN;break;case"zh-HK":e=(await import("date-fns/locale/zh-HK")).zhHK;break;case"zh-TW":e=(await import("date-fns/locale/zh-TW")).zhTW}}catch{continue}if(e?.localize)return e}}export async function getMuiLocaleText(a){const e=getTargetLanguages(a);for(const a of e){let e;try{switch(a){case"be":case"be-BY":e=(await import("@mui/x-date-pickers/locales/beBY")).beBY;break;case"bg":case"bg-BG":e=(await import("@mui/x-date-pickers/locales/bgBG")).bgBG;break;case"bn":case"bn-BD":e=(await import("@mui/x-date-pickers/locales/bnBD")).bnBD;break;case"ca":case"ca-ES":e=(await import("@mui/x-date-pickers/locales/caES")).caES;break;case"cs":case"cs-CZ":e=(await import("@mui/x-date-pickers/locales/csCZ")).csCZ;break;case"da":case"da-DK":e=(await import("@mui/x-date-pickers/locales/daDK")).daDK;break;case"de":case"de-DE":case"de-AT":e=(await import("@mui/x-date-pickers/locales/deDE")).deDE;break;case"el":case"el-GR":e=(await import("@mui/x-date-pickers/locales/elGR")).elGR;break;case"en":case"en-AU":case"en-CA":case"en-GB":case"en-IN":case"en-NZ":case"en-US":case"en-ZA":default:e=(await import("@mui/x-date-pickers/locales/enUS")).enUS;break;case"es":case"es-ES":e=(await import("@mui/x-date-pickers/locales/esES")).esES;break;case"eu":e=(await import("@mui/x-date-pickers/locales/eu")).eu;break;case"fa":case"fa-IR":e=(await import("@mui/x-date-pickers/locales/faIR")).faIR;break;case"fi":case"fi-FI":e=(await import("@mui/x-date-pickers/locales/fiFI")).fiFI;break;case"fr":case"fr-CA":case"fr-CH":e=(await import("@mui/x-date-pickers/locales/frFR")).frFR;break;case"he":case"he-IL":e=(await import("@mui/x-date-pickers/locales/heIL")).heIL;break;case"hr":case"hr-HR":e=(await import("@mui/x-date-pickers/locales/hrHR")).hrHR;break;case"hu":case"hu-HU":e=(await import("@mui/x-date-pickers/locales/huHU")).huHU;break;case"is":case"is-IS":e=(await import("@mui/x-date-pickers/locales/isIS")).isIS;break;case"it":case"it-IT":e=(await import("@mui/x-date-pickers/locales/itIT")).itIT;break;case"ja":case"ja-JP":e=(await import("@mui/x-date-pickers/locales/jaJP")).jaJP;break;case"ko":case"ko-KR":e=(await import("@mui/x-date-pickers/locales/koKR")).koKR;break;case"kz":case"kz-KZ":e=(await import("@mui/x-date-pickers/locales/kzKZ")).kzKZ;break;case"mk":e=(await import("@mui/x-date-pickers/locales/mk")).mk;break;case"nb":case"nb-NO":e=(await import("@mui/x-date-pickers/locales/nbNO")).nbNO;break;case"nl":case"nl-BE":case"nl-NL":e=(await import("@mui/x-date-pickers/locales/nlNL")).nlNL;break;case"nn":case"nn-NO":e=(await import("@mui/x-date-pickers/locales/nnNO")).nnNO;break;case"pl":case"pl-PL":e=(await import("@mui/x-date-pickers/locales/plPL")).plPL;break;case"pt-BR":e=(await import("@mui/x-date-pickers/locales/ptBR")).ptBR;break;case"pt":case"pt-PT":e=(await import("@mui/x-date-pickers/locales/ptPT")).ptPT;break;case"ro":case"ro-RO":e=(await import("@mui/x-date-pickers/locales/roRO")).roRO;break;case"ru":case"ru-RU":e=(await import("@mui/x-date-pickers/locales/ruRU")).ruRU;break;case"sk":case"sk-SK":e=(await import("@mui/x-date-pickers/locales/skSK")).skSK;break;case"sv":case"sv-SE":e=(await import("@mui/x-date-pickers/locales/svSE")).svSE;break;case"tr":case"tr-TR":e=(await import("@mui/x-date-pickers/locales/trTR")).trTR;break;case"uk":case"uk-UA":e=(await import("@mui/x-date-pickers/locales/ukUA")).ukUA;break;case"ur":case"ur-PK":e=(await import("@mui/x-date-pickers/locales/urPK")).urPK;break;case"vi":case"vi-VN":e=(await import("@mui/x-date-pickers/locales/viVN")).viVN;break;case"zh":case"zh-CN":e=(await import("@mui/x-date-pickers/locales/zhCN")).zhCN;break;case"zh-HK":e=(await import("@mui/x-date-pickers/locales/zhHK")).zhHK;break;case"zh-TW":e=(await import("@mui/x-date-pickers/locales/zhTW")).zhTW}}catch{continue}return e?e.components.MuiLocalizationProvider.defaultProps.localeText:{}}}export function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const a=new Date(1999,11,31,0,0,0);return localeDateFormat=a.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}export function getLocaleDateFormatSeparator(){if(void 0===dateFormatSeparator){const a=/[^dMy]+/.exec(getLocaleDateFormat());dateFormatSeparator=a?a[0]:""}return dateFormatSeparator}export function getLocaleDateFormatTokenPosition(a){const e=getLocaleDateFormat(),t=e.indexOf("yyyy"),r=e.indexOf("MM"),s=e.indexOf("dd");return"yyyy"===a?0===t?0:t>r&&t>s?2:1:"MM"===a?0===r?0:r>s&&r>t?2:1:0===s?0:s>r&&s>t?2:1}const coerceIntoDate=a=>{if(a instanceof Date&&isValidDate(a))return new Date(a.valueOf());if("string"==typeof a)if(/^\d+$/.test(a))a=Number(a);else{const e=tryParseDateText(a);if(e){const a=getLocaleDateFormat(),t=parse(e,a,0);if(isValidDate(t))return t}}if("number"==typeof a){const e=new Date(a);if(isValidDate(e))return e}};export function convertToDateRangeRef(a){let e,t,r=!1;Array.isArray(a)?(e=coerceIntoDate(a[0]),t=coerceIntoDate(a[1]),r=!0):"object"==typeof a&&(e=coerceIntoDate(a.startDate),t=coerceIntoDate(a.endDate));const s=!!e&&!!t;let i=s&&!isAfter(e,t);if(r&&s&&!i){const a=e;e=t,t=a,i=!0}return s&&i?{refValueType:"daterange",startDate:e,endDate:t}:void 0}export function __test__setlocaleDateFormatInCache(a){localeDateFormat=a,dateFormatSeparator=void 0}export function makeProperValue(a){if("object"==typeof a){if(null===a)return;switch(a.refValueType){case"date":case"time":case"datetime":break;default:return}a=a.value}if("number"==typeof a||"string"==typeof a){const e=new Date(a);if(null!=e&&isFinite(e.valueOf()))return e}}export function getNewElementValue(a,e,t){return null!=a&&isFinite(a.valueOf())?{refValueType:e,format:t,display:a.toLocaleString(t.locale),value:a.valueOf()}:void 0}

package/forms/presenter.d.ts

@@ -13,7 +13,7 @@ export declare function refreshForm(host: FormPresenterHost, container: Element)
  */
 export declare function releaseForm(container: HTMLElement): void;
 /** Renders a component's visual. */
-export declare function render(component: object): any;
+export declare function render(component: object, refCallback: (a: HTMLElement) => void): any;
 /**
  * Renders an element with a placeholder.
  * @param owner