@vertigis/workflow 5.46.1 → 5.48.0

package/forms/FormDefinition.d.ts

@@ -13,7 +13,7 @@ export type ContainerRef = "default" | "modal" | {
     region?: string;
 };
 /** References the date/time format criteria. */
-export type DateTimeFormat = "app" | "device" | {
+export type DateTimeFormat = {
     /** Indicates the locale for the date/time value. */
     locale: string;
     /** Indicates the time zone for the date/time value. */
@@ -231,7 +231,6 @@ export interface Size {
     /** The width. */
     width?: number;
 }
-export type SizePropertyName = keyof Size;
 /**
  * Defines a form.
  * @product This is intended for internal use only within VertiGIS Studio products.
@@ -365,11 +364,40 @@ export interface Element {
     /** Indicates how the control wraps text. */
     wrap?: "hard" | "soft" | "off";
 }
+/** The style of border on an item. */
+export type BorderStyle = "rounded" | "square";
+/** The level of emphasis on an item. */
+export type Emphasis = "low" | "medium" | "high";
+/** The position of an item's icon relative to the text. */
+export type IconPosition = "above" | "below" | "before" | "after";
+/** The size of an item. */
+export type ItemSize = "small" | "medium" | "large";
+/** Details of the appearance of an item. */
+export interface ItemAppearance {
+    /** The background color of the item. */
+    backgroundColor?: string;
+    /** The style of the button. */
+    borderStyle?: BorderStyle;
+    /** The emphasis of the button. This affects border and colours. */
+    emphasis?: Emphasis | "custom";
+    /** The foreground color of the item. */
+    foregroundColor?: string;
+    /** The name of the icon to be shown on this item. */
+    icon?: string;
+    /** Where the icon should be shown on this item, if {@link icon} is set. Default is "before". */
+    iconPosition?: IconPosition;
+    /** Set whether the item should show a border. */
+    showBorder?: boolean;
+    /** The size of the button. */
+    size?: ItemSize;
+}
 /**
  * Defines an ad hoc item.
  * @product This is intended for internal use only within VertiGIS Studio products.
  */
 export interface Item {
+    /** Settings controlling the appearance of the item. */
+    appearance?: ItemAppearance;
     /** Indicates the placement of the item. */
     index?: number;
     /** Indicates the label for the item. */

package/forms/FormDefinition.js

@@ -1 +1 @@
-const DEFAULT_SECTION_FORMAT="unstyled-section";var PreSelectionAction;!function(e){e[e.None=0]="None",e[e.RetrieveSuggestions=1]="RetrieveSuggestions",e[e.SelectFirstItem=2]="SelectFirstItem"}(PreSelectionAction=PreSelectionAction||{});export{DEFAULT_SECTION_FORMAT,PreSelectionAction};
+export const DEFAULT_SECTION_FORMAT="unstyled-section";export var PreSelectionAction;!function(e){e[e.None=0]="None",e[e.RetrieveSuggestions=1]="RetrieveSuggestions",e[e.SelectFirstItem=2]="SelectFirstItem"}(PreSelectionAction||(PreSelectionAction={}));

package/forms/FormHost.d.ts

@@ -13,6 +13,23 @@ interface FormEventSubscription {
 interface FormEventHandler {
     (event: defs.Event): void;
 }
+/**
+ * Details about the most recently focused DOM element.
+ * This might be assigned programmatically or automatically
+ * via observing the focus events of the container.
+ */
+interface LastFocusInfo {
+    /** True or false based on the error property of the element, if known. */
+    isInvalid?: boolean;
+    /** The name of the form element that `target` belongs to, if known. */
+    name?: string;
+    /** The position within the row of the form element, if known. */
+    rowIndex?: number;
+    /** The row of the form element, if known. */
+    rowNumber?: number;
+    /** The DOM element that was focused. */
+    target: HTMLElement;
+}
 /** Exposes functionality for driving a form. */
 export declare abstract class FormHost implements FormPresenterHost {
     /** Indicates the overall state of the form. */
@@ -36,6 +53,12 @@ export declare abstract class FormHost implements FormPresenterHost {
     protected eventIndex: number;
     /** The event queue. */
     protected eventQueue: defs.Event[];
+    /**
+     * We keep track of the outermost DOM element for each form element here
+     * so that when any DOM element gains focus in the form we can determine which element
+     * it belongs to. This helps with deciding where to move focus to when validation fails.
+     */
+    protected domContainers: Record<string, HTMLElement>;
     /** The event promise, for when the consumer is waiting. */
     private eventTask;
     /**
@@ -50,12 +73,7 @@ export declare abstract class FormHost implements FormPresenterHost {
     /** The timer handler for idle/busy handling. */
     protected timerHandle: (() => void) | undefined;
     /** Indicates a method to restore the last focus. */
-    protected lastFocus: {
-        target: HTMLElement;
-        name?: string;
-        rowIndex?: number;
-        rowNumber?: number;
-    } | undefined;
+    protected lastFocus: LastFocusInfo | undefined;
     /** Indicates the next element that should receive focus. */
     protected nextFocus: boolean | string;
     /** Indicates the next element that should receive a refresh. */
@@ -68,7 +86,15 @@ export declare abstract class FormHost implements FormPresenterHost {
     protected mount(): void;
     /** Removes the form from the DOM. */
     protected unmount(): void;
-    /** Intelligently tracks the last focus, */
+    /**
+     * Intelligently tracks the last focus, in response to focus events within
+     * the form container. We attempt to determine which form element `target` belongs to,
+     * so that we can have a better idea where we are in the order of elements.
+     *
+     * This comes into play later when we might want to decide where to move focus
+     * based on where we currently are.
+     * @param target The DOM element that has just gained focus.
+     */
     protected observeFocus(target: EventTarget): void;
     /** Focuses the form. */
     focus(): void;
@@ -87,7 +113,10 @@ export declare abstract class FormHost implements FormPresenterHost {
     hide(): boolean;
     /** Disposes the form. */
     dispose(): boolean;
-    /** Renders focus for just rendered elements. */
+    /**
+     * This method renders focus for just rendered elements.
+     * It also moves focus to another element when `nextFocus` is the name of an element.
+     */
     renderFocus(target: HTMLElement, name?: string): boolean;
     /** Renders form text as plain text. */
     renderText(content: defs.Text | undefined): string;
@@ -113,7 +142,7 @@ export declare abstract class FormHost implements FormPresenterHost {
      */
     translateText(content: defs.Text | undefined): string | defs.MarkdownRef | undefined;
     /** Renders the form component. */
-    renderVisual(component: object): any;
+    renderVisual(component: FormComponent): any;
     /** Qualifies an event with defaults. */
     protected qualifyDefault(event: defs.Event): string | undefined;
     /** Qualifies an event. */
@@ -230,7 +259,24 @@ export declare abstract class FormHost implements FormPresenterHost {
     renderState(name: string, type: string, state?: object): boolean;
     private getParentSection;
     private isSectionCollapsed;
+    /**
+     * This method checks if the specified element is considered before the current value of `this.lastFocus`.
+     * When the form is initially loading, we focus the first visible element in the form, regardless of error state.
+     * When validating the form, we focus the first _invalid_ element.
+     * @param elementName The name of a Form Element.
+     * @param invalidOnly True if we only care about invalid elements, false otherwise.
+     * @returns True if the named element is considered before the one specified in `this.lastFocus`.
+     */
     private isElementPositionBeforeLastFocused;
+    /**
+     *
+     * @param target The DOM element that was focused
+     * @param name The name of the element that contains `target`. (if known)
+     * @param isInvalid True or false if the invalid state is known. Otherwise we check the element itself.
+     * This is necessary as some functions like `verify()` will use `this.errors` to track errors before
+     * we update `element.error` later.
+     * @returns
+     */
     private setLastFocus;
     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*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{isCollapsibleSection,isMutuallyExclusiveSection,isSection,sortAndFilter,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}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.enqueueExternalEvent=e=>{e={type:`external$${e.name}`,name:"header",argument:e};this.enqueue(e.type,e)}}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.enforceMutuallyExclusiveConstraints();var t=this.errors;for(const s in t){const i=this.form.elements[s];void 0!==i&&null!==i&&(i.error=t[s],this.invalidate(s))}return this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}isInvalid(e){return!!e.error&&!1!==e.visible}getInvalidElements(){return Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(this.isInvalid)}hasInvalidChild(e){for(const s in this.form.elements){var t=this.form.elements[s];if(this.isInvalid(t)&&this.getParentSection(t)===e)return!0}return!1}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}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=sortAndFilter(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=sortAndFilter(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(e){let s=e;const t=this.container;if(void 0===t)return createSubscription();const i=function(){s=void 0,t.removeEventListener(eventName,n)},n=function(e){const t=e.detail;void 0!==t?Bluebird.resolve().then(function(){"function"==typeof s&&s(t)}):i()};return t.addEventListener(eventName,n),createSubscription(i)}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,s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}observe(){return Bluebird.attempt(()=>{if(void 0!==this.eventTask)return this.eventTask;var e=this.dequeue();return void 0!==e?e:this.show()?(this.eventTask=new Task(e=>{this.resolveEvent=e}),this.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"checked":return this.changed(e);case"clicked":return this.click(e);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"validate":return this.verify(e);case"verify":return this.submit(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.isInvalidError(e.error)?!(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(e.type===FormElementTypes.CHECKBOX)return!0;var t=e.current;if(null!=t)return!0;t=e.value;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":case"suggest":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=sortAndFilter(this.form.elements);for(const r in i){const o=i[r];var n=o.dependsOn;if("string"==typeof n){const l=this.find(n);void 0!==l&&"string"!=typeof l.dependsOn&&(l.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),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&&t.type==FormElementTypes.BUTTONBAR&&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 s in sortAndFilter(this.form.elements)){var t=this.form.elements[s].dependsOn;"string"==typeof t&&!this.hasInitialSelectionToDependOn(t)||this.enqueue("populate",{name:s}),this.enqueue("load",{name:s})}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=sortAndFilter(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){if(!this.hasErrors()){for(const r in this.form.elements)this.form.elements[r].error=void 0;return this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0}var t=this.errors;for(const o in t){const l=this.form.elements[o];void 0!==l&&null!==l&&(l.error=t[o],this.invalidate(o))}const s=[];let i=!1;for(const u of this.getInvalidElements()){const a=this.getParentSection(u);if(isMutuallyExclusiveSection(a)){var n=this.findName(a);const h=this.getMutuallyExclusiveSectionGroup(n);if(h){const c=s.find(e=>e.group===h);c?c.element.rowNumber>a.rowNumber&&(c.element=a):(s.push({group:h,element:a}),i=!0)}}else this.isSectionCollapsed(a)&&(a.collapsed=!1,i=!0)}for(const m of s)m.group.expandedSection=m.element;return i&&this.invalidate(),!(this.errors={})}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,t){return t=t||this.deriveLocale(),new NumberParser(t).parse(e)}formatNumber(e,t){return t=t||{locale:this.deriveLocale()},format(t,e)}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||e.type!==FormElementTypes.SECTION||!isCollapsibleSection(e)&&!isMutuallyExclusiveSection(e))&&!0===e.collapsed}isElementPositionBeforeLastFocused(e){var t=this.lastFocus;if(!t)return!0;if("footer"===e)return!1;if("footer"===t.name)return!0;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)))}getAllSectionElements(){const e={};for(const s in this.form.elements){var t=this.form.elements[s];isSection(t)&&(e[s]=t)}return e}getMutuallyExclusiveSectionGroup(t){let s=this.mutuallyExclusiveSections[t];if(!s){var e=this.find(t);if(!e||!isMutuallyExclusiveSection(e))return;s=new MutuallyExclusiveSectionGroup({elementName:t,element:e});var i=e.format,e=this.getAllSectionElements();const o=Object.keys(sortAndFilter(e,e=>e.rowNumber));t=o.indexOf(t);for(let e=t-1;0<=e;e--){const l=o[e];var n=this.find(l);if(n.format!==i)break;s.unshift({elementName:l,element:n})}for(let e=t+1;e<o.length;e++){const l=o[e];var r=this.find(l);if(r.format!==i)break;s.push({elementName:l,element:r})}s.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=s})}return s}updateMutuallyExclusiveSections(t){const e=this.getMutuallyExclusiveSectionGroup(t);e.forEach(e=>{e.element.collapsed=e.elementName!==t}),this.refresh()}enforceMutuallyExclusiveConstraints(){const e=[];for(const s of Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>isMutuallyExclusiveSection(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}}async displayDialog(e,t){await Promise.resolve()}}export{defs,FormHost};
+import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.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{isCollapsibleSection,isMutuallyExclusiveSection,isSection,sortAndFilter,text}from"./utils.js";export{defs};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(e,t){switch(typeof e){case"boolean":case"number":case"string":return e;case"object":break;default:return t}if(null===e)return t;if(e instanceof Array){let s=t;null==s&&(s=[]);let i=0;for(const t of e){const n=overlay(t,s[i]);void 0!==n&&(i<e.length?s[i]=n:s.push(n),++i)}return s}let s=t;void 0===s&&(s={});for(const t in e)s[t]=overlay(e[t],s[t]);return s}function createSubscription(e){const t=function(){return void 0!==e&&(t.active=!1,e(),!0)};return t.active=!0,t}export 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.domContainers={},this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.enqueueExternalEvent=e=>{const t={type:`external$${e.name}`,name:"header",argument:e};this.enqueue(t.type,t)}}deriveLocale(){return DEFAULT_LOCALE}mount(){const e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){const e=this.container,t=e.parentNode;null!=t&&t.removeChild(e)}observeFocus(e){if(this.enabled&&e instanceof HTMLElement&&(!this.lastFocus||this.lastFocus.target!==e)){let t=Object.entries(this.domContainers).filter(t=>t[1].contains(e));t.length>1&&(t=t.filter(e=>this.form.elements[e[0]].type!==FormElementTypes.SECTION));const s=t.length>0?t[0][0]:void 0;this.setLastFocus(e,s)}}focus(e){null==e&&(e=!1),!0===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.enforceMutuallyExclusiveConstraints();const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}return this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}isInvalid(e){return!!e.error&&!1!==e.visible}getInvalidElements(){return Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(this.isInvalid)}hasInvalidChild(e){for(const t in this.form.elements){const s=this.form.elements[t];if(this.isInvalid(s)&&this.getParentSection(s)===e)return!0}return!1}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){this.dismiss=!0;const e=this.container;e.dispatchEvent(createEvent(eventName));let t=this.focusObserver;return void 0!==t&&(e.removeEventListener("focus",t,!0),t=void 0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,this.eventTask=void 0,!0}return!1}renderFocus(e,t){if(!(this.enabled&&e instanceof HTMLElement&&!1!==this.nextFocus))return!1;const s=this.nextFocus;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 t=this.lastFocus?.target;if(!0===s&&t instanceof HTMLElement&&e.contains(t))return this.nextFocus=!1,t.focus(),!0}return!1}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,t=>{t&&e.props.name&&(this.domContainers[e.props.name]=t)})||presenter.renderNone(e)}qualifyDefault(e){const t=sortAndFilter(this.form.elements);for(const s in t){const i=t[s];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,s;const t=sortAndFilter(i.items);if(null!=t)for(const i in t){const n=t[i];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=i,e.value=n.value,s}}}}qualify(e,t){if(null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey){const s=t.name;t.routingKey=void 0!==s?e+"$"+s:e}return t}post(e,t){t=this.publish(e,t);const s=this.container;void 0!==s&&s.dispatchEvent(createEvent(eventName,t))}subscribe(e){let t=e;const s=this.container;if(void 0===s)return createSubscription();const i=function(){t=void 0,s.removeEventListener(eventName,n)},n=function(e){const s=e.detail;void 0!==s?Bluebird.resolve().then(function(){"function"==typeof t&&t(s)}):i()};return s.addEventListener(eventName,n),createSubscription(i)}refresh(e){if(!this.custom)if("string"==typeof e){const t=this.refs[e];presenter.refresh(t)}else 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(){const 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),this.eventQueue.length>0&&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,t):(this.eventQueue.push(t),t)}dequeue(){const e=this.eventQueue;if(e.length>0){let t=this.eventIndex;const s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}observe(){return Bluebird.attempt(()=>{if(void 0!==this.eventTask)return this.eventTask;const e=this.dequeue();return void 0!==e?e:this.show()?(this.eventTask=new Task(e=>{this.resolveEvent=e}),this.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){let s={defaults:{},elements:{}};s=overlay(e,s),this.form=overlay(t,s);for(const e in this.form.elements){const t={showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1};let s=this.form.elements[e];if(s=overlay(s,t),s.items)for(const e in s.items){const t={enabled:!0,checked:!1,visible:!0,default:!1,validates:!1};s.items[e]=overlay(s.items[e],t)}this.form.elements[e]=s}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"checked":return this.changed(e);case"clicked":return this.click(e);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"validate":return this.verify(e);case"verify":return this.submit(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.isInvalidError(e.error)?(s.status="invalid",!1):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||(s.status="missing",!1):t))}isElementEffectivelyVisible(e){if(null==e)return!1;const t=this.getParentSection(e);return!1!==t?.visible&&!1!==e.visible}isElementValueDefined(e){if(null==e)return!1;if(e.type===FormElementTypes.CHECKBOX)return!0;const t=e.current;if(null!=t)return!0;const s=e.value;if(null!=s&&""!==s)return!0;const i=e.items;if(null!=i)for(const e in i){const t=i[e];if(null!=t&&!0===t.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":case"suggest":break;default:return!1}const t=e.name,s=this.find(t);if(null==s)return!1;const i=s.dependsOn;if("string"!=typeof i)return!1;const n=this.find(i);return s.enabled=this.isElementEffectivelyVisible(n)&&this.isElementValueDefined(n),this.invalidate(t),!s.enabled}cascade(e){const t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const s={[e]:!0},i=sortAndFilter(this.form.elements);for(const t in i){const n=i[t],r=n.dependsOn;if("string"==typeof r){const i=this.find(r);void 0!==i&&"string"!=typeof i.dependsOn&&(i.dependsOn=!0),!0===s[r]&&(s[t]=!0,n.checked=!1,n.current=void 0,n.label=void 0,n.items=void 0,n.value=void 0,this.invalidate(t),n.dependsOn===e&&this.enqueue("populate",{name:t}))}else n.dependsOn=!1}return!0}click(e){const t=this.form.elements[e.name];return null!=t&&t.type==FormElementTypes.BUTTONBAR&&this.validate(e)}hasInitialSelectionToDependOn(e){const t=this.form.elements[e];return t.type===FormElementTypes.DROPDOWNLIST&&(void 0!==t.current&&null!==t.current)}hydrate(e){const t=sortAndFilter(this.form.elements);for(const e in t){const t=this.form.elements[e].dependsOn;("string"!=typeof t||this.hasInitialSelectionToDependOn(t))&&this.enqueue("populate",{name:e}),this.enqueue("load",{name:e})}return!0}shouldTriggerValidation(e){const t=this.find(e.name);if(null!=t&&"string"==typeof e.value){const s=e.item;if("string"==typeof s){const e=t.items;if(null!=e){const t=e[s];if(null!=t)return!0===t.validates}return}return!0===t.validates}}validate(e){const t=this.shouldTriggerValidation(e);if(!0===t){const t=this.errors={},s=sortAndFilter(this.form.elements);for(const e in s){const i=s[e];null!=i&&(t[e]=void 0,this.enqueue("validate",{name:e}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0)}verify(e){const t=e.name,s=this.form.elements[t],i={status:void 0},n=this.isElementValid(s,!0,i);return t===this.lastFocus?.name&&(this.lastFocus.isInvalid=!n),!n&&(i.status&&(this.errors[t]={status:i.status}),!1===this.nextFocus&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t,!0)&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return null!=t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){if(!this.hasErrors()){for(const e in this.form.elements)this.form.elements[e].error=void 0;return this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0}const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}const s=this.getInvalidElements(),i=[];let n=!1;for(const e of s){const t=this.getParentSection(e);if(isMutuallyExclusiveSection(t)){const e=this.findName(t),s=this.getMutuallyExclusiveSectionGroup(e);if(s){const e=i.find(e=>e.group===s);e?e.element.rowNumber>t.rowNumber&&(e.element=t):(i.push({group:s,element:t}),n=!0)}}else this.isSectionCollapsed(t)&&(t.collapsed=!1,n=!0)}for(const e of i)e.group.expandedSection=e.element;return n&&this.invalidate(),this.errors={},!1}hasErrors(){const e=this.errors;for(const t in e){const s=e[t];if(null!=s)return!0}return!1}find(e){if(null!=e)return"object"==typeof e&&(e=e.name),"string"==typeof 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,t){return t=t||this.deriveLocale(),new NumberParser(t).parse(e)}formatNumber(e,t){return t||(t={locale:this.deriveLocale()}),format(t,e)}renderState(e,t,s){return!1}getParentSection(e){const t=e.section;if(!t)return;const s="string"==typeof t?t:t.name;return this.form.elements[s]}isSectionCollapsed(e){return!(!e||e.type!==FormElementTypes.SECTION||!isCollapsibleSection(e)&&!isMutuallyExclusiveSection(e))&&!0===e.collapsed}isElementPositionBeforeLastFocused(e,t=!1){const s=this.lastFocus;if(!s)return!0;if(t&&!s.isInvalid)return!0;if("footer"===e)return!1;if("footer"===s.name)return!0;if(e&&void 0!==s.rowNumber&&void 0!==s.rowIndex){const t=this.form.elements?.[e];if(t)return void 0!==t.rowNumber&&void 0!==t.rowIndex?t.rowNumber<s.rowNumber||t.rowNumber===s.rowNumber&&t.rowIndex<s.rowIndex:t.index<s.rowNumber||t.index===s.rowNumber&&s.rowIndex>0}return!1}setLastFocus(e,t,s){if(this.lastFocus={target:e},!t)return;this.lastFocus.name=t;const i=this.form.elements?.[t];i&&(void 0!==i.rowNumber&&void 0!==i.rowIndex?(this.lastFocus.rowNumber=i.rowNumber,this.lastFocus.rowIndex=i.rowIndex):(this.lastFocus.rowNumber=i.index,this.lastFocus.rowIndex=0),this.lastFocus.isInvalid=s??!!i.error)}getAllSectionElements(){const e={};for(const t in this.form.elements){const s=this.form.elements[t];isSection(s)&&(e[t]=s)}return e}getMutuallyExclusiveSectionGroup(e){let t=this.mutuallyExclusiveSections[e];if(!t){const s=this.find(e);if(!s||!isMutuallyExclusiveSection(s))return;t=new MutuallyExclusiveSectionGroup({elementName:e,element:s});const i=s.format,n=this.getAllSectionElements(),r=Object.keys(sortAndFilter(n,e=>e.rowNumber)),o=r.indexOf(e);for(let e=o-1;e>=0;e--){const s=r[e],n=this.find(s);if(n.format!==i)break;t.unshift({elementName:s,element:n})}for(let e=o+1;e<r.length;e++){const s=r[e],n=this.find(s);if(n.format!==i)break;t.push({elementName:s,element:n})}t.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=t})}return t}updateMutuallyExclusiveSections(e){this.getMutuallyExclusiveSectionGroup(e).forEach(t=>{t.element.collapsed=t.elementName!==e}),this.refresh()}enforceMutuallyExclusiveConstraints(){const e=Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>isMutuallyExclusiveSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber),t=[];for(const s of e){const e=this.getMutuallyExclusiveSectionGroup(s.elementName);-1===t.indexOf(e)?t.push(e):s.element.collapsed=!0}}async displayDialog(e,t){await Promise.resolve()}}

package/forms/FormPresenterHost.js

@@ -0,0 +1 @@
+export{};

package/forms/MutuallyExclusiveSectionGroup.js

@@ -1 +1 @@
-export default class MutuallyExclusiveSectionGroup extends Array{get expandedSection(){return this.find(e=>!0!==e.element.collapsed)?.element}set expandedSection(t){const n=this.find(e=>e.element===t);if(!n)throw new Error("Element is not present in the group.");this.forEach(e=>e.element.collapsed=e!==n)}getElement(t){return this.find(e=>e.elementName===t)?.element}get hasExpandedSection(){return void 0!==this.expandedSection}}
+export default class MutuallyExclusiveSectionGroup extends Array{get expandedSection(){return this.find(e=>!0!==e.element.collapsed)?.element}set expandedSection(e){const t=this.find(t=>t.element===e);if(!t)throw new Error("Element is not present in the group.");this.forEach(e=>e.element.collapsed=e!==t)}getElement(e){return this.find(t=>t.elementName===e)?.element}get hasExpandedSection(){return void 0!==this.expandedSection}}

package/forms/NumberParser.js

@@ -1 +1 @@
-export default class NumberParser{constructor(e){this._biDirectionalChars=/[\u061c\u200E\u200F]/;const r=new Intl.NumberFormat(e).formatToParts(-12345.6),i=Array.from(new Intl.NumberFormat(e,{useGrouping:!1}).format(9876543210)).reverse(),t=new Map(i.map((e,r)=>[e,r.toString()]));this._group=new RegExp(`[${r.find(e=>"group"===e.type).value}]`,"g"),this._decimal=new RegExp(`[${r.find(e=>"decimal"===e.type).value}]`),this._minus=new RegExp(`[${r.find(e=>"minusSign"===e.type).value}]`),this._numeral=new RegExp(`[${i.join("")}]`,"g"),this._index=e=>t.get(e)}parse(e){e=e.trim().replace(this._biDirectionalChars,"").replace(this._group,"").replace(this._decimal,".").replace(this._minus,"-").replace(this._numeral,this._index);return e?+e:NaN}}
+export default class NumberParser{constructor(e){this._biDirectionalChars=/[\u061c\u200E\u200F]/;const r=new Intl.NumberFormat(e).formatToParts(-12345.6),t=Array.from(new Intl.NumberFormat(e,{useGrouping:!1}).format(9876543210)).reverse(),i=new Map(t.map((e,r)=>[e,r.toString()]));this._group=new RegExp(`[${r.find(e=>"group"===e.type).value}]`,"g"),this._decimal=new RegExp(`[${r.find(e=>"decimal"===e.type).value}]`),this._minus=new RegExp(`[${r.find(e=>"minusSign"===e.type).value}]`),this._numeral=new RegExp(`[${t.join("")}]`,"g"),this._index=e=>i.get(e)}parse(e){const r=e.trim().replace(this._biDirectionalChars,"").replace(this._group,"").replace(this._decimal,".").replace(this._minus,"-").replace(this._numeral,this._index);return r?+r:NaN}}

package/forms/branding/WorkflowColor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This implementation is intended to replace @arcgis/core/Color which we don't use elsewhere in Designer.
+ */
+export default class WorkflowColor {
+    private values;
+    get r(): number;
+    get g(): number;
+    get b(): number;
+    get a(): number;
+    constructor(value: number[] | string);
+    clone(): WorkflowColor;
+    equals(other: WorkflowColor): boolean;
+    toCss(): string;
+    toJSON(): number[];
+    toString(): string;
+    static fromJSON(value: number[]): WorkflowColor;
+}

package/forms/branding/WorkflowColor.js

@@ -0,0 +1 @@
+import rgba from"color-rgba";export default class WorkflowColor{get r(){return this.values[0]}get g(){return this.values[1]}get b(){return this.values[2]}get a(){return this.values[3]}constructor(t){if(this.values=[0,0,0,1],"string"==typeof t){if(this.values=rgba(t),0===this.values.length)throw new Error("Invalid rgb value: "+t)}else this.values=[...t]}clone(){return new WorkflowColor(this.values)}equals(t){const{r:r,g:s,b:e,a:i}=t;return this.r===r&&this.g===s&&this.b===e&&this.a===i}toCss(){return 1===this.a?`rgb(${this.r},${this.g},${this.b})`:`rgba(${this.r},${this.g},${this.b},${this.a})`}toJSON(){return[...this.values]}toString(){return`rgba(${this.r},${this.g},${this.b},${this.a})`}static fromJSON(t){if(4!==t.length)throw new Error("Invalid JSON. The array must contain four values.");return new WorkflowColor(t)}}

package/forms/branding/colors.d.ts

@@ -0,0 +1,15 @@
+import WorkflowColor from "./WorkflowColor";
+/**
+ * Darkens the color by an amount and returns the new color.
+ *
+ * @param amount Ranges from 0..1.
+ * @param color The color to darken.
+ */
+export declare function darken(amount: number, color: WorkflowColor): WorkflowColor;
+/**
+ * Lightens the color by an amount and returns the new color.
+ *
+ * @param amount Ranges from 0..1.
+ * @param color The color to lighten.
+ */
+export declare function lighten(amount: number, color: WorkflowColor): WorkflowColor;

package/forms/branding/colors.js

@@ -0,0 +1 @@
+import WorkflowColor from"./WorkflowColor.js";export function darken(o,r){const a=colorToHsv(r);return a.v=a.v*(1-clamp(o,0,1)),hsvToColor(a)}export function lighten(o,r){const a=clamp(o,0,1),t=colorToHsv(r);return t.v=t.v+(1-t.v)*a,t.s=t.s*(1-a),hsvToColor(t)}function clamp(o,r,a){return Math.min(Math.max(o,r),a)}function hsvToRgb(o){let r=0,a=0,t=0;const n=o.s*o.v,c=6*o.h,e=n*(1-Math.abs(c%2-1)),s=o.v-n;switch(Math.floor(c)%6){case 0:r=n+s,a=e+s,t=s;break;case 1:r=e+s,a=n+s,t=s;break;case 2:r=s,a=n+s,t=e+s;break;case 3:r=s,a=e+s,t=n+s;break;case 4:r=e+s,a=s,t=n+s;break;case 5:r=n+s,a=s,t=e+s}return{r:r,g:a,b:t,a:o.a}}function hsvToColor(o){const r=hsvToRgb(o);return r.r=Math.round(255*r.r),r.g=Math.round(255*r.g),r.b=Math.round(255*r.b),r.a=r.a||1,new WorkflowColor(`rgba(${r.r},${r.g},${r.b},${r.a})`)}function colorToHsv(o){return decimalRgbToHsv(colorToDecimalRgb(o))}function colorToDecimalRgb(o){return[o.r/255,o.g/255,o.b/255,o.a]}function decimalRgbToHsv(o){let r;const a=Math.max(o[0],o[1],o[2]),t=a-Math.min(o[0],o[1],o[2]);let n;n=0===t?0:a===o[0]?(o[1]-o[2])/t:a===o[1]?2+(o[2]-o[0])/t:4+(o[0]-o[1])/t,r=n/6,r<0&&(r+=1);return{h:r,s:0===t?0:t/a,v:a,a:o.length>3?o[3]:1}}

package/forms/branding/createPalette.d.ts

@@ -0,0 +1,21 @@
+import WorkflowColor from "./WorkflowColor";
+/**
+ * Creates a colour palette from a provided accent color.
+ *
+ * @param accentColor The accent colour to be used in the palette.
+ */
+export declare function createPalette(accentColor: WorkflowColor): {
+    accentIconForeground: WorkflowColor;
+    buttonBackgroundDisabled: WorkflowColor;
+    buttonBorderDisabled: WorkflowColor;
+    buttonBorderHover: WorkflowColor;
+    buttonForegroundDisabled: WorkflowColor;
+    buttonIcon: WorkflowColor;
+    buttonIconDisabled: WorkflowColor;
+    buttonIconHover: WorkflowColor;
+    emphasizedButtonBackgroundDisabled: WorkflowColor;
+    emphasizedButtonBorderDisabled: WorkflowColor;
+    emphasizedButtonBorderHover: WorkflowColor;
+    emphasizedButtonForegroundDisabled: WorkflowColor;
+    primaryBackground: WorkflowColor;
+};

package/forms/branding/createPalette.js

@@ -0,0 +1 @@
+import WorkflowColor from"./WorkflowColor.js";import{darken,lighten}from"./colors.js";const graySteps=generateSteps(new WorkflowColor("#323232")),white=new WorkflowColor("#ffffff");export function createPalette(e){const o=generateSteps(e);return{accentIconForeground:o[500],buttonBackgroundDisabled:graySteps[100],buttonBorderDisabled:graySteps[300],buttonBorderHover:white,buttonForegroundDisabled:graySteps[400],buttonIcon:o[500],buttonIconDisabled:graySteps[400],buttonIconHover:white,emphasizedButtonBackgroundDisabled:o[100],emphasizedButtonBorderDisabled:o[100],emphasizedButtonBorderHover:o[500],emphasizedButtonForegroundDisabled:o[700],primaryBackground:white}}function generateSteps(e){const o=.18;return{50:lighten(5*o,e),100:lighten(.72,e),200:lighten(.54,e),300:lighten(.36,e),400:lighten(o,e),500:e,600:darken(.126,e),700:darken(.252,e),800:darken(.378,e),900:darken(.504,e)}}

package/forms/components/AccordionGroup.js

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

package/forms/components/AutoComplete.d.ts

@@ -4,5 +4,5 @@ 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, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => React.JSX.Element;
+declare const AutoComplete: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default AutoComplete;

package/forms/components/AutoComplete.js

@@ -1 +1 @@
-import BaseAutoComplete,{autocompleteClasses,HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Popper from"@vertigis/react-ui/Popper";import Skeleton from"@vertigis/react-ui/Skeleton";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{getItemId,inspectItems,makeSafeClassName}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StyledAutoComplete=styled(BaseAutoComplete)(()=>({[`.${autocompleteClasses.endAdornment}`]:{right:1}})),popperClasses={skeletonOption:"skeleton-option"},StyledPopper=styled(Popper)(()=>({[`.${autocompleteClasses.listbox}`]:{[`.${autocompleteClasses.option}`]:{display:"block",[`&.${popperClasses.skeletonOption}`]:{'&[data-option-index="0"]':{span:{width:"70%"}},'&[data-option-index="1"]':{span:{width:"85%"}},'&[data-option-index="2"]':{span:{width:"55%"}}}}}})),StyledSkeleton=styled(Skeleton)(()=>({fontSize:"1.25rem",lineHeight:"inherit"})),pendingOption={enabled:!1,label:""},pendingOptions=[pendingOption,pendingOption,pendingOption],AutoComplete=({className:e,component:t,current:u,delay:r,element:o,enabled:n,error:l,items:p,label:m,minLength:s,name:a,prompt:i,tooltip:c,raiseEvent:d,setProperty:f,setValue:g,value:C})=>{const v=useContext(HostContext),[y,x]=useState(),[b,h]=useState(""),[S,O]=useState([]),[E,k]=useState(null),P=useRef(!1),T=useRef(),I=useRef(!1),R=useRef(v.renderText({status:"trivial"})),N=v.renderText(i),F=v.renderText(c),A=useFocusCallback(n,a,v),L=useRef({}),j=useRef({}),w=useMemo(()=>{let e=r;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[r]),H=useMemo(()=>{let e=s;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[s]),M=t.timer||(t.timer=new ExclusiveTimer),B=()=>{d("suggest",C,b,void 0,M.cancellationToken),O(pendingOptions)},K=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===y?K():"input"===y&&(m&&f("label",void 0),P.current=!0,b.length>=H?(f("current",void 0),M.reset(),M.start(w,B)):0<Object.keys(p||{}).length&&K())},[y,b]),useEffect(()=>{var e,t,r=E?.value;C!==r&&(t=(e=getItemId(E,L.current))?j.current[e]:void 0,f("current",e),f("label",t),g(r,{argument:t}))},[E]),useEffect(()=>{const{current:e,items:t,label:r,value:o}=inspectItems(u,p,C);f("current",e),f("label",r||m),f("value",o,!1);const n={};let l=null;const s=[];for(const i in t){var a=t[i];s.push(a);const r=v.renderText(a.label).trim();n[i]=r,e&&i===e&&(l=a)}j.current=n,L.current=t,O(s),k(l)},[p]),useEffect(()=>{var e="string"==typeof u?u:void 0,t=e?L.current[e]:void 0,e=e?j.current[e]:void 0;t?(f("label",e),f("value",t.value),h(e||"")):(f("value",void 0),P.current||h("")),k(t||null)},[u]),useEffect(()=>{P.current||I.current||h(""),P.current=!1,I.current=!1},[m]);const $=v.renderText(m);return React.createElement(FormElement,{className:e,element:o,inputId:T.current,name:a},t=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnEscape:!0,clearOnBlur:!1,disabled:!n,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionKey:e=>getItemId(e,L.current)||"",getOptionLabel:e=>{e=getItemId(e,L.current);return e?j.current[e]:""},inputValue:b,noOptionsText:R.current,onBlur:()=>{1===S.length&&b.toLowerCase()===j.current[0]?.toLowerCase()?(h(j.current[0]),k(S[0])):f("label",b)},onChange:(e,t)=>{I.current=!0,k(t)},onInputChange:(e,t,r)=>{h(t),x(r)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},options:S,renderOption:(e,t,{inputValue:r})=>{if(t===pendingOption){var o=clsx(e.className,popperClasses.skeletonOption);return React.createElement("li",{...e,className:o,key:e.id},React.createElement(StyledSkeleton,null))}o=getItemId(t,L.current),o={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?v.renderText(t.tooltip):void 0,inputText:r,optionText:o?j.current[o]:""};return React.createElement(HighlightOption,{...o})},renderInput:e=>(e.inputProps={...e.inputProps,...t,value:e.inputProps.value||$,placeholder:N,title:F},T.current=e.id,React.createElement(FormLabelTextField,{error:!!l,...e,fullWidth:!0,inputRef:A})),slotProps:{popper:{component:StyledPopper}},value:E}))};export default AutoComplete;
+import BaseAutoComplete,{autocompleteClasses,HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Popper from"@vertigis/react-ui/Popper";import Skeleton from"@vertigis/react-ui/Skeleton";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{getItemId,inspectItems,makeSafeClassName}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StyledAutoComplete=styled(BaseAutoComplete)(()=>({[`.${autocompleteClasses.endAdornment}`]:{right:1}})),popperClasses={skeletonOption:"skeleton-option"},StyledPopper=styled(Popper)(()=>({[`.${autocompleteClasses.listbox}`]:{[`.${autocompleteClasses.option}`]:{display:"block",[`&.${popperClasses.skeletonOption}`]:{'&[data-option-index="0"]':{span:{width:"70%"}},'&[data-option-index="1"]':{span:{width:"85%"}},'&[data-option-index="2"]':{span:{width:"55%"}}}}}})),StyledSkeleton=styled(Skeleton)(()=>({fontSize:"1.25rem",lineHeight:"inherit"})),pendingOption={enabled:!1,label:""},pendingOptions=[pendingOption,pendingOption,pendingOption],AutoComplete=forwardRef(({className:e,component:t,current:o,delay:r,element:n,enabled:l,error:s,items:a,label:i,minLength:p,name:u,prompt:m,tooltip:c,raiseEvent:d,setProperty:f,setValue:x,value:g},C)=>{const y=useContext(HostContext),[v,T]=useState(),[b,h]=useState(""),[O,S]=useState([]),[E,k]=useState(null),P=useRef(!1),R=useRef(),I=useRef(!1),N=useFocusCallback(l,u,y),F=useRef({}),w=useRef({}),A=useMemo(()=>{let e=r;return("number"!=typeof e||isNaN(e))&&(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[r]),L=useMemo(()=>{let e=p;return("number"!=typeof e||isNaN(e))&&(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[p]),{clearText:j,closeText:M,noOptionsText:H,openText:B,placeholder:K,title:$}=useMemo(()=>({clearText:y.renderText("@common-clear"),closeText:y.renderText("@common-close"),noOptionsText:y.renderText({status:"trivial"}),openText:y.renderText("@common-open"),placeholder:y.renderText(m),title:y.renderText(c)}),[y,m,c]),V=t.timer||(t.timer=new ExclusiveTimer),D=()=>{d("suggest",g,b,void 0,V.cancellationToken),S(pendingOptions)},z=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===v?z():"input"===v&&(i&&f("label",void 0),P.current=!0,b.length>=L?(f("current",void 0),V.reset(),V.start(A,D)):Object.keys(a||{}).length>0&&z())},[v,b]),useEffect(()=>{const e=E?.value;if(g!==e){const t=getItemId(E,F.current),o=t?w.current[t]:void 0;f("current",t),f("label",o),x(e,{argument:o})}},[E]),useEffect(()=>{const{current:e,items:t,label:r,value:n}=inspectItems(o,a,g);f("current",e),f("label",r||i),f("value",n,!1);const l={};let s=null;const p=[];for(const o in t){const r=t[o];p.push(r);const n=y.renderText(r.label).trim();l[o]=n,e&&o===e&&(s=r)}w.current=l,F.current=t,S(p),k(s)},[a]),useEffect(()=>{const e="string"==typeof o?o:void 0,t=e?F.current[e]:void 0,r=e?w.current[e]:void 0;t?(f("label",r),f("value",t.value),h(r||"")):(f("value",void 0),P.current||h("")),k(t||null)},[o]),useEffect(()=>{P.current||I.current||h(""),P.current=!1,I.current=!1},[i]);const W=y.renderText(i);return React.createElement(FormElement,{className:e,element:n,inputId:R.current,name:u,ref:C},e=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnBlur:!1,clearOnEscape:!0,clearText:j,closeText:M,disabled:!l,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionKey:e=>getItemId(e,F.current)||"",getOptionLabel:e=>{const t=getItemId(e,F.current);return t?w.current[t]:""},inputValue:b,noOptionsText:H,onBlur:()=>{1===O.length&&b.toLowerCase()===w.current[0]?.toLowerCase()?(h(w.current[0]),k(O[0])):f("label",b)},onChange:(e,t)=>{I.current=!0,k(t)},onInputChange:(e,t,o)=>{h(t),T(o)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},openText:B,options:O,renderOption:(e,t,{inputValue:o})=>{if(t===pendingOption){const t=clsx(e.className,popperClasses.skeletonOption);return React.createElement("li",{...e,className:t,key:e.id},React.createElement(StyledSkeleton,null))}const r=getItemId(t,F.current),n={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?y.renderText(t.tooltip):void 0,inputText:o,optionText:r?w.current[r]:""};return React.createElement(HighlightOption,{...n})},renderInput:t=>(t.inputProps={...t.inputProps,...e,value:t.inputProps.value||W,placeholder:K,title:$},R.current=t.id,React.createElement(FormLabelTextField,{error:!!s,...t,fullWidth:!0,inputRef:N})),slotProps:{popper:{component:StyledPopper}},value:E}))});export default AutoComplete;

package/forms/components/Button.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { Item } from "../FormDefinition";
+import type { ButtonProps as MuiButtonProps } from "@vertigis/react-ui/Button";
+export declare const buttonClasses: {
+    iconOnly: string;
+    iconStacked: string;
+    styleRounded: string;
+    border: string;
+    noBorder: string;
+};
+interface ButtonProps extends MuiButtonProps {
+    item: Item;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/forms/components/Button.js

@@ -0,0 +1 @@
+import Button from"@vertigis/react-ui/Button";import{NoIcon}from"@vertigis/react-ui/icons";import{styled,useTheme}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef,Children,useMemo,Suspense,lazy}from"react";import WorkflowColor from"../branding/WorkflowColor.js";import{createPalette}from"../branding/createPalette.js";import{getBorderStyle,getEmphasis,getIconPosition,getItemColors,getItemSize,getShowBorder}from"../utils.js";function emphasisToButtonProps(e,o){switch(o&&(e="high"),e){case"low":return{variant:"text",color:"inherit"};case"custom":case"medium":return{variant:"outlined",color:"inherit"};case"high":return{variant:"contained",color:"primary"};default:throw new Error(`Invalid value "${e}" for Emphasis.`)}}function generateButtonOverrides(e,o){const t=e=>Object.fromEntries(Object.entries(e).map(([e,o])=>[e,o.toCss()])),r=e&&t(createPalette(e)),n=o&&t(createPalette(o)),{accentIconForeground:s,buttonForegroundDisabled:a,buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,buttonBorderDisabled:l,buttonBorderHover:c,emphasizedButtonBackgroundDisabled:m}=r??{},{buttonBackgroundDisabled:b,emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForegroundDisabled:p,primaryBackground:h}=n??{};return{accentIconForeground:s,buttonBackground:o?.toCss(),buttonBackgroundDisabled:b,buttonBackgroundHover:e?.toCss(),buttonBorder:e?.toCss(),buttonBorderDisabled:l,buttonBorderHover:c,buttonForeground:e?.toCss(),buttonForegroundDisabled:a,buttonForegroundHover:o?.toCss(),buttonIcon:i,buttonIconDisabled:d,buttonIconHover:u,emphasizedButtonBackground:e?.toCss(),emphasizedButtonBackgroundDisabled:m,emphasizedButtonBackgroundHover:o?.toCss(),emphasizedButtonBorder:o?.toCss(),emphasizedButtonBorderDisabled:g,emphasizedButtonBorderHover:B,emphasizedButtonForeground:o?.toCss(),emphasizedButtonForegroundDisabled:p,emphasizedButtonForegroundHover:e?.toCss(),primaryBackground:h}}const PREFIX="WorkflowButton";export const buttonClasses={iconOnly:`${PREFIX}-icon-only`,iconStacked:`${PREFIX}-icon-stacked`,styleRounded:`${PREFIX}-rounded`,border:`${PREFIX}-border`,noBorder:`${PREFIX}-noBorder`};export default forwardRef(({children:e,className:o,disabled:t,item:r,onClick:n,title:s},a)=>{const i=useTheme(),d=r.appearance??{},{backgroundColor:u,foregroundColor:l}=getItemColors(d,i),c=useMemo(()=>{const e=u||l?generateButtonOverrides(l?new WorkflowColor(l):void 0,u?new WorkflowColor(u):void 0):void 0,o=e?Object.fromEntries(Object.keys(e).map(o=>e[o]&&[[`--${o}`],e[o]]).filter(e=>!!e)):{};return styled(Button)({[`&.${buttonClasses.iconOnly}`]:{minWidth:"auto",padding:8,lineHeight:0,"&.MuiButton-sizeSmall":{padding:6},"&.MuiButton-sizeLarge":{padding:10},"& .MuiButton-startIcon":{margin:0},"& .MuiButton-endIcon":{margin:0}},[`&.${buttonClasses.iconStacked}`]:{flexDirection:"column","& .MuiButton-startIcon":{marginTop:6,marginRight:0,marginLeft:0},"& .MuiButton-endIcon":{marginBottom:6,marginRight:0,marginLeft:0}},[`&.${buttonClasses.styleRounded}`]:{borderRadius:"1000px"},[`&.${buttonClasses.noBorder}`]:{border:0,outline:0},[`&.${buttonClasses.border}`]:{border:1,borderStyle:"solid"},[`&.${buttonClasses.border}:hover`]:{border:1,borderStyle:"solid",borderColor:"transparent"},...o})},[u,l]),{icon:m}=d,b=getIconPosition(d.iconPosition),g=useMemo(()=>{let e;return m&&(e=lazy(()=>import("@vertigis/react-ui/icons").then(e=>Promise.resolve({default:e[m]??NoIcon})))),e},[m]);let B,p;if(g){const e=React.createElement(Suspense,{fallback:m},React.createElement(g,null));switch(b){case"above":case"before":B=e;break;case"below":case"after":p=e}}const h=getEmphasis(d.emphasis),f=getShowBorder(h,d.showBorder),C=getItemSize(d.size),I=getBorderStyle(d.borderStyle),v=(B??p)&&0===Children.toArray(e).length,k=clsx({classNameProp:o,[buttonClasses.iconOnly]:v,[buttonClasses.iconStacked]:!v&&("above"===b||"below"===b),[buttonClasses.styleRounded]:"rounded"===I,[buttonClasses.border]:f,[buttonClasses.noBorder]:!f});return React.createElement(c,{className:k,disabled:t,endIcon:p,onClick:n,ref:a,size:C,startIcon:B,title:s,...emphasisToButtonProps(h,r.default)},e)});

package/forms/components/ButtonBar.d.ts

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

package/forms/components/ButtonBar.js

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

package/forms/components/CheckBox.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Check Box" Form Element.
  */
-declare const CheckBox: ({ checked, className, element, enabled, label, name, raiseEvent, setProperty, tooltip: elementTooltip, value, }: FormElementProps) => React.JSX.Element;
+declare const CheckBox: React.ForwardRefExoticComponent<FormElementProps<undefined> & React.RefAttributes<HTMLDivElement>>;
 export default CheckBox;

package/forms/components/CheckBox.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const CheckBox=({checked:t,className:e,element:o,enabled:r,label:a,name:c,raiseEvent:m,setProperty:n,tooltip:l,value:s})=>{const i=useContext(HostContext),C=i.renderText(l),d=useFocusCallback(r,c,i),k=e=>{e=e.target.checked;n("checked",e),m("changed",e?s:void 0,e)};return React.createElement(FormElement,{className:e,element:o,name:c},e=>React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:t,onChange:k,slotProps:{input:{...e,ref:d}}}),disabled:!r,label:React.createElement(Markdown,{text:a}),title:C}))};export default CheckBox;
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import{forwardRef,useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const CheckBox=forwardRef(({checked:e,className:t,element:o,enabled:r,label:a,name:c,raiseEvent:m,setProperty:n,tooltip:l,value:s},i)=>{const d=useContext(HostContext),C=d.renderText(l),f=useFocusCallback(r,c,d),k=e=>{const t=e.target.checked;n("checked",t),m("changed",t?s:void 0,t)};return React.createElement(FormElement,{className:t,element:o,name:c,ref:i},t=>React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:e,onChange:k,slotProps:{input:{...t,ref:f}}}),disabled:!r,label:React.createElement(Markdown,{text:a}),title:C}))});export default CheckBox;

package/forms/components/CheckGroup.d.ts

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

package/forms/components/CheckGroup.js

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

package/forms/components/Custom.d.ts

@@ -3,5 +3,5 @@ import type { FormElementProps } from "../..";
 /**
  * The component for the "Custom" Form Element.
  */
-declare const Custom: ({ className, component, customType, element, name }: FormElementProps) => React.JSX.Element;
+declare const Custom: React.ForwardRefExoticComponent<FormElementProps<undefined> & React.RefAttributes<HTMLDivElement>>;
 export default Custom;

package/forms/components/Custom.js

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

package/forms/components/DatePicker.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Date Picker" Form Element.
  */
-declare const DatePicker: ({ className, element, enabled, error: elementError, format: elementFormat, name, prompt, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.JSX.Element;
+declare const DatePicker: React.ForwardRefExoticComponent<FormElementProps<defs.DateTimeRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 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*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:n,tooltip:m,value:u})=>{const c=useContext(HostContext),[d,p]=useState(!1),[f,x]=useState(!1),[E,D]=useState(!1),[v,F]=useState(null),g=useRef(),T=useRef(!0),k=useFocusCallback(r,s,c),C=c.renderText(m);const R={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=Calendar.useNative(),V="date",j=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,P),t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t,!1),F(e||null)},[u]),useEffect(()=>{if(!E&&!f)if(d)j||l("error",{status:"invalid"});else{if(j&&l("error",void 0),T.current)return void(T.current=!1);let e=v||void 0;if(e&&isDateTimeRef(u)){const r=new Date(u.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,V,R,P);areValuesEqual(u,t)||n(t)}T.current=!1},[d,f,E]);const{min:S,max:H}=getDateBounds(o),w=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:w,name:s},e=>React.createElement(React.Fragment,null,j&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},g.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{e&&(g.current=e.dataset.formatString,k(e))},key:"date-picker",maxDate:H,minDate:S,onChange:e=>F(e),onClose:()=>D(!1),onError:e=>p(!!e),onOpen:()=>D(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:w,inputProps:{...e,placeholder:I},onBlur:()=>x(!1),onFocus:()=>x(!0),title:C}},value:v})))};export default DatePicker;
+import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import*as React from"react";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:n,setValue:l,tooltip:m,value:u},c)=>{const d=useContext(HostContext),[f,p]=useState(!1),[x,E]=useState(!1),[g,D]=useState(!1),[F,k]=useState(null),v=useRef(),R=useRef(!0),T=useFocusCallback(r,s,d),P=d.renderText(m),S={locale:d.deriveLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},w="date",C=isInvalidError(o),V=()=>{let e=F||void 0;if(e&&isDateTimeRef(u)){const t=new Date(u.value);e=new Date(e),e.setHours(t.getHours()),e.setMinutes(t.getMinutes()),e.setSeconds(t.getSeconds()),e.setMilliseconds(t.getMilliseconds())}const t=getNewElementValue(e,w,S);areValuesEqual(u,t)||l(t)};useEffect(()=>{const e=makeProperValue(u),t=getNewElementValue(e,w,S);areValuesEqual(u,t)||l(t,!1),k(e||null)},[u]),useEffect(()=>{if(!g&&!x)if(f)C||n("error",{status:"invalid"});else{if(C&&n("error",void 0),R.current)return void(R.current=!1);V()}R.current=!1},[f,x,g]);const{min:j,max:H}=getDateBounds(a),y=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=d.renderText(i),M=e=>{"enter"!==getKeyString(e)||V()};return React.createElement(FormElement,{className:e,element:t,inputId:y,name:s,ref:c},e=>React.createElement(React.Fragment,null,C&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},v.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{T(e),e&&(v.current=e.dataset.formatString)},key:"date-picker",maxDate:H,minDate:j,onChange:e=>k(e),onClose:()=>D(!1),onError:e=>p(!!e),onOpen:()=>D(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:y,inputProps:{...e,placeholder:I},onBlur:()=>E(!1),onFocus:()=>E(!0),onKeyDown:M,title:P}},value:F})))});export default DatePicker;

