@adcops/autocore-react 3.0.8 → 3.0.10

package/dist/components/ToggleGroup.d.ts

@@ -1,103 +1,21 @@
-import { Component } from 'react';
+import React from 'react';
 import { SelectButtonProps } from 'primereact/selectbutton';
-import { EventEmitterContextType } from '../core/EventEmitterContext';
 import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
 import { ActionMode } from '../core/ActionMode';
 export { ActionMode };
-import { IndicatorButtonState } from '../core/IndicatorButtonState';
 export interface ToggleGroupProps extends SelectButtonProps {
-    /**
-     * Label of the group/row. Can be any element.
-     *
-     * ## Examples
-     * ```
-     * <ToggleGroup label="Simple Text" />
-     * <ToggleGroup label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
-     * <ToggleGroup label={<YourCustomIconComponent />} />
-     * ```
-     */
     label?: React.ReactNode;
-    /**
-     * Topic name to monitor for state indication.
-     * If `value` field is not undefined, then that value is used instead.
-     */
     topic?: string;
-    /**
-     * Color for the button when the state is TRUE.
-     */
     onColor?: IndicatorColor | IndicatorColor[];
-    /**
-     * Color for the button when the state is FALSE.
-     */
     offColor?: IndicatorColor;
-    /**
-     * Name of the command to invoke on button events.
-     * If command is "*", then the commandTopic will be dispatched
-     * internally.
-     */
     command?: string;
-    /**
-     * Optional topic parameter to send along with the command.
-     * If set, will automatically be included with commandArgs as
-     * the value of field 'topic.'
-     */
     commandTopic?: string;
-    /**
-     * Optional arguments sent with the command.
-     */
     commandArgs?: any;
-    /**
-     * Topic to disable button interaction.
-     */
     disableTopic?: string;
-    /**
-     * Topic to control the visibility of the button.
-     */
     invisibleTopic?: string;
-    /**
-     * Mode of input for the button (e.g., TAP, TOGGLE).
-     */
     actionMode?: ActionMode;
-    /**
-     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
-     */
     invert?: boolean;
 }
