@vertigis/workflow 5.33.0 → 5.34.0

package/forms/FormDefinition.d.ts

@@ -1,5 +1,8 @@
 import { NumberDisplayFormat } from "./numberFormatter";
-/** References a container. */
+/**
+ * References a container.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type ContainerRef = "default" | "modal" | {
     /** Indicates the name of the container. */
     name: string;
@@ -54,12 +57,18 @@ export interface GeometryRef {
     /** Indicates the geometry. */
     geometry: {}[];
 }
-/** References one or more items within the element. */
+/**
+ * References one or more items within the element.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface ItemsRef {
     /** The items that were selected. */
     items: Item[];
 }
-/** Indicates the number. */
+/**
+ * Indicates the number.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface NumberRef {
     /** Indicates the format for the number. */
     format: NumberFormat;
@@ -68,7 +77,10 @@ export interface NumberRef {
     /** Indicates the numeric value. */
     numeric: number;
 }
-/** References markdown for a markdown-based value. */
+/**
+ * References markdown for a markdown-based value.
+ * @public
+ */
 export interface MarkdownRef {
     markdown: string;
 }
@@ -84,7 +96,10 @@ export interface ScanRef {
     /** Indicates the returned scanner data. */
     value: string;
 }
-/** References an error, warnings, and statuses. */
+/**
+ * References an error, warnings, and statuses.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface StatusRef {
     /** missing - Input is missing. */
     /** invalid - Input is invalid. */
@@ -93,17 +108,26 @@ export interface StatusRef {
     /** trivial - Input items are empty, not relevant, not significant etc. */
     status: "missing" | "invalid" | "failure" | "pending" | "trivial";
 }
-/** References any kind of text. */
+/**
+ * References any kind of text.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type Text = string | MarkdownRef | StatusRef;
 /**
  * Indicates how a form element's title should be positioned relative to its content.
  */
 export declare type TitleLocation = "above" | "beside";
-/** References any kind of value appropriate for a form element. */
+/**
+ * References any kind of value appropriate for a form element.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type Value = boolean | number | number[] | string | DataRef | DateRangeRef | DateTimeRef | FilesRef | GeometryRef | ItemsRef | NumberRef | ScanRef;
 /** Types of matching that can be performed when finding an Item within a Form Element. */
 export declare type ItemMatchType = "index" | "item" | "key" | "label" | "value";
-/** References what kind of elements exist. */
+/**
+ * References what kind of elements exist.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type ElementType = "DropDownEdit" | "DropDownList" | "GeometryPicker" | "Header";
 /** References the format types. */
 export declare type FormatRef = DateTimeFormat | NumberFormat | GeometryFormat | SectionFormat;
@@ -116,7 +140,34 @@ export declare type DateTimeFormat = "app" | "device" | {
     /** Indicates the time zone for the date/time value. */
     timezone: string;
 };
-/** References the number format criteria. */
+/**
+ * Constraints to be applied to numeric values within form elements that deal with selecting numbers.
+ */
+export interface NumberConstraints {
+    /**
+     * The highest accepted value. Values higher than this value should be replaced by it.
+     * If this is `undefined`, there is no upper limit.
+     */
+    maximum: number | undefined;
+    /**
+     * The lowest accepted value. Values lower than this value should be replaced by it.
+     * If this is `undefined`, there is no lower limit.
+     */
+    minimum: number | undefined;
+    /**
+     * The amount that the number changes when the user increments/decrements the value.
+     * This must be a value > 0.
+     *
+     * If `minimum` is also defined, values must fall on `minimum + step * n` where `n` is an integer.
+     * Values that do not should be rounded to the nearest valud step. If `minimum` is not defined,
+     * the formula becomes `step * n`.
+     */
+    step: number;
+}
+/**
+ * References the number format criteria.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface NumberFormat {
     /**
      * The 3-letter ISO 4217 currency code (e.g "USD", "CAD"). Required when
@@ -134,17 +185,31 @@ export interface NumberFormat {
     displayFormat?: NumberDisplayFormat;
     /** Indicates the lower bound. */
     lowerBound?: number;
-    /** Indicates the minimum increment/decrement and precision of values. */
+    /**
+     * Indicates the minimum increment/decrement and precision of values.
+     *
+     * Positive precision values indicates the number of decimal places to round to.
+     * For example, `1` would round to `0.1`, `2` would round to `0.01` etc.
+     *
+     * Negative precision values indicates the number of whole digits to round to.
+     * For example, `-1` would round to `10`, `-2` would round to `100` etc.
+     */
     precision?: number;
     /** Indicates the step size which is the amount to increment/decrement. */
     step?: number;
     /** Indicates the upper bound. */
     upperBound?: number;
 }
-/** References geometry format. */
+/**
+ * References geometry format.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type GeometryFormat = "polygon" | "polyline" | "point" | "polygon-freehand" | "polyline-freehand" | "extent" | "line";
 export declare type SectionFormat = "accordion-section" | "unstyled-section" | "fieldset-section" | "basic-section" | "collapsible-section";
-/** The `SectionFormat` to use when no value is specified. */
+/**
+ * The `SectionFormat` to use when no value is specified.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare const DEFAULT_SECTION_FORMAT = "unstyled-section";
 /** References a two-dimensional size. */
 export interface Size {
@@ -153,7 +218,10 @@ export interface Size {
     /** The width. */
     width?: number;
 }
-/** Defines a form. */
+/**
+ * Defines a form.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Form {
     /** Indicates the defaults for the form. */
     defaults?: {
@@ -164,7 +232,10 @@ export interface Form {
         [name: string]: Element;
     };
 }
-/** Defines any element used in a form. */
+/**
+ * Defines any element used in a form.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Element {
     /**
      * An accessible description to be used by assistive technologies such as screen readers.
@@ -280,7 +351,10 @@ export interface Element {
     /** Indicates how the control wraps text. */
     wrap?: "hard" | "soft" | "off";
 }
-/** Defines an ad hoc item. */
+/**
+ * Defines an ad hoc item.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Item {
     /** Indicates the placement of the item. */
     index?: number;
