@addsign/moje-agenda-shared-lib 0.0.28 → 0.0.30

package/dist/components/form/AutocompleteSearchBar.js

@@ -1,316 +1,400 @@
-import { jsxs as N, jsx as n } from "react/jsx-runtime";
-import { useRef as F, useEffect as p, useState as m } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
 import '../../assets/tailwind.css';/* empty css                      */
-import { i as K, j as _, c as ee } from "../../index-CO5g84CR.js";
+import { i as MdExpandLess, j as MdExpandMore, c as MdClose } from "../../index-C0yNf1cc.js";
 import "../../contexts/FederationContext.js";
-import { useFederationContext as te } from "../../contexts/useFederationContext.js";
-function re(e) {
-  for (var t = [], r = 1; r < arguments.length; r++)
-    t[r - 1] = arguments[r];
-  e && e.addEventListener && e.addEventListener.apply(e, t);
+import { useFederationContext } from "../../contexts/useFederationContext.js";
+function on(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.addEventListener) {
+    obj.addEventListener.apply(obj, args);
+  }
 }
-function ae(e) {
-  for (var t = [], r = 1; r < arguments.length; r++)
-    t[r - 1] = arguments[r];
-  e && e.removeEventListener && e.removeEventListener.apply(e, t);
+function off(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.removeEventListener) {
+    obj.removeEventListener.apply(obj, args);
+  }
 }