package/forms/components/DateRangePicker.d.ts

@@ -8,5 +8,5 @@ export declare const dateRangePickerClasses: {
 /**
  * The component for the "Date Range Picker" Form Element.
  */
-declare const DateRangePicker: ({ className, element, enabled, error, format: elementFormat, name, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<DateRangeRef | undefined>) => React.JSX.Element;
+declare const DateRangePicker: React.ForwardRefExoticComponent<FormElementProps<DateRangeRef | undefined> & React.RefAttributes<HTMLDivElement>>;
 export default DateRangePicker;

package/forms/components/DateRangePicker.js

@@ -1 +1 @@
-import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{areValuesEqual,convertToDateRangeRef,getDateBounds}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DateRangePickerField=e=>{const{FormHelperTextProps:t,InputProps:r,InputLabelProps:a,inputProps:o,SelectProps:s,...n}=e,l=n.slotProps??{};return delete n.slotProps,l.formHelperText={...t,...l.formHelperText},l.input={...r,...l.input},l.inputLabel={...a,...l.inputLabel},l.htmlInput={...o,...l.htmlInput},l.select={...s,...l.select},n.error=n.error||l.htmlInput["data-elementError"],delete l.htmlInput["data-elementError"],React.createElement(DateTimeTextField,{...n,slotProps:l})},PREFIX="DateRangePicker",dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`},StyledDateRangePicker=styled(BaseDateRangePicker)({alignItems:"center"}),StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${dateRangePickerClasses.toLabel}`]:{paddingTop:e(3)}})),DateRangePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,setProperty:n,setValue:l,tooltip:i,value:m})=>{const u=useContext(HostContext),[c,d]=useState([null,null]),[p,f]=useState(-1),[R,g]=useState([!1,!1]),[x,P]=useState(!1),[E,D]=useState([null,null]),F=useRef(),k=useRef(!0),I=isInvalidError(a);useEffect(()=>{var e=convertToDateRangeRef(m),t=[e?.startDate||null,e?.endDate||null],e=C(t);areValuesEqual(m,e)||l(e,!1),D(t)},[m]),useEffect(()=>{var e=0===p?R[0]:!!c[0],t=1===p?R[1]:!!c[1];g([e,t]);t=e||t;if(t?I||n("error",{status:"invalid"}):I&&n("error",void 0),!x&&-1===p&&!t){if(k.current)return void(k.current=!1);t=C(E);areValuesEqual(m,t)||l(t)}k.current=!1},[c,p,x]);const T=u.renderText(i),v=useFocusCallback(r,s,u),C=e=>{if(e[0]&&e[1])return{refValueType:"daterange",startDate:e[0],endDate:e[1]}},b=useMemo(()=>`${makeUniqueId(s)}-input`,[s]);var S=R[0]||R[1],{min:i,max:o}=getDateBounds(o);return React.createElement(StyledFormElement,{className:clsx(e,dateRangePickerClasses.root),element:t,inputId:b,name:s},S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},F.current),React.createElement(StyledDateRangePicker,{disabled:!r,maxDate:o,minDate:i,onChange:e=>D(e),onClose:()=>P(!1),onError:e=>d(e),onOpen:()=>P(!0),slots:{textField:DateRangePickerField},slotProps:{fieldSeparator:{children:u.renderText("@common-to"),className:dateRangePickerClasses.toLabel},textField:({position:e})=>({inputRef:e=>{"0"===e?.dataset.index&&(F.current=e.dataset.formatString,v(e))},onBlur:e=>{Number.parseInt(e.target.dataset.index)===p&&f(-1)},onFocus:e=>{e=Number.parseInt(e.target.dataset.index);f(e)},slotProps:{htmlInput:{id:"start"===e?b:void 0,"data-elementError":!!a,"data-index":"start"===e?0:1}},title:T})},value:E}))};export default DateRangePicker;export{dateRangePickerClasses};
+import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{areValuesEqual,convertToDateRangeRef,getDateBounds}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DateRangePickerField=e=>{const{FormHelperTextProps:t,InputProps:r,InputLabelProps:a,inputProps:o,SelectProps:s,...n}=e,l=n.slotProps??{};return delete n.slotProps,l.formHelperText={...t,...l.formHelperText},l.input={...r,...l.input},l.inputLabel={...a,...l.inputLabel},l.htmlInput={...o,...l.htmlInput},l.select={...s,...l.select},n.error=n.error||l.htmlInput["data-elementError"],delete l.htmlInput["data-elementError"],React.createElement(DateTimeTextField,{...n,slotProps:l})},PREFIX="DateRangePicker";export const dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`};const StyledDateRangePicker=styled(BaseDateRangePicker)({alignItems:"center"}),StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${dateRangePickerClasses.toLabel}`]:{paddingTop:e(3)}})),DateRangePicker=forwardRef(({className:e,element:t,enabled:r,error:a,format:o,name:s,setProperty:n,setValue:l,tooltip:i,value:m},u)=>{const c=useContext(HostContext),[d,p]=useState([null,null]),[f,R]=useState(-1),[x,g]=useState([!1,!1]),[P,E]=useState(!1),[D,F]=useState([null,null]),k=useRef(),I=useRef(!0),T=isInvalidError(a);useEffect(()=>{const e=convertToDateRangeRef(m),t=[e?.startDate||null,e?.endDate||null],r=C(t);areValuesEqual(m,r)||l(r,!1),F(t)},[m]),useEffect(()=>{const e=0===f?x[0]:!!d[0],t=1===f?x[1]:!!d[1];g([e,t]);const r=e||t;if(r?T||n("error",{status:"invalid"}):T&&n("error",void 0),!P&&-1===f&&!r){if(I.current)return void(I.current=!1);const e=C(D);areValuesEqual(m,e)||l(e)}I.current=!1},[d,f,P]);const v=c.renderText(i),b=useFocusCallback(r,s,c),C=e=>{if(e[0]&&e[1])return{refValueType:"daterange",startDate:e[0],endDate:e[1]}},S=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),y=x[0]||x[1],{min:h,max:H}=getDateBounds(o);return React.createElement(StyledFormElement,{className:clsx(e,dateRangePickerClasses.root),element:t,inputId:S,name:s,ref:u},y&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},k.current),React.createElement(StyledDateRangePicker,{disabled:!r,maxDate:H,minDate:h,onChange:e=>F(e),onClose:()=>E(!1),onError:e=>p(e),onOpen:()=>E(!0),slots:{textField:DateRangePickerField},slotProps:{fieldSeparator:{children:c.renderText("@common-to"),className:dateRangePickerClasses.toLabel},textField:({position:e})=>({inputRef:e=>{b(e),"0"===e?.dataset.index&&(k.current=e.dataset.formatString)},onBlur:e=>{Number.parseInt(e.target.dataset.index)===f&&R(-1)},onFocus:e=>{const t=Number.parseInt(e.target.dataset.index);R(t)},slotProps:{htmlInput:{id:"start"===e?S:void 0,"data-elementError":!!a,"data-index":"start"===e?0:1}},title:v})},value:D}))});export default DateRangePicker;

package/forms/components/DateTimePicker.d.ts

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

package/forms/components/DateTimePicker.js

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

package/forms/components/DateTimeTextField.js

@@ -1 +1 @@
-import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";const DateTimeTextField=t=>{const{placeholder:e,inputProps:r,InputProps:l,...o}=t,a=o.slotProps??{};var{htmlInput:p,input:t}=a;return a.htmlInput={...r,...p,"data-format-string":e},a.htmlInput.placeholder||(a.htmlInput.placeholder=e),a.input={...l,...t},delete o.slotProps,React.createElement(FormLabelTextField,{...o,slotProps:a})};export default DateTimeTextField;
+import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";const DateTimeTextField=t=>{const{placeholder:e,inputProps:l,InputProps:r,...o}=t,p=o.slotProps??{},{htmlInput:a,input:i}=p;return p.htmlInput={...l,...a,"data-format-string":e},p.htmlInput.placeholder||(p.htmlInput.placeholder=e),p.input={...r,...i},delete o.slotProps,React.createElement(FormLabelTextField,{...o,slotProps:p})};export default DateTimeTextField;