@vertigis/workflow 5.40.1 → 5.41.0

package/forms/components/Form.js

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

package/forms/components/FormElement.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import type { defs } from "../FormHost";
+import type { AriaAttributes, ElementType } from "react";
+import type { ReactNode } from "react";
+interface FormElementProps {
+    /**
+     * The components contained by this Form Element.
+     *
+     * When a function is specified, the aria attributes for the title and description/accessible description are returned,
+     * to allow the consumer to assign them to the appropriate HTML Element.
+     *
+     * When a node is specified, the legacy behaviour of assigning the aria attributes to the root of the Form Element is used.
+     */
+    children?: ReactNode | ((ariaAttributes: AriaAttributes) => ReactNode);
+    /**
+     * The CSS class name of the root element.
+     */
+    className?: string;
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component. The default is "div".
+     */
+    component?: ElementType;
+    /**
+     * The Form Element to be rendered within this Component.
+     */
+    element: defs.Element;
+    /**
+     * The id of the default input to be associated with the title.
+     */
+    inputId?: string;
+    /**
+     * The name of the element.
+     */
+    name: string | undefined;
+}
+declare const _default: React.ForwardRefExoticComponent<FormElementProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/forms/components/FormElement.js

@@ -0,0 +1 @@
+import FormControl from"@vertigis/react-ui/FormControl";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";export default forwardRef((e,r)=>{var{children:t,className:o,component:i,element:s,inputId:n,name:a}=e,l=useContext(HostContext),m=makeUniqueId(a),c=renderTitle(m,s.require,s.title,n,"fieldset"===i?"legend":void 0),e=renderDescription(s.description,m,s.enabled),n=renderAccessibleDescription(s.accessibleDescription,s.description,m,l),l=renderError(s.error);const d={className:clsx(o,s.type,{[formClasses.formElementWithTitleBeside]:s.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(a)]:!!a,[makeSafeClassName(s.styleName)]:!!s.styleName}),component:i,error:!!l,id:m,ref:r,required:s.require};m=c?.props?.id,r=n?.props?.id;const p=t instanceof Function?t:void 0;let f=t instanceof Function?void 0:t;p?f=p({"aria-labelledby":m,"aria-describedby":r}):(d["aria-labelledby"]=m,d["aria-describedby"]=r);let u=[c];return s.titleLocation===TitleLocation.BESIDE?u.push(React.createElement("div",{className:formClasses.formElementContent},e,n,l,f)):(u.push(e),u.push(n),u.push(l),u.push(f)),React.createElement(FormControl,{fullWidth:!0,...d},...u)});

package/forms/components/GeometryPicker.d.ts

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

package/forms/components/GeometryPicker.js

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

package/forms/components/HorizontalRule.d.ts

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

package/forms/components/HorizontalRule.js

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

package/forms/components/Image.d.ts

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

package/forms/components/Image.js

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

package/forms/components/ItemPicker.d.ts

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

package/forms/components/ItemPicker.js

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

package/forms/components/ListBox.d.ts

@@ -4,5 +4,8 @@ import type * as defs from "../FormDefinition";
 export declare const listBoxClasses: {
     select: string;
 };
-declare const ListBox: ({ className, component, current, element, enabled, items: elementItems, name, renderFocus, renderText, require, setItemProperty, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
+/**
+ * The component for the "List Box" Form Element.
+ */
+declare const ListBox: ({ className, current, element, enabled, items: elementItems, name, require, setItemProperty, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
 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{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},Root=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,component:t,current:s,element:a,enabled:l,items:o,name:i,renderFocus:r,renderText:c,require:m,setItemProperty:n,setValue:u,size:p,tooltip:d,value:f})=>{var v=`${makeUniqueId(i)}-input`;const h=inspectItems(s,o,f)["items"],[x,E]=useState([]);r=useFocusCallback(l,i,r);useEffect(()=>{const e=[];for(const t in o)o[t].checked&&e.push(t);arrayEqual(x,e)||E(e),k(e,!1)});const k=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>h[e])};areValuesEqual(f,e)||u(e,t)};const b=[];for(const F in h){const I=h[F];var y=c(I.label);const C=c(I.tooltip);I.checked=!0===I.checked;var g=clsx(I.styleName?makeSafeClassName(I.styleName):void 0),R=!1===I.enabled?void 0:!!I.checked;b.push(React.createElement("option",{"aria-selected":R,className:g,key:F,title:C,value:F,disabled:!1===I.enabled},y))}const C=c(d)||void 0;let q;return"number"==typeof p&&(q=p),React.createElement(Root,{className:e,component:t,element:a,inputId:v},React.createElement(Select,{disabled:!l||0===b.length,inputProps:{"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":m,className:listBoxClasses.select,id:v,role:"listbox",size:q,title:C},inputRef:r,multiple:!0,native:!0,onChange:e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const r in h){var o=h[r].checked,i=-1!==s.indexOf(r);o!==i&&n(r,"checked",i)}k(s,!0)},value:x},b))};export default ListBox;export{listBoxClasses};
+import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:r,setItemProperty:m,setValue:i,size:c,tooltip:n,value:u})=>{const d=useContext(HostContext),p=`${makeUniqueId(o)}-input`,f=inspectItems(t,l,u)["items"],[x,h]=useState([]),v=useFocusCallback(a,o,d);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(x,e)||h(e),E(e,!1)});const E=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>f[e])};areValuesEqual(u,e)||i(e,t)},C=e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const i in f){var o=f[i].checked,r=-1!==s.indexOf(i);o!==r&&m(i,"checked",r)}E(s,!0)},k=[];for(const q in f){const I=f[q];var y=d.renderText(I.label);const F=d.renderText(I.tooltip);I.checked=!0===I.checked;var b=clsx(I.styleName?makeSafeClassName(I.styleName):void 0),g=!1===I.enabled?void 0:!!I.checked;k.push(React.createElement("option",{"aria-selected":g,className:b,key:q,title:F,value:q,disabled:!1===I.enabled},y))}const F=d.renderText(n)||void 0;let S;return"number"==typeof c&&(S=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:p,name:o},e=>React.createElement(Select,{disabled:!a||0===k.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":r,className:listBoxClasses.select,id:p,role:"listbox",size:S,title:F},inputRef:v,multiple:!0,native:!0,onChange:C,value:x},k))};export default ListBox;export{listBoxClasses};

package/forms/components/Markdown.d.ts

@@ -7,8 +7,6 @@ import type { MarkdownProps as BaseMarkdownProps } from "@vertigis/react-ui/Mark
 export interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "sanitize"> {
     /** The text to be rendered. */
     text: defs.Text | undefined;
-    /** Translates the supplied value. */
-    translateText: (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
 }
-declare const Markdown: ({ text, translateText, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => React.JSX.Element | null;
+declare const Markdown: ({ text, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => React.JSX.Element | null;
 export default Markdown;

package/forms/components/Markdown.js

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

package/forms/components/Number.d.ts

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

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

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

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, component, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, setValue, translateText, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.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;
 export default RadioGroup;

package/forms/components/RadioGroup.js

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

package/forms/components/Scanner.d.ts

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

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

package/forms/components/Signature.d.ts

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

package/forms/components/Signature.js

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

package/forms/components/SignatureDialog.d.ts

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

package/forms/components/SignatureDialog.js

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

package/forms/components/Sketch.d.ts

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