@adcops/autocore-react 3.0.40 → 3.3.2

package/src/components/TextInput.tsx

@@ -2,275 +2,194 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-05-17 10:04:53
+ * Last Modified: 2025-09-09 15:32:12
  * -----
  * 
  */
 
-
-import React from "react";
-
-import { InputText, InputTextProps } from 'primereact/inputtext';
+import React, { useEffect, useMemo, useState } from "react";
+import { InputText, type InputTextProps } from "primereact/inputtext";
 import { Button } from "primereact/button";
+import type { KeyFilterType } from "primereact/keyfilter";
 
-import { EventEmitterContext } from "../core/EventEmitterContext.js";
-import { KeyFilterType } from "primereact/keyfilter";
+// Props
+interface TextInputProps extends Omit<InputTextProps, "prefix" | "value" | "onChange"> {
+    /** The label for the field (shown in an addon). */
+    label?: React.ReactNode;
 
-/**
- * Properties of the component.
- */
-interface TextInputProps extends Omit<InputTextProps, "prefix"> {
+    /** Controlled value from parent. */
+    value?: string;
 
     /**
-     * The label for the field.
+     * PrimeReact key filter (lowercase) or RegExp.
+     * Examples: "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"
      */
-    label : React.ReactNode | undefined;
+    keyfilter?: KeyFilterType;
 
+    /** Optional prefix addon before the input. */
+    prefix?: React.ReactNode;
 
-    /**
-     * The value for the field.
-     */
-    value : string | undefined;
+    /** Optional suffix addon after the input. */
+    suffix?: React.ReactNode;
 
+    /** Small, advisory text below the field. */
+    description?: React.ReactNode;
 
-    /** 
-     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter. 
-     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
-     */
-    keyFilter : KeyFilterType | undefined;
-    
-    
-    /**
-     * An optional prefix before the data entry field.
-     */
-    prefix : React.ReactNode | undefined;
+    /** Disable entire control. */
+    disabled?: boolean;
 
-    /**
-     * An optional suffix after the data entry field.
-     */
-    suffix : React.ReactNode | undefined;
+    /** Placeholder string. */
+    placeholder?: string;
 
-    /**
-     * A small, advisory text below the field.
-     */
-    description : React.ReactNode | undefined;
+    /** Called when the user ACCEPTS a new value (Enter or ✔). */
+    onValueChanged?(newValue: string): void;
 
-    /**
-     * If true, all functions of the field will be disabled.
-     */
-    disabled : boolean | undefined;
-    
-    /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
-    dispatchTopic : string | undefined;
-
-    /**
-     * Placeholder string to display if the value is empty.
-     */
-    placeholder : string | undefined;
-
-    /**
-     * The user has accepted a new value.
-     * @param newValue New value accepted by the user.
-     */ 
-    onValueChanged?(newValue: string) : void;
-    /** Regular expression used to validate the value before it is broadcast */
-    validator : RegExp;
+    /** Regex validation used on accept (not on each keystroke). */
+    validator?: RegExp;
 }
 
-/**
- * State variables of the component.
- */
-interface TextInputState {
-    
-    entryValue : string | undefined;
-    isValid : boolean;
-    editing : boolean;
+function toStr(v?: string | null) {
+    return v ?? "";
 }
 
-
 /**
- * A convenient field with all the usual features of inputing values. 
- * Wraps the common features of use of a InputText, p-inputgroup, some icon buttons,
- * accepting and rejecting values and keyboard management.
+ * A styled text input field with support for labels, prefixes/suffixes,
+ * validation, key filters, and accept/reset actions.
+ *
+ * This component wraps PrimeReact's <InputText> in a p-inputgroup with
+ * optional ✔ and ✖ buttons for committing or cancelling edits.
+ *
+ * Features:
+ * - Label, prefix, and suffix addons for context
+ * - Optional `keyfilter` for keystroke-level restrictions (PrimeReact presets or RegExp)
+ * - Optional `validator` RegExp applied when accepting a value
+ * - Calls `onValueChanged(newValue)` only when the user accepts (Enter key or ✔ button)
+ * - Escape key or ✖ button reverts to the last accepted value
+ * - Controlled input: always provide a string `value` (defaults to `""`)
+ *
+ * ## Example
+ *
+ * ```tsx
+ * import { useState } from "react";
+ * import { TextInput } from "./TextInput";
+ *
+ * export function ExampleForm() {
+ *   const [partNumber, setPartNumber] = useState("ADC-0001");
+ *
+ *   return (
+ *     <TextInput
+ *       label="Part Number"
+ *       value={partNumber}
+ *       onValueChanged={setPartNumber}
+ *       placeholder="Enter part number"
+ *       keyfilter="alphanum"
+ *       validator={/^[A-Z0-9-]+$/}
+ *       description="Use only uppercase letters, digits, and dashes."
+ *       prefix={<i className="pi pi-tag" />}
+ *     />
+ *   );
+ * }
+ * ```
  */
-export class TextInput extends React.Component<TextInputProps, TextInputState> {
-
-    // Here's an example of using the Application-wide EventEmitter con
-    // Define the contextType for the class to access the context
-    static contextType = EventEmitterContext;
-    // After specifying contextType, you can declare the context's type for the TypeScript compiler.
-    // Basically, we're telling TypeScript the type of the context; this line doesn't
-    // actually do any linking linking to the EventEmitterContext.    
-    declare context: React.ContextType<typeof EventEmitterContext>;
-
-
-    
-
-    /**
-     * Default properties for the component.
-     */
-    static defaultProps = {
-        label : '',        
-        value : undefined,
-        keyFilter : undefined,
-        writeTopic : undefined,
-        onValueChanged : undefined,
-        description: undefined,
-        prefix: undefined,
-        suffix : undefined,
-        disabled : false,
-        dispatchTopic : undefined,
-        placeholder : undefined,
-        validator : undefined
-    };
-
-    /**
-     * 
-     * @param {FooterViewProps} props 
-     */
-    constructor(props : TextInputProps) {
-        super(props);
-        this.state = {
-            entryValue : props.value,
-            isValid : props.value !== undefined ? this.validateValue(props.value) : false,
-            editing : false
-        };
+export const TextInput: React.FC<TextInputProps> = (props) => {
+    const {
+        label,
+        value,
+        keyfilter, // <- keep lowercase for PrimeReact
+        prefix,
+        suffix,
+        description,
+        disabled = false,
+        placeholder,
+        onValueChanged,
+        validator,
+        // DO NOT forward custom props below to the <InputText>
+        // Everything else is safe to spread.
+        ...restInputProps
+    } = props;
+
+
+    // Local edit buffer & validity; parent value is the source of truth after "accept".
+    const [entryValue, setEntryValue] = useState<string>(toStr(value));
+    const [editing, setEditing] = useState<boolean>(false);
+    const [isValid, setIsValid] = useState<boolean>(value ? validateValue(value, validator) : true);
+
+    // Sync incoming prop value (e.g., external changes/reset)
+    useEffect(() => {
+        setEntryValue(toStr(value));
+        setEditing(false);
+        setIsValid(value ? validateValue(value, validator) : true);
+    }, [value, validator]);
+
+    // Validate only when asked to accept
+    function validateValue(val: string, re?: RegExp) {
+        if (!re) return true;
+        return re.test(val);
     }
 
-    /**
-     * The component has been loaded into the DOM.
-     */
-    componentDidMount() {        
-    }    
-
-
-    componentDidUpdate(prevProps: TextInputProps) {
-        // Check if the value prop has changed
-        if (prevProps.value !== this.props.value) {
-            this.setState({
-                entryValue: this.props.value,
-                editing: false 
-            });
-        }
-    }        
-    
-
-    /**
-     * Check the new value against the validator RegEx, if one was specified.
-     * @param val The new value.
-     * @returns True if no validator specified or the value is valid, false if not valid.
-     */
-    private validateValue = (val : string) => {
-
-        if (this.props.validator !== undefined && this.props.validator !== null) {
-            return this.props.validator.test(val);
-        }
-        else {
-            return true;
-        }
-        
-    };    
-
+    function accept() {
+        const val = entryValue;
+        const ok = validateValue(val, validator);
+        setIsValid(ok);
+        if (!ok) return;
 
-    /**
-     * The user has elected to accept the input value. Validate and store, if valid.
-     */
-    private onAcceptValue() {
-        if (this.state.entryValue !== undefined ) {
-            if (this.validateValue(this.state.entryValue) ) {
-                this.setState({isValid : true, editing : false});
-                
-                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});
-                }
-
-            }
-            else {
-                this.setState({isValid : false});            
-            }    
-        }
-        else {
-            this.setState({isValid: false});            
-        }
+        setEditing(false);
+        onValueChanged?.(val);
     }
 
-    /**
-     * The user wishes to reset/cancel the previous value.
-     */
-    private onResetValue() {
-        this.setState({
-            entryValue: this.props.value, 
-            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
-            editing : false
-        });
+    function reset() {
+        const v = toStr(value);
+        setEntryValue(v);
+        setEditing(false);
+        setIsValid(v ? validateValue(v, validator) : true);
     }
 
-
-    render() {
-
-        const { prefix, ...restProps} = this.props;
-
-        return(
-            <div>
-                <div className="p-inputgroup flex-1" >
-                    <span className="p-inputgroup-addon">
-                        {this.props.label}
-                    </span>
-                    { this.props.prefix !== undefined && 
-                        <span className="p-inputgroup-addon">
-                            {this.props.prefix}
-                        </span>
-                    }                    
-                    <InputText 
-                        {...restProps}
-                        keyfilter={this.props.keyFilter}                         
-                        placeholder={this.props.placeholder} 
-                        value={this.state.entryValue}
-                        onChange={(e) => {this.setState({entryValue: e.target.value, editing : true})} }
-                        className={this.state.isValid ? '' : 'p-invalid'}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                this.onAcceptValue();
-                            }
-                            else if (e.key === 'Escape') {
-                                this.onResetValue();
-                            }
-                        }}     
-                        disabled={this.props.disabled}                   
-                    />
-                    { this.props.suffix !== undefined && 
-                        <span className="p-inputgroup-addon">
-                            {this.props.suffix}
-                        </span>
-                    }                    
-                    <Button 
-                        icon="pi pi-check" 
-                        disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-success" 
-                        onClick={() => this.onAcceptValue()} 
-                        visible={this.state.editing}
-                    />
-
-                    <Button 
-                        icon="pi pi-times" 
-                        disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-danger" 
-                        onClickCapture={()=>this.onResetValue()} 
-                        visible={this.state.editing}
-                    />
-                </div>
-                
-                {this.props.description !== undefined &&
-                    <small>{this.props.description}</small>
-                }
-                
-
+    // Keep the DOM value a string at all times (no uncontrolled→controlled flip)
+    const domValue = useMemo(() => toStr(entryValue), [entryValue]);
+
+    return (
+        <div>
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">{label}</span>
+
+                {prefix !== undefined && <span className="p-inputgroup-addon">{prefix}</span>}
+
+                <InputText
+                    {...restInputProps}
+                    keyfilter={keyfilter}
+                    placeholder={placeholder}
+                    value={domValue}
+                    onChange={(e) => {
+                        setEntryValue(e.target.value);
+                        setEditing(true);
+                    }}
+                    className={isValid ? restInputProps.className ?? "" : `${restInputProps.className ?? ""} p-invalid`}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") accept();
+                        else if (e.key === "Escape") reset();
+                    }}
+                    disabled={disabled}
+                />
+
+                {suffix !== undefined && <span className="p-inputgroup-addon">{suffix}</span>}
+
+                <Button
+                    icon="pi pi-check"
+                    disabled={disabled || !editing}
+                    className="p-button-success"
+                    onClick={accept}
+                    visible={editing}
+                />
+                <Button
+                    icon="pi pi-times"
+                    disabled={disabled || !editing}
+                    className="p-button-danger"
+                    onClick={reset}
+                    visible={editing}
+                />
             </div>
 
-        );
-    }
-
-}
+            {description !== undefined && <small>{description}</small>}
+        </div>
+    );
+};

