@vertigis/workflow 5.35.1 → 5.37.0

package/forms/components/ButtonBar.d.ts

@@ -1,13 +1,8 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-export interface ButtonBarProps extends BaseFormElementProps {
-    /**
-     * Defines the space between immediate children.
-     */
-    spacing?: number;
-}
-/**
- * The component for the "Button Bar" Form Element.
- */
-declare const ButtonBar: ({ className, component, element, spacing }: ButtonBarProps) => JSX.Element;
-export default ButtonBar;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { defs } from "../FormHost";
+/**
+ * The component for the "Button Bar" Form Element.
+ */
+declare const ButtonBar: ({ className, component, element, enabled, items: elementItems, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, translateText, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
+export default ButtonBar;

package/forms/components/ButtonBar.js

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

package/forms/components/CheckBox.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-/**
- * The component for the "Check Box" Form Element.
- */
-declare const CheckBox: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
-export default CheckBox;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+/**
+ * The component for the "Check Box" Form Element.
+ */
+declare const CheckBox: ({ checked, className, component, element, enabled, label, name, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, tooltip: elementTooltip, translateText, value, }: FormElementProps) => JSX.Element;
+export default CheckBox;

package/forms/components/CheckBox.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import Markdown from"./Markdown.js";const CheckBox=({className:e,component:t,element:o})=>{const[r,a]=useState(!1),[c,l]=useState(null),{host:n,name:m}=t.props;var s=n.renderText(o.tooltip);useEffect(()=>{a(!!o.checked)},[o.checked]),useEffect(()=>{l(React.createElement(Markdown,{host:n,text:o.label}))},[o.label]);return React.createElement(FormElement,{className:e,component:t,element:o},React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:r,onChange:e=>{e=e.target.checked;o.checked=e,n.post("changed",{name:m,value:e?o.value:void 0,argument:e}),a(e)},inputRef:e=>{null===e||e.disabled||n.renderFocus(e,m)}}),disabled:!t.enabled,label:c,title:s}))};export default CheckBox;
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import FormElement from"../FormElement.js";import Markdown from"./Markdown.js";const CheckBox=({checked:e,className:t,component:r,element:o,enabled:a,label:n,name:c,raiseEvent:l,renderFocus:m,renderText:i,setProperty:d,tooltip:s,translateText:k,value:b})=>{s=i(s);return React.createElement(FormElement,{className:t,component:r,element:o},React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:e,onChange:e=>{e=e.target.checked;d("checked",e),l("changed",e?b:void 0,e)},inputRef:e=>{null===e||e.disabled||m(e,c)}}),disabled:!a,label:React.createElement(Markdown,{text:n,translateText:k}),title:s}))};export default CheckBox;

package/forms/components/CheckGroup.d.ts

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

package/forms/components/CheckGroup.js

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

package/forms/components/Custom.d.ts

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

package/forms/components/Custom.js

@@ -1 +1 @@
-import*as React from"react";import{createElement}from"react";import FormElement from"../FormElement.js";import{getElementProps}from"../utils.js";const Custom=({className:e,component:t,element:m})=>{var o=t.props.name;let r;return r=t.elementRegistration?createElement(t.elementRegistration.component,getElementProps(t,m)):(console.warn(`Unable to render custom form element '${o}' of type '${m.customType}'.`),`--- ${m.customType} ---`),React.createElement(FormElement,{className:e,component:t,element:m},r)};export default Custom;
+import*as React from"react";import{createElement}from"react";import FormElement from"../FormElement.js";import{getElementProps}from"../utils.js";const Custom=({className:e,component:t,customType:m,element:o})=>{var r=t.props.name;let n;return m&&t.elementRegistration&&(n=createElement(t.elementRegistration.component,getElementProps(t,o))),n||(console.warn(`Unable to render custom form element '${r}' of type '${m}'.`),n=`--- ${m} ---`),React.createElement(FormElement,{className:e,component:t,element:o},n)};export default Custom;

package/forms/components/DatePicker.d.ts

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

package/forms/components/DatePicker.js

