@adcops/autocore-react 3.5.11 → 3.5.15

package/dist/components/varpick/VariableInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableInput.d.ts","sourceRoot":"","sources":["../../../src/components/varpick/VariableInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGH,KAAK,OAAO,EACZ,KAAK,UAAU,EAElB,MAAM,0BAA0B,CAAC;AAElC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6EAA6E;IAC7E,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyEtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VariableInput.d.ts","sourceRoot":"","sources":["../../../src/components/varpick/VariableInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAGH,KAAK,OAAO,EACZ,KAAK,UAAU,EAElB,MAAM,0BAA0B,CAAC;AAElC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6EAA6E;IAC7E,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0EtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/varpick/VariableInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import*as React from"react";import{Button}from"primereact/button";import{InputText}from"primereact/inputtext";import{applyInsert,queryFromCaret}from"@adcops/autocore-varpick";import{VariablePicker}from"./VariablePicker";import"./varpick.css";export const VariableInput=({value:e,onChange:t,catalog:a,mode:r="replace",pickerTitle:n,pickerHint:c,ariaLabel:i,placeholder:s,className:l,disabled:o,invalid:u})=>{const p=React.useRef(null),m=React.useRef({start:0,end:0}),[d,b]=React.useState(!1),[x,v]=React.useState([]),f=()=>{const e=p.current;e&&(m.current={start:e.selectionStart??e.value.length,end:e.selectionEnd??e.value.length})};return _jsxs("div",{className:"ac-varpick__input",children:[_jsx(InputText,{ref:p,value:e,placeholder:s,disabled:o,className:`${l??""}${u?" p-invalid":""}`,onChange:e=>t(e.target.value),onSelect:f,onFocus:f}),_jsx(Button,{type:"button",icon:"pi pi-list","aria-label":i,disabled:o,className:"p-button-outlined",onClick:()=>{v(a()),b(!0)}}),d&&_jsx(VariablePicker,{visible:!0,catalog:x,title:n,hint:c,initialQuery:"caret"===r?queryFromCaret(e,m.current.start,m.current.end):"",onCancel:()=>b(!1),onPick:a=>{const{start:n,end:c}=m.current,i=applyInsert(e,a,r,n,c);t(i.value),b(!1),requestAnimationFrame(()=>{const e=p.current;e&&(e.focus(),e.setSelectionRange(i.caret,i.caret),m.current={start:i.caret,end:i.caret})})}})]})};export default VariableInput;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import*as React from"react";import{Button}from"primereact/button";import{InputText}from"primereact/inputtext";import{Variable}from"lucide-react";import{applyInsert,queryFromCaret}from"@adcops/autocore-varpick";import{VariablePicker}from"./VariablePicker";import"./varpick.css";export const VariableInput=({value:e,onChange:t,catalog:a,mode:r="replace",pickerTitle:i,pickerHint:n,ariaLabel:c,placeholder:s,className:l,disabled:o,invalid:u})=>{const p=React.useRef(null),m=React.useRef({start:0,end:0}),[d,b]=React.useState(!1),[x,v]=React.useState([]),f=()=>{const e=p.current;e&&(m.current={start:e.selectionStart??e.value.length,end:e.selectionEnd??e.value.length})};return _jsxs("div",{className:"ac-varpick__input",children:[_jsx(InputText,{ref:p,value:e,placeholder:s,disabled:o,className:`${l??""}${u?" p-invalid":""}`,onChange:e=>t(e.target.value),onSelect:f,onFocus:f}),_jsx(Button,{type:"button","aria-label":c,disabled:o,className:"p-button-outlined",onClick:()=>{v(a()),b(!0)},children:_jsx(Variable,{size:16,"aria-hidden":!0})}),d&&_jsx(VariablePicker,{visible:!0,catalog:x,title:i,hint:n,initialQuery:"caret"===r?queryFromCaret(e,m.current.start,m.current.end):"",onCancel:()=>b(!1),onPick:a=>{const{start:i,end:n}=m.current,c=applyInsert(e,a,r,i,n);t(c.value),b(!1),requestAnimationFrame(()=>{const e=p.current;e&&(e.focus(),e.setSelectionRange(c.caret,c.caret),m.current={start:c.caret,end:c.caret})})}})]})};export default VariableInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adcops/autocore-react",
-  "version": "3.5.11",
+  "version": "3.5.15",
   "description": "A React component library for industrial user interfaces.",
   "private": false,
   "type": "module",
@@ -63,6 +63,7 @@
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.2.0",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
     "numerable": "^0.3.15",
     "react-blockly": "^8.1.2",
     "react-chartjs-2": "^5.3.0",