@@ -304,6 +378,7 @@ export interface Item {
     styleName?: string;
 }
 export declare type EventType = "load" | "cancel" | "checked" | "changed" | "clicked" | "custom" | "dragged" | "suggest" | "submit" | "end" | "verify" | "validate" | "populate" | "prepare";
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export interface Event {
     /** Indicates the name of the element raising the event. */
     name?: string;
@@ -320,6 +395,7 @@ export interface Event {
     /** Indicates the cancellation token fro the event. */
     cancellationToken?: PromiseLike<void>;
 }
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export interface GeometryState {
     /** Indicates the application specific context. */
     context?: {};

package/forms/FormElement.d.ts

@@ -6,6 +6,8 @@ import { defs } from "./FormHost";
  * Properties common to all Form Elements.
  */
 export interface BaseFormElementProps {
+    /** The CSS class name of the root element. */
+    className?: string;
     /**
      * The `FormComponent` being used to render the Form Element within this Component.
      */
@@ -15,27 +17,11 @@ export interface BaseFormElementProps {
      */
     element: defs.Element;
 }
-interface FormElementProps {
-    /**
-     * Custom classes for this element. Use sparingly.
-     */
-    classNames?: string[];
-    /**
-     * The `FormComponent` being used to render the Form Element within this Component.
-     */
-    component: FormComponent;
-    /**
-     * The Form Element to be rendered within this Component.
-     */
-    element: defs.Element;
+interface FormElementProps extends BaseFormElementProps {
     /**
      * The id of the default input to be associated with the title.
      */
     inputId?: string;
-    /**
-     * True if the component should render with older styles, because it has not yet been migrated to use `react-ui` components.
-     */
-    legacyMode?: boolean;
     /**
      * Callback for when the Form Element receives focus.
      * @param event The focus event.

package/forms/FormElement.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import{forwardRef}from"react";import*as React from"react";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";import{TitleLocation}from"./constants.js";import{makeSafeClassName,makeUniqueId}from"./utils.js";export default forwardRef((e,r)=>{const{children:t,classNames:o,component:a,element:s,inputId:i,legacyMode:n,...l}=e;var m=a.props.host,p=makeUniqueId(a.props.name),c=renderTitle(m,s,p,i),d=renderDescription(m,s,p),f=renderAccessibleDescription(m,s,p),u=renderError(m,s),h=c?.props?.id,e=d?.props?.id,m=f?.props?.id;const y=[s.type,makeSafeClassName(a.props.name)];n&&y.push("legacy-styled-element"),s.titleLocation===TitleLocation.BESIDE&&y.push("inline-title"),s.styleName&&y.push(makeSafeClassName(s.styleName)),o&&y.push(...o);r={"aria-labelledby":h,"aria-details":e,"aria-describedby":m,className:y.join(" "),error:!!u,id:p,ref:r,...l};let E=[c];return s.titleLocation===TitleLocation.BESIDE?E.push(React.createElement("div",{className:"form-element-content"},d,f,u,t)):(E.push(d),E.push(f),E.push(u),E.push(t)),React.createElement(FormControl,{fullWidth:!0,...r},...E)});
+import FormControl from"@vertigis/react-ui/FormControl";import clsx from"clsx";import{forwardRef}from"react";import*as React from"react";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";import{formClasses}from"./components/Form.js";import{TitleLocation}from"./constants.js";import{makeSafeClassName,makeUniqueId}from"./utils.js";export default forwardRef((e,r)=>{const{children:o,className:t,component:s,element:a,inputId:i,...m}=e;var n=s.props.host,l=makeUniqueId(s.props.name),p=renderTitle(n,a,l,i),c=renderDescription(n,a,l),e=renderAccessibleDescription(n,a,l),n=renderError(n,a),r={"aria-labelledby":p?.props?.id,"aria-details":c?.props?.id,"aria-describedby":e?.props?.id,className:clsx(t,a.type,{[formClasses.formElementWithTitleBeside]:a.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(s.props.name)]:!!s.props.name,[makeSafeClassName(a.styleName)]:!!a.styleName}),error:!!n,id:l,ref:r,required:a.require,...m};let d=[p];return a.titleLocation===TitleLocation.BESIDE?d.push(React.createElement("div",{className:formClasses.formElementContent},c,e,n,o)):(d.push(c),d.push(e),d.push(n),d.push(o)),React.createElement(FormControl,{fullWidth:!0,...r},...d)});

package/forms/FormHost.d.ts

@@ -96,8 +96,6 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @returns The original text
      */
     translateText(content: defs.Text | undefined): string | defs.MarkdownRef;
-    /** Renders the style for the form. */
-    renderStyle(css?: string): HTMLStyleElement;
     /** Renders the form component. */
     renderVisual(component: {}): any;
     /** Qualifies an event with defaults. */
@@ -161,10 +159,25 @@ export declare abstract class FormHost implements FormPresenterHost {
      * other elements but afterwards.
      */
     trap(event: defs.Event): boolean;
-    /** Attempts to cascade the form. */
-    protected cascade(name: string): boolean;
+    /**
+     * Cascade the form by clearing the value of any elements downstream of the specified one
+     * and triggering the "populate" event for any elements that depend on it directly.
+     * @param elementName The name of an elements which has just changed.
+     * @returns True if the operation was a success, false otherwise.
+     */
+    protected cascade(elementName: string): boolean;
     /** Routes a click event. */
     protected click(event: defs.Event): boolean;
+    /**
+     * Checks the specified element to determine if it has a selection,
+     * which would justify a dependent being populated at this time.
+     *
+     * This function is only interested in _initial_ selection defined in the designer
+     * rather than changes made in an element's `load` event. Those are handled separately.
+     * @param elementName The name of the element being depended upon.
+     * @returns True if the element has a selection at this time.
+     */
+    hasInitialSelectionToDependOn(elementName: string): boolean;
     /** Routes a prepare event. */
     protected hydrate(event: defs.Event): boolean;
     /** Determines if the event origin is a submit button. */
@@ -188,7 +201,7 @@ export declare abstract class FormHost implements FormPresenterHost {
     /** Coerces a number. */
     coerceNumber(value: string): number;
     /** Formats a number. */
-    formatNumber(value: number, options: FormatOptions): string;
+    formatNumber(value: number, options?: FormatOptions): string;
     /** Renders a custom element. */
     renderCustom(component: {}, element: defs.Element): JSX.Element;
     /** Renders a component's state. */
@@ -200,7 +213,8 @@ export declare abstract class FormHost implements FormPresenterHost {
     private isElementPositionBeforeLastFocused;
     private setLastFocus;
     private isSection;
-    private isAccordionSection;
+    isAccordionSection(element?: defs.Element): boolean;
+    isCollapsibleSection(element?: defs.Element): boolean;
     private getAllSectionElements;
     private getMutuallyExclusiveSectionGroup;
     /**

package/forms/FormHost.js

@@ -1 +1 @@
-import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.js";import{FormComponent}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import MutuallyExclusiveSectionGroup from"./MutuallyExclusiveSectionGroup.js";import NumberParser from"./NumberParser.js";import{format}from"./numberFormatter.js";import*as presenter from"./presenter.js";import*as renderers from"./renderers.js";import{CSS}from"./styles/stock.js";import{addStyleToDocument,sort,text}from"./utils.js";const guid="C0166F74-982A-464E-9FB6-9605CB7649C1:",eventName=guid+"FormEvent";function createEvent(e,t){return new CustomEvent(e,{bubbles:!1,cancelable:!1,detail:t})}function overlay(s,i){switch(typeof s){case"boolean":case"number":case"string":return s;case"object":break;default:return i}if(null===s)return i;if(s instanceof Array){let e=i;void 0!==e&&null!==e||(e=[]);let t=0;for(const r of s){var n=overlay(r,e[t]);void 0!==n&&(t<s.length?e[t]=n:e.push(n),++t)}return e}let e=i;void 0===e&&(e={});for(const t in s)e[t]=overlay(s[t],e[t]);return e}function createSubscription(e){function t(){return void 0!==e&&(t.active=!1,e(),!0)}return t.active=!0,t}let staticStyle=void 0;class FormHost{constructor(){this.form={defaults:{},elements:{}},this.errors={},this.refs={},this.enabled=!1,this.visible=!1,this.dismiss=!1,this.custom=!1,this.container=document.createElement("div"),this.eventIndex=0,this.eventQueue=[],this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.style=void 0}deriveLocale(){return DEFAULT_LOCALE}mount(){var e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){var e=this.container;const t=e.parentNode;void 0!==t&&null!==t&&t.removeChild(e)}observeFocus(e){this.enabled&&e instanceof HTMLElement&&(this.lastFocus&&this.lastFocus.target===e||this.setLastFocus(e))}focus(e){!0===(e=null==e?!1:e)&&(this.lastFocus=void 0),!1===e&&!1===(e=this.nextFocus)&&(e=!0),this.nextFocus=e,this.invalidate(!0!==e?e:void 0)}show(){const e=this.container;if(void 0===e)return!1;this.custom||void 0!==this.focusObserver||e.addEventListener("focus",this.focusObserver=e=>this.observeFocus(e.target),!0),this.enabled||(this.nextRefresh=!0,this.focus()),this.enforceAccordionConstraints();var t=this.errors;for(const r in t){const o=this.form.elements[r];void 0!==o&&null!==o&&(o.error=t[r],this.invalidate(r))}const s=[];let i=!1;for(const a of Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(e=>!!e.error&&!1!==e.visible)){const l=this.getParentSection(a);if(this.isAccordionSection(l)){var n=this.findName(l);const u=this.getMutuallyExclusiveSectionGroup(n);if(u){const c=s.find(e=>e.group===u);c?c.element.rowNumber>l.rowNumber&&(c.element=l):(s.push({group:u,element:l}),i=!0)}}else this.isSectionCollapsed(l)&&(l.collapsed=!1,i=!0)}for(const h of s)h.group.expandedSection=h.element;return i&&this.invalidate(),this.errors={},this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}spin(){return void 0!==this.container&&(this.idle(),this.visible&&!this.enabled||(this.nextRefresh=!0,this.enabled=!1,this.visible=!0,this.mount()),this.visible)}hide(){return void 0!==this.container&&(this.idle(),this.visible&&(this.enabled=!1,this.visible=!1,this.unmount()),!0)}dispose(){if(this.dismiss)return!1;{this.dismiss=!0;const t=this.container;t.dispatchEvent(createEvent(eventName));var e=this.focusObserver;return void 0!==e&&t.removeEventListener("focus",e,!0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,!(this.eventTask=void 0)}}renderFocus(e,t){var s=this.nextFocus;if(this.enabled&&e instanceof HTMLElement)if(!1!==s)if(void 0!==t){if(t===s||!0===s&&void 0===this.lastFocus)return this.nextFocus=!1,this.setLastFocus(e,t),e.focus(),!0}else{const i=this.lastFocus?.target;if(!0===s&&i instanceof HTMLElement&&e.contains(i))return this.nextFocus=!1,i.focus(),!0}else if(!1===s&&t&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t))return this.setLastFocus(e,t),e.focus(),!0;return!1}renderHtml(e,t){return"string"==typeof e?text.textToHtml(e):text.isMarkdown(e)?text.markdownToHtml(e.markdown,t):""}renderText(e){return"string"==typeof e?e:text.isMarkdown(e)?text.markdownToText(e.markdown):""}translateText(e){return"string"==typeof e||text.isMarkdown(e)?e:text.isStatus(e)?e.status:void 0}renderStyle(e){return"string"==typeof e?addStyleToDocument(e):staticStyle=staticStyle||addStyleToDocument(CSS)}renderVisual(e){return presenter.render(e)||presenter.renderNone(e)}qualifyDefault(e){var t=sort(this.form.elements);for(const r in t){var s=t[r];if(null!=s&&!1!==s.visible&&s.enabled){if(s.default)return e.value=s.value,r;var i=sort(s.items);if(null!=i)for(const o in i){var n=i[o];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=o,e.value=n.value,r}}}}qualify(e,t){var s;return null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey&&(s=t.name,t.routingKey=void 0!==s?e+"$"+s:e),t}post(e,t){t=this.publish(e,t);const s=this.container;void 0!==s&&s.dispatchEvent(createEvent(eventName,t))}subscribe(s){const e=this.container;if(void 0===e)return createSubscription();const i=function(){s=void 0,e.removeEventListener(eventName,t)},t=function(e){const t=e.detail;void 0!==t?Bluebird.resolve().then(function(){"function"==typeof s&&s(t)}):i()};return e.addEventListener(eventName,t),createSubscription(i)}refresh(e){this.custom||("string"==typeof e?(e=this.refs[e],presenter.refresh(e)):(void 0===this.style&&(this.style=this.renderStyle()),this.refs={},presenter.refreshForm(this,this.container)))}invalidate(e){const t=this.nextRefresh;"string"==typeof e&&!0!==t&&(!1===t?this.nextRefresh={[e]:!0}:t[e]=!0),void 0!==e&&!0!==e||(this.nextRefresh=!0),!1===e&&!1===t&&(this.nextRefresh={})}update(){var e=this.nextRefresh;if(!0===e&&(this.nextRefresh=!1,this.refresh()),"object"==typeof e){this.nextRefresh=!1;for(const t in e)!0===e[t]&&this.refresh(t)}}idle(){const e=this.timerHandle;void 0!==e&&(this.timerHandle=void 0,e())}busy(){if(void 0===this.timerHandle&&void 0!==this.container){let e=setTimeout(()=>this.spin());this.timerHandle=function(){void 0!==e&&(clearTimeout(e),e=void 0)}}}publish(e,t){return this.enabled?(t=this.enqueue(e,t),0<this.eventQueue.length&&this.spin(),t):this.qualify(e,t)}enqueue(e,t){return t=this.qualify(e,t),void 0!==this.eventTask?(this.resolveEvent(t),this.eventTask=void 0):this.eventQueue.push(t),t}dequeue(){const e=this.eventQueue;if(0<e.length){var t=this.eventIndex,s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}observe(){const t=this;return Bluebird.attempt(function(){if(void 0!==t.eventTask)return t.eventTask;var e=t.dequeue();return void 0!==e?e:t.show()?(t.eventTask=new Task(e=>{t.resolveEvent=e}),t.eventTask):void 0})}load(e,t){if(void 0===this.container)return!1;if(this.eventQueue.length=this.eventIndex=0,this.eventTask=void 0,this.errors={},this.lastFocus=void 0,this.nextFocus=!0,this.nextRefresh=!0,this.enqueue("load"),this.enqueue("prepare"),null!=e){e=overlay(e,e={defaults:{},elements:{}});this.form=overlay(t,e);for(const s in this.form.elements){let e=this.form.elements[s];if(e=overlay(e,{showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1}),e.items)for(const i in e.items)e.items[i]=overlay(e.items[i],{enabled:!0,checked:!1,visible:!0,default:!1,validates:!1});this.form.elements[s]=e}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"clicked":return this.click(e);case"validate":return this.verify(e);case"verify":return this.submit(e);case"checked":return this.changed(e)}return!1}changed(e){return this.enqueue("changed",{name:e.name,item:e.item,value:e.value}),!0}isElementValid(e,t=!0,s={status:void 0}){return null!=e&&(s.status=void 0,text.isStatus(e.error)&&"invalid"===e.error.status?!(s.status="invalid"):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||!(s.status="missing"):t))}isElementEffectivelyVisible(e){return null!=e&&(!1!==this.getParentSection(e)?.visible&&!1!==e.visible)}isElementValueDefined(e){if(null==e)return!1;if("CheckBox"===e.type)return!0;var t=e.current;if(null!=t)return!0;t=e.value;if(null!=t&&""!==t)return!0;t=e.label;if(null!=t&&""!==t)return!0;var s=e.items;if(null!=s)for(const n in s){var i=s[n];if(null!=i&&!0===i.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":break;default:return!1}var t=e.name;const s=this.find(t);if(void 0===s||null===s)return!1;e=s.dependsOn;if("string"!=typeof e)return!1;e=this.find(e);return s.enabled=this.isElementEffectivelyVisible(e)&&this.isElementValueDefined(e),this.invalidate(t),!s.enabled}cascade(e){var t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const s={[e]:!0};var i=sort(this.form.elements);for(const r in i){const o=i[r];var n=o.dependsOn;if("string"==typeof n){const a=this.find(n);void 0!==a&&"string"!=typeof a.dependsOn&&(a.dependsOn=!0),!0===s[n]&&(s[r]=!0,o.checked=!1,o.current=void 0,o.label=void 0,o.items=void 0,o.value=void 0,this.invalidate(r),this.enqueue("populate",{name:r}))}else o.dependsOn=!1}return!0}click(e){var t=this.form.elements[e.name];return null!=t&&"ButtonBar"==t.type&&this.validate(e)}hydrate(e){for(const t in sort(this.form.elements))this.enqueue("populate",{name:t}),this.enqueue("load",{name:t});return!0}shouldTriggerValidation(e){var t=this.find(e.name);if(null!=t&&"string"==typeof e.value){e=e.item;if("string"!=typeof e)return!0===t.validates;t=t.items;if(null!=t){e=t[e];if(null!=e)return!0===e.validates}}}validate(e){var t=this.shouldTriggerValidation(e);if(!0!==t)return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0);{const n=this.errors={};var s=sort(this.form.elements);for(const r in s){var i=s[r];null!=i&&(n[r]=void 0,this.enqueue("validate",{name:r}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}}verify(e){var t=e.name,s=this.form.elements[t],e={status:void 0};return!this.isElementValid(s,!0,e)&&(e.status&&(this.errors[t]={status:e.status}),!1===this.nextFocus&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return void 0!==t&&null!==t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){return!this.hasErrors()&&(this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0)}hasErrors(){var e=this.errors;for(const s in e){var t=e[s];if(null!=t)return!0}return!1}find(e){if(null!=e)return"string"==typeof(e="object"==typeof e?e.name:e)?this.form.elements[e]:void 0}findName(e){for(const t in this.form.elements)if(this.form.elements[t]===e)return t}coerceNumber(e){var t=this.deriveLocale();return new NumberParser(t).parse(e)}formatNumber(e,t){return t?.locale||((t=t||{}).locale=this.deriveLocale()),format(t,e)}renderCustom(e,t){if(e instanceof FormComponent)return renderers.element.renderCustom(e,t)}renderState(e,t,s){return!1}getParentSection(e){e=e.section;if(e){e="string"==typeof e?e:e.name;return this.form.elements[e]}}isSectionCollapsed(e){return!(!e||"Section"!==e.type||"collapsible-section"!==e.format&&"accordion-section"!==e.format)&&!0===e.collapsed}isElementPositionBeforeLastFocused(e){var t=this.lastFocus;if(e&&void 0!==t?.rowNumber&&void 0!==t.rowIndex){e=this.form.elements?.[e];if(e)return void 0!==e.rowNumber&&void 0!==e.rowIndex?e.rowNumber<t.rowNumber||e.rowNumber===t.rowNumber&&e.rowIndex<t.rowIndex:e.index<t.rowNumber||e.index===t.rowNumber&&0<t.rowIndex}return!1}setLastFocus(e,t){this.lastFocus={target:e},t&&(this.lastFocus.name=t,(t=this.form.elements?.[t])&&(void 0!==t.rowNumber&&void 0!==t.rowIndex?(this.lastFocus.rowNumber=t.rowNumber,this.lastFocus.rowIndex=t.rowIndex):(this.lastFocus.rowNumber=t.index,this.lastFocus.rowIndex=0)))}isSection(e){return"Section"===e?.type}isAccordionSection(e){return this.isSection(e)&&"accordion-section"===e.format}getAllSectionElements(){const e={};for(const s in this.form.elements){var t=this.form.elements[s];this.isSection(t)&&(e[s]=t)}return e}getMutuallyExclusiveSectionGroup(t){let s=this.mutuallyExclusiveSections[t];if(!s){var e=this.find(t);if(!this.isAccordionSection(e))return;s=new MutuallyExclusiveSectionGroup({elementName:t,element:e});e=this.getAllSectionElements();const r=Object.keys(sort(e,e=>e.rowNumber));t=r.indexOf(t);for(let e=t-1;0<=e;e--){const o=r[e];var i=this.find(o);if(!this.isAccordionSection(i))break;s.unshift({elementName:o,element:i})}for(let e=t+1;e<r.length;e++){const o=r[e];var n=this.find(o);if(!this.isAccordionSection(n))break;s.push({elementName:o,element:n})}s.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=s})}return s}updateAccordionSections(t){const e=this.getMutuallyExclusiveSectionGroup(t);e.forEach(e=>{e.element.collapsed=e.elementName!==t}),presenter.refreshForm(this,this.container)}enforceAccordionConstraints(){const e=[];for(const s of Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>this.isAccordionSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber)){var t=this.getMutuallyExclusiveSectionGroup(s.elementName);-1===e.indexOf(t)?e.push(t):s.element.collapsed=!0}}}export{defs,FormHost};
+import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.js";import{FormComponent}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import MutuallyExclusiveSectionGroup from"./MutuallyExclusiveSectionGroup.js";import NumberParser from"./NumberParser.js";import{FormElementTypes}from"./constants.js";import{format}from"./numberFormatter.js";import*as presenter from"./presenter.js";import*as renderers from"./renderers.js";import{sort,text}from"./utils.js";const guid="C0166F74-982A-464E-9FB6-9605CB7649C1:",eventName=guid+"FormEvent";function createEvent(e,t){return new CustomEvent(e,{bubbles:!1,cancelable:!1,detail:t})}function overlay(i,s){switch(typeof i){case"boolean":case"number":case"string":return i;case"object":break;default:return s}if(null===i)return s;if(i instanceof Array){let e=s;void 0!==e&&null!==e||(e=[]);let t=0;for(const r of i){var n=overlay(r,e[t]);void 0!==n&&(t<i.length?e[t]=n:e.push(n),++t)}return e}let e=s;void 0===e&&(e={});for(const t in i)e[t]=overlay(i[t],e[t]);return e}function createSubscription(e){function t(){return void 0!==e&&(t.active=!1,e(),!0)}return t.active=!0,t}class FormHost{constructor(){this.form={defaults:{},elements:{}},this.errors={},this.refs={},this.enabled=!1,this.visible=!1,this.dismiss=!1,this.custom=!1,this.container=document.createElement("div"),this.eventIndex=0,this.eventQueue=[],this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.style=void 0}deriveLocale(){return DEFAULT_LOCALE}mount(){var e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){var e=this.container;const t=e.parentNode;void 0!==t&&null!==t&&t.removeChild(e)}observeFocus(e){this.enabled&&e instanceof HTMLElement&&(this.lastFocus&&this.lastFocus.target===e||this.setLastFocus(e))}focus(e){!0===(e=null==e?!1:e)&&(this.lastFocus=void 0),!1===e&&!1===(e=this.nextFocus)&&(e=!0),this.nextFocus=e,this.invalidate(!0!==e?e:void 0)}show(){const e=this.container;if(void 0===e)return!1;this.custom||void 0!==this.focusObserver||e.addEventListener("focus",this.focusObserver=e=>this.observeFocus(e.target),!0),this.enabled||(this.nextRefresh=!0,this.focus()),this.enforceAccordionConstraints();var t=this.errors;for(const r in t){const o=this.form.elements[r];void 0!==o&&null!==o&&(o.error=t[r],this.invalidate(r))}const i=[];let s=!1;for(const a of Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(e=>!!e.error&&!1!==e.visible)){const l=this.getParentSection(a);if(this.isAccordionSection(l)){var n=this.findName(l);const u=this.getMutuallyExclusiveSectionGroup(n);if(u){const c=i.find(e=>e.group===u);c?c.element.rowNumber>l.rowNumber&&(c.element=l):(i.push({group:u,element:l}),s=!0)}}else this.isSectionCollapsed(l)&&(l.collapsed=!1,s=!0)}for(const h of i)h.group.expandedSection=h.element;return s&&this.invalidate(),this.errors={},this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}spin(){return void 0!==this.container&&(this.idle(),this.visible&&!this.enabled||(this.nextRefresh=!0,this.enabled=!1,this.visible=!0,this.mount()),this.visible)}hide(){return void 0!==this.container&&(this.idle(),this.visible&&(this.enabled=!1,this.visible=!1,this.unmount()),!0)}dispose(){if(this.dismiss)return!1;{this.dismiss=!0;const t=this.container;t.dispatchEvent(createEvent(eventName));var e=this.focusObserver;return void 0!==e&&t.removeEventListener("focus",e,!0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,!(this.eventTask=void 0)}}renderFocus(e,t){var i=this.nextFocus;if(this.enabled&&e instanceof HTMLElement)if(!1!==i)if(void 0!==t){if(t===i||!0===i&&void 0===this.lastFocus)return this.nextFocus=!1,this.setLastFocus(e,t),e.focus(),!0}else{const s=this.lastFocus?.target;if(!0===i&&s instanceof HTMLElement&&e.contains(s))return this.nextFocus=!1,s.focus(),!0}else if(!1===i&&t&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t))return this.setLastFocus(e,t),e.focus(),!0;return!1}renderHtml(e,t){return"string"==typeof e?text.textToHtml(e):text.isMarkdown(e)?text.markdownToSafeHtml(e.markdown,{inline:t===defs.HTMLContentCategory.Phrasing}):""}renderText(e){return"string"==typeof e?e:text.isMarkdown(e)?text.markdownToText(e.markdown):""}translateText(e){return"string"==typeof e||text.isMarkdown(e)?e:text.isStatus(e)?e.status:void 0}renderVisual(e){return presenter.render(e)||presenter.renderNone(e)}qualifyDefault(e){var t=sort(this.form.elements);for(const r in t){var i=t[r];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,r;var s=sort(i.items);if(null!=s)for(const o in s){var n=s[o];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=o,e.value=n.value,r}}}}qualify(e,t){var i;return null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey&&(i=t.name,t.routingKey=void 0!==i?e+"$"+i:e),t}post(e,t){t=this.publish(e,t);const i=this.container;void 0!==i&&i.dispatchEvent(createEvent(eventName,t))}subscribe(i){const e=this.container;if(void 0===e)return createSubscription();const s=function(){i=void 0,e.removeEventListener(eventName,t)},t=function(e){const t=e.detail;void 0!==t?Bluebird.resolve().then(function(){"function"==typeof i&&i(t)}):s()};return e.addEventListener(eventName,t),createSubscription(s)}refresh(e){this.custom||("string"==typeof e?(e=this.refs[e],presenter.refresh(e)):(this.refs={},presenter.refreshForm(this,this.container)))}invalidate(e){const t=this.nextRefresh;"string"==typeof e&&!0!==t&&(!1===t?this.nextRefresh={[e]:!0}:t[e]=!0),void 0!==e&&!0!==e||(this.nextRefresh=!0),!1===e&&!1===t&&(this.nextRefresh={})}update(){var e=this.nextRefresh;if(!0===e&&(this.nextRefresh=!1,this.refresh()),"object"==typeof e){this.nextRefresh=!1;for(const t in e)!0===e[t]&&this.refresh(t)}}idle(){const e=this.timerHandle;void 0!==e&&(this.timerHandle=void 0,e())}busy(){if(void 0===this.timerHandle&&void 0!==this.container){let e=setTimeout(()=>this.spin());this.timerHandle=function(){void 0!==e&&(clearTimeout(e),e=void 0)}}}publish(e,t){return this.enabled?(t=this.enqueue(e,t),0<this.eventQueue.length&&this.spin(),t):this.qualify(e,t)}enqueue(e,t){return t=this.qualify(e,t),void 0!==this.eventTask?(this.resolveEvent(t),this.eventTask=void 0):this.eventQueue.push(t),t}dequeue(){const e=this.eventQueue;if(0<e.length){var t=this.eventIndex,i=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,i}}observe(){const t=this;return Bluebird.attempt(function(){if(void 0!==t.eventTask)return t.eventTask;var e=t.dequeue();return void 0!==e?e:t.show()?(t.eventTask=new Task(e=>{t.resolveEvent=e}),t.eventTask):void 0})}load(e,t){if(void 0===this.container)return!1;if(this.eventQueue.length=this.eventIndex=0,this.eventTask=void 0,this.errors={},this.lastFocus=void 0,this.nextFocus=!0,this.nextRefresh=!0,this.enqueue("load"),this.enqueue("prepare"),null!=e){e=overlay(e,e={defaults:{},elements:{}});this.form=overlay(t,e);for(const i in this.form.elements){let e=this.form.elements[i];if(e=overlay(e,{showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1}),e.items)for(const s in e.items)e.items[s]=overlay(e.items[s],{enabled:!0,checked:!1,visible:!0,default:!1,validates:!1});this.form.elements[i]=e}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"clicked":return this.click(e);case"validate":return this.verify(e);case"verify":return this.submit(e);case"checked":return this.changed(e)}return!1}changed(e){return this.enqueue("changed",{name:e.name,item:e.item,value:e.value}),!0}isElementValid(e,t=!0,i={status:void 0}){return null!=e&&(i.status=void 0,text.isStatus(e.error)&&"invalid"===e.error.status?!(i.status="invalid"):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||!(i.status="missing"):t))}isElementEffectivelyVisible(e){return null!=e&&(!1!==this.getParentSection(e)?.visible&&!1!==e.visible)}isElementValueDefined(e){if(null==e)return!1;if("CheckBox"===e.type)return!0;var t=e.current;if(null!=t)return!0;t=e.value;if(null!=t&&""!==t)return!0;t=e.label;if(null!=t&&""!==t)return!0;var i=e.items;if(null!=i)for(const n in i){var s=i[n];if(null!=s&&!0===s.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":case"suggest":break;default:return!1}var t=e.name;const i=this.find(t);if(void 0===i||null===i)return!1;e=i.dependsOn;if("string"!=typeof e)return!1;e=this.find(e);return i.enabled=this.isElementEffectivelyVisible(e)&&this.isElementValueDefined(e),this.invalidate(t),!i.enabled}cascade(e){var t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const i={[e]:!0};var s=sort(this.form.elements);for(const r in s){const o=s[r];var n=o.dependsOn;if("string"==typeof n){const a=this.find(n);void 0!==a&&"string"!=typeof a.dependsOn&&(a.dependsOn=!0),!0===i[n]&&(i[r]=!0,o.checked=!1,o.current=void 0,o.label=void 0,o.items=void 0,o.value=void 0,this.invalidate(r),o.dependsOn===e&&this.enqueue("populate",{name:r}))}else o.dependsOn=!1}return!0}click(e){var t=this.form.elements[e.name];return null!=t&&"ButtonBar"==t.type&&this.validate(e)}hasInitialSelectionToDependOn(e){e=this.form.elements[e];return e.type===FormElementTypes.DROPDOWNLIST&&(void 0!==e.current&&null!==e.current)}hydrate(e){for(const i in sort(this.form.elements)){var t=this.form.elements[i].dependsOn;"string"==typeof t&&!this.hasInitialSelectionToDependOn(t)||this.enqueue("populate",{name:i}),this.enqueue("load",{name:i})}return!0}shouldTriggerValidation(e){var t=this.find(e.name);if(null!=t&&"string"==typeof e.value){e=e.item;if("string"!=typeof e)return!0===t.validates;t=t.items;if(null!=t){e=t[e];if(null!=e)return!0===e.validates}}}validate(e){var t=this.shouldTriggerValidation(e);if(!0!==t)return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0);{const n=this.errors={};var i=sort(this.form.elements);for(const r in i){var s=i[r];null!=s&&(n[r]=void 0,this.enqueue("validate",{name:r}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}}verify(e){var t=e.name,i=this.form.elements[t],e={status:void 0};return!this.isElementValid(i,!0,e)&&(e.status&&(this.errors[t]={status:e.status}),!1===this.nextFocus&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return void 0!==t&&null!==t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){return!this.hasErrors()&&(this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0)}hasErrors(){var e=this.errors;for(const i in e){var t=e[i];if(null!=t)return!0}return!1}find(e){if(null!=e)return"string"==typeof(e="object"==typeof e?e.name:e)?this.form.elements[e]:void 0}findName(e){for(const t in this.form.elements)if(this.form.elements[t]===e)return t}coerceNumber(e){var t=this.deriveLocale();return new NumberParser(t).parse(e)}formatNumber(e,t){return t=t||{locale:this.deriveLocale()},format(t,e)}renderCustom(e,t){if(e instanceof FormComponent)return renderers.element.renderCustom(e,t)}renderState(e,t,i){return!1}getParentSection(e){e=e.section;if(e){e="string"==typeof e?e:e.name;return this.form.elements[e]}}isSectionCollapsed(e){return!(!e||"Section"!==e.type||!this.isCollapsibleSection(e)&&!this.isAccordionSection(e))&&!0===e.collapsed}isElementPositionBeforeLastFocused(e){var t=this.lastFocus;if(e&&void 0!==t?.rowNumber&&void 0!==t.rowIndex){e=this.form.elements?.[e];if(e)return void 0!==e.rowNumber&&void 0!==e.rowIndex?e.rowNumber<t.rowNumber||e.rowNumber===t.rowNumber&&e.rowIndex<t.rowIndex:e.index<t.rowNumber||e.index===t.rowNumber&&0<t.rowIndex}return!1}setLastFocus(e,t){this.lastFocus={target:e},t&&(this.lastFocus.name=t,(t=this.form.elements?.[t])&&(void 0!==t.rowNumber&&void 0!==t.rowIndex?(this.lastFocus.rowNumber=t.rowNumber,this.lastFocus.rowIndex=t.rowIndex):(this.lastFocus.rowNumber=t.index,this.lastFocus.rowIndex=0)))}isSection(e){return"Section"===e?.type}isAccordionSection(e){return this.isSection(e)&&"accordion-section"===e.format}isCollapsibleSection(e){return this.isSection(e)&&"collapsible-section"===e.format}getAllSectionElements(){const e={};for(const i in this.form.elements){var t=this.form.elements[i];this.isSection(t)&&(e[i]=t)}return e}getMutuallyExclusiveSectionGroup(t){let i=this.mutuallyExclusiveSections[t];if(!i){var e=this.find(t);if(!this.isAccordionSection(e))return;i=new MutuallyExclusiveSectionGroup({elementName:t,element:e});e=this.getAllSectionElements();const r=Object.keys(sort(e,e=>e.rowNumber));t=r.indexOf(t);for(let e=t-1;0<=e;e--){const o=r[e];var s=this.find(o);if(!this.isAccordionSection(s))break;i.unshift({elementName:o,element:s})}for(let e=t+1;e<r.length;e++){const o=r[e];var n=this.find(o);if(!this.isAccordionSection(n))break;i.push({elementName:o,element:n})}i.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=i})}return i}updateAccordionSections(t){const e=this.getMutuallyExclusiveSectionGroup(t);e.forEach(e=>{e.element.collapsed=e.elementName!==t}),presenter.refreshForm(this,this.container)}enforceAccordionConstraints(){const e=[];for(const i of Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>this.isAccordionSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber)){var t=this.getMutuallyExclusiveSectionGroup(i.elementName);-1===e.indexOf(t)?e.push(t):i.element.collapsed=!0}}}export{defs,FormHost};

package/forms/FormPresenterHost.d.ts

@@ -1,6 +1,9 @@
 import * as defs from "./FormDefinition";
 import { FormatOptions } from "./numberFormatter";
-/** Exposes various features to components that require features of the environment. */
+/**
+ * Exposes various features to components that require features of the environment.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface FormPresenterHost {
     /** Indicates if the form is enabled or not. */
     enabled: boolean;
@@ -11,7 +14,7 @@ export interface FormPresenterHost {
     /** Disposes the form. */
     dispose(): void;
     /** Translates the supplied value. */
-    translateText(content: defs.Text): string | defs.MarkdownRef | undefined;
+    translateText(content: defs.Text | undefined): string | defs.MarkdownRef | undefined;
     /** References all elements. */
     refs: {};
     /** Refreshes the entire form. */
@@ -37,7 +40,7 @@ export interface FormPresenterHost {
     /** Coerces a number from a value. */
     coerceNumber(value: string): number;
     /** Formats a value into a string. */
-    formatNumber(value: number, options: FormatOptions): string;
+    formatNumber(value: number, options?: FormatOptions): string;
     /**
      * Derives the current locale set by the host application (or default if undefined) will be returned.
      */
@@ -46,5 +49,15 @@ export interface FormPresenterHost {
      * Collapses all neighbouring accordion sections except the one specified.
      * @param expandedAccordionSection The name of the accordion section to be expanded. All others in the group will be collapsed.
      */
-    updateAccordionSections(expandedAccordionSection: string): any;
+    updateAccordionSections(expandedAccordionSection: string): void;
+    /**
+     * Returns `true` if the element is has a `type` of `"Section"` and a `format` of `"accordion-section"`, `false` otherwise.
+     * @param element The element to be inspected.
+     */
+    isAccordionSection(element: defs.Element): boolean;
+    /**
+     * Returns `true` if the element is has a `type` of `"Section"` and a `format` of `"collapsible-section"`, `false` otherwise.
+     * @param element The element to be inspected.
+     */
+    isCollapsibleSection(element: defs.Element): boolean;
 }

package/forms/common.d.ts

@@ -11,10 +11,9 @@ export declare function getErrorId(elementId: string): string;
  * @param elementId The id of the DOM element representing the Form Element.
  * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
  * When specified, the title is marked as "for" that DOM element.
- * @param className (optional) An alternative class name to use instead of the default. This is used when some types of section present the title within a button.
  * @returns A title component, or `null` if there is no title.
  */
-export declare function renderTitle(host: FormPresenterHost, element: defs.Element, elementId: string, inputId?: string, className?: string): JSX.Element;
+export declare function renderTitle(host: FormPresenterHost, element: defs.Element, elementId: string, inputId?: string): JSX.Element;
 /**
  * Renders the description for a Form Element.
  * @param host The form host.
@@ -22,7 +21,7 @@ export declare function renderTitle(host: FormPresenterHost, element: defs.Eleme
  * @param elementId The id of the DOM element representing the Form Element.
  * @returns A description component, or `null` if there is no description.
  */
-export declare function renderDescription(host: FormPresenterHost, element: defs.Element, elementId: string): JSX.Element;
+export declare function renderDescription(host: FormPresenterHost, element: defs.Element, elementId: string, className?: string): JSX.Element;
 /**
  * Renders the accessible description for a Form Element.
  * @param host The form host.
@@ -48,16 +47,16 @@ export declare function renderError(host: FormPresenterHost, element: defs.Eleme
  * @param name The name of the Form Element.
  * @param host The form presenter host.
  */
-export declare function renderFocus(target: HTMLElement & {
+export declare function renderFocus(target: (HTMLElement & {
     disabled?: boolean | undefined;
-}, name: string, host: FormPresenterHost): void;
+}) | null, name: string | undefined, host: FormPresenterHost): void;
 /**
  * Returns a memoized function which asks the host to focus the provided element when the form is
  * initially shown. Ignores the specified target if it is null or disabled.
  * @param component The form component
  * @returns A memoized function that focuses a target HTML element.
  */
-export declare function useFocusCallback(component: FormComponent): (target: ReactNode & {
+export declare function useFocusCallback(component: FormComponent): (target: (ReactNode & {
     disabled?: boolean;
     thumbRefs?: any[];
-}) => void;
+}) | 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 Markdown from"./components/Markdown.js";import{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 r.title?(o=o||"form-element-title",React.createElement(FormLabel,{className:o,htmlFor:n,id:`${t}-label`},React.createElement(Markdown,{host:e,inline:!0,text:r.title}))):null}function renderDescription(e,r,t){return r.description?React.createElement(FormHelperText,{component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return r.error?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};
+import Box from"@vertigis/react-ui/Box";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabel from"@vertigis/react-ui/FormLabel";import{useCallback}from"react";import*as React from"react";import{formClasses}from"./components/Form.js";import Markdown from"./components/Markdown.js";import{hasContent,isMarkdown,markdownToText}from"./textUtilities.js";const ERROR_SUFFIX="-error",DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function getErrorId(e){return`${e}${ERROR_SUFFIX}`}function renderTitle(e,r,t,n){return hasContent(r.title)?React.createElement(FormLabel,{className:formClasses.formElementTitle,htmlFor:n,id:`${t}-label`},React.createElement(Markdown,{host:e,inline:!0,text:r.title})):null}function renderDescription(e,r,t,n){return hasContent(r.description)?React.createElement(FormHelperText,{className:n,component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return hasContent(r.error)?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};

package/forms/components/AccordionGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormComponent } from "../FormComponent";
+interface AccordionGroupProps {
+    /** The CSS class name of the root element. */
+    className?: string;
+    /**
+     * The `FormComponent` being used to render the Form Elements within this Component.
+     */
+    component: FormComponent;
+}
+/**
+ * This component contains a set of "Section" Form Elements with a `format` of `"accordion-section"`.
+ */
+declare const AccordionGroup: ({ className, component }: AccordionGroupProps) => JSX.Element;
+export default AccordionGroup;

package/forms/components/AccordionGroup.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";const Root=styled(Box)(({theme:{spacing:o}})=>({marginBottom:o(4),marginTop:o(4)})),AccordionGroup=({className:o,component:t})=>{var t=t.props["children"];return React.createElement(Root,{className:o},t)};export default AccordionGroup;

package/forms/components/AutoComplete.d.ts

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

package/forms/components/AutoComplete.js

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

package/forms/components/ButtonBar.d.ts

@@ -0,0 +1,13 @@
+/// <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;

package/forms/components/ButtonBar.js

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

package/forms/components/CheckBox.d.ts

@@ -0,0 +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;

package/forms/components/CheckBox.js

@@ -0,0 +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;

package/forms/components/CheckGroup.d.ts

@@ -0,0 +1,7 @@
+/// <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;

package/forms/components/CheckGroup.js

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

package/forms/components/Custom.d.ts

@@ -0,0 +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;

package/forms/components/Custom.js

@@ -0,0 +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;

package/forms/components/DatePicker.d.ts

@@ -1,17 +1,7 @@
-import * as React from "react";
-import { FormComponent } from "../FormComponent";
-import { Element } from "../FormDefinition";
-interface DatePickerProps {
-    /** True if the popup is open, false otherwise. */
-    isOpen: boolean;
-    /** Callback for when the value changes. */
-    onChange: (value: Date) => void;
-    /** Callback for when the popup is opened or closed. */
-    onPopupToggle: (isOpen: boolean) => void;
-    /** Indicates the value for the date picker. */
-    value?: Date;
-    component: FormComponent;
-    element: Element;
-}
-declare const DatePicker: React.FC<DatePickerProps>;
+/// <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;

package/forms/components/DatePicker.js

@@ -1 +1 @@
-import{parse}from"date-fns";import{useEffect,useState,lazy,Suspense}from"react";import*as React from"react";import{DEFAULT_LOCALE}from"../../constants.js";import{renderCalendar}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{getDateAsLocaleFormattedString,getDateFnsLocale,getLocaleDateFormat,isValidDate,tryParseDateText}from"../dateUtilities.js";import{CSS}from"../styles/daterange.js";import{addStyleToDocument}from"../utils.js";const Calendar=lazy(()=>import("./ReactDateRangeCalendar"));addStyleToDocument(CSS);const dateFormat=getLocaleDateFormat();let currentLocale;const DatePicker=e=>{const{component:t,element:a,isOpen:o,onChange:r,onPopupToggle:n}=e,s=t.props["host"],[c,l]=useState(),[i,m]=useState("");var d=s.renderText(a.tooltip),u=!t.enabled,p=u?"inner disabled":"inner";useEffect(()=>{(async()=>{var e=s.deriveLocale();"inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE&&(currentLocale=await getDateFnsLocale(e))})()},[]),useEffect(()=>{l(e.value),m(getDateAsLocaleFormattedString(e.value))},[e.value]);var f=useFocusCallback(t);const D=e=>{var t="string"==typeof e?e:e.target.value,a=""!==t&&void 0!==t,e=a?tryParseDateText(t):void 0,t=a?e?parse(e,dateFormat,0):new Date(NaN):void 0;a?isValidDate(t)?(l(t),m(e),v(),g(t)):(v({status:"invalid"}),l(new Date(NaN)),g(void 0)):(v(),l(void 0),g(void 0))};const g=e=>{"function"==typeof r&&r(e)};const v=e=>{a.error=e,t.forceUpdate()};return React.createElement("div",{className:"SimpleDatePicker outer",title:d},React.createElement("div",{className:p},React.createElement("input",{"aria-label":"Date Picker",ref:f,disabled:u,type:"text",onChange:e=>(e=>{m(e.target.value)})(e),onBlur:e=>D(e),onKeyDown:e=>(e=>{e.stopPropagation(),"Enter"===e.key?D(i):"Escape"===e.key&&D(getDateAsLocaleFormattedString(c))})(e),placeholder:dateFormat.toUpperCase(),value:i})),React.createElement("div",{className:"buttonContainer"},React.createElement("button",{className:"calendarButton",disabled:u,onClick:()=>{"function"==typeof n&&n(!o)}},renderCalendar()),o&&React.createElement(Suspense,{fallback:null},React.createElement("div",{className:CssClasses.DROPDOWN},React.createElement(Calendar,{format:dateFormat,editableDateInputs:!1,date:c,onChange:e=>{l(e),m(getDateAsLocaleFormattedString(e)),v(),g(e)},locale:currentLocale}),React.createElement("button",{className:"done",onClick:()=>{"function"==typeof n&&n(!1)}},s.renderText("@common-done"))))))};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{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;