@@ -1 +1 @@
-import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{hasErrorChanged,isInvalidDate,makeProperFormat,makeProperValue,updateElementValue}from"../dateUtilities.js";import{isDateTimeRef,makeUniqueId}from"../utils.js";const DatePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(!1),[l,n]=useState(!1),[s,i]=useState(null),m=useRef(),u=useRef(!0),{host:c,name:p}=t.props;var d=useFocusCallback(t);const f=c.renderText(r.tooltip),v=makeProperFormat(r.value,r.format),F=Calendar.useNative(),k="date";useEffect(()=>{var e=makeProperValue(r.value,F);updateElementValue(r,e,k,v,F),i(e||null)},[r.value]),useEffect(()=>{if(u.current)u.current=!1;else if(!l&&!a)if(isInvalidDate(s))E({status:"invalid"});else{E();let e=s||void 0;if(e&&isDateTimeRef(r.value)){const t=new Date(r.value.value);e=new Date(e),e.setHours(t.getHours()),e.setMinutes(t.getMinutes()),e.setSeconds(t.getSeconds()),e.setMilliseconds(t.getMilliseconds())}updateElementValue(r,e,k,v,F)&&c.post("changed",{name:p,value:r.value})}},[l,a]);const E=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())},P=`${makeUniqueId(p)}-input`,g=c.renderText(r.prompt);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:P},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},m.current),React.createElement(BaseDatePicker,{disabled:!t.enabled,key:"date-picker",inputRef:d,onChange:e=>{i(e)},onOpen:()=>{n(!0)},onClose:()=>{n(!1)},renderInput:e=>(m.current=e.inputProps?.placeholder,e.error=!!r.error,e.inputProps={...e.inputProps,id:P,onBlur:()=>{o(!1)},onFocus:()=>{o(!0)},placeholder:g||e.inputProps?.placeholder,title:f},React.createElement(FormLabelTextField,{...e})),value:s}))};export default DatePicker;
+import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,getNewElementValue,isInvalidDate,makeProperValue}from"../dateUtilities.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId}from"../utils.js";const DatePicker=({className:e,component:t,deriveLocale:r,element:a,enabled:o,error:l,name:i,prompt:s,renderFocus:n,renderText:m,tooltip:u,setProperty:c,setValue:p,value:d})=>{const[f,v]=useState(!1),[E,F]=useState(!1),[k,D]=useState(null),P=useRef(),g=useRef(!0);n=useFocusCallback(o,i,n);const R=m(u),T={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},x=Calendar.useNative(),I="date",V=isInvalidError(l);useEffect(()=>{var e=makeProperValue(d,x),t=getNewElementValue(e,I,T,x);areValuesEqual(d,t)||p(t,!1),D(e||null)},[d]),useEffect(()=>{if(g.current)g.current=!1;else if(!E&&!f)if(isInvalidDate(k))V||c("error",{status:"invalid"});else{V&&c("error",void 0);let e=k||void 0;if(e&&isDateTimeRef(d)){const r=new Date(d.value);e=new Date(e),e.setHours(r.getHours()),e.setMinutes(r.getMinutes()),e.setSeconds(r.getSeconds()),e.setMilliseconds(r.getMilliseconds())}var t=getNewElementValue(e,I,T,x);areValuesEqual(d,t)||p(t)}},[E,f]);const b=`${makeUniqueId(i)}-input`,C=m(s);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:b},V&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},P.current),React.createElement(BaseDatePicker,{disabled:!o,key:"date-picker",inputRef:n,onChange:e=>{D(e)},onOpen:()=>{F(!0)},onClose:()=>{F(!1)},renderInput:e=>(P.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:b,onBlur:()=>{v(!1)},onFocus:()=>{v(!0)},placeholder:C||e.inputProps?.placeholder,title:R},React.createElement(FormLabelTextField,{...e})),value:k}))};export default DatePicker;

