@addsign/moje-agenda-shared-lib 0.0.69 → 0.0.71

package/dist/assets/tailwind.css

@@ -620,6 +620,9 @@ video {
 .top-\[24px\] {
   top: 24px;
 }
+.top-\[40px\] {
+  top: 40px;
+}
 .top-\[48px\] {
   top: 48px;
 }
@@ -1724,6 +1727,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.\!font-normal {
+  font-weight: 400 !important;
+}
 .font-bold {
   font-weight: 700;
 }

package/dist/components/form/AutocompleteSearchBar.js

@@ -223,7 +223,8 @@ const AutocompleteSearchBar = ({
             {
               options: searchResults,
               selectedOptionIndex,
-              handleOptionClick
+              handleOptionClick,
+              label
             }
           )
         ]
@@ -235,7 +236,8 @@ const AutocompleteSearchBar = ({
 const OptionList = ({
   options,
   selectedOptionIndex,
-  handleOptionClick
+  handleOptionClick,
+  label
 }) => {
   const containerRef = useRef(null);
   useEffect(() => {
@@ -252,7 +254,7 @@ const OptionList = ({
     "div",
     {
       ref: containerRef,
-      className: "overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 top-[68px]",
+      className: `overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? "top-[68px]" : "top-[40px]"}`,
       children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsx(
         "div",
         {

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["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, labelKey, showId, valueKey, federationContext.apiClient]);\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  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          <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={`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-7 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 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 top-[68px]\"\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 text-sm ${\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 text-sm\">\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-6 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":["_b","_a"],"mappings":"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"}
+{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["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  label?: string;\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, labelKey, showId, valueKey, federationContext.apiClient]);\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  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          <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={`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-7 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            label={label}\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  label,\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 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\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 text-sm ${\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 text-sm\">\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-6 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":["_b","_a"],"mappings":"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"}

package/dist/components/form/DateField.d.ts

@@ -0,0 +1,8 @@
+import { IFormFieldGlobalProps } from '../../types';
+
+export interface IDateInputFieldProps extends IFormFieldGlobalProps {
+    minDate?: Date;
+    maxDate?: Date;
+    [key: string]: any;
+}
+export default function DateField({ label, name, value, description, required, onInputChange, placeholder, className, register, disabled, minDate, maxDate, errors, ...rest }: IDateInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateField.js

@@ -0,0 +1,98 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { D as Datepicker } from "../../index.esm-DjnEVdAW.js";
+function DateField({
+  label,
+  name,
+  value,
+  description,
+  required,
+  onInputChange,
+  placeholder,
+  className,
+  register,
+  disabled,
+  minDate,
+  maxDate,
+  errors = {},
+  ...rest
+}) {
+  var _a;
+  const createMockChangeEvent = (name2, value2) => {
+    return {
+      target: { name: name2, value: value2 },
+      currentTarget: { name: name2, value: value2 },
+      preventDefault: () => {
+      },
+      stopPropagation: () => {
+      },
+      nativeEvent: new Event("change"),
+      bubbles: true,
+      cancelable: true,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: true,
+      timeStamp: Date.now(),
+      type: "change",
+      persist: () => {
+      }
+    };
+  };
+  console.log(
+    "%clibcomponents\formDateField.tsx:41 value",
+    "color: #007acc;",
+    value
+  );
+  const handleValueChange = (newValue) => {
+    console.log("newValue:", newValue);
+    const startEvent = createMockChangeEvent(name, newValue.startDate);
+    onInputChange(startEvent);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative " + className,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex py-1", children: [
+          label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium  leading-tight", children: [
+            label,
+            required ? "*" : ""
+          ] }),
+          JSON.stringify(value),
+          /* @__PURE__ */ jsx(
+            Datepicker,
+            {
+              minDate,
+              maxDate,
+              useRange: false,
+              asSingle: true,
+              primaryColor: "indigo",
+              placeholder,
+              startFrom: value.startDate ? new Date(value.startDate) : void 0,
+              disabled,
+              startWeekOn: "mon",
+              i18n: "cs",
+              value,
+              onChange: handleValueChange,
+              displayFormat: "DD.MM.YYYY",
+              inputClassName: (className2) => {
+                return className2 + " focus:ring-indigo-200  focus:ring-4 border !border-gray-200  !font-normal";
+              },
+              containerClassName: (className2) => {
+                return className2 + "  ";
+              },
+              separator: "-",
+              ...rest
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { className: "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: (_a = errors[name]) == null ? void 0 : _a.message })
+      ]
+    }
+  ) });
+}
+export {
+  DateField as default
+};
+//# sourceMappingURL=DateField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IDateInputFieldProps extends IFormFieldGlobalProps {\r\n  minDate?: Date;\r\n  maxDate?: Date;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  required,\r\n  onInputChange,\r\n  placeholder,\r\n  className,\r\n  register,\r\n  disabled,\r\n  minDate,\r\n  maxDate,\r\n  errors = {},\r\n  ...rest\r\n}: IDateInputFieldProps) {\r\n  // Utility function to create a mock ChangeEvent\r\n  const createMockChangeEvent = (\r\n    name: string,\r\n    value: any\r\n  ): ChangeEvent<any> => {\r\n    return {\r\n      target: { name, value },\r\n      currentTarget: { name, value },\r\n      preventDefault: () => {},\r\n      stopPropagation: () => {},\r\n      nativeEvent: new Event(\"change\"),\r\n      bubbles: true,\r\n      cancelable: true,\r\n      defaultPrevented: false,\r\n      eventPhase: 0,\r\n      isTrusted: true,\r\n      timeStamp: Date.now(),\r\n      type: \"change\",\r\n      persist: () => {},\r\n    } as ChangeEvent<any>;\r\n  };\r\n\r\n  console.log(\r\n    \"%clibcomponents\\formDateField.tsx:41 value\",\r\n    \"color: #007acc;\",\r\n    value\r\n  );\r\n  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n\r\n    onInputChange(startEvent);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={\r\n          \"min-h-30 flex-col justify-start items-start gap-1.5  w-full relative \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex py-1\">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label}\r\n              {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          {JSON.stringify(value)}\r\n          <Datepicker\r\n            minDate={minDate}\r\n            maxDate={maxDate}\r\n            useRange={false}\r\n            asSingle={true}\r\n            primaryColor={\"indigo\"}\r\n            placeholder={placeholder}\r\n            startFrom={value.startDate ? new Date(value.startDate) : undefined}\r\n            disabled={disabled}\r\n            startWeekOn=\"mon\"\r\n            i18n={\"cs\"}\r\n            value={value}\r\n            onChange={handleValueChange}\r\n            displayFormat={\"DD.MM.YYYY\"}\r\n            inputClassName={(className) => {\r\n              return (\r\n                className +\r\n                \" focus:ring-indigo-200  focus:ring-4 border !border-gray-200  !font-normal\"\r\n              );\r\n            }}\r\n            containerClassName={(className) => {\r\n              return className + \"  \";\r\n            }}\r\n            separator={\"-\"}\r\n            {...rest}\r\n          />\r\n        </div>\r\n        {description && (\r\n          <div className=\"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\n"],"names":["name","value","className"],"mappings":";;AAUA,SAAwB,UAAU;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,GAAG;AACL,GAAyB;;AAEjB,QAAA,wBAAwB,CAC5BA,OACAC,WACqB;AACd,WAAA;AAAA,MACL,QAAQ,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MACtB,eAAe,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MAC7B,gBAAgB,MAAM;AAAA,MAAC;AAAA,MACvB,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,aAAa,IAAI,MAAM,QAAQ;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW,KAAK,IAAI;AAAA,MACpB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAC;AAAA,IAAA;AAAA,EAClB;AAGM,UAAA;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AAEjE,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,0EACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YACA,WAAW,MAAM;AAAA,UAAA,GACpB;AAAA,UAED,KAAK,UAAU,KAAK;AAAA,UACrB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,UAAU;AAAA,cACV,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA;AAAA,cAEJ;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,cACV,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC,oBAAC,OAAI,EAAA,WAAU,iEACZ,UACH,aAAA;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/components/form/FormField.d.ts

@@ -20,6 +20,8 @@ export interface FormFieldProps {
     className?: string;
     valueKey?: string;
     labelKey?: string;
+    minDate?: string;
+    maxDate?: string;
     onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
 }
 declare const FormField: React.FC<FormFieldProps>;

package/dist/components/form/FormField.js

@@ -25,7 +25,9 @@ const FormField = ({
   valueKey,
   labelKey,
   maxLength,
-  className
+  className,
+  minDate,
+  maxDate
 }) => {
   var _a, _b, _c, _d, _e;
   const [isFocused, setIsFocused] = useState(false);
@@ -237,6 +239,8 @@ const FormField = ({
             ref,
             placeholder,
             onChange: onInputChange,
+            min: minDate,
+            max: maxDate,
             onFocus: () => setIsFocused(true),
             onBlur: (e) => {
               formOnBlur(e);

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

@@ -1 +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  className?: string;\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  className,\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 w-full\"\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, index) => (\r\n                <option\r\n                  key={index}\r\n                  value={\r\n                    option.value !== undefined && option.value !== null\r\n                      ? option.value.toString()\r\n                      : \"\"\r\n                  }\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 w-max-full \"\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 w-full\"\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-1 rounded-lg justify-start items-center  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            className\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-1 w-full  \">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && (\r\n              <div className=\"flex items-center justify-center\">\r\n                <MdClose onClick={handleClear} size={20}></MdClose>\r\n              </div>\r\n            )}{\" \"}\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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"}
+{"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  className?: string;\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  minDate?: string;\r\n  maxDate?: 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  className,\r\n  minDate,\r\n  maxDate,\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 w-full\"\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, index) => (\r\n                <option\r\n                  key={index}\r\n                  value={\r\n                    option.value !== undefined && option.value !== null\r\n                      ? option.value.toString()\r\n                      : \"\"\r\n                  }\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 w-max-full \"\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 w-full\"\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              min={minDate}\r\n              max={maxDate}\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-1 rounded-lg justify-start items-center  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            className\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-1 w-full  \">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && (\r\n              <div className=\"flex items-center justify-center\">\r\n                <MdClose onClick={handleClear} size={20}></MdClose>\r\n              </div>\r\n            )}{\" \"}\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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"}

package/dist/main.d.ts

@@ -15,6 +15,7 @@ export { default as DataTable } from './components/datatable/DataTable.tsx';
 export { default as DataTableServer } from './components/datatable/DataTableServer.tsx';
 export { default as ProfileOverview } from './components/profiles/ProfileOverview.tsx';
 export { default as DateRangeField } from './components/form/DateRangeField.tsx';
+export { default as DateField } from './components/form/DateField.tsx';
 export * from './components/datatable/types.ts';
 export * from './contexts/FederationContext.tsx';
 export * from './contexts/useFederationContext.ts';

package/dist/main.js

@@ -15,6 +15,7 @@ import { default as default13 } from "./components/datatable/DataTable.js";
 import { default as default14 } from "./components/datatable/DataTableServer.js";
 import { default as default15 } from "./components/profiles/ProfileOverview.js";
 import { default as default16 } from "./components/form/DateRangeField.js";
+import { default as default17 } from "./components/form/DateField.js";
 import { FederationContext, FederationContextProvider } from "./contexts/FederationContext.js";
 import { useFederationContext } from "./contexts/useFederationContext.js";
 import { getFullName, getFullNameList, getFullNameListPositionWithEmployee, getFullNamePositionWithEmployee } from "./utils/getFullName.js";
@@ -28,6 +29,7 @@ export {
   ConfirmationModalDialog,
   default13 as DataTable,
   default14 as DataTableServer,
+  default17 as DateField,
   default16 as DateRangeField,
   EApproverRoles,
   EApproverTypes,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "0.0.69",
+  "version": "0.0.71",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",