-export declare class ToggleGroup extends Component<ToggleGroupProps, IndicatorButtonState> {
-    static contextType: import("react").Context<EventEmitterContextType>;
-    constructor(props: ToggleGroupProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ToggleGroupProps): void;
-    componentWillUnmount(): void;
-    /**
-     * Sets up subscriptions based on provided topics.
-     */
-    private setupSubscriptions;
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate;
-    /**
-     * Handles updates for the disable topic.
-     */
-    private handleDisableTopicUpdate;
-    /**
-     * Handles updates for the invisible topic.
-     */
-    private handleInvisibleTopicUpdate;
-    /**
-     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
-     */
-    protected handleOnPressed(): void;
-    /**
-     * Handle the button being released. Used for TAP and RELEASED action modes.
-     */
-    protected handleOnReleased(): void;
-    /**
-     * Dispatch a value to any listeners.
-     * @param value The value to dispatch as part of the payload.
-     */
-    protected dispatchCommand(value: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const ToggleGroup: React.FC<ToggleGroupProps>;
+export default ToggleGroup;

package/dist/components/ToggleGroup.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{SelectButton}from"primereact/selectbutton";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};function matchCurrentValue(e,t){if(null==t||0===t.length)return;let o=typeof e;if("boolean"==o){return e&&t.length>1?t[1]:t[0]}if("number"==o){let o=e;if(void 0!==o&&o<t.length)return t[o]}else if("string"==o)return e}function selectOnColor(e,t,o){if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(o)?o:void 0!==o?[o]:[IndicatorColor.IndicatorInvalid],i=typeof e;if("boolean"===i)return e?n[0]:n.length>1?n[1]:n[0];if("number"===i&&t.length>e){if(n.length>e){return n[e]}return n[0]}if("string"===i){let o=t.indexOf(e);return-1!==o&&o<n.length?n[o]:n[0]}return null!=o?Array.isArray(o)?o[0]:o:IndicatorColor.IndicatorInvalid}export class ToggleGroup extends Component{constructor(e){super(e),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({currentValue:e})}}),Object.defineProperty(this,"handleDisableTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isDisabled:e})}}),Object.defineProperty(this,"handleInvisibleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isInvisible:e})}}),this.state={currentValue:void 0,isDisabled:!1,isInvisible:!1,isPressed:!1}}componentDidMount(){this.setupSubscriptions()}componentDidUpdate(e){}componentWillUnmount(){}setupSubscriptions(){const{topic:e,disableTopic:t,invisibleTopic:o}=this.props,{subscribe:n}=this.context;e&&n(e,this.handleTopicUpdate),t&&n(t,this.handleDisableTopicUpdate),o&&n(o,this.handleInvisibleTopicUpdate)}handleOnPressed(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e||(this.setState({isPressed:!0}),t!==ActionMode.Tap&&t!==ActionMode.Pressed||this.dispatchCommand(!0))}handleOnReleased(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e&&(this.setState({isPressed:!1}),t===ActionMode.Tap?this.dispatchCommand(!1):t===ActionMode.Released&&this.dispatchCommand(!0))}dispatchCommand(e){const{command:t,commandTopic:o,commandArgs:n}=this.props,{dispatch:i}=this.context;if(null!=t&&t.length>0){i({topic:t,payload:{topic:o,value:e,...n}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{label:n,value:i,disabled:r,className:s,onColor:l,offColor:a,options:c,...d}=this.props;let p=e;void 0!==i&&(p=i);let u=selectOnColor(p,c,l);void 0===p&&(u=IndicatorColor.IndicatorInvalid);const h=null!=c&&c.length>2;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`                \n                    ${void 0!==a?`\n                        .togglegroup-selectbutton-container .p-selectbutton .p-button {\n                            background-color: ${a};\n                        }\n                    `:""}\n                    .togglegroup-selectbutton-container .p-selectbutton .p-button.p-highlight {\n                        background-color: ${u} !important;\n                        border-color: ${u} !important;\n                    }\n                    .togglegroup-selectbutton-container .p-selectbutton .p-highlight {\n                        background-color: ${u} !important;\n                        border-color: ${u} !important;\n                    }\n                `}),_jsxs("div",{className:"p-inputgroup togglegroup-selectbutton-container",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:n}),_jsx(SelectButton,{...d,options:c,disabled:t||r,multiple:h,className:`${s||""} ${void 0===p?"p-invalid":""}`.trim(),...o&&{style:{display:"none"}},value:matchCurrentValue(p,c),allowEmpty:!1,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased()})]})]})}}Object.defineProperty(ToggleGroup,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import{SelectButton}from"primereact/selectbutton";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import clsx from"clsx";export const ToggleGroup=({label:o,topic:t,onColor:e,offColor:n,command:r,commandTopic:i,commandArgs:l,disableTopic:s,invisibleTopic:a,actionMode:c,invert:d,...u})=>{const[p]=useState((()=>`toggleGroup-${Math.random().toString(36).substr(2,9)}`)),[m,f]=useState(void 0),[g,v]=useState(!1),[x,b]=useState(!1),[h,I]=useState(!1),C=useContext(EventEmitterContext);useEffect((()=>(t&&C.subscribe(t,y),s&&C.subscribe(s,A),a&&C.subscribe(a,j),()=>{})),[t,s,a]);const y=o=>{f(o)},A=o=>{v(o)},j=o=>{b(o)},M=()=>{h||(I(!0),c!==ActionMode.Tap&&c!==ActionMode.Pressed||S(!0))},E=()=>{h&&(I(!1),c===ActionMode.Tap?S(!1):c===ActionMode.Released&&S(!0))},S=o=>{if(r&&r.length>0){const t={topic:i,value:o,...l};C.dispatch({topic:r,payload:t})}};let T=m;void 0!==u.value&&(T=u.value);let $=((o,t,e)=>{if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(e)?e:void 0!==e?[e]:[IndicatorColor.IndicatorInvalid],r=typeof o;if("boolean"===r)return o?n[0]:n.length>1?n[1]:n[0];if("number"===r&&t.length>o){if(n.length>o){return n[o]}return n[0]}if("string"===r){let e=t.indexOf(o);return-1!==e&&e<n.length?n[e]:n[0]}return null!=e?Array.isArray(e)?e[0]:e:IndicatorColor.IndicatorInvalid})(T,u.options,e);void 0===T&&($=IndicatorColor.IndicatorInvalid);const _=void 0!==u.options&&null!==u.options&&void 0!==u.options.length&&u.options.length>2,N=`${p}-togglegroup-selectbutton-container`;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`\n                ${void 0!==n?`\n                    .${N} .p-selectbutton .p-button {\n                        background-color: ${n};\n                    }\n                `:""}\n                .${N} .p-selectbutton .p-button.p-highlight {\n                    background-color: ${$} !important;\n                    border-color: ${$} !important;\n                }\n            `}),_jsx("div",{className:N,children:_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:o}),_jsx(SelectButton,{...u,options:u.options,disabled:g||u.disabled,multiple:_,className:clsx(p,u.className,{"p-invalid":void 0===u.value}),style:x?{display:"none"}:{},value:((o,t)=>{if(null==t||0===t.length)return;let e=typeof o;if("boolean"==e){return o&&t.length>1?t[1]:t[0]}if("number"==e){let e=o;if(void 0!==e&&e<t.length)return t[e]}else if("string"==e)return o})(T,u.options),allowEmpty:!1,onMouseDown:M,onTouchStart:M,onMouseUp:E,onTouchEnd:E})]})})]})};export default ToggleGroup;

package/dist/components/ValueInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { EventEmitterContext } from "../core/EventEmitterContext";
 /**
  * Properties of the ValueInput component.
  */
