@addsign/moje-agenda-shared-lib 0.0.29 → 0.0.32

package/dist/components/form/AutocompleteSearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../node_modules/react-use/esm/misc/util.js","../../../node_modules/react-use/esm/useClickAway.js","../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["export var noop = function () { };\nexport function on(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.addEventListener) {\n        obj.addEventListener.apply(obj, args);\n    }\n}\nexport function off(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.removeEventListener) {\n        obj.removeEventListener.apply(obj, args);\n    }\n}\nexport var isBrowser = typeof window !== 'undefined';\nexport var isNavigator = typeof navigator !== 'undefined';\n","import { useEffect, useRef } from 'react';\nimport { off, on } from './misc/util';\nvar defaultEvents = ['mousedown', 'touchstart'];\nvar useClickAway = function (ref, onClickAway, events) {\n    if (events === void 0) { events = defaultEvents; }\n    var savedCallback = useRef(onClickAway);\n    useEffect(function () {\n        savedCallback.current = onClickAway;\n    }, [onClickAway]);\n    useEffect(function () {\n        var handler = function (event) {\n            var el = ref.current;\n            el && !el.contains(event.target) && savedCallback.current(event);\n        };\n        for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {\n            var eventName = events_1[_i];\n            on(document, eventName, handler);\n        }\n        return function () {\n            for (var _i = 0, events_2 = events; _i < events_2.length; _i++) {\n                var eventName = events_2[_i];\n                off(document, eventName, handler);\n            }\n        };\n    }, [events, ref]);\n};\nexport default useClickAway;\n","import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n  options: IOptionItem[];\r\n  selectedOptionIndex: number;\r\n  handleOptionClick: (option: IOptionItem) => void;\r\n}\r\n\r\ninterface SearchInputProps {\r\n  value: string;\r\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onFocus: () => void;\r\n  clearQuery: () => void;\r\n  inputRef: React.RefObject<HTMLInputElement>;\r\n  placeholder?: string;\r\n  isFocused?: boolean;\r\n  onBlur: () => void;\r\n  isLoading?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n  label: string;\r\n  name: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  description?: string;\r\n  fetchUrl?: string;\r\n  valueKey: string;\r\n  labelKey: string;\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  serverSearch?: boolean;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  showId?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\r\n  required,\r\n  disabled,\r\n  description,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  onChange,\r\n  onFocus,\r\n  onBlur,\r\n  placeholder,\r\n  serverSearch = false,\r\n  value,\r\n  initOptions,\r\n  showId,\r\n}) => {\r\n  const [query, setQuery] = useState(\"\");\r\n  const [loading, setLoading] = useState(false);\r\n  const [options, setOptions] = useState<IOptionItem[]>([]);\r\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n    null\r\n  );\r\n  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const ref = useRef(null);\r\n  const federationContext = useFederationContext();\r\n\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [errors] = useState<any>({});\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      console.log(\r\n        \"%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value\",\r\n        \"color: #007acc;\",\r\n        fetchUrl\r\n      );\r\n      const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n      // osetreni obou variant navratu  z BE\r\n      const tmpData = data.content || data;\r\n\r\n      setOptions(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setLoading(false);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions();\r\n  }, [fetchUrl]);\r\n\r\n  useEffect(() => {\r\n    if (initOptions) setOptions(initOptions);\r\n  }, [initOptions]);\r\n\r\n  useEffect(() => {\r\n    if (value && options) {\r\n      const initOption = options.find((it) => it.value == value);\r\n\r\n      if (initOption) {\r\n        setQuery(initOption.label);\r\n        setSelectedOption(initOption);\r\n      }\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      setOptions(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setSearchResults(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n\r\n      setLoading(false);\r\n    };\r\n\r\n    if (serverSearch) fetchOptions();\r\n  }, [\r\n    query,\r\n    serverSearch,\r\n    valueKey,\r\n    labelKey,\r\n    fetchUrl,\r\n    federationContext.apiClient,\r\n    showId,\r\n  ]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    if (!selectedOption) {\r\n      setQuery(\"\");\r\n      onChange(null);\r\n    }\r\n\r\n    handleBlur();\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setQuery(event.target.value);\r\n    setSelectedOption(null);\r\n    setSelectedOptionIndex(-1);\r\n    setSearchResults(\r\n      options.filter((option) =>\r\n        option?.label\r\n          ?.toLowerCase()\r\n          .includes(event.target?.value?.toLowerCase())\r\n      )\r\n    );\r\n  };\r\n  const handleFocus = () => {\r\n    console.log(\"handleFocus query\", query);\r\n    setIsFocused(true);\r\n    onFocus();\r\n    setSearchResults(\r\n      options /*.filter((option) =>\r\n        option.label.toLowerCase().includes(query.toLowerCase()),\r\n      ),*/\r\n    );\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    console.log(\r\n      \"%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery\",\r\n      \"color: #007acc;\"\r\n    );\r\n    setQuery(\"\");\r\n    onChange(null);\r\n    setSelectedOption(null);\r\n    setTimeout(() => {\r\n      setSelectedOptionIndex(-1);\r\n      setSearchResults(options);\r\n    }, 1000);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n      );\r\n    } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n      );\r\n    } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n      handleOptionClick(searchResults[selectedOptionIndex]);\r\n    } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n      handleBlur();\r\n    }\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setQuery(option.label);\r\n    setSelectedOption(option);\r\n    setSelectedOptionIndex(-1);\r\n\r\n    onChange(option.value);\r\n\r\n    handleBlur();\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-20 flex-col justify-start items-start gap-1.5 inline-flex\">\r\n      <div\r\n        className=\"self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative\"\r\n        ref={ref}\r\n      >\r\n        <label\r\n          className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n          htmlFor={name}\r\n        >\r\n          {label} {required ? \"*\" : \"\"}\r\n        </label>\r\n        <div\r\n          className={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border \r\n            ${\r\n              isFocused\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            } \r\n            ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            }  \r\n            ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"}   \r\n            ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`}\r\n        >\r\n          <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-8 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto\">\r\n            <SearchInput\r\n              value={query}\r\n              onChange={handleQueryChange}\r\n              onKeyDown={handleKeyDown}\r\n              onFocus={handleFocus} // Pass the onFocus handler\r\n              clearQuery={handleClearQuery} // Pass the onFocus handler\r\n              inputRef={inputRef}\r\n              placeholder={placeholder}\r\n              isFocused={isFocused}\r\n              onBlur={handleBlur}\r\n              isLoading={loading}\r\n            />\r\n          </div>\r\n        </div>\r\n        {searchResults.length > 0 && (\r\n          <OptionList\r\n            options={searchResults}\r\n            selectedOptionIndex={selectedOptionIndex}\r\n            handleOptionClick={handleOptionClick}\r\n          />\r\n        )}\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n  options,\r\n  selectedOptionIndex,\r\n  handleOptionClick,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    // Ensure the selected option is scrolled into view\r\n    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n      const selectedElement = containerRef.current?.children[\r\n        selectedOptionIndex\r\n      ] as HTMLDivElement;\r\n      selectedElement?.scrollIntoView({\r\n        behavior: \"instant\",\r\n        block: \"nearest\",\r\n      });\r\n    }\r\n  }, [selectedOptionIndex, options.length]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className=\"overflow-y-auto resultOptionContainer w-full max-h-96 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl  rounded-xl z-50 top-[73px]\"\r\n    >\r\n      {options?.map((option, index) => (\r\n        <div\r\n          key={option.value as string}\r\n          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer ${\r\n            selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n          }`}\r\n          onClick={() => handleOptionClick(option)}\r\n        >\r\n          <p className=\"font-normal\">{option.label}</p>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n  value,\r\n  onChange,\r\n  onKeyDown,\r\n  onFocus,\r\n  onBlur,\r\n  inputRef,\r\n  placeholder,\r\n  clearQuery,\r\n  isFocused,\r\n  isLoading,\r\n}) => {\r\n  const handleExpandMoreClick = () => {\r\n    inputRef.current?.focus();\r\n    onFocus();\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    clearQuery();\r\n  };\r\n\r\n  return (\r\n    <div className=\"relative flex items-center w-full sharedResource\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800 w-full ${\r\n          isLoading ? \"pr-10\" : \"pr-20\"\r\n        }`}\r\n        value={value}\r\n        onChange={onChange}\r\n        onKeyDown={onKeyDown}\r\n        onFocus={onFocus}\r\n        ref={inputRef}\r\n        placeholder={placeholder}\r\n        disabled={isLoading}\r\n      />\r\n      {isLoading && (\r\n        <div className=\"loader absolute right-0 text-gray-500\">\r\n          {/* You can replace this div with an SVG or another icon of your choice */}\r\n          <svg\r\n            className=\"animate-spin h-5 w-5\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      {isFocused && !isLoading && (\r\n        <MdExpandLess\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={onBlur}\r\n        />\r\n      )}\r\n      {!isFocused && !isLoading && (\r\n        <MdExpandMore\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-10 cursor-pointer text-gray-500\"\r\n          onClick={handleClearQuery}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_i","eventName","_b","_a"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/components/form/FormField.js

