@vertigis/workflow 5.38.0 → 5.39.0

package/forms/common.d.ts

@@ -1,6 +1,6 @@
+import * as React from "react";
 import type { FormPresenterHost } from "./FormComponent";
 import type { defs } from "./FormHost";
-import type { ReactNode } from "react";
 export declare function getTitleId(elementId: string): string;
 export declare function getDescriptionId(elementId: string): string;
 export declare function getErrorId(elementId: string): string;
@@ -15,7 +15,7 @@ export type TranslateTextFunction = (content: defs.Text | undefined) => string |
  * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
  * @returns A title component, or `null` if there is no title.
  */
-export declare function renderTitle(elementId: string, required: boolean | undefined, title: defs.Text | undefined, translateText: TranslateTextFunction, inputId?: string): JSX.Element | null;
+export declare function renderTitle(elementId: string, required: boolean | undefined, title: defs.Text | undefined, translateText: TranslateTextFunction, inputId?: string): React.JSX.Element | null;
 /**
  * Renders the description for a Form Element.
  * @param description The description of the Form Element.
@@ -25,7 +25,7 @@ export declare function renderTitle(elementId: string, required: boolean | undef
  * @param className (optional) A class name to add to the component.
  * @returns A description component, or `null` if there is no description.
  */
-export declare function renderDescription(description: defs.Text | undefined, elementId: string, enabled: boolean | undefined, translateText: TranslateTextFunction, className?: string): JSX.Element | null;
+export declare function renderDescription(description: defs.Text | undefined, elementId: string, enabled: boolean | undefined, translateText: TranslateTextFunction, className?: string): React.JSX.Element | null;
 /**
  * Renders the accessible description for a Form Element.
  * @param accessibleDescription The element's accessible description.
@@ -34,14 +34,14 @@ export declare function renderDescription(description: defs.Text | undefined, el
  * @param translateText The translate text function.
  * @returns An accessible description component, or `null` if there is no accessible description or description.
  */
-export declare function renderAccessibleDescription(accessibleDescription: string | undefined, description: defs.Text | undefined, elementId: string, translateText: TranslateTextFunction): JSX.Element | null;
+export declare function renderAccessibleDescription(accessibleDescription: string | undefined, description: defs.Text | undefined, elementId: string, translateText: TranslateTextFunction): React.JSX.Element | null;
 /**
  * Renders the error for a Form Element.
  * @param error The error to be rendered.
  * @param translateText The translate text function.
  * @returns An error component, or `null` if there is no error.
  */
-export declare function renderError(error: defs.Text | undefined, translateText: TranslateTextFunction): JSX.Element | null;
+export declare function renderError(error: defs.Text | undefined, translateText: TranslateTextFunction): React.JSX.Element | null;
 /**
  * Asks the host to focus the provided element when the form is initially shown.
  * Ignores the specified target if it is null or disabled.
@@ -61,7 +61,7 @@ export declare function renderFocus(target: (HTMLElement & {
  * @param component The form component
  * @returns A memoized function that focuses a target HTML element.
  */
