@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260725061513 → 0.8.1-dev.20260729064437

package/dist/{InputControlClient-IKTP3566.mjs → InputControlClient-VFHLKYVF.mjs}

@@ -21,12 +21,12 @@ import {
   Select_default,
   Switcher_default,
   TimeInput_default
-} from "./chunk-6GS7N4EV.mjs";
+} from "./chunk-6JFCMNX2.mjs";
 import {
   Hyperlink,
   Icon_default,
   InputControlType_default
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 import {
   Button_default,
   ClientButton_default

package/dist/{Pagination-Y7PNQUJ2.mjs → Pagination-YKNCYVXV.mjs}

@@ -3,12 +3,12 @@
 "use client";
 import {
   OdataBuilder
-} from "./chunk-6MHIZOLR.mjs";
+} from "./chunk-KL2YKXXS.mjs";
 import {
   Constants,
   Hyperlink,
   Icon_default
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 import "./chunk-IMNQO57B.mjs";
 
 // src/components/Pagination.tsx

package/dist/{chunk-6GS7N4EV.mjs → chunk-6JFCMNX2.mjs}

@@ -2,7 +2,7 @@
 
 import {
   Icon_default
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 
 // src/components/controls/edit/MultilineTextInput.tsx
 import React from "react";
@@ -662,50 +662,73 @@ var ColorInput = (props) => {
 var ColorInput_default = ColorInput;
 
 // src/components/controls/edit/SelectWithSearchInput.tsx
-import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React12, { useEffect as useEffect3, useRef, useState as useState2 } from "react";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectWithSearchInput = (props) => {
   const [isOpen, setIsOpen] = useState2(false);
   const [searchTerm, setSearchTerm] = useState2("");
   const [highlightedIndex, setHighlightedIndex] = useState2(-1);
-  const [selectedItem, setSelectedItem] = useState2(null);
+  const [selectedItem, setSelectedItem] = useState2(
+    null
+  );
   const [list, setList] = useState2([]);
-  useEffect3(() => {
-    async function fetchData() {
-      if (props.dataset) {
-        setList(props.dataset);
-      } else if (props.dataSource && props.serviceClient) {
-        let dataSource = props.dataSource;
-        if (props.dataSourceDependsOn && props.dependentValue) {
-          dataSource = dataSource.replace(
-            `{${props.dataSourceDependsOn}}`,
-            props.dependentValue
-          );
-        }
-        const response = await props.serviceClient.get(dataSource);
-        if (response?.result) setList(response.result);
+  const loadData = React12.useCallback(async () => {
+    if (props.dataset) {
+      setList(props.dataset);
+      return;
+    }
+    if (props.dataSource && props.serviceClient) {
+      let url = props.dataSource;
+      if (props.dataSourceDependsOn && props.dependentValue) {
+        url = url.replace(
+          `{${props.dataSourceDependsOn}}`,
+          props.dependentValue
+        );
+      }
+      const response = await props.serviceClient.get(url);
+      if (response?.result) {
+        setList(response.result);
       }
     }
-    fetchData();
   }, [
-    props.dataSource,
-    props.dependentValue,
     props.dataset,
-    props.dataSourceDependsOn
+    props.dataSource,
+    props.serviceClient,
+    props.dataSourceDependsOn,
+    props.dependentValue
   ]);
-  const filteredItems = list?.filter(
-    (item) => item[props?.dataTextFieldName]?.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  useEffect3(() => {
+    loadData();
+  }, [loadData]);
+  useEffect3(() => {
+    if (props.value && list.length && props.dataKeyFieldName && props.dataTextFieldName) {
+      const selected = list.find(
+        (x) => x[props.dataKeyFieldName] == props.value
+      );
+      if (selected) {
+        setSearchTerm(selected[props.dataTextFieldName]);
+        setSelectedItem(selected);
+      }
+    }
+  }, [props.value, list]);
+  const filteredItems = list.filter((item) => {
+    const text = item[props.dataTextFieldName] ?? "";
+    return text.toString().toLowerCase().includes(searchTerm.toLowerCase());
+  });
   const handleSelect = (event, item) => {
     event.preventDefault();
     setSearchTerm(item[props.dataTextFieldName]);
     setSelectedItem(item);
     setIsOpen(false);
     setHighlightedIndex(-1);
+    const selectedValue = item[props.dataKeyFieldName];
+    if (props.onChange) {
+      props.onChange(selectedValue);
+    }
     if (props.callback) {
       props.callback({
         name: props.name,
-        value: item[props.dataKeyFieldName],
+        value: selectedValue,
         index: props.index,
         groupKey: props.groupKey
       });
@@ -738,7 +761,6 @@ var SelectWithSearchInput = (props) => {
     /* @__PURE__ */ jsxs12("label", { children: [
       props.attributes?.label,
       " ",
-      " ",
       props?.attributes?.required && /* @__PURE__ */ jsx12("span", { className: "bg-error-weak", children: "*" })
     ] }),
     /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
@@ -754,7 +776,9 @@ var SelectWithSearchInput = (props) => {
           },
           onFocus: () => setIsOpen(true),
           onKeyDown: handleKeyDown,
-          placeholder: "Select or search for a name",
+          placeholder: props.attributes?.placeholder ?? "Search...",
+          readOnly: props.attributes?.readOnly,
+          disabled: props.disable || props.attributes?.disable,
           className: "peer py-1.5 select block w-full text-black rounded border-gray-300 shadow-sm\n          focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\n          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n          "
         }
       ),

package/dist/{chunk-6MHIZOLR.mjs → chunk-KL2YKXXS.mjs}

@@ -2,7 +2,7 @@
 
 import {
   Constants
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 
 // src/clients/OdataBuilder.tsx
 var OdataBuilder = class {

package/dist/{chunk-GFVCUX6O.mjs → chunk-YDPISYMP.mjs}

@@ -31,7 +31,8 @@ var InputControlType = {
   dateInput: "dateInput",
   radioInput: "radioInput",
   switcher: "switcher",
-  videoInput: "videoInput"
+  videoInput: "videoInput",
+  referenceInput: "referenceInput"
 };
 var InputControlType_default = InputControlType;
 

package/dist/index.d.mts

@@ -68,6 +68,7 @@ declare const InputControlType: {
     radioInput: string;
     switcher: string;
     videoInput: string;
+    referenceInput: string;
 };
 
 interface InputCallbackValues<T> {
@@ -144,6 +145,8 @@ interface InputControlProps {
     isTenantColor?: boolean;
     onChange?: (value: string | number | boolean | null) => void;
     onBlur?: () => void;
+    referenceWorkflowId?: number;
+    loadSelectedItem?: (id: string | number) => Promise<any>;
     attributes?: {
         pattern?: string;
         maxLength?: number;

package/dist/index.d.ts

@@ -68,6 +68,7 @@ declare const InputControlType: {
     radioInput: string;
     switcher: string;
     videoInput: string;
+    referenceInput: string;
 };
 
 interface InputCallbackValues<T> {
@@ -144,6 +145,8 @@ interface InputControlProps {
     isTenantColor?: boolean;
     onChange?: (value: string | number | boolean | null) => void;
     onBlur?: () => void;
+    referenceWorkflowId?: number;
+    loadSelectedItem?: (id: string | number) => Promise<any>;
     attributes?: {
         pattern?: string;
         maxLength?: number;

package/dist/index.js

@@ -1018,7 +1018,8 @@ var init_InputControlType = __esm({
       dateInput: "dateInput",
       radioInput: "radioInput",
       switcher: "switcher",
-      videoInput: "videoInput"
+      videoInput: "videoInput",
+      referenceInput: "referenceInput"
     };
     InputControlType_default = InputControlType;
   }
@@ -1578,50 +1579,73 @@ var init_SelectWithSearchInput = __esm({
   "src/components/controls/edit/SelectWithSearchInput.tsx"() {
     "use strict";
     "use client";
-    import_react27 = require("react");
+    import_react27 = __toESM(require("react"));
     import_jsx_runtime30 = require("react/jsx-runtime");
     SelectWithSearchInput = (props) => {
       const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
       const [searchTerm, setSearchTerm] = (0, import_react27.useState)("");
       const [highlightedIndex, setHighlightedIndex] = (0, import_react27.useState)(-1);
-      const [selectedItem, setSelectedItem] = (0, import_react27.useState)(null);
+      const [selectedItem, setSelectedItem] = (0, import_react27.useState)(
+        null
+      );
       const [list, setList] = (0, import_react27.useState)([]);
-      (0, import_react27.useEffect)(() => {
-        async function fetchData() {
-          if (props.dataset) {
-            setList(props.dataset);
-          } else if (props.dataSource && props.serviceClient) {
-            let dataSource = props.dataSource;
-            if (props.dataSourceDependsOn && props.dependentValue) {
-              dataSource = dataSource.replace(
-                `{${props.dataSourceDependsOn}}`,
-                props.dependentValue
-              );
-            }
-            const response = await props.serviceClient.get(dataSource);
-            if (response?.result) setList(response.result);
+      const loadData = import_react27.default.useCallback(async () => {
+        if (props.dataset) {
+          setList(props.dataset);
+          return;
+        }
+        if (props.dataSource && props.serviceClient) {
+          let url = props.dataSource;
+          if (props.dataSourceDependsOn && props.dependentValue) {
+            url = url.replace(
+              `{${props.dataSourceDependsOn}}`,
+              props.dependentValue
+            );
+          }
+          const response = await props.serviceClient.get(url);
+          if (response?.result) {
+            setList(response.result);
           }
         }
-        fetchData();
       }, [
-        props.dataSource,
-        props.dependentValue,
         props.dataset,
-        props.dataSourceDependsOn
+        props.dataSource,
+        props.serviceClient,
+        props.dataSourceDependsOn,
+        props.dependentValue
       ]);
-      const filteredItems = list?.filter(
-        (item) => item[props?.dataTextFieldName]?.toLowerCase().includes(searchTerm.toLowerCase())
-      );
+      (0, import_react27.useEffect)(() => {
+        loadData();
+      }, [loadData]);
+      (0, import_react27.useEffect)(() => {
+        if (props.value && list.length && props.dataKeyFieldName && props.dataTextFieldName) {
+          const selected = list.find(
+            (x) => x[props.dataKeyFieldName] == props.value
+          );
+          if (selected) {
+            setSearchTerm(selected[props.dataTextFieldName]);
+            setSelectedItem(selected);
+          }
+        }
+      }, [props.value, list]);
+      const filteredItems = list.filter((item) => {
+        const text = item[props.dataTextFieldName] ?? "";
+        return text.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
       const handleSelect = (event, item) => {
         event.preventDefault();
         setSearchTerm(item[props.dataTextFieldName]);
         setSelectedItem(item);
         setIsOpen(false);
         setHighlightedIndex(-1);
+        const selectedValue = item[props.dataKeyFieldName];
+        if (props.onChange) {
+          props.onChange(selectedValue);
+        }
         if (props.callback) {
           props.callback({
             name: props.name,
-            value: item[props.dataKeyFieldName],
+            value: selectedValue,
             index: props.index,
             groupKey: props.groupKey
           });
@@ -1654,7 +1678,6 @@ var init_SelectWithSearchInput = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { children: [
           props.attributes?.label,
           " ",
-          " ",
           props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "bg-error-weak", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative", children: [
@@ -1670,7 +1693,9 @@ var init_SelectWithSearchInput = __esm({
               },
               onFocus: () => setIsOpen(true),
               onKeyDown: handleKeyDown,
-              placeholder: "Select or search for a name",
+              placeholder: props.attributes?.placeholder ?? "Search...",
+              readOnly: props.attributes?.readOnly,
+              disabled: props.disable || props.attributes?.disable,
               className: "peer py-1.5 select block w-full text-black rounded border-gray-300 shadow-sm\n          focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\n          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n          "
             }
           ),
@@ -4925,7 +4950,7 @@ var MultilineTextBulletsView_default = MultilineTextBullets;
 var import_react12 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var MultilineText = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react12.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "whitespace-pre-line", children: props.value }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react12.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "break-all whitespace-pre-line", children: props.value }) });
 };
 var MultilineTextView_default = MultilineText;
 

package/dist/index.mjs

@@ -2,7 +2,7 @@
 
 import {
   OdataBuilder
-} from "./chunk-6MHIZOLR.mjs";
+} from "./chunk-KL2YKXXS.mjs";
 import {
   AssetUtility_default,
   BooleanSelect_default,
@@ -23,13 +23,13 @@ import {
   Select_default,
   Switcher_default,
   TimeInput_default
-} from "./chunk-6GS7N4EV.mjs";
+} from "./chunk-6JFCMNX2.mjs";
 import {
   Constants,
   Hyperlink,
   Icon_default,
   InputControlType_default
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 import {
   ServiceClient_default
 } from "./chunk-WEV5U33G.mjs";
@@ -320,7 +320,7 @@ var MultilineTextBulletsView_default = MultilineTextBullets;
 import React10 from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var MultilineText = (props) => {
-  return /* @__PURE__ */ jsx11(React10.Fragment, { children: /* @__PURE__ */ jsx11("span", { className: "whitespace-pre-line", children: props.value }) });
+  return /* @__PURE__ */ jsx11(React10.Fragment, { children: /* @__PURE__ */ jsx11("span", { className: "break-all whitespace-pre-line", children: props.value }) });
 };
 var MultilineTextView_default = MultilineText;
 
@@ -413,7 +413,7 @@ var ViewControl_default = ViewControl;
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic4 from "next/dynamic";
-var InputControl = dynamic4(() => import("./InputControlClient-IKTP3566.mjs"), {
+var InputControl = dynamic4(() => import("./InputControlClient-VFHLKYVF.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;
@@ -2246,7 +2246,7 @@ var DocumentNode_default = DocumentNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
-var Pagination = dynamic10(() => import("./Pagination-Y7PNQUJ2.mjs"), { ssr: true });
+var Pagination = dynamic10(() => import("./Pagination-YKNCYVXV.mjs"), { ssr: true });
 var Slider = dynamic10(() => import("./Slider-554BKC7N.mjs"), {
   ssr: false
 });

package/dist/server.js

@@ -3207,7 +3207,7 @@ var MultilineTextBulletsView_default = MultilineTextBullets;
 var import_react17 = __toESM(require("react"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var MultilineText = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react17.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "whitespace-pre-line", children: props.value }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react17.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "break-all whitespace-pre-line", children: props.value }) });
 };
 var MultilineTextView_default = MultilineText;
 

package/dist/server.mjs

@@ -673,7 +673,7 @@ var MultilineTextBulletsView_default = MultilineTextBullets;
 import React11 from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var MultilineText = (props) => {
-  return /* @__PURE__ */ jsx17(React11.Fragment, { children: /* @__PURE__ */ jsx17("span", { className: "whitespace-pre-line", children: props.value }) });
+  return /* @__PURE__ */ jsx17(React11.Fragment, { children: /* @__PURE__ */ jsx17("span", { className: "break-all whitespace-pre-line", children: props.value }) });
 };
 var MultilineTextView_default = MultilineText;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260725061513",
+  "version": "0.8.1-dev.20260729064437",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",