@@ -1,250 +1,279 @@
-import { jsxs as o, jsx as t, Fragment as x } from "react/jsx-runtime";
-import { useState as T, useRef as Y, useEffect as Z } from "react";
-import { c as _ } from "../../index-CO5g84CR.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { c as MdClose } from "../../index-C0yNf1cc.js";
 import '../../assets/tailwind.css';/* empty css                      */
 import "../../contexts/FederationContext.js";
-import { useFederationContext as K } from "../../contexts/useFederationContext.js";
-const ae = ({
-  label: b,
-  name: r,
-  type: F,
-  register: y,
-  disabled: n,
-  errors: u = {},
-  required: E,
-  clearable: G,
-  value: l,
-  description: w,
-  onInputChange: i,
-  options: s,
-  placeholder: v,
-  children: C,
-  fetchUrl: N,
-  valueKey: B,
-  labelKey: O,
-  maxLength: q
+import { useFederationContext } from "../../contexts/useFederationContext.js";
+const FormField = ({
+  label,
+  name,
+  type,
+  register,
+  disabled,
+  errors = {},
+  required,
+  clearable,
+  value,
+  description,
+  onInputChange,
+  options,
+  placeholder,
+  children,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  maxLength
 }) => {
-  var $, L, R, H, M;
-  const [k, a] = T(!1), [p, j] = T(s), A = Y(null), {
-    ref: z = A,
-    onBlur: d = () => {
+  var _a, _b, _c, _d, _e;
+  const [isFocused, setIsFocused] = useState(false);
+  const [localOptions, setLocalOptions] = useState(options);
+  const fallbackRef = useRef(null);
+  const {
+    ref: registeredRef = fallbackRef,
+    onBlur: formOnBlur = () => {
     },
-    ...f
-  } = y ? y(r) : {}, S = ($ = K()) == null ? void 0 : $.apiClient, c = z || A, D = () => {
-    c.current && c.current.focus();
-  }, J = (e) => {
-    const m = Array.from(
-      e.target.selectedOptions,
-      (g) => g.value
+    ...rest
+  } = register ? register(name) : {};
+  const apiClient = (_a = useFederationContext()) == null ? void 0 : _a.apiClient;
+  const ref = registeredRef || fallbackRef;
+  const focusInput = () => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  };
+  const handleMultiSelectChange = (event) => {
+    const selectedOptions = Array.from(
+      event.target.selectedOptions,
+      (option) => option.value
     );
-    i({
-      ...e,
+    onInputChange({
+      ...event,
       target: {
-        value: m,
-        name: e.target.name
+        value: selectedOptions,
+        name: event.target.name
       }
     });
-  }, P = (e) => {
-    i({
-      ...e,
+  };
+  const handleCheckBoxChange = (event) => {
+    onInputChange({
+      ...event,
       target: {
-        value: e.target.value == "on",
-        name: e.target.name
+        value: event.target.value == "on" ? true : false,
+        name: event.target.name
       }
     });
-  }, Q = (e) => {
-    i({
+  };
+  const handleClear = (e) => {
+    onInputChange({
       ...e,
       target: {
         value: "",
-        name: r
+        name
       }
     });
   };
-  Z(() => {
-    N && (async (m) => {
-      const { data: g } = await S.get(m), W = typeof g[0] == "number", X = g.map((h) => W ? { value: h, label: h.toString() } : {
-        value: h[B || "id"],
-        label: h[O || "name"]
+  useEffect(() => {
+    const fetchOptions = async (fetchUrl2) => {
+      const { data } = await apiClient.get(fetchUrl2);
+      const isArrayOfNumbers = typeof data[0] === "number";
+      const transformedOptions = data.map((item) => {
+        if (isArrayOfNumbers) {
+          return { value: item, label: item.toString() };
+        } else {
+          return {
+            value: item[valueKey || "id"],
+            label: item[labelKey || "name"]
+          };
+        }
       });
-      j([
+      setLocalOptions([
         { value: null, label: " " },
         // Add an empty option as the first item
-        ...X
+        ...transformedOptions
       ]);
-    })(N), s && j(s);
-  }, [N, s, S, B, O]);
-  const V = () => {
-    switch (F) {
+    };
+    if (fetchUrl)
+      fetchOptions(fetchUrl);
+    if (options)
+      setLocalOptions(options);
+  }, [fetchUrl, options, apiClient, valueKey, labelKey]);
+  const renderInput = () => {
+    switch (type) {
       case "select":
-        return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ o(
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
           "select",
           {
-            id: r,
+            id: name,
             className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent",
-            disabled: n,
-            value: l,
-            ...f,
-            ref: c,
-            onChange: i,
-            onFocus: () => a(!0),
+            disabled,
+            value,
+            ...rest,
+            ref,
+            onChange: onInputChange,
+            onFocus: () => setIsFocused(true),
             onBlur: (e) => {
-              d(e), a(!1);
+              formOnBlur(e);
+              setIsFocused(false);
             },
             children: [
-              v && /* @__PURE__ */ t("option", { label: v }),
-              p == null ? void 0 : p.map((e) => /* @__PURE__ */ t(
+              placeholder && /* @__PURE__ */ jsx("option", { label: placeholder }),
+              localOptions == null ? void 0 : localOptions.map((option) => /* @__PURE__ */ jsx(
                 "option",
                 {
-                  value: e.value ? e.value : void 0,
-                  children: e.label
+                  value: option.value ? option.value : void 0,
+                  children: option.label
                 },
-                e.value
+                option.value
               ))
             ]
           }
         ) });
       case "multiSelect":
-        return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
           "select",
           {
-            id: r,
-            multiple: !0,
+            id: name,
+            multiple: true,
             className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent",
-            disabled: n,
-            value: Array.isArray(l) ? l : [],
-            ...f,
-            ref: c,
-            onChange: J,
-            onFocus: () => a(!0),
+            disabled,
+            value: Array.isArray(value) ? value : [],
+            ...rest,
+            ref,
+            onChange: handleMultiSelectChange,
+            onFocus: () => setIsFocused(true),
             onBlur: (e) => {
-              d(e), a(!1);
+              formOnBlur(e);
+              setIsFocused(false);
             },
-            children: s == null ? void 0 : s.map((e) => /* @__PURE__ */ t(
+            children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(
               "option",
               {
-                value: e.value ? e.value : void 0,
-                children: e.label
+                value: option.value ? option.value : void 0,
+                children: option.label
               },
-              e.value
+              option.value
             ))
           }
         ) });
       case "radioGroup":
-        return /* @__PURE__ */ t("div", { className: "flex flex-col", children: s == null ? void 0 : s.map((e, m) => /* @__PURE__ */ o(
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs(
           "label",
           {
             className: "inline-flex items-center space-x-2 my-2",
             children: [
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "radio",
-                  name: r,
-                  value: e.value,
-                  checked: l === e.value,
-                  disabled: n,
-                  ...y(r),
-                  onChange: i,
+                  name,
+                  value: option.value,
+                  checked: value === option.value,
+                  disabled,
+                  ...register(name),
+                  onChange: onInputChange,
                   className: "text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2"
                 }
               ),
-              /* @__PURE__ */ t("span", { className: "text-gray-900 text-sm font-normal leading-tight", children: e.label })
+              /* @__PURE__ */ jsx("span", { className: "text-gray-900 text-sm font-normal leading-tight", children: option.label })
             ]
           },
-          m
+          index
         )) });
       case "textarea":
-        return /* @__PURE__ */ t(
+        return /* @__PURE__ */ jsx(
           "textarea",
           {
-            id: r,
+            id: name,
             className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  ",
-            disabled: n,
-            value: l,
+            disabled,
+            value,
             rows: 3,
-            ...f,
-            ref: c,
-            onChange: i,
-            onFocus: () => a(!0),
-            maxLength: q || 4e3,
+            ...rest,
+            ref,
+            onChange: onInputChange,
+            onFocus: () => setIsFocused(true),
+            maxLength: maxLength || 4e3,
             onBlur: (e) => {
-              d(e), a(!1);
+              formOnBlur(e);
+              setIsFocused(false);
             }
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ o(x, { children: [
-          /* @__PURE__ */ t(
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
             "input",
             {
               type: "checkbox",
-              id: r,
+              id: name,
               className: "shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none",
-              checked: l,
-              disabled: n,
-              ...f,
-              ref: c,
-              onChange: P,
-              onFocus: () => a(!0),
+              checked: value,
+              disabled,
+              ...rest,
+              ref,
+              onChange: handleCheckBoxChange,
+              onFocus: () => setIsFocused(true),
               onBlur: (e) => {
-                d(e), a(!1);
+                formOnBlur(e);
+                setIsFocused(false);
               }
             }
           ),
-          /* @__PURE__ */ t("label", { htmlFor: r, children: b })
+          /* @__PURE__ */ jsx("label", { htmlFor: name, children: label })
         ] });
       default:
-        return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
           "input",
           {
             className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent",
-            id: r,
-            readOnly: n,
-            value: l,
-            type: F,
-            ...f,
-            ref: c,
-            placeholder: v,
-            onChange: i,
-            onFocus: () => a(!0),
+            id: name,
+            readOnly: disabled,
+            value,
+            type,
+            ...rest,
+            ref,
+            placeholder,
+            onChange: onInputChange,
+            onFocus: () => setIsFocused(true),
             onBlur: (e) => {
-              d(e), a(!1);
+              formOnBlur(e);
+              setIsFocused(false);
             }
           }
         ) });
     }
   };
-  return /* @__PURE__ */ o("div", { className: "w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary", children: [
-    /* @__PURE__ */ o("div", { className: "self-stretch  flex-col justify-start items-start gap-1.5 flex", children: [
-      b && /* @__PURE__ */ o(
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary", children: [
+    /* @__PURE__ */ jsxs("div", { className: "self-stretch  flex-col justify-start items-start gap-1.5 flex", children: [
+      label && /* @__PURE__ */ jsxs(
         "label",
         {
           className: "text-slate-700 text-sm leading-tight font-medium",
-          htmlFor: r,
+          htmlFor: name,
           children: [
-            b,
+            label,
             " ",
-            E ? "*" : ""
+            required ? "*" : ""
           ]
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: `self-stretch px-3  py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border ${k && !((L = u[r]) != null && L.message) ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} ${k && ((R = u[r]) != null && R.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  ${!k && ((H = u[r]) != null && H.message) ? "border-red-200" : ""}  ${n ? "bg-gray-100" : "bg-transparent"}`,
-          children: /* @__PURE__ */ o("div", { className: "flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-2 max-w-full", children: [
-            V(),
-            C && /* @__PURE__ */ t("div", { onClick: D, children: C }),
-            G && l && /* @__PURE__ */ t(_, { onClick: Q })
+          className: `self-stretch px-3  py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border ${isFocused && !((_b = errors[name]) == null ? void 0 : _b.message) ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} ${isFocused && ((_c = errors[name]) == null ? void 0 : _c.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  ${!isFocused && ((_d = errors[name]) == null ? void 0 : _d.message) ? "border-red-200" : ""}  ${disabled ? "bg-gray-100" : "bg-transparent"}`,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-2 max-w-full", children: [
+            renderInput(),
+            children && /* @__PURE__ */ jsx("div", { onClick: focusInput, children }),
+            clearable && value && /* @__PURE__ */ jsx(MdClose, { onClick: handleClear })
           ] })
         }
       )
     ] }),
-    w && /* @__PURE__ */ t("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: w }),
-    u[r] && /* @__PURE__ */ t("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (M = u[r]) == null ? void 0 : M.message })
+    description && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+    errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_e = errors[name]) == null ? void 0 : _e.message })
   ] });
 };
 export {
-  ae as default
+  FormField as default
 };
+//# sourceMappingURL=FormField.js.map

package/dist/components/form/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n  register?: any;\r\n\r\n  errors?: any;\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  options?: IOptionItem[];\r\n  children?: React.ReactNode;\r\n  fetchUrl?: string;\r\n  maxLength?: number;\r\n\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n  label,\r\n  name,\r\n  type,\r\n  register,\r\n  disabled,\r\n  errors = {},\r\n  required,\r\n  clearable,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  children,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  maxLength,\r\n}) => {\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [localOptions, setLocalOptions] = useState(options);\r\n  const fallbackRef = useRef(null); // Create a fallback ref\r\n  const {\r\n    ref: registeredRef = fallbackRef,\r\n    onBlur: formOnBlur = () => {} /* default function */,\r\n    ...rest\r\n  } = register ? register(name) : {};\r\n\r\n  const apiClient = useFederationContext()?.apiClient;\r\n  const ref = registeredRef || fallbackRef;\r\n  const focusInput = () => {\r\n    if (ref.current) {\r\n      ref.current.focus();\r\n    }\r\n  };\r\n  const handleMultiSelectChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    const selectedOptions = Array.from(\r\n      event.target.selectedOptions,\r\n      (option) => option.value\r\n    );\r\n\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: selectedOptions,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleCheckBoxChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: event.target.value == \"on\" ? true : false,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleClear = (e: any) => {\r\n    value;\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  useEffect(() => {\r\n    const fetchOptions = async (fetchUrl: string) => {\r\n      const { data } = await apiClient.get(fetchUrl);\r\n\r\n      // Check if the first item in the data array is a number to determine the data type\r\n      const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n      // Transform data based on its type\r\n      const transformedOptions = data.map((item: any) => {\r\n        if (isArrayOfNumbers) {\r\n          // If it's a number, use the number for both value and label\r\n          return { value: item, label: item.toString() };\r\n        } else {\r\n          // Otherwise, extract using predefined keys or defaults\r\n          return {\r\n            value: item[valueKey || \"id\"],\r\n            label: item[labelKey || \"name\"],\r\n          };\r\n        }\r\n      });\r\n\r\n      setLocalOptions([\r\n        { value: null, label: \" \" }, // Add an empty option as the first item\r\n        ...transformedOptions,\r\n      ]);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions(fetchUrl);\r\n    if (options) setLocalOptions(options);\r\n  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\r\n      case \"select\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={value}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            >\r\n              {placeholder && <option label={placeholder}></option>}\r\n              {localOptions?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"multiSelect\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              multiple\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              disabled={disabled}\r\n              value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n              {...rest}\r\n              ref={ref}\r\n              onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={(e) => {\r\n                formOnBlur(e);\r\n                setIsFocused(false);\r\n              }}\r\n            >\r\n              {options?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"radioGroup\":\r\n        return (\r\n          <div className=\"flex flex-col\">\r\n            {options?.map((option, index) => (\r\n              <label\r\n                key={index}\r\n                className=\"inline-flex items-center space-x-2 my-2\"\r\n              >\r\n                <input\r\n                  type=\"radio\"\r\n                  name={name}\r\n                  value={option.value}\r\n                  checked={value === option.value}\r\n                  disabled={disabled}\r\n                  {...register(name)} // Spread the rest of register's return value\r\n                  onChange={onInputChange}\r\n                  className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n                />\r\n                <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n                  {option.label}\r\n                </span>\r\n              </label>\r\n            ))}\r\n          </div>\r\n        );\r\n      case \"textarea\":\r\n        return (\r\n          <textarea\r\n            id={name}\r\n            className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  \"\r\n            disabled={disabled}\r\n            value={value}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={onInputChange}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            // Combine custom onBlur with form's onBlur\r\n            onBlur={(e) => {\r\n              formOnBlur(e); // Call React Hook Form's onBlur\r\n              setIsFocused(false); // Then call your custom onBlur logic\r\n            }}\r\n          />\r\n        );\r\n      case \"checkbox\":\r\n        return (\r\n          <>\r\n            <input\r\n              type=\"checkbox\"\r\n              id={name}\r\n              className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n              checked={value}\r\n              disabled={disabled}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={handleCheckBoxChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n            <label htmlFor={name}>{label}</label>\r\n          </>\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={value}\r\n              type={type}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              placeholder={placeholder}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n          </>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex\">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={\r\n            `self-stretch px-3  py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n            ` ${\r\n              isFocused && !errors[name]?.message\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            }` +\r\n            ` ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            } ` +\r\n            ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n            ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n          }\r\n        >\r\n          <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-2 max-w-full\">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && <MdClose onClick={handleClear}></MdClose>}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":"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"}