-export declare function useFocusCallback(enabled: boolean, name: string | undefined, renderFocus: (target: Node, name?: string) => boolean): (target: (ReactNode & {
+export declare function useFocusCallback(enabled: boolean, name: string | undefined, renderFocus: (target: Node, name?: string) => boolean): (target: (Node & {
     disabled?: boolean;
     thumbRefs?: any[];
 }) | null) => void;

package/forms/common.js

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

package/forms/components/AccordionGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormComponent } from "../FormComponent";
 interface AccordionGroupProps {
     /** The CSS class name of the root element. */
@@ -11,5 +11,5 @@ interface AccordionGroupProps {
 /**
  * This component contains a set of "Section" Form Elements with a `format` of `"accordion-section"`.
  */
-declare const AccordionGroup: ({ className, component }: AccordionGroupProps) => JSX.Element;
+declare const AccordionGroup: ({ className, component }: AccordionGroupProps) => React.JSX.Element;
 export default AccordionGroup;

package/forms/components/AutoComplete.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { defs } from "../FormHost";
 /**
  * The component for the "Auto Complete" Form Element.
  */
-declare const AutoComplete: ({ className, component, current, delay: elementDelay, element, enabled, error, items: elementItems, label, minLength: elementMinLength, name, prompt, tooltip, renderFocus, renderText, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
+declare const AutoComplete: ({ className, component, current, delay: elementDelay, element, enabled, error, items: elementItems, label, minLength: elementMinLength, name, prompt, tooltip, renderFocus, renderText, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
 export default AutoComplete;

package/forms/components/ButtonBar.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { 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;
+declare const ButtonBar: ({ className, component, element, enabled, items: elementItems, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, translateText, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
 export default ButtonBar;

package/forms/components/CheckBox.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { 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;
+declare const CheckBox: ({ checked, className, component, element, enabled, label, name, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, tooltip: elementTooltip, translateText, value, }: FormElementProps) => React.JSX.Element;
 export default CheckBox;

package/forms/components/CheckGroup.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { 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;
+declare const CheckGroup: ({ className, component, current, element, enabled, items: elementItems, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, setValue, translateText, value, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
 export default CheckGroup;

package/forms/components/Custom.d.ts

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

package/forms/components/DatePicker.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { 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;
+declare const DatePicker: ({ className, component, deriveLocale, element, enabled, error: elementError, format: elementFormat, name, prompt, renderFocus, renderText, tooltip: elementTooltip, setProperty, setValue: setElementValue, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.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{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;
+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,getDateBounds,getNewElementValue,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,format:i,name:n,prompt:s,renderFocus:m,renderText:u,tooltip:c,setProperty:p,setValue:d,value:f})=>{const[v,E]=useState(null),[F,D]=useState(!1),[g,k]=useState(!1),[P,x]=useState(null),R=useRef(),T=useRef(!0);m=useFocusCallback(o,n,m);const V=u(c),b={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},C=Calendar.useNative(),I="date",S=isInvalidError(l);useEffect(()=>{var e=makeProperValue(f,C),t=getNewElementValue(e,I,b,C);areValuesEqual(f,t)||d(t,!1),x(e||null)},[f]),useEffect(()=>{if(!g&&!F)if(v)S||p("error",{status:"invalid"});else{if(S&&p("error",void 0),T.current)return void(T.current=!1);let e=P||void 0;if(e&&isDateTimeRef(f)){const r=new Date(f.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,b,C);areValuesEqual(f,t)||d(t)}T.current=!1},[v,F,g]);var{min:r,max:i}=getDateBounds(i);const j=`${makeUniqueId(n)}-input`,w=u(s);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:j},S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},R.current),React.createElement(BaseDatePicker,{disabled:!o,inputRef:m,key:"date-picker",maxDate:i,minDate:r,onChange:e=>x(e),onClose:()=>k(!1),onError:e=>E(e),onOpen:()=>k(!0),renderInput:e=>(R.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:j,onBlur:()=>{D(!1)},onFocus:()=>{D(!0)},placeholder:w||e.inputProps?.placeholder,title:V},React.createElement(FormLabelTextField,{...e})),value:P}))};export default DatePicker;

package/forms/components/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { DateRangeRef } from "../FormDefinition";
 export declare const dateRangePickerClasses: {
@@ -8,5 +8,5 @@ export declare const dateRangePickerClasses: {
 /**
  * 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;
+declare const DateRangePicker: ({ className, component, element, enabled, error, format: elementFormat, name, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<DateRangeRef | undefined>) => React.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,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};
+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}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,format:n,name:l,renderFocus:s,renderText:i,setProperty:m,setValue:c,tooltip:u,value:p})=>{const[d,f]=useState([null,null]),[R,g]=useState(-1),[F,E]=useState([!1,!1]),[v,P]=useState(!1),[x,D]=useState([null,null]),k=useRef(),C=useRef(!0),b=isInvalidError(o);useEffect(()=>{var e=convertToDateRangeRef(p),t=[e?.startDate||null,e?.endDate||null],e=I(t);areValuesEqual(p,e)||c(e,!1),D(t)},[p]),useEffect(()=>{var e=0===R?F[0]:!!d[0],t=1===R?F[1]:!!d[1];E([e,t]);t=e||t;if(t?b||m("error",{status:"invalid"}):b&&m("error",void 0),!v&&-1===R&&!t){if(C.current)return void(C.current=!1);t=I(x);areValuesEqual(p,t)||c(t)}C.current=!1},[d,R,v]);const T=i(u),B=useFocusCallback(a,l,s),I=e=>{if(e[0]&&e[1])return{refValueType:"daterange",startDate:e[0],endDate:e[1]}},L=`${makeUniqueId(l)}-input`;var s=F[0]||F[1],{lowerBound:l,upperBound:n}=n||{},l=l?new Date(l):void 0,n=n?new Date(n):void 0;return React.createElement(Root,{className:clsx(e,dateRangePickerClasses.root),component:t,element:r,inputId:L},s&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},k.current),React.createElement(BaseDateRangePicker,{disabled:!a,maxDate:n,minDate:l,onChange:e=>D(e),onClose:()=>P(!1),onError:e=>f(e),onOpen:()=>P(!0),renderInput:(e,t)=>(k.current=e.inputProps?.placeholder,e.error=!!o||F[0],e.inputProps={...e.inputProps,id:L,title:T,onBlur:()=>{g(-1)},onFocus:()=>{g(0)}},e.inputRef=B,t.error=!!o||F[1],t.inputProps={...t.inputProps,title:T,onBlur:()=>{g(-1)},onFocus:()=>{g(1)}},React.createElement(React.Fragment,null,React.createElement(FormLabelTextField,{...e}),React.createElement(Box,{className:dateRangePickerClasses.toLabel}," ",i("@common-to")," "),React.createElement(FormLabelTextField,{...t}))),value:x}))};export default DateRangePicker;export{dateRangePickerClasses};

package/forms/components/DateTimePicker.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { 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;
+declare const DateTimePicker: ({ className, component, deriveLocale, element, enabled, error, format: elementFormat, name, prompt, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.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{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;
+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,getDateBounds,getNewElementValue,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,format:i,name:s,prompt:m,renderFocus:n,renderText:c,setProperty:u,setValue:p,tooltip:d,value:f})=>{const[k,v]=useState(null),[P,E]=useState(!1),[T,F]=useState(!1),[x,D]=useState(null),C=useRef(),b=useRef(!0);n=useFocusCallback(o,s,n);const g=c(d),B={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},R=Calendar.useNative(),V="datetime",y=isInvalidError(l);useEffect(()=>{var e=makeProperValue(f,R),t=getNewElementValue(e,V,B,R);areValuesEqual(f,t)||p(t,!1),D(e||null)},[f]),useEffect(()=>{if(!T&&!P)if(k)y||u("error",{status:"invalid"});else{if(y&&u("error",void 0),b.current)return void(b.current=!1);var e=getNewElementValue(x,V,B,R);areValuesEqual(f,e)||p(e)}b.current=!1},[k,P,T]);var{min:r,max:i}=getDateBounds(i);const N=`${makeUniqueId(s)}-input`,S=c(m);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:N},y&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledDateTimePicker,{disabled:!o,key:"date-picker",inputRef:n,maxDateTime:i,minDateTime:r,onChange:e=>D(e),onClose:()=>F(!1),onError:e=>v(e),onOpen:()=>F(!0),renderInput:e=>(C.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:N,onBlur:()=>{E(!1)},onFocus:()=>{E(!0)},placeholder:S||e.inputProps?.placeholder,title:g},React.createElement(FormLabelTextField,{...e})),value:x}))};export default DateTimePicker;

package/forms/components/DropDownList.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { 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;
+declare const DropDownList: ({ className, component, current, element, enabled, items: elementItems, name, prompt, raiseEvent, renderFocus, renderText, setProperty, setValue, tooltip, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
 export default DropDownList;

package/forms/components/FilePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type * as defs from "../FormDefinition";
 export declare const filePickerClasses: {
@@ -6,5 +6,5 @@ export declare const filePickerClasses: {
     label: string;
     list: string;
 };
-declare const FilePicker: ({ className, component, element, fileTypes, name, renderFocus, renderText, setValue, size, translateText, value, }: FormElementProps<defs.FilesRef | undefined>) => JSX.Element;
+declare const FilePicker: ({ className, component, element, fileTypes, name, renderFocus, renderText, setValue, size, translateText, value, }: FormElementProps<defs.FilesRef | undefined>) => React.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{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};
+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:(l=>()=>{let e;if(m?.files&&1<m.files.length){const t=[...m.files];t.splice(l,1),e={...m,files:t}}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,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { FormComponent } from "../FormComponent";
 interface FormProps {
     /** The CSS class name of the root element. */
@@ -19,5 +19,5 @@ export declare const formClasses: {
     root: string;
     row: string;
 };
-declare const Form: ({ className, component }: FormProps) => JSX.Element;
+declare const Form: ({ className, component }: FormProps) => React.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{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("dc21e4b722db0484344d94e6f3db523fT1JERVI6NjQ4MTMsRVhQSVJZPTE3MTM2Nzk1MDEyNzQsS0VZVkVSU0lPTj0x");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":k(e,++o,"accordionGroup");break;case"tab-section":k(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const I of d){var v=I.name,R=h[v],x=R.format;t&&x!==t&&C(),null!=(F=h[F=v])&&(f(F.type)||!0===F.hoisted||!1===F.visible)||(isMutuallyExclusiveSection(R)?e?e.push(I):(e=[I],t=x):T(I))}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 k(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{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};

package/forms/components/FormLabelNumberField.d.ts

@@ -13,5 +13,5 @@ interface FormLabelNumberFieldProps {
     maxDecimalPlaces: number;
     min: number;
 }
-declare const FormLabelNumberField: (props: FormLabelNumberFieldProps) => JSX.Element;
+declare const FormLabelNumberField: (props: FormLabelNumberFieldProps) => React.JSX.Element;
 export default FormLabelNumberField;

package/forms/components/GeometryPicker.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+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>) => JSX.Element;
+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;
 export default GeometryPicker;

package/forms/components/GeometryPickerListItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { ListItemProps } from "@vertigis/react-ui/ListItem";
 interface GeometryPickerListItemProps extends ListItemProps {
     /**
@@ -19,5 +19,5 @@ interface GeometryPickerListItemProps extends ListItemProps {
  * 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;
+declare const _default: (props: GeometryPickerListItemProps) => React.JSX.Element;
 export default _default;

package/forms/components/HorizontalRule.d.ts

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

package/forms/components/Image.d.ts

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

package/forms/components/ItemPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type * as defs from "../FormDefinition";
 export declare const itemPickerClasses: {
@@ -11,5 +11,5 @@ export declare const itemPickerClasses: {
 };
 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;
+}) => 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:r,element:t,enabled:i,items:a,name:o,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 y=g;const C=e=>{const t=[];for(const r in b){var i=b[r];i.checked&&t.push(i)}let o;0<t.length&&(o={refValueType:"items",items:t}),areValuesEqual(I,o)||p(o,e)};useEffect(()=>{if(void 0===y||null===y){const i=[];i.keyToIndex={},y=i}const e={};for(const o in a){var t=E(o,!1);t&&(e[o]=t)}y.length=0,y.keyToIndex={};for(const r in e)y.keyToIndex[r]=y.length,y.push(e[r]);g!==y&&u("state",y),C(!1)});const E=(e,t=!0)=>{let i=y.keyToIndex[e];if(null==i||null===i){if(!t)return;y.keyToIndex[e]=y.length,y.push({}),i=y.keyToIndex[e]}return y[i]},x=(e,t)=>{b[e].checked=t;const i=E(e);i&&(i.checked=t)};var L=t=>e=>{null!==e&&(e.disabled||l(e,o),e=!0===b[t].checked,E(t).checked=e)};const P=[];let T;switch(d){case"single":T="radio";break;case"multiple":T="checkbox"}let F={},$={};if(y)for(const J in b){var N,w,S,M,B=b[J];B.checked&&(F[J]=B),E(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)x(t,t===i)}else x(i,!e);C(!0),c(o,"geometry",y)})(J):void 0,tabIndex:N?void 0:-1,title:S,"data-id":J,onBlur:N?e=>{delete E(e.currentTarget.dataset.id).focused,c(o,"geometry",y)}:void 0,onFocus:N?e=>{E(e.currentTarget.dataset.id).focused=!0,c(o,"geometry",y)}:void 0,onMouseOver:N?e=>{E(e.currentTarget.dataset.id).pending=!0,c(o,"geometry",y)}:void 0,onMouseOut:N?e=>{delete E(e.currentTarget.dataset.id).pending,c(o,"geometry",y)}: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:o,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 o=m(i.label).toLowerCase();i.visible=0<=o.indexOf(e)}else i.visible=!0}r.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(o)}-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:r,element:t,inputId:s,ref:e=>{null===e?c(o,"geometry"):c(o,"geometry",y)}},React.createElement(Stack,{spacing:k},f&&React.createElement(Input,{disabled:!i,endAdornment:n,error:!1,fullWidth:!0,id:s,inputRef:e=>l(e,o),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,o),onClick:()=>{for(const e in $)x(e,!0);C(!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 $)x(e,!1);C(!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{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:r,element:t,enabled:i,items:a,name:o,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 y=g;const C=e=>{const t=[];for(const r in b){var i=b[r];i.checked&&t.push(i)}let o;0<t.length&&(o={refValueType:"items",items:t}),areValuesEqual(I,o)||p(o,e)};useEffect(()=>{void 0!==y&&null!==y||(y={items:[],keyToIndex:{}});const e={};for(const i in a){var t=E(i,!1);t&&(e[i]=t)}y.items.length=0,y.keyToIndex={};for(const o in e)y.keyToIndex[o]=y.items.length,y.items.push(e[o]);g!==y&&u("state",y),C(!1)});const E=(e,t=!0)=>{let i=y.keyToIndex[e];if(null==i||null===i){if(!t)return;y.keyToIndex[e]=y.items.length,y.items.push({}),i=y.keyToIndex[e]}return y.items[i]},x=(e,t)=>{b[e].checked=t;const i=E(e);i&&(i.checked=t)};var L=t=>e=>{null!==e&&(e.disabled||l(e,o),e=!0===b[t].checked,E(t).checked=e)};const P=[];let T;switch(d){case"single":T="radio";break;case"multiple":T="checkbox"}let F={},$={};if(y)for(const J in b){var N,w,S,M,B=b[J];B.checked&&(F[J]=B),E(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)x(t,t===i)}else x(i,!e);C(!0),c(o,"geometry",y)})(J):void 0,tabIndex:N?void 0:-1,title:S,"data-id":J,onBlur:N?e=>{delete E(e.currentTarget.dataset.id).focused,c(o,"geometry",y)}:void 0,onFocus:N?e=>{E(e.currentTarget.dataset.id).focused=!0,c(o,"geometry",y)}:void 0,onMouseOver:N?e=>{E(e.currentTarget.dataset.id).pending=!0,c(o,"geometry",y)}:void 0,onMouseOut:N?e=>{delete E(e.currentTarget.dataset.id).pending,c(o,"geometry",y)}: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:o,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 o=m(i.label).toLowerCase();i.visible=0<=o.indexOf(e)}else i.visible=!0}r.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(o)}-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:r,element:t,inputId:s,ref:e=>{null===e?c(o,"geometry"):c(o,"geometry",y)}},React.createElement(Stack,{spacing:k},f&&React.createElement(Input,{disabled:!i,endAdornment:n,error:!1,fullWidth:!0,id:s,inputRef:e=>l(e,o),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,o),onClick:()=>{for(const e in $)x(e,!0);C(!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 $)x(e,!1);C(!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};

package/forms/components/ListBox.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 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>) => JSX.Element;
+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;
 export default ListBox;

package/forms/components/Markdown.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { defs } from "../FormHost";
 import type { MarkdownProps as BaseMarkdownProps } from "@vertigis/react-ui/Markdown";
 /**
@@ -10,5 +10,5 @@ export interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "san
     /** Translates the supplied value. */
     translateText: (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
 }
-declare const Markdown: ({ text, translateText, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => JSX.Element | null;
+declare const Markdown: ({ text, translateText, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => React.JSX.Element | null;
 export default Markdown;

package/forms/components/Number.d.ts

@@ -1,8 +1,13 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type * as defs from "../FormDefinition";
+export declare const numberClasses: {
+    large: string;
+    medium: string;
+    small: string;
+};
 /**
  * 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>) => JSX.Element;
+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;
 export default NumberComponent;

package/forms/components/Number.js

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

package/forms/components/NumberRangeSlider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 export declare const numberRangeSliderClasses: {
     container: string;
@@ -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>) => JSX.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;
 export default NumberRangeSlider;

package/forms/components/NumberSlider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { NumberRef } from "../FormDefinition";
 export declare const numberSliderClasses: {
@@ -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>) => JSX.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;
 export default NumberSlider;

package/forms/components/RadioGroup.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 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>) => JSX.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;
 export default RadioGroup;

package/forms/components/Scanner.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { ScanRef } from "../FormDefinition";
 import type * as defs from "../FormDefinition";
@@ -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>) => JSX.Element;
+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;
 export default Scanner;

package/forms/components/Section.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 export declare const sectionClasses: {
     root: string;
@@ -6,10 +6,11 @@ export declare const sectionClasses: {
     fieldSetSection: string;
     tabSection: string;
     title: string;
+    unstyledSection: string;
     description: string;
 };
 /**
  * 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) => JSX.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;
 export default Section;