-var le = ["mousedown", "touchstart"], se = function(e, t, r) {
-  r === void 0 && (r = le);
-  var d = F(t);
-  p(function() {
-    d.current = t;
-  }, [t]), p(function() {
-    for (var o = function(i) {
-      var c = e.current;
-      c && !c.contains(i.target) && d.current(i);
-    }, a = 0, u = r; a < u.length; a++) {
-      var h = u[a];
-      re(document, h, o);
+var defaultEvents = ["mousedown", "touchstart"];
+var useClickAway = function(ref, onClickAway, events) {
+  if (events === void 0) {
+    events = defaultEvents;
+  }
+  var savedCallback = useRef(onClickAway);
+  useEffect(function() {
+    savedCallback.current = onClickAway;
+  }, [onClickAway]);
+  useEffect(function() {
+    var handler = function(event) {
+      var el = ref.current;
+      el && !el.contains(event.target) && savedCallback.current(event);
+    };
+    for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
+      var eventName = events_1[_i];
+      on(document, eventName, handler);
     }
     return function() {
-      for (var i = 0, c = r; i < c.length; i++) {
-        var k = c[i];
-        ae(document, k, o);
+      for (var _i2 = 0, events_2 = events; _i2 < events_2.length; _i2++) {
+        var eventName2 = events_2[_i2];
+        off(document, eventName2, handler);
       }
     };
-  }, [r, e]);
+  }, [events, ref]);
 };
-const me = ({
-  label: e,
-  name: t,
-  required: r,
-  disabled: d,
-  description: o,
-  fetchUrl: a,
-  valueKey: u,
-  labelKey: h,
-  onChange: i,
-  onFocus: c,
-  onBlur: k,
-  placeholder: j,
-  serverSearch: w = !1,
-  value: L,
-  initOptions: R,
-  showId: E
+const AutocompleteSearchBar = ({
+  label,
+  name,
+  required,
+  disabled,
+  description,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  serverSearch = false,
+  value,
+  initOptions,
+  showId
 }) => {
-  var V, W;
-  const [M, C] = m(""), [J, O] = m(!1), [x, A] = m([]), [Q, b] = m(-1), [P, S] = m(
+  var _a, _b;
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);
+  const [selectedOption, setSelectedOption] = useState(
     null
-  ), [g, y] = m([]), X = F(null), q = F(null), D = te(), [B, z] = m(!1), [H] = m({});
-  p(() => {
-    a && (async () => {
-      O(!0), console.log(
+  );
+  const [searchResults, setSearchResults] = useState([]);
+  const inputRef = useRef(null);
+  const ref = useRef(null);
+  const federationContext = useFederationContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const [errors] = useState({});
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setLoading(true);
+      console.log(
         "%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value",
         "color: #007acc;",
-        a
+        fetchUrl
       );
-      const { data: s } = await D.apiClient.get(a || ""), f = s.content || s;
-      A(
-        f.map((v) => ({
-          value: v[u],
-          label: v[h] + (E ? " (" + v[u] + ")" : "")
+      const { data } = await federationContext.apiClient.get(fetchUrl || "");
+      const tmpData = data.content || data;
+      setOptions(
+        tmpData.map((item) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : "")
         }))
-      ), O(!1);
-    })();
-  }, [a]), p(() => {
-    R && A(R);
-  }, [R]), p(() => {
-    if (L && x) {
-      const l = x.find((s) => s.value == L);
-      l && (C(l.label), S(l));
+      );
+      setLoading(false);
+    };
+    if (fetchUrl)
+      fetchOptions();
+  }, [fetchUrl]);
+  useEffect(() => {
+    if (initOptions)
+      setOptions(initOptions);
+  }, [initOptions]);
+  useEffect(() => {
+    if (value && options) {
+      const initOption = options.find((it) => it.value == value);
+      if (initOption) {
+        setQuery(initOption.label);
+        setSelectedOption(initOption);
+      }
     }
-  }, [L, x]), p(() => {
-    w && (async () => {
-      O(!0);
-      const { data: s } = await D.apiClient.get(a + M);
-      A(
-        s.map((f) => ({
-          value: f[u],
-          label: f[h] + (E ? " (" + f[u] + ")" : "")
+  }, [value, options]);
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setLoading(true);
+      const { data } = await federationContext.apiClient.get(fetchUrl + query);
+      setOptions(
+        data.map((item) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : "")
         }))
-      ), y(
-        s.map((f) => ({
-          value: f[u],
-          label: f[h] + (E ? " (" + f[u] + ")" : "")
+      );
+      setSearchResults(
+        data.map((item) => ({
+          value: item[valueKey],
+          label: item[labelKey] + (showId ? " (" + item[valueKey] + ")" : "")
         }))
-      ), O(!1);
-    })();
+      );
+      setLoading(false);
+    };
+    if (serverSearch)
+      fetchOptions();
   }, [
-    M,
-    w,
-    u,
-    h,
-    a,
-    D.apiClient,
-    E
-  ]), se(q, () => {
-    y([]), P || (C(""), i(null)), $();
+    query,
+    serverSearch,
+    valueKey,
+    labelKey,
+    fetchUrl,
+    federationContext.apiClient,
+    showId
+  ]);
+  useClickAway(ref, () => {
+    setSearchResults([]);
+    if (!selectedOption) {
+      setQuery("");
+      onChange(null);
+    }
+    handleBlur();
   });
-  const Y = (l) => {
-    C(l.target.value), S(null), b(-1), y(
-      x.filter(
-        (s) => {
-          var f, v, G;
-          return (G = s == null ? void 0 : s.label) == null ? void 0 : G.toLowerCase().includes((v = (f = l.target) == null ? void 0 : f.value) == null ? void 0 : v.toLowerCase());
+  const handleQueryChange = (event) => {
+    setQuery(event.target.value);
+    setSelectedOption(null);
+    setSelectedOptionIndex(-1);
+    setSearchResults(
+      options.filter(
+        (option) => {
+          var _a2, _b2, _c;
+          return (_c = option == null ? void 0 : option.label) == null ? void 0 : _c.toLowerCase().includes((_b2 = (_a2 = event.target) == null ? void 0 : _a2.value) == null ? void 0 : _b2.toLowerCase());
         }
       )
     );
-  }, Z = () => {
-    console.log("handleFocus query", M), z(!0), c(), y(
-      x
+  };
+  const handleFocus = () => {
+    console.log("handleFocus query", query);
+    setIsFocused(true);
+    onFocus();
+    setSearchResults(
+      options
       /*.filter((option) =>
         option.label.toLowerCase().includes(query.toLowerCase()),
       ),*/
     );
-  }, U = () => {
+  };
+  const handleClearQuery = () => {
     console.log(
       "%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery",
       "color: #007acc;"
-    ), C(""), i(null), S(null), setTimeout(() => {
-      b(-1), y(x);
+    );
+    setQuery("");
+    onChange(null);
+    setSelectedOption(null);
+    setTimeout(() => {
+      setSelectedOptionIndex(-1);
+      setSearchResults(options);
     }, 1e3);
-  }, I = (l) => {
-    l.key === "ArrowUp" && g.length > 0 ? b(
-      (s) => s > 0 ? s - 1 : g.length - 1
-    ) : l.key === "ArrowDown" && g.length > 0 ? b(
-      (s) => s < g.length - 1 ? s + 1 : 0
-    ) : l.key === "Enter" && Q !== -1 ? T(g[Q]) : l.key === "Escape" && Q !== -1 && $();
-  }, T = (l) => {
-    C(l.label), S(l), b(-1), i(l.value), $();
-  }, $ = () => {
-    y([]), k(), z(!1);
   };
-  return /* @__PURE__ */ N("div", { className: "w-full min-h-20 flex-col justify-start items-start gap-1.5 inline-flex", children: [
-    /* @__PURE__ */ N(
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp" && searchResults.length > 0) {
+      setSelectedOptionIndex(
+        (prevIndex) => prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1
+      );
+    } else if (event.key === "ArrowDown" && searchResults.length > 0) {
+      setSelectedOptionIndex(
+        (prevIndex) => prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0
+      );
+    } else if (event.key === "Enter" && selectedOptionIndex !== -1) {
+      handleOptionClick(searchResults[selectedOptionIndex]);
+    } else if (event.key === "Escape" && selectedOptionIndex !== -1) {
+      handleBlur();
+    }
+  };
+  const handleOptionClick = (option) => {
+    setQuery(option.label);
+    setSelectedOption(option);
+    setSelectedOptionIndex(-1);
+    onChange(option.value);
+    handleBlur();
+  };
+  const handleBlur = () => {
+    setSearchResults([]);
+    onBlur();
+    setIsFocused(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-h-20 flex-col justify-start items-start gap-1.5 inline-flex", children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: "self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative",
-        ref: q,
+        ref,
         children: [
-          /* @__PURE__ */ N(
+          /* @__PURE__ */ jsxs(
             "label",
             {
               className: "text-slate-700 text-sm leading-tight font-medium",
-              htmlFor: t,
+              htmlFor: name,
               children: [
-                e,
+                label,
                 " ",
-                r ? "*" : ""
+                required ? "*" : ""
               ]
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: `self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border 
-            ${B ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} 
-            ${B && ((V = H[t]) != null && V.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  
-            ${!B && ((W = H[t]) != null && W.message) ? "border-red-200" : ""}   
-            ${d ? "bg-gray-100" : "bg-transparent"}`,
-              children: /* @__PURE__ */ 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", children: /* @__PURE__ */ n(
-                oe,
+            ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} 
+            ${isFocused && ((_a = errors[name]) == null ? void 0 : _a.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  
+            ${!isFocused && ((_b = errors[name]) == null ? void 0 : _b.message) ? "border-red-200" : ""}   
+            ${disabled ? "bg-gray-100" : "bg-transparent"}`,
+              children: /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(
+                SearchInput,
                 {
-                  value: M,
-                  onChange: Y,
-                  onKeyDown: I,
-                  onFocus: Z,
-                  clearQuery: U,
-                  inputRef: X,
-                  placeholder: j,
-                  isFocused: B,
-                  onBlur: $,
-                  isLoading: J
+                  value: query,
+                  onChange: handleQueryChange,
+                  onKeyDown: handleKeyDown,
+                  onFocus: handleFocus,
+                  clearQuery: handleClearQuery,
+                  inputRef,
+                  placeholder,
+                  isFocused,
+                  onBlur: handleBlur,
+                  isLoading: loading
                 }
               ) })
             }
           ),
-          g.length > 0 && /* @__PURE__ */ n(
-            ne,
+          searchResults.length > 0 && /* @__PURE__ */ jsx(
+            OptionList,
             {
-              options: g,
-              selectedOptionIndex: Q,
-              handleOptionClick: T
+              options: searchResults,
+              selectedOptionIndex,
+              handleOptionClick
             }
           )
         ]
       }
     ),
-    o && /* @__PURE__ */ n("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: o })
+    description && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: description })
   ] });
-}, ne = ({
-  options: e,
-  selectedOptionIndex: t,
-  handleOptionClick: r
+};
+const OptionList = ({
+  options,
+  selectedOptionIndex,
+  handleOptionClick
 }) => {
-  const d = F(null);
-  return p(() => {
-    var o;
-    if (t >= 0 && t < e.length) {
-      const a = (o = d.current) == null ? void 0 : o.children[t];
-      a == null || a.scrollIntoView({
+  const containerRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {
+      const selectedElement = (_a = containerRef.current) == null ? void 0 : _a.children[selectedOptionIndex];
+      selectedElement == null ? void 0 : selectedElement.scrollIntoView({
         behavior: "instant",
         block: "nearest"
       });
     }
-  }, [t, e.length]), /* @__PURE__ */ n(
+  }, [selectedOptionIndex, options.length]);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: d,
+      ref: containerRef,
       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]",
-      children: e == null ? void 0 : e.map((o, a) => /* @__PURE__ */ n(
+      children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: `py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer ${t === a ? "bg-gray-200" : ""}`,
-          onClick: () => r(o),
-          children: /* @__PURE__ */ n("p", { className: "font-normal", children: o.label })
+          className: `py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer ${selectedOptionIndex === index ? "bg-gray-200" : ""}`,
+          onClick: () => handleOptionClick(option),
+          children: /* @__PURE__ */ jsx("p", { className: "font-normal", children: option.label })
         },
-        o.value
+        option.value
       ))
     }
   );
-}, oe = ({
-  value: e,
-  onChange: t,
-  onKeyDown: r,
-  onFocus: d,
-  onBlur: o,
-  inputRef: a,
-  placeholder: u,
-  clearQuery: h,
-  isFocused: i,
-  isLoading: c
-}) => /* @__PURE__ */ N("div", { className: "relative flex items-center w-full sharedResource", children: [
-  /* @__PURE__ */ n(
-    "input",
-    {
-      type: "text",
-      className: `pl-1 py-1 border-gray-800 w-full ${c ? "pr-10" : "pr-20"}`,
-      value: e,
-      onChange: t,
-      onKeyDown: r,
-      onFocus: d,
-      ref: a,
-      placeholder: u,
-      disabled: c
-    }
-  ),
-  c && /* @__PURE__ */ n("div", { className: "loader absolute right-0 text-gray-500", children: /* @__PURE__ */ N(
-    "svg",
-    {
-      className: "animate-spin h-5 w-5",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ n(
-          "circle",
-          {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ n(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-          }
-        )
-      ]
-    }
-  ) }),
-  i && !c && /* @__PURE__ */ n(
-    K,
-    {
-      className: "material-icons absolute right-0 cursor-pointer text-gray-500",
-      onClick: o
-    }
-  ),
-  !i && !c && /* @__PURE__ */ n(
-    _,
-    {
-      className: "material-icons absolute right-0 cursor-pointer text-gray-500",
-      onClick: () => {
-        var w;
-        (w = a.current) == null || w.focus(), d();
+};
+const SearchInput = ({
+  value,
+  onChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  inputRef,
+  placeholder,
+  clearQuery,
+  isFocused,
+  isLoading
+}) => {
+  const handleExpandMoreClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    onFocus();
+  };
+  const handleClearQuery = () => {
+    clearQuery();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full sharedResource", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: `pl-1 py-1 border-gray-800 w-full ${isLoading ? "pr-10" : "pr-20"}`,
+        value,
+        onChange,
+        onKeyDown,
+        onFocus,
+        ref: inputRef,
+        placeholder,
+        disabled: isLoading
       }
-    }
-  ),
-  e && !c && /* @__PURE__ */ n(
-    ee,
-    {
-      className: "material-icons absolute right-10 cursor-pointer text-gray-500",
-      onClick: () => {
-        h();
+    ),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "loader absolute right-0 text-gray-500", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "animate-spin h-5 w-5",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+            }
+          )
+        ]
       }
-    }
-  )
-] });
+    ) }),
+    isFocused && !isLoading && /* @__PURE__ */ jsx(
+      MdExpandLess,
+      {
+        className: "material-icons absolute right-0 cursor-pointer text-gray-500",
+        onClick: onBlur
+      }
+    ),
+    !isFocused && !isLoading && /* @__PURE__ */ jsx(
+      MdExpandMore,
+      {
+        className: "material-icons absolute right-0 cursor-pointer text-gray-500",
+        onClick: handleExpandMoreClick
+      }
+    ),
+    value && !isLoading && /* @__PURE__ */ jsx(
+      MdClose,
+      {
+        className: "material-icons absolute right-10 cursor-pointer text-gray-500",
+        onClick: handleClearQuery
+      }
+    )
+  ] });
+};
 export {
-  me as default
+  AutocompleteSearchBar as default
 };
+//# sourceMappingURL=AutocompleteSearchBar.js.map