@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260728103223 → 0.8.1-dev.20260731062325

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

@@ -21,12 +21,12 @@ import {
   Select_default,
   Switcher_default,
   TimeInput_default
-} from "./chunk-6GS7N4EV.mjs";
+} from "./chunk-65QPOTZ4.mjs";
 import {
   Hyperlink,
   Icon_default,
   InputControlType_default
-} from "./chunk-GFVCUX6O.mjs";
+} from "./chunk-YDPISYMP.mjs";
 import {
   Button_default,
   ClientButton_default
@@ -557,8 +557,15 @@ var SwitchInput = (props) => {
 };
 var SwitchInput_default = SwitchInput;
 
-// src/components/controls/edit/InputControlClient.tsx
+// src/components/controls/edit/ReferenceInput.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var ReferenceInput = (props) => {
+  return /* @__PURE__ */ jsx4(SelectWithSearchInput_default, { ...props });
+};
+var ReferenceInput_default = ReferenceInput;
+
+// src/components/controls/edit/InputControlClient.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 var InputControl = React4.forwardRef(
   (props, ref) => {
     const ControlComponents = {
@@ -583,10 +590,11 @@ var InputControl = React4.forwardRef(
       [InputControlType_default.switchInput]: SwitchInput_default,
       [InputControlType_default.dateInput]: DateInput_default,
       [InputControlType_default.radioInput]: RadioInput_default,
-      [InputControlType_default.switcher]: Switcher_default
+      [InputControlType_default.switcher]: Switcher_default,
+      [InputControlType_default.referenceInput]: ReferenceInput_default
     };
     const SelectedControlComponent = ControlComponents[props.controlType];
-    return /* @__PURE__ */ jsx4(React4.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx4(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
+    return /* @__PURE__ */ jsx5(React4.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx5(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
   }
 );
 InputControl.displayName = "InputControl";

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-65QPOTZ4.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
       });
@@ -734,11 +757,11 @@ var SelectWithSearchInput = (props) => {
       });
     }
   }, [highlightedIndex]);
+  const isReadOnly = props.attributes?.readOnly || props.disable || props.attributes?.disable;
   return /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs12("label", { children: [
+    /* @__PURE__ */ jsxs12("label", { className: "pb-1", children: [
       props.attributes?.label,
       " ",
-      " ",
       props?.attributes?.required && /* @__PURE__ */ jsx12("span", { className: "bg-error-weak", children: "*" })
     ] }),
     /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
@@ -754,15 +777,26 @@ var SelectWithSearchInput = (props) => {
           },
           onFocus: () => setIsOpen(true),
           onKeyDown: handleKeyDown,
-          placeholder: "Select or search for a name",
-          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          "
+          placeholder: props.attributes?.placeholder ?? "Search...",
+          readOnly: isReadOnly,
+          disabled: props.disable || props.attributes?.disable,
+          className: `peer mt-2 py-1.5 select block w-full text-black rounded border-gray-300 shadow-sm
+          focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
+          ${isReadOnly ? "bg-neutral-soft opacity-50 cursor-not-allowed" : "bg-default"}
+          `
         }
       ),
       /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
-          onClick: () => setIsOpen(!isOpen),
+          disabled: isReadOnly,
+          onClick: () => {
+            if (!isReadOnly) {
+              setIsOpen(!isOpen);
+            }
+          },
           className: "absolute right-2 top-3 h-5 w-5 text-gray-500 focus:outline-none",
           children: /* @__PURE__ */ jsx12(
             "svg",
@@ -786,11 +820,11 @@ var SelectWithSearchInput = (props) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx12(
+    !isReadOnly && isOpen && /* @__PURE__ */ jsx12(
       "div",
       {
         ref: dropdownRef,
-        className: "absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto",
+        className: "absolute z-10 w-full bg-default border border-gray-200 shadow-lg max-h-48 overflow-y-auto",
         children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx12(
           "button",
           {

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;