package/src/components/varpick/VariableInput.tsx

@@ -12,6 +12,12 @@
 import * as React from 'react';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
+// The same glyph the sequence editor puts on the same control (its
+// `IconVariables`). These two pickers sit one tab apart in the same
+// application, so a different icon for the identical action reads as a
+// different feature. Lucide rather than a PrimeIcon because that is the set
+// autocore-ui uses, so the 4.0 port is an import path and not a redraw.
+import { Variable } from 'lucide-react';
 import {
     applyInsert,
     queryFromCaret,
@@ -98,12 +104,13 @@ export const VariableInput: React.FC<VariableInputProps> = ({
             />
             <Button
                 type="button"
-                icon="pi pi-list"
                 aria-label={ariaLabel}
                 disabled={disabled}
                 className="p-button-outlined"
                 onClick={() => { setBuilt(catalog()); setOpen(true); }}
-            />
+            >
+                <Variable size={16} aria-hidden />
+            </Button>
             {open && (
                 <VariablePicker
                     visible

package/tools/tests/dist/{TestFieldDialog-C4mKVh7q.js → TestFieldDialog-BvHAr2GQ.js}

@@ -31580,6 +31580,159 @@ var VariablePicker = ({ visible, catalog, title, hint, initialQuery, onCancel, o
 	});
 };
 //#endregion
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+	return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+//#endregion
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+//#endregion
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var toCamelCase = (string) => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
+//#endregion
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var toPascalCase = (string) => {
+	const camelCase = toCamelCase(string);
+	return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+//#endregion
+//#region node_modules/lucide-react/dist/esm/defaultAttributes.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var defaultAttributes = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+//#endregion
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var hasA11yProp = (props) => {
+	for (const prop in props) if (prop.startsWith("aria-") || prop === "role" || prop === "title") return true;
+	return false;
+};
+//#endregion
+//#region node_modules/lucide-react/dist/esm/context.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var LucideContext = (0, import_react.createContext)({});
+var useLucideContext = () => (0, import_react.useContext)(LucideContext);
+//#endregion
+//#region node_modules/lucide-react/dist/esm/Icon.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Icon = (0, import_react.forwardRef)(({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+	const { size: contextSize = 24, strokeWidth: contextStrokeWidth = 2, absoluteStrokeWidth: contextAbsoluteStrokeWidth = false, color: contextColor = "currentColor", className: contextClass = "" } = useLucideContext() ?? {};
+	const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+	return (0, import_react.createElement)("svg", {
+		ref,
+		...defaultAttributes,
+		width: size ?? contextSize ?? defaultAttributes.width,
+		height: size ?? contextSize ?? defaultAttributes.height,
+		stroke: color ?? contextColor,
+		strokeWidth: calculatedStrokeWidth,
+		className: mergeClasses("lucide", contextClass, className),
+		...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+		...rest
+	}, [...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)), ...Array.isArray(children) ? children : [children]]);
+});
+//#endregion
+//#region node_modules/lucide-react/dist/esm/createLucideIcon.mjs
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var createLucideIcon = (iconName, iconNode) => {
+	const Component = (0, import_react.forwardRef)(({ className, ...props }, ref) => (0, import_react.createElement)(Icon, {
+		ref,
+		iconNode,
+		className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
+		...props
+	}));
+	Component.displayName = toPascalCase(iconName);
+	return Component;
+};
+/**
+* @license lucide-react v1.39.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Variable = createLucideIcon("variable", [
+	["path", {
+		d: "M8 21s-4-3-4-9 4-9 4-9",
+		key: "uto9ud"
+	}],
+	["path", {
+		d: "M16 3s4 3 4 9-4 9-4 9",
+		key: "4w2vsq"
+	}],
+	["line", {
+		x1: "15",
+		x2: "9",
+		y1: "9",
+		y2: "15",
+		key: "f7djnv"
+	}],
+	["line", {
+		x1: "9",
+		x2: "15",
+		y1: "9",
+		y2: "15",
+		key: "1shsy8"
+	}]
+]);
+//#endregion
 //#region src/components/varpick/VariableInput.tsx
 /**
 * VariableInput — a text input with a picker button.
@@ -31638,14 +31791,17 @@ var VariableInput = ({ value, onChange, catalog, mode = "replace", pickerTitle,
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 				type: "button",
-				icon: "pi pi-list",
 				"aria-label": ariaLabel,
 				disabled,
 				className: "p-button-outlined",
 				onClick: () => {
 					setBuilt(catalog());
 					setOpen(true);
-				}
+				},
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Variable, {
+					size: 16,
+					"aria-hidden": true
+				})
 			}),
 			open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariablePicker, {
 				visible: true,

package/tools/tests/dist/tis-editor.entry.js

@@ -1,4 +1,4 @@
-import { A as useMergeProps, B as PrimeReact$2, C as Portal, D as ComponentBase, E as IconBase, F as useUnmountEffect, G as IconUtils, H as ariaLabel$2, I as useUpdateEffect, J as ZIndexUtils, K as ObjectUtils, L as FilterMatchMode$2, M as useOverlayListener, N as usePrevious, O as useHandleStyle, P as useStyle, Q as __toESM, R as FilterOperator, S as Tooltip, T as SpinnerIcon, U as localeOption, V as PrimeReactContext, W as DomHandler, X as require_client, Y as classNames, Z as require_react, _ as OverlayService, b as InputNumber, c as useEditDraft, d as require_jsx_runtime, f as Button, g as CSSTransition, h as VirtualScroller, i as chartFieldCatalog, j as useMountEffect, k as useEventListener, l as FormRow, m as CheckIcon, p as Dropdown, q as UniqueComponentId, s as VariableInput, t as TestFieldDialog, u as Dialog, v as TimesIcon, w as Ripple, x as InputText, y as ChevronDownIcon, z as FilterService } from "./TestFieldDialog-C4mKVh7q.js";
+import { A as useMergeProps, B as PrimeReact$2, C as Portal, D as ComponentBase, E as IconBase, F as useUnmountEffect, G as IconUtils, H as ariaLabel$2, I as useUpdateEffect, J as ZIndexUtils, K as ObjectUtils, L as FilterMatchMode$2, M as useOverlayListener, N as usePrevious, O as useHandleStyle, P as useStyle, Q as __toESM, R as FilterOperator, S as Tooltip, T as SpinnerIcon, U as localeOption, V as PrimeReactContext, W as DomHandler, X as require_client, Y as classNames, Z as require_react, _ as OverlayService, b as InputNumber, c as useEditDraft, d as require_jsx_runtime, f as Button, g as CSSTransition, h as VirtualScroller, i as chartFieldCatalog, j as useMountEffect, k as useEventListener, l as FormRow, m as CheckIcon, p as Dropdown, q as UniqueComponentId, s as VariableInput, t as TestFieldDialog, u as Dialog, v as TimesIcon, w as Ripple, x as InputText, y as ChevronDownIcon, z as FilterService } from "./TestFieldDialog-BvHAr2GQ.js";
 //#region node_modules/primereact/icons/arrowdown/index.esm.js
 var import_client = require_client();
 var import_react = /* @__PURE__ */ __toESM(require_react());

package/tools/tests/dist/varpick.entry.js

@@ -1,4 +1,4 @@
-import { Q as __toESM, X as require_client, Z as require_react, a as configSourceCatalog, d as require_jsx_runtime, i as chartFieldCatalog, n as AuthoringContext, o as cycleSourceCatalog, r as boundCatalog, t as TestFieldDialog } from "./TestFieldDialog-C4mKVh7q.js";
+import { Q as __toESM, X as require_client, Z as require_react, a as configSourceCatalog, d as require_jsx_runtime, i as chartFieldCatalog, n as AuthoringContext, o as cycleSourceCatalog, r as boundCatalog, t as TestFieldDialog } from "./TestFieldDialog-BvHAr2GQ.js";
 //#region src/hooks/useSequenceProducers.ts
 var import_client = require_client();
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);

package/tools/tests/varpick.test.mjs

@@ -158,6 +158,13 @@ const buttonLabelled = (root, text) =>
 ok('every field dialog input still renders', inputIn('Source') !== undefined);
 ok('Source has a picker button',
     pickerButtonIn('Source')?.getAttribute('aria-label') === 'Choose a source for this field');
+// The Lucide glyph, matching the sequence editor's button for the same action.
+// PrimeReact's Button takes an `icon` STRING for PrimeIcons, so the icon is
+// passed as a child instead — worth asserting, because a Button that silently
+// dropped its children would leave an unlabelled empty square.
+ok('the picker button renders the variable icon',
+    pickerButtonIn('Source')?.querySelector('svg.lucide-variable') !== null,
+    pickerButtonIn('Source')?.innerHTML?.slice(0, 120));
 
 // -- a cycle field picks a SEQUENCE producer, which clears Source ------------
 setValue(inputIn('Source'), 'gm.stale_binding');