@@ -105,6 +105,7 @@ interface ValueInputProps {
  */
 interface ValueInputState {
     entryValue: number | null;
+    currentValue: number | null;
     editing: boolean;
 }
 /**
@@ -113,7 +114,7 @@ interface ValueInputState {
  * accepting and rejecting values and keyboard management.
  */
 export declare class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
-    static contextType: React.Context<import("../core/EventEmitterContext.js").EventEmitterContextType>;
+    static contextType: React.Context<import("../core/EventEmitterContext").EventEmitterContextType>;
     context: React.ContextType<typeof EventEmitterContext>;
     /**
      * Default properties for the component.
@@ -141,6 +142,7 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
         locale: string;
         currency: string;
     };
+    inputRef: React.RefObject<HTMLInputElement>;
     /**
      *
      * @param {FooterViewProps} props
@@ -150,6 +152,7 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
      * The component has been loaded into the DOM.
      */
     componentDidMount(): void;
+    private onBufferValue;
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */

package/dist/components/ValueInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class ValueInput extends React.Component{constructor(e){super(e),this.state={entryValue:e.value,editing:!1}}componentDidMount(){}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.setState({entryValue:this.props.value,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:e=>{this.setState({entryValue:e.value,editing:!0})},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:e=>{"Enter"===e.key?this.onAcceptValue():"Escape"===e.key&&this.onResetValue()},disabled:this.props.disabled}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small"}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small"})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{createRef}from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export class ValueInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"inputRef",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={entryValue:t.value,currentValue:t.value,editing:!1},this.inputRef=createRef()}componentDidMount(){}onBufferValue(t){null!==t&&(this.state.editing?this.setState({entryValue:t}):this.setState({entryValue:this.state.currentValue,editing:!0},(()=>{setTimeout((()=>{this.inputRef.current&&this.inputRef.current.focus()}),0)})))}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1,currentValue:this.state.entryValue}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.state.editing&&this.setState({currentValue:this.state.currentValue,entryValue:this.state.currentValue,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{inputRef:this.inputRef,min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.currentValue,onChange:t=>{this.onBufferValue(t.value)},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled,autoFocus:!1},this.state.editing?"editing":"not-editing"),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small",autoFocus:!1})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.8",
+    "version": "3.0.10",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/ToggleGroup.tsx

@@ -2,428 +2,284 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 10:14:48
  * -----
- * Last Modified: 2024-03-12 20:40:14
+ * Last Modified: 2024-04-16 09:16:59
  * -----
  * 
  */
 
-import { Component } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { SelectButton, SelectButtonProps } from 'primereact/selectbutton';
 import {SelectItemOptionsType} from "primereact/selectitem";
 
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext} from '../core/EventEmitterContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}
 import { ActionMode } from '../core/ActionMode';
 export {ActionMode};
 
-import { IndicatorButtonState } from '../core/IndicatorButtonState';
+import clsx from 'clsx';
 
 
 
 export interface ToggleGroupProps extends SelectButtonProps {
-    
-    /**
-     * Label of the group/row. Can be any element.
-     * 
-     * ## Examples
-     * ```
-     * <ToggleGroup label="Simple Text" />
-     * <ToggleGroup label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
-     * <ToggleGroup label={<YourCustomIconComponent />} />
-     * ```
-     */
-    label? : React.ReactNode;
-
-
-    /**
-     * Topic name to monitor for state indication.
-     * If `value` field is not undefined, then that value is used instead.
-     */
+    label?: React.ReactNode;
     topic?: string;
-
-    /**
-     * Color for the button when the state is TRUE.
-     */
     onColor?: IndicatorColor | IndicatorColor[];
-
-    /**
-     * Color for the button when the state is FALSE.
-     */
     offColor?: IndicatorColor;
-
-
-    /**
-     * Name of the command to invoke on button events.
-     * If command is "*", then the commandTopic will be dispatched
-     * internally.
-     */
     command?: string;
-
-    /**
-     * Optional topic parameter to send along with the command. 
-     * If set, will automatically be included with commandArgs as 
-     * the value of field 'topic.'
-     */
-    commandTopic? : string;
-
-    /**
-     * Optional arguments sent with the command.
-     */
+    commandTopic?: string;
     commandArgs?: any;
-
-    /**
-     * Topic to disable button interaction.
-     */
     disableTopic?: string;
-
-    /**
-     * Topic to control the visibility of the button.
-     */
     invisibleTopic?: string;
-
-    /**
-     * Mode of input for the button (e.g., TAP, TOGGLE).
-     */
     actionMode?: ActionMode;
-
-    /**
-     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
-     */
     invert?: boolean;
 }
 