package/src/components/ToggleGroup.tsx

@@ -2,14 +2,14 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 10:14:48
  * -----
- * Last Modified: 2024-04-29 10:43:49
+ * Last Modified: 2025-09-05 14:51:30
  * -----
  * 
  */
 
 import React, { useState, useEffect, useContext } from 'react';
-import { SelectButton, SelectButtonProps } from 'primereact/selectbutton';
-import {SelectItemOptionsType} from "primereact/selectitem";
+import { SelectButton, type SelectButtonProps } from 'primereact/selectbutton';
+import type {SelectItemOptionsType} from "primereact/selectitem";
 
 import { EventEmitterContext} from '../core/EventEmitterContext';
 import {IndicatorColor} from "../core/IndicatorColor";

package/src/components/ValueDisplay.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-05-01 12:14:27
+ * Last Modified: 2025-09-05 14:51:23
  * Modified By: ADC
  * -----
  * 
@@ -14,9 +14,9 @@ import { Component } from 'react';
 //import useFitText from 'use-fit-text';
 import { format as numerableFormat } from 'numerable';
 import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
 
-import { IPositionContext } from '../core/PositionContext';
+import type { IPositionContext } from '../core/PositionContext';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
 
 /**
@@ -233,4 +233,4 @@ class ValueDisplay extends Component<Props, State> {
 
 }
 
-export { ValueDisplay, NumerableFormatOptions };
+export { ValueDisplay, type NumerableFormatOptions };

package/src/components/ValueIndicator.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-03-22 06:42:57
+ * Last Modified: 2025-09-05 14:50:58
  * Modified By: ADC
  * -----
  * 
@@ -133,4 +133,4 @@ export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicato
 }
 
 export default ValueIndicator;
-export { NumerableFormatOptions };
+export { type NumerableFormatOptions };

package/src/components/ValueInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-05-17 10:01:45
+ * Last Modified: 2025-09-05 14:50:52
  * -----
  * 
  */
@@ -58,7 +58,7 @@
 
 
 import React, { useState, useRef, useEffect, useContext } from 'react';
-import { InputNumber, InputNumberProps } from 'primereact/inputnumber';
+import { InputNumber, type InputNumberProps } from 'primereact/inputnumber';
 import { EventEmitterContext } from "../core/EventEmitterContext";
 import { Button } from 'primereact/button';
 

package/src/core/ActionMode.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 10:28:38
  * -----
- * Last Modified: 2024-03-12 10:28:47
+ * Last Modified: 2026-01-29 09:31:30
  * -----
  * 
  */