package/forms/components/DateRangePicker.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-export declare const dateRangePickerClasses: {
-    root: string;
-    toLabel: string;
-};
-/**
- * The component for the "Date Range Picker" Form Element.
- */
-declare const DateRangePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
-export default DateRangePicker;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { DateRangeRef } from "../FormDefinition";
+export declare const dateRangePickerClasses: {
+    root: string;
+    toLabel: string;
+};
+/**
+ * The component for the "Date Range Picker" Form Element.
+ */
+declare const DateRangePicker: ({ className, component, element, enabled, error, name, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<DateRangeRef | undefined>) => JSX.Element;
+export default DateRangePicker;

package/forms/components/DateRangePicker.js

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

package/forms/components/DateTimePicker.d.ts

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

package/forms/components/DateTimePicker.js

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

package/forms/components/DropDownList.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-/**
- * The component for the "Drop Down List" Form Element.
- */
-declare const DropDownList: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
-export default DropDownList;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { defs } from "../../activities/forms/FormRenderer";
+/**
+ * The component for the "Drop Down List" Form Element.
+ */
+declare const DropDownList: ({ className, component, current, element, enabled, items: elementItems, name, prompt, raiseEvent, renderFocus, renderText, setProperty, setValue, tooltip, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
+export default DropDownList;

package/forms/components/DropDownList.js

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

package/forms/components/FilePicker.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-export declare const filePickerClasses: {
-    file: string;
-    label: string;
-    list: string;
-};
-declare const FilePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
-export default FilePicker;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
+export declare const filePickerClasses: {
+    file: string;
+    label: string;
+    list: string;
+};
+declare const FilePicker: ({ className, component, element, fileTypes, name, renderFocus, renderText, setValue, size, translateText, value, }: FormElementProps<defs.FilesRef | undefined>) => JSX.Element;
+export default FilePicker;

package/forms/components/FilePicker.js

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

package/forms/components/Form.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { FormComponent } from "../FormComponent";
-interface FormProps {
-    /** The CSS class name of the root element. */
-    className?: string;
-    /**
-     * The `FormComponent` being used to render the Form Elements within this Component.
-     */
-    component: FormComponent;
-}
-export declare const formClasses: {
-    body: string;
-    footer: string;
-    formElementContent: string;
-    formElementTitle: string;
-    formElementWithTitleBeside: string;
-    header: string;
-    main: string;
-    root: string;
-    row: string;
-};
-declare const Form: ({ className, component }: FormProps) => JSX.Element;
-export default Form;
+/// <reference types="react" />
+import { FormComponent } from "../FormComponent";
+interface FormProps {
+    /** The CSS class name of the root element. */
+    className?: string;
+    /**
+     * The `FormComponent` being used to render the Form Elements within this Component.
+     */
+    component: FormComponent;
+}
+export declare const formClasses: {
+    body: string;
+    footer: string;
+    formElementContent: string;
+    formElementTitle: string;
+    formElementWithTitleBeside: string;
+    header: string;
+    main: string;
+    root: string;
+    row: string;
+};
+declare const Form: ({ className, component }: FormProps) => JSX.Element;
+export default Form;

package/forms/components/Form.js

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

package/forms/components/FormLabelNumberField.d.ts

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

package/forms/components/FormLabelNumberField.js

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

package/forms/components/GeometryPicker.d.ts

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

package/forms/components/GeometryPickerListItem.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { ListItemProps } from "@vertigis/react-ui/ListItem";
-interface GeometryPickerListItemProps extends ListItemProps {
-    /**
-     * Numeric index referring to this item's position in the list.
-     */
-    itemIndex: number;
-    /**
-     * Callback for when the user presses "Delete" while this item is focused.
-     */
-    deleteItem: (itemIndex: number) => void;
-    /**
-     * Callback for updating the highlight style of the associated graphic on the map.
-     */
-    updateHighlight: (itemIndex: number, focused: boolean, hovered: boolean) => void;
-}
-declare const _default: (props: GeometryPickerListItemProps) => JSX.Element;
-/**
- * A GeometryPickerListItem is shown in the Geometry Picker form element.
- * Its purpose is to aid with detecting changes in focus and hover state to
- * aid with updating the styling of the corresponding graphics on the map.
- */
-export default _default;
+/// <reference types="react" />
+import { ListItemProps } from "@vertigis/react-ui/ListItem";
+interface GeometryPickerListItemProps extends ListItemProps {
+    /**
+     * Numeric index referring to this item's position in the list.
+     */
+    itemIndex: number;
+    /**
+     * Callback for when the user presses "Delete" while this item is focused.
+     */
+    deleteItem: (itemIndex: number) => void;
+    /**
+     * Callback for updating the highlight style of the associated graphic on the map.
+     */
+    updateHighlight: (itemIndex: number, focused: boolean, hovered: boolean) => void;
+}
+/**
+ * A GeometryPickerListItem is shown in the Geometry Picker form element.
+ * Its purpose is to aid with detecting changes in focus and hover state to
+ * aid with updating the styling of the corresponding graphics on the map.
+ */
+declare const _default: (props: GeometryPickerListItemProps) => JSX.Element;
+export default _default;

package/forms/components/HorizontalRule.d.ts

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

package/forms/components/Image.d.ts

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

package/forms/components/Image.js

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

package/forms/components/ItemPicker.d.ts

@@ -1,17 +1,15 @@
-/// <reference types="react" />
-import { BaseFormElementProps } from "../FormElement";
-export declare const itemPickerClasses: {
-    button: string;
-    clearIcon: string;
-    horizontal: string;
-    item: string;
-    items: string;
-};
-export interface ItemPickerProps extends BaseFormElementProps {
-    /**
-     * Defines the space between immediate children.
-     */
-    spacing?: number;
-}
-declare const ItemPicker: ({ className, component, element, spacing }: ItemPickerProps) => JSX.Element;
-export default ItemPicker;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
+export declare const itemPickerClasses: {
+    allNone: string;
+    button: string;
+    clearIcon: string;
+    horizontal: string;
+    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> & {
+    spacing?: number | undefined;
+}) => JSX.Element;
+export default ItemPicker;