-
-/**
- * 
- * @param s string | undefined[]
- * @returns 
- */
-// function generateSelectButtonOptions(s? : SelectItemOptionsType | undefined) : SelectItemOptionsType | undefined {
-//     if (s !== undefined && s !== null) {
-//         let ret : SelectItemOptionsType = [];
-//         for (let i=0;i<s.length;++i) {
-//             ret.push({label:s[i]});
-//         }
-
-//         return ret;
-//     }
-//     else {
-//         return undefined;
-//     }
-// }
-
-
-/**
- * 
- * @param currentValue 
- * @param options 
- * @returns 
- */
-function matchCurrentValue(currentValue : any, options : SelectItemOptionsType | undefined) : any {
-    
-    if (options === undefined || options === null || options.length === 0)
-        return undefined;
-
-    let t = typeof(currentValue);
-    if (t == "boolean" ) {
-        let b = currentValue as boolean;
-        if (b) {
-            if (options.length > 1 )
-                return options[1];
-            else
-                return options[0];
-        }
-        else {
-            return options[0];
-        }
-    }
-    else if (t == "number") {
-        let n = currentValue as number;
-        if (n !== undefined && n < options.length ) {
-            return options[n];
-        }
-    }
-    else if (t == "string") {
-        // The SelectButton should match to this value automatically, if it's in the
-        // options array. No reason to search twice.
-        return currentValue;
-    }
-
-
-    return undefined;
-}
-
-
-
-/**
- * 
- * @param currentValue 
- * @param options 
- * @returns 
- */
-
-function selectOnColor(
-    currentValue: any, 
-    options: SelectItemOptionsType | undefined, 
-    onColorProp: IndicatorColor | IndicatorColor[] | undefined
-): IndicatorColor {
-
-    if (!options || options.length === 0)
-        return IndicatorColor.IndicatorInvalid;
-
-    let colorArray = 
-        Array.isArray(onColorProp) ? onColorProp : 
-            onColorProp !== undefined ? [onColorProp] : [IndicatorColor.IndicatorInvalid];
-
-    let t = typeof(currentValue);
-    if (t === "boolean") {
-        return currentValue ? colorArray[0] : colorArray.length > 1 ? colorArray[1] : colorArray[0];
-    }
-    else if (t === "number" && options.length > currentValue) {
-        if (colorArray.length > currentValue) {
-            let index = currentValue as number;
-            return colorArray[index];    
-        }
-        else {
-            return colorArray[0];
-        }
-    }
-    else if (t === "string") {
-        let index = options.indexOf(currentValue);
-        if (index !== -1 && index < colorArray.length)
-            return colorArray[index];
-        else
-            return colorArray[0];
-    }
-
-    if (onColorProp !== undefined && onColorProp !== null) {
-        return Array.isArray(onColorProp) ? onColorProp[0] : onColorProp as IndicatorColor;
-    }
-    else {
-        return IndicatorColor.IndicatorInvalid;
-    }
-    
-}
-
-
-export class ToggleGroup extends Component<ToggleGroupProps, IndicatorButtonState> {
-
-    static contextType = EventEmitterContext;
-
-    constructor(props: ToggleGroupProps) {
-        super(props);
-        this.state = {
-            currentValue: undefined,
-            isDisabled: false,
-            isInvisible: false,
-            isPressed: false
+export const ToggleGroup: React.FC<ToggleGroupProps> = ({
+    label,
+    topic,
+    onColor,
+    offColor,
+    command,
+    commandTopic,
+    commandArgs,
+    disableTopic,
+    invisibleTopic,
+    actionMode,
+    invert,
+    ...restProps
+}) => {
+
+    const [uniqueId] = useState(() => `toggleGroup-${Math.random().toString(36).substr(2, 9)}`);
+
+    const [currentValue, setCurrentValue] = useState<any>(undefined);
+    const [isDisabled, setIsDisabled] = useState<boolean>(false);
+    const [isInvisible, setIsInvisible] = useState<boolean>(false);
+    const [isPressed, setIsPressed] = useState<boolean>(false);
+    const context = useContext(EventEmitterContext);
+
+    useEffect(() => {
+        const setupSubscriptions = () => {
+            if (topic) {
+                context.subscribe(topic, handleTopicUpdate);
+            }
+            if (disableTopic) {
+                context.subscribe(disableTopic, handleDisableTopicUpdate);
+            }
+            if (invisibleTopic) {
+                context.subscribe(invisibleTopic, handleInvisibleTopicUpdate);
+            }
         };
-    }    
 
-    componentDidMount() {
-        this.setupSubscriptions();
-    }
+        setupSubscriptions();
 
-    componentDidUpdate(prevProps: ToggleGroupProps) {
-        prevProps;
-        // Logic to handle updates in props, if necessary        
-    }
-
-    componentWillUnmount() {
-        // Unsubscribe logic if needed
-    }
-
-    /**
-     * Sets up subscriptions based on provided topics.
-     */
-    private setupSubscriptions() {
-        const { topic, disableTopic, invisibleTopic } = this.props;
-        const { subscribe } = this.context as EventEmitterContextType;
-
-        if (topic) {
-            // Subscribe to the main topic
-            subscribe(topic, this.handleTopicUpdate);
-        }
-
-        if (disableTopic) {
-            // Subscribe to the disable topic
-            subscribe(disableTopic, this.handleDisableTopicUpdate);
-        }
-
-        if (invisibleTopic) {
-            // Subscribe to the invisible topic
-            subscribe(invisibleTopic, this.handleInvisibleTopicUpdate);
-        }
-    }
+        return () => {
+            // Unsubscribe logic here
+        };
+    }, [topic, disableTopic, invisibleTopic]);
 
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate = (value: boolean) => {
-        this.setState({ currentValue: value });
+    const handleTopicUpdate = (value: boolean) => {
+        setCurrentValue(value);
     };
 
-    /**
-     * Handles updates for the disable topic.
-     */
-    private handleDisableTopicUpdate = (value: boolean) => {
-        this.setState({ isDisabled: value });
+    const handleDisableTopicUpdate = (value: boolean) => {
+        setIsDisabled(value);
     };
 
-    /**
-     * Handles updates for the invisible topic.
-     */
-    private handleInvisibleTopicUpdate = (value: boolean) => {
-        this.setState({ isInvisible: value });
-    };    
-
+    const handleInvisibleTopicUpdate = (value: boolean) => {
+        setIsInvisible(value);
+    };
 
-    /**
-     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
-     */
-    protected handleOnPressed() {
-        const { isPressed } = this.state;
-        const {actionMode} = this.props;
-        
+    const handleOnPressed = () => {
         if (!isPressed) {
-            this.setState({isPressed: true});
-
+            setIsPressed(true);
             if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
-                this.dispatchCommand(true);
+                dispatchCommand(true);
             }
         }
-    }
+    };
 
-    /**
-     * Handle the button being released. Used for TAP and RELEASED action modes.
-     */
-    protected handleOnReleased() {
-        const { isPressed } = this.state;
-        const {actionMode} = this.props;
-        
+    const handleOnReleased = () => {
         if (isPressed) {
-            this.setState({isPressed: false});
-
-            if (actionMode === ActionMode.Tap ) {
-                this.dispatchCommand(false);
-            }
-            else if (actionMode === ActionMode.Released) {
-                this.dispatchCommand(true);
+            setIsPressed(false);
+            if (actionMode === ActionMode.Tap) {
+                dispatchCommand(false);
+            } else if (actionMode === ActionMode.Released) {
+                dispatchCommand(true);
             }
         }
-    }
-
-
-    /**
-     * Dispatch a value to any listeners.
-     * @param value The value to dispatch as part of the payload.
-     */
-    protected dispatchCommand(value : any) {
-
-        const {command, commandTopic, commandArgs} = this.props;
-        const { dispatch } = this.context as EventEmitterContextType;
+    };
 
-        if (command !== undefined && command !== null && command.length > 0 )
-        {
+    const dispatchCommand = (value: any) => {
+        if (command && command.length > 0) {
             const payload = {
                 topic: commandTopic,
                 value: value,
-                ...commandArgs                        
+                ...commandArgs
             };
 
-            dispatch({
+            context.dispatch({
                 topic: command,
                 payload: payload
             });
-
         }
+    };
 
+
+    let displayValue = currentValue;
+    if (restProps.value !== undefined) {
+        displayValue = restProps.value;
     }
 
 
+    /**
+     * 
+     * @param currentValue 
+     * @param options 
+     * @returns 
+     */
 
+    const selectOnColor = (
+        currentValue: any,
+        options: SelectItemOptionsType | undefined,
+        onColorProp: IndicatorColor | IndicatorColor[] | undefined
+    ): IndicatorColor => {
 
-    render() {
-        // const { currentValue, isDisabled, isInvisible } = this.state;
-        // const { className, severity, label, raised,
-        //     onColor, offColor, options, topic, command,
-        //     commandArgs, disableTopic, invisibleTopic, inputMode, invert,
-        //     onIcon, offIcon, icon, 
-        //     ...restProps
-        // } = this.props;
+        if (!options || options.length === 0)
+            return IndicatorColor.IndicatorInvalid;
 
+        let colorArray =
+            Array.isArray(onColorProp) ? onColorProp :
+                onColorProp !== undefined ? [onColorProp] : [IndicatorColor.IndicatorInvalid];
 
-        const { currentValue, isDisabled, isInvisible} = this.state;
-        const { label, value, disabled, className,
-            onColor, offColor, options,
-            ...restProps
-        } = this.props;
+        let t = typeof (currentValue);
+        if (t === "boolean") {
+            return currentValue ? colorArray[0] : colorArray.length > 1 ? colorArray[1] : colorArray[0];
+        }
+        else if (t === "number" && options.length > currentValue) {
+            if (colorArray.length > currentValue) {
+                let index = currentValue as number;
+                return colorArray[index];
+            }
+            else {
+                return colorArray[0];
+            }
+        }
+        else if (t === "string") {
+            let index = options.indexOf(currentValue);
+            if (index !== -1 && index < colorArray.length)
+                return colorArray[index];
+            else
+                return colorArray[0];
+        }
 
+        if (onColorProp !== undefined && onColorProp !== null) {
+            return Array.isArray(onColorProp) ? onColorProp[0] : onColorProp as IndicatorColor;
+        }
+        else {
+            return IndicatorColor.IndicatorInvalid;
+        }
 
-        // let btnIcon = currentValue ? onIcon : offIcon;
-        // if (btnIcon === undefined || btnIcon === null || btnIcon.length === 0)
-        //     btnIcon = icon;
+    }
 
 
-        //
-        // Load the value from the proper source.
-        // If the `value` property is undefined, that takes precedence.
-        // 
-        let displayValue = currentValue;
-        if (value !== undefined) {
-            displayValue = value;
+    /**
+     * 
+     * @param currentValue 
+     * @param options 
+     * @returns 
+     */
+    const matchCurrentValue = (currentValue: any, options: SelectItemOptionsType | undefined): any => {
+
+        if (options === undefined || options === null || options.length === 0)
+            return undefined;
+
+        let t = typeof (currentValue);
+        if (t == "boolean") {
+            let b = currentValue as boolean;
+            if (b) {
+                if (options.length > 1)
+                    return options[1];
+                else
+                    return options[0];
+            }
+            else {
+                return options[0];
+            }
         }
-            
-        let color = selectOnColor(displayValue, options, onColor); // displayValue ? onColor : offColor;
-
-        // Handle special cases like undefined state or specific input modes
-        if (displayValue === undefined) {
-            color = IndicatorColor.IndicatorInvalid;
+        else if (t == "number") {
+            let n = currentValue as number;
+            if (n !== undefined && n < options.length) {
+                return options[n];
+            }
+        }
+        else if (t == "string") {
+            // The SelectButton should match to this value automatically, if it's in the
+            // options array. No reason to search twice.
+            return currentValue;
         }
 
-        const isMultiple = options !== undefined && options !== null && options.length > 2;
-
-
-        return (
-            <div className="flex">
-                
-                <style>{`                
-                    ${offColor !== undefined ? `
-                        .togglegroup-selectbutton-container .p-selectbutton .p-button {
-                            background-color: ${offColor};
-                        }
-                    ` : ''}
-                    .togglegroup-selectbutton-container .p-selectbutton .p-button.p-highlight {
-                        background-color: ${color} !important;
-                        border-color: ${color} !important;
-                    }
-                    .togglegroup-selectbutton-container .p-selectbutton .p-highlight {
-                        background-color: ${color} !important;
-                        border-color: ${color} !important;
+
+        return undefined;
+    }
+
+
+    let color = selectOnColor(displayValue, restProps.options, onColor);
+
+    if (displayValue === undefined) {
+        color = IndicatorColor.IndicatorInvalid;
+    }
+
+    const isMultiple = restProps.options !== undefined
+        && restProps.options !== null
+        && restProps.options.length !== undefined
+        && restProps.options.length > 2
+        ;
+
+
+    const toggleGroupName = `${uniqueId}-togglegroup-selectbutton-container`;
+
+    return (
+        <div className="flex">
+            {
+                <style>{`
+                ${offColor !== undefined ? `
+                    .${toggleGroupName} .p-selectbutton .p-button {
+                        background-color: ${offColor};
                     }
-                `}
+                ` : ''}
+                .${toggleGroupName} .p-selectbutton .p-button.p-highlight {
+                    background-color: ${color} !important;
+                    border-color: ${color} !important;
+                }
+            `}
                 </style>
-                <div className='p-inputgroup togglegroup-selectbutton-container'>
-                    <span className="p-inputgroup-addon" style={{flexGrow: 1}}>
+            }
+
+            <div className={toggleGroupName}>
+
+                <div className="p-inputgroup">
+
+                    <span className="p-inputgroup-addon" style={{ flexGrow: 1 }}>
                         {label}
-                    </span>                    
+                    </span>
                     <SelectButton {...restProps}
-                        options={options}
-                        disabled={isDisabled || disabled}     
+                        options={restProps.options}
+                        disabled={isDisabled || restProps.disabled}
                         multiple={isMultiple}
-                        className={`${className || ''} ${displayValue === undefined ? 'p-invalid' : ''}`.trim()}    
-                        {...(isInvisible && { style: { display: 'none' }})}          
-                        value={matchCurrentValue(displayValue, options)}                
-                        allowEmpty={false}                        
-                        onMouseDown={() => this.handleOnPressed() }
-                        onTouchStart={() => this.handleOnPressed() }
-                        onMouseUp={() => this.handleOnReleased() }
-                        onTouchEnd={() => this.handleOnReleased() }                        
+                        className={clsx(uniqueId, restProps.className, { 'p-invalid': restProps.value === undefined })}
+                        style={isInvisible ? { display: 'none' } : {}}
+                        value={matchCurrentValue(displayValue, restProps.options)}
+                        allowEmpty={false}
+                        onMouseDown={handleOnPressed}
+                        onTouchStart={handleOnPressed}
+                        onMouseUp={handleOnReleased}
+                        onTouchEnd={handleOnReleased}
                     />
-                </div>                    
+                </div>
             </div>
-        );
-    }
+        </div>
+    );
+};
 
-}
+export default ToggleGroup;

package/src/components/ValueInput.tsx

@@ -2,18 +2,18 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-21 09:37:17
+ * Last Modified: 2024-04-16 19:06:17
  * -----
  * 
  */
 
 
-import React from "react";
+import React, { createRef } from "react";
 
-import { InputNumber} from 'primereact/inputnumber';
+import { InputNumber } from 'primereact/inputnumber';
 import { Button } from "primereact/button";
 
-import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { EventEmitterContext } from "../core/EventEmitterContext";
 
 /**
  * Properties of the ValueInput component.
@@ -23,23 +23,23 @@ interface ValueInputProps {
     /**
      * The label for the ValueInput field.
      */
-    label : React.ReactNode | undefined;
+    label: React.ReactNode | undefined;
 
 
     /**
      * The value for the field.
      */
-    value : number | null;
+    value: number | null;
 
     /**
      * Minimum value for the field.
      */
-    min : number | undefined;
+    min: number | undefined;
 
     /**
      * Minimum value for the field.
      */
-    max : number | undefined;
+    max: number | undefined;
 
     /**
      * Minimum number of decimal points. The user will not
@@ -49,7 +49,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 0
      */
-    minPrecision : number | undefined;
+    minPrecision: number | undefined;
 
 
     /**
@@ -58,7 +58,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 3
      */
-    maxPrecision : number | undefined;
+    maxPrecision: number | undefined;
 
 
     /**
@@ -67,7 +67,7 @@ interface ValueInputProps {
      * currency type using the currency property.
      * @default "decimal"
      */
-    mode : "currency" | "decimal" | undefined;
+    mode: "currency" | "decimal" | undefined;
 
 
     /**
@@ -78,19 +78,19 @@ interface ValueInputProps {
      * 
      * @default "USD"
      */
-    currency : string;
-    
+    currency: string;
+
     /**
      * An optional prefix before the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    prefix : string | undefined;
+    prefix: string | undefined;
 
     /**
      * An optional suffix after the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    suffix : string | undefined;
+    suffix: string | undefined;
 
     /**
      * Set true to display buttons to increment/decrement the value.
@@ -98,12 +98,12 @@ interface ValueInputProps {
      * 
      * @default false
      */
-    showButtons : boolean;
+    showButtons: boolean;
 
     /**
      * The amount clicking an increment/decrement buttion will change the value.
      */
-    step : number | undefined;
+    step: number | undefined;
 
 
     /**
@@ -112,40 +112,41 @@ interface ValueInputProps {
      * 
      * @default "en-US"
      */
-    locale : string | undefined;
+    locale: string | undefined;
 
     /**
      * A small, advisory text below the field.
      */
-    description : React.ReactNode | undefined;
+    description: React.ReactNode | undefined;
 
     /**
      * If true, all functions of the field will be disabled.
      */
-    disabled : boolean | undefined;
-    
+    disabled: boolean | undefined;
+
     /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
-    dispatchTopic : string | undefined;
+    dispatchTopic: string | undefined;
 
     /**
      * Placeholder string to display if the value is empty.
      */
-    placeholder : string | undefined;
+    placeholder: string | undefined;
 
     /**
      * The user has accepted a new value.
      * @param newValue New value accepted by the user.
-     */ 
-    onValueChanged?(newValue: number) : void;
+     */
+    onValueChanged?(newValue: number): void;
 }
 
 /**
  * State variables of the ValueInput component.
  */
 interface ValueInputState {
-    
-    entryValue : number | null;
-    editing : boolean;
+
+    entryValue: number | null;
+    currentValue: number | null;
+    editing: boolean;
 }
 
 
@@ -165,67 +166,97 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     declare context: React.ContextType<typeof EventEmitterContext>;
 
 
-    
+
 
     /**
      * Default properties for the component.
      */
     static defaultProps = {
-        label : '',        
-        value : undefined,
-        keyFilter : undefined,
-        writeTopic : undefined,
-        onValueChanged : undefined,
+        label: '',
+        value: undefined,
+        keyFilter: undefined,
+        writeTopic: undefined,
+        onValueChanged: undefined,
         description: undefined,
         prefix: undefined,
-        suffix : undefined,
-        disabled : false,
-        dispatchTopic : undefined,
-        placeholder : undefined,
-        validator : undefined,
-        min : undefined,
-        max : undefined,
-        minPrecision : 0,
-        maxPrecision : 3,
-        mode : "decimal",
-        showButtons : false,
-        step : 1,
-        locale : "en-US",
-        currency : "USD"
+        suffix: undefined,
+        disabled: false,
+        dispatchTopic: undefined,
+        placeholder: undefined,
+        validator: undefined,
+        min: undefined,
+        max: undefined,
+        minPrecision: 0,
+        maxPrecision: 3,
+        mode: "decimal",
+        showButtons: false,
+        step: 1,
+        locale: "en-US",
+        currency: "USD"
     };
+    inputRef: React.RefObject<HTMLInputElement>;
 
     /**
      * 
      * @param {FooterViewProps} props 
      */
-    constructor(props : ValueInputProps) {
+    constructor(props: ValueInputProps) {
         super(props);
         this.state = {
-            entryValue : props.value,
-            editing : false
+            entryValue: props.value,
+            currentValue: props.value,
+            editing: false
         };
+
+        this.inputRef = createRef();
     }
 
     /**
      * The component has been loaded into the DOM.
      */
-    componentDidMount() {        
-    }    
+    componentDidMount() {
+    }
+
+
+    private onBufferValue(val: number | null) {
+        if (val === null)
+            return;
 
-    
+        if (!this.state.editing) {
+            this.setState({
+                entryValue: this.state.currentValue,
+                editing: true
+            }, () => {
+
+                setTimeout(() => {
+                    if (this.inputRef.current) {
+                      this.inputRef.current.focus();
+                    }
+
+                  }, 0);
+
+            }
+            );
+        }
+        else {
+            this.setState({
+                entryValue: val
+            });
+        }
+    }
 
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */
     private onAcceptValue() {
-        if (this.state.entryValue !== null ) {
-            this.setState({editing : false});
-            
+        if (this.state.entryValue !== null) {
+            this.setState({ editing: false, currentValue: this.state.entryValue });
+
             if (this.props.onValueChanged)
                 this.props.onValueChanged(this.state.entryValue);
 
             if (this.props.dispatchTopic !== undefined) {
-                this.context.dispatch({topic: this.props.dispatchTopic, payload:this.state.entryValue});
+                this.context.dispatch({ topic: this.props.dispatchTopic, payload: this.state.entryValue });
             }
 
         }
@@ -235,22 +266,29 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
      * The user wishes to reset/cancel the previous value.
      */
     private onResetValue() {
-        this.setState({
-            entryValue: this.props.value, 
-            editing : false
-        });
+
+        if (this.state.editing) {
+
+            this.setState({
+                currentValue: this.state.currentValue,
+                entryValue: this.state.currentValue,
+                editing: false
+            });
+        }
     }
 
 
     render() {
 
-        return(
+        return (
             <div>
                 <div className="p-inputgroup flex-1" >
                     <span className="p-inputgroup-addon">
                         {this.props.label}
-                    </span>                  
-                    <InputNumber                         
+                    </span>
+                    <InputNumber
+                        inputRef={this.inputRef}
+                        key={this.state.editing ? "editing" : "not-editing"}
                         min={this.props.min}
                         max={this.props.max}
                         minFractionDigits={this.props.minPrecision}
@@ -260,14 +298,14 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                         suffix={this.props.suffix}
                         showButtons={this.props.showButtons}
                         step={this.props.step}
-                        placeholder={this.props.placeholder} 
-                        value={this.state.entryValue}
-                        onChange={(e) => {this.setState({entryValue: e.value, editing : true})} }
+                        placeholder={this.props.placeholder}
+                        value={this.state.currentValue}
+                        onChange={(e) => { this.onBufferValue(e.value) }}
 
                         buttonLayout="horizontal"
-                        decrementButtonClassName="p-button-danger" 
-                        incrementButtonClassName="p-button-success" 
-                        incrementButtonIcon="pi pi-plus" 
+                        decrementButtonClassName="p-button-danger"
+                        incrementButtonClassName="p-button-success"
+                        incrementButtonIcon="pi pi-plus"
                         decrementButtonIcon="pi pi-minus"
 
                         locale="en-US"
@@ -280,32 +318,35 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                             else if (e.key === 'Escape') {
                                 this.onResetValue();
                             }
-                        }}     
-                        disabled={this.props.disabled}                                           
-                    />                  
-                    <Button 
-                        icon="pi pi-check" 
+                        }}
+                        disabled={this.props.disabled}
+                        autoFocus={false}
+                    />
+                    <Button
+                        icon="pi pi-check"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-success" 
-                        onClick={() => this.onAcceptValue()} 
+                        className="p-button-success"
+                        onClick={() => this.onAcceptValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
 
-                    <Button 
-                        icon="pi pi-times" 
+                    <Button
+                        icon="pi pi-times"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-danger" 
-                        onClickCapture={()=>this.onResetValue()} 
+                        className="p-button-danger"
+                        onClickCapture={() => this.onResetValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
                 </div>
-                
+
                 {this.props.description !== undefined &&
                     <small>{this.props.description}</small>
                 }
-                
+
 
             </div>