@addsign/moje-agenda-shared-lib 1.0.13 → 1.0.15

package/dist/components/form/AutocompleteSearchBar.js

@@ -333,21 +333,21 @@ const SearchInput = ({
     isFocused && !isLoading && /* @__PURE__ */ jsx(
       MdExpandLess,
       {
-        className: "material-icons absolute right-0 cursor-pointer text-gray-500",
+        className: "material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg",
         onClick: onBlur
       }
     ),
     !isFocused && !isLoading && /* @__PURE__ */ jsx(
       MdExpandMore,
       {
-        className: "material-icons absolute right-0 cursor-pointer text-gray-500",
+        className: "material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg",
         onClick: handleExpandMoreClick
       }
     ),
     value && clearable && !isLoading && /* @__PURE__ */ jsx(
       MdClose,
       {
-        className: "material-icons absolute right-6 cursor-pointer text-gray-500",
+        className: "material-icons absolute right-6 cursor-pointer text-gray-900 lext-lg",
         onClick: handleClearQuery
       }
     )

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  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  clearable?: 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  clearable?: boolean;\r\n  rounded?: 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  clearable = true,\r\n  rounded = true,\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\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    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    inputRef.current?.select(); // Add this line\r\n  };\r\n\r\n  const handleClearQuery = () => {\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  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 justify-start items-center gap-2 inline-flex outline-none border  bg-white\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            ${rounded ? \" rounded-lg \" : \" rounded-none \"}`}\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              clearable={clearable}\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  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}  *:\r\n         \r\n            `}\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  clearable = true,\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 bg-white\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800  bg-white  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 && clearable && !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  clearable?: 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  clearable?: boolean;\r\n  rounded?: 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  clearable = true,\r\n  rounded = true,\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\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    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    inputRef.current?.select(); // Add this line\r\n  };\r\n\r\n  const handleClearQuery = () => {\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  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 justify-start items-center gap-2 inline-flex outline-none border  bg-white\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            ${rounded ? \" rounded-lg \" : \" rounded-none \"}`}\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              clearable={clearable}\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  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}  *:\r\n         \r\n            `}\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  clearable = true,\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 bg-white\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800  bg-white  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-900 lext-lg\"\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-900 lext-lg\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && clearable && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-6 cursor-pointer text-gray-900 lext-lg\"\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/AutocompleteSearchBarServer.d.ts

@@ -0,0 +1,20 @@
+import { IOptionItem } from '../../main';
+
+declare const AutocompleteSearchBarServer: React.FC<{
+    label: string;
+    name: string;
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    fetchUrl?: string;
+    valueKey: string;
+    labelKey: string | ((item: any) => string);
+    onChange: (value: any) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    placeholder?: string;
+    value?: string;
+    initOptions?: IOptionItem[];
+    clearable?: boolean;
+}>;
+export default AutocompleteSearchBarServer;

package/dist/components/form/AutocompleteSearchBarServer.js

@@ -0,0 +1,207 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { b as MdExpandLess, c as MdExpandMore } from "../../index-BMFehNPK.js";
+import '../../assets/tailwind.css';/* empty css                      */
+import InputField from "./InputField.js";
+import "../../index.esm-DjnEVdAW.js";
+import "../../contexts/FederationContext.js";
+import { useFederationContext } from "../../contexts/useFederationContext.js";
+import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
+const AutocompleteSearchBarServer = ({
+  label,
+  name,
+  disabled,
+  description,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder
+}) => {
+  const [query, setQuery] = useState("");
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);
+  const [selectedOption, setSelectedOption] = useState(
+    null
+  );
+  const [searchResults, setSearchResults] = useState([]);
+  const inputRef = useRef(null);
+  const ref = useRef(null);
+  const federationContext = useFederationContext();
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    const fetchOptions = async () => {
+      const { data } = await federationContext.apiClient.get(fetchUrl + query);
+      const tmpData = data.content || data;
+      setSearchResults(
+        tmpData.map((item) => ({
+          value: item[valueKey],
+          label: labelKey instanceof Function ? labelKey(item) : item[labelKey]
+        }))
+      );
+    };
+    setSearchResults([]);
+    if (query && valueKey && labelKey && fetchUrl && !selectedOption) {
+      console.log("fetching", query);
+      fetchOptions();
+    }
+  }, [query, valueKey, labelKey, fetchUrl, federationContext.apiClient]);
+  useClickAway(ref, () => {
+    setSearchResults([]);
+    setQuery("");
+    if (!selectedOption) {
+      onChange(null);
+    }
+    onBlur();
+    setIsFocused(false);
+  });
+  const handleQueryChange = (event) => {
+    if (event.target.value == (selectedOption == null ? void 0 : selectedOption.label)) {
+      return;
+    } else if (event.target.value) {
+      setSearchResults([]);
+      setQuery(event.target.value);
+      setSelectedOption(null);
+      setSelectedOptionIndex(-1);
+    } else {
+      onChange(null);
+      setQuery("");
+      setSelectedOption(null);
+      setTimeout(() => {
+        setSelectedOptionIndex(-1);
+        setSearchResults([]);
+      }, 100);
+      setIsFocused(false);
+    }
+  };
+  const handleFocus = () => {
+    var _a;
+    setIsFocused(true);
+    setSearchResults([]);
+    onFocus();
+    (_a = inputRef.current) == null ? void 0 : _a.select();
+  };
+  const handleOptionClick = (option) => {
+    setSelectedOption(option);
+    setSearchResults([]);
+    setSelectedOptionIndex(-1);
+    setQuery("");
+    onChange(option.value);
+    setIsFocused(false);
+  };
+  const handleBlur = () => {
+    setSearchResults([]);
+    setTimeout(() => {
+      if (!selectedOption) {
+        setQuery("");
+        onChange(null);
+      }
+    }, 1);
+    onBlur();
+    setIsFocused(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full  flex-col justify-start items-start gap-1.5 inline-flex relative",
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          InputField,
+          {
+            manualRef: inputRef,
+            label,
+            name: String(name) + "_InputField",
+            onInputChange: handleQueryChange,
+            type: "text",
+            value: (selectedOption == null ? void 0 : selectedOption.label) || query,
+            disabled,
+            clearable: true,
+            className: " min-w-[100px] px-0 ",
+            rounded: true,
+            placeholder,
+            debounceTimeout: 1e3,
+            description,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            children: /* @__PURE__ */ jsxs("div", { className: " h-6 w-6 items-center flex  justify-center  hover:bg-gray-100  rounded-full text-lg  cursor-pointer", children: [
+              isFocused && /* @__PURE__ */ jsx(MdExpandLess, {}),
+              !isFocused && /* @__PURE__ */ jsx(MdExpandMore, {})
+            ] })
+          }
+        ),
+        searchResults.length == 0 && isFocused && !query && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute text-sm py-2 px-4  w-full outline-4 bg-white text-gray-400 border border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}`,
+            children: "Začněte psát..."
+          }
+        ),
+        searchResults.length == 0 && isFocused && query && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute  text-sm  py-2 px-4 w-full outline-4 bg-white border text-gray-400 border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}`,
+            children: "Nic nenalezeno"
+          }
+        ),
+        searchResults.length > 0 && isFocused && query && /* @__PURE__ */ jsx(
+          OptionList,
+          {
+            options: searchResults,
+            selectedOptionIndex,
+            handleOptionClick,
+            label
+          }
+        )
+      ]
+    }
+  );
+};
+const OptionList = ({
+  options,
+  selectedOptionIndex,
+  handleOptionClick,
+  label
+}) => {
+  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"
+      });
+    }
+  }, [selectedOptionIndex, options.length]);
+  const handleMouseDown = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx(
+    "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  z-50 ${label ? "top-[68px]" : "top-[40px]"}  *:
+         
+            `,
+      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 text-sm ${selectedOptionIndex === index ? "bg-gray-200" : ""}`,
+          onClick: (e) => {
+            e.preventDefault();
+            handleOptionClick(option);
+          },
+          onMouseDown: handleMouseDown,
+          children: /* @__PURE__ */ jsx("p", { className: "font-normal", children: option.label })
+        },
+        option.value
+      ))
+    }
+  );
+};
+export {
+  AutocompleteSearchBarServer as default
+};
+//# sourceMappingURL=AutocompleteSearchBarServer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteSearchBarServer.js","sources":["../../../lib/components/form/AutocompleteSearchBarServer.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { InputField, IOptionItem, useFederationContext } from \"../../main\";\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\nconst AutocompleteSearchBarServer: 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 | ((item: any) => string);\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  clearable?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\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}) => {\r\n  const [query, setQuery] = useState(\"\");\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  const [isFocused, setIsFocused] = useState(false);\r\n  // const [errors] = useState<any>({});\r\n\r\n  //fetch options\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      const tmpData = data.content || data;\r\n\r\n      setSearchResults(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: labelKey instanceof Function ? labelKey(item) : item[labelKey],\r\n        }))\r\n      );\r\n    };\r\n    setSearchResults([]);\r\n\r\n    if (query && valueKey && labelKey && fetchUrl && !selectedOption) {\r\n      console.log(\"fetching\", query);\r\n      fetchOptions();\r\n    }\r\n  }, [query, valueKey, labelKey, fetchUrl, federationContext.apiClient]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    setQuery(\"\");\r\n    if (!selectedOption) {\r\n      onChange(null);\r\n    }\r\n    onBlur();\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (event.target.value == selectedOption?.label) {\r\n      return;\r\n    } else if (event.target.value) {\r\n      setSearchResults([]);\r\n      setQuery(event.target.value);\r\n\r\n      setSelectedOption(null);\r\n      setSelectedOptionIndex(-1);\r\n    } else {\r\n      //clear handler\r\n      onChange(null);\r\n      setQuery(\"\");\r\n      setSelectedOption(null);\r\n      setTimeout(() => {\r\n        setSelectedOptionIndex(-1);\r\n        setSearchResults([]);\r\n      }, 100);\r\n      setIsFocused(false);\r\n    }\r\n  };\r\n  const handleFocus = () => {\r\n    setIsFocused(true);\r\n    setSearchResults([]);\r\n    onFocus();\r\n    inputRef.current?.select(); // Add this line\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setSelectedOption(option);\r\n    setSearchResults([]);\r\n    setSelectedOptionIndex(-1);\r\n    setQuery(\"\");\r\n    onChange(option.value);\r\n    setIsFocused(false);\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    setTimeout(() => {\r\n      if (!selectedOption) {\r\n        setQuery(\"\");\r\n        onChange(null);\r\n      }\r\n    }, 1);\r\n\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"w-full  flex-col justify-start items-start gap-1.5 inline-flex relative\"\r\n      ref={ref}\r\n    >\r\n      <InputField\r\n        manualRef={inputRef}\r\n        label={label}\r\n        name={String(name) + \"_InputField\"}\r\n        onInputChange={handleQueryChange}\r\n        type=\"text\"\r\n        value={selectedOption?.label || query}\r\n        disabled={disabled}\r\n        clearable\r\n        className=\" min-w-[100px] px-0 \"\r\n        rounded={true}\r\n        placeholder={placeholder}\r\n        debounceTimeout={1000}\r\n        description={description}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n      >\r\n        <div className=\" h-6 w-6 items-center flex  justify-center  hover:bg-gray-100  rounded-full text-lg  cursor-pointer\">\r\n          {isFocused && <MdExpandLess />}\r\n          {!isFocused && <MdExpandMore />}\r\n        </div>\r\n      </InputField>\r\n      {searchResults.length == 0 && isFocused && !query && (\r\n        <div\r\n          className={`absolute text-sm py-2 px-4  w-full outline-4 bg-white text-gray-400 border border-gray-200 drop-shadow-xl  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\r\n        >\r\n          Začněte psát...\r\n        </div>\r\n      )}\r\n      {searchResults.length == 0 && isFocused && query && (\r\n        <div\r\n          className={`absolute  text-sm  py-2 px-4 w-full outline-4 bg-white border text-gray-400 border-gray-200 drop-shadow-xl  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\r\n        >\r\n          Nic nenalezeno\r\n        </div>\r\n      )}\r\n      {searchResults.length > 0 && isFocused && query && (\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  );\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  const handleMouseDown = (event: any) => {\r\n    event.preventDefault();\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  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}  *:\r\n         \r\n            `}\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={(e) => {\r\n            e.preventDefault();\r\n            handleOptionClick(option);\r\n          }}\r\n          onMouseDown={handleMouseDown}\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\nexport default AutocompleteSearchBarServer;\r\n"],"names":[],"mappings":"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"}

package/dist/components/form/DateField.js

@@ -88,9 +88,9 @@ function DateField({
             }
           )
         ] }),
-        description && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+        description && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", id: name + ":description", 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 })
+        errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", id: name + ":error", children: (_a = errors[name]) == null ? void 0 : _a.message })
       ]
     }
   ) });

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

@@ -1 +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?: string;\r\n  maxDate?: string;\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  rounded = true,\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  const handleValueChange = (newValue: any) => {\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    console.log(\r\n      \"%clibcomponents\\formDateField.tsx:52 startEvent\",\r\n      \"color: #007acc;\",\r\n      startEvent\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 min-w-[120px] \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label} {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          <Datepicker\r\n            inputId={name}\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            minDate={minDate ? new Date(minDate) : null}\r\n            maxDate={maxDate ? new Date(maxDate) : null}\r\n            useRange={false}\r\n            asSingle={true}\r\n            i18n={\"cs\"}\r\n            value={{\r\n              startDate: value,\r\n              endDate: value,\r\n            }}\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:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\r\n              );\r\n            }}\r\n            containerClassName={(className) => {\r\n              return className + \" \";\r\n            }}\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,UAAU;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;AAGI,QAAA,oBAAoB,CAAC,aAAkB;AAC3C,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACzD,YAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA,GAC5B;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA,cACN,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACX;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACC,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;"}
+{"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?: string;\r\n  maxDate?: string;\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  rounded = true,\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  const handleValueChange = (newValue: any) => {\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    console.log(\r\n      \"%clibcomponents\\formDateField.tsx:52 startEvent\",\r\n      \"color: #007acc;\",\r\n      startEvent\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 min-w-[120px] \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label} {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          <Datepicker\r\n            inputId={name}\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            minDate={minDate ? new Date(minDate) : null}\r\n            maxDate={maxDate ? new Date(maxDate) : null}\r\n            useRange={false}\r\n            asSingle={true}\r\n            i18n={\"cs\"}\r\n            value={{\r\n              startDate: value,\r\n              endDate: value,\r\n            }}\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:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\r\n              );\r\n            }}\r\n            containerClassName={(className) => {\r\n              return className + \" \";\r\n            }}\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\"   id={name + \":description\"}>\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\"   id={name + \":error\"}>\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,UAAU;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;AAGI,QAAA,oBAAoB,CAAC,aAAkB;AAC3C,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACzD,YAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA,GAC5B;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA,cACN,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACX;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,mCACE,OAAI,EAAA,WAAU,iEAAkE,IAAI,OAAO,gBACzF,UACH,YAAA,CAAA;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACV,oBAAC,OAAI,EAAA,WAAU,wEAAyE,IAAI,OAAO,UAChG,WAAO,YAAA,IAAI,MAAJ,mBAAO,SACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/components/form/DateRangeField.js

@@ -52,11 +52,13 @@ function DateRangeField({
         /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex ", children: [
           label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium  leading-tight", children: [
             label,
+            " ",
             required ? "*" : ""
           ] }),
           /* @__PURE__ */ jsx(
             Datepicker,
             {
+              inputId: name,
               primaryColor: "indigo",
               placeholder,
               startFrom: value.startDate ? new Date(value.startDate) : void 0,
@@ -73,13 +75,28 @@ function DateRangeField({
                 return className2 + " ";
               },
               separator: "-",
+              toggleClassName: "absolute rounded-r-lg right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed text-gray-900",
               ...rest
             }
           )
         ] }),
-        description && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+        description && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "self-stretch text-slate-600 text-sm font-normal leading-tight",
+            id: name + ":description",
+            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 })
+        errors[name] && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight",
+            id: name + ":error",
+            children: (_a = errors[name]) == null ? void 0 : _a.message
+          }
+        )
       ]
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.js","sources":["../../../lib/components/form/DateRangeField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  nameEnd: string;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateRangeField({\r\n  label,\r\n  name,\r\n  nameEnd,\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  errors = {},\r\n  rounded = true,\r\n  ...rest\r\n}: IInputFieldProps) {\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  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    const endEvent = createMockChangeEvent(nameEnd, newValue.endDate);\r\n\r\n    onInputChange(startEvent);\r\n    onInputChange(endEvent);\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 min-w-[180px] \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\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          <Datepicker\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:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\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":";;AASA,SAAwB,eAAe;AAAA,EACrC;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,UAAU;AAAA,EACV,GAAG;AACL,GAAqB;;AAEb,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;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACjE,UAAM,WAAW,sBAAsB,SAAS,SAAS,OAAO;AAEhE,kBAAc,UAAU;AACxB,kBAAc,QAAQ;AAAA,EAAA;AAGxB,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YACA,WAAW,MAAM;AAAA,UAAA,GACpB;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,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,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;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;"}
+{"version":3,"file":"DateRangeField.js","sources":["../../../lib/components/form/DateRangeField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  nameEnd: string;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateRangeField({\r\n  label,\r\n  name,\r\n  nameEnd,\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  errors = {},\r\n  rounded = true,\r\n  ...rest\r\n}: IInputFieldProps) {\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  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    const endEvent = createMockChangeEvent(nameEnd, newValue.endDate);\r\n\r\n    onInputChange(startEvent);\r\n    onInputChange(endEvent);\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 min-w-[180px] \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label} {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          <Datepicker\r\n            inputId={name}\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:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\r\n              );\r\n            }}\r\n            containerClassName={(className) => {\r\n              return className + \" \";\r\n            }}\r\n            separator={\"-\"}\r\n            toggleClassName=\"absolute rounded-r-lg right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed text-gray-900\"\r\n            {...rest}\r\n          />\r\n        </div>\r\n        {description && (\r\n          <div\r\n            className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n            id={name + \":description\"}\r\n          >\r\n            {description}\r\n          </div>\r\n        )}{\" \"}\r\n        {errors[name] && (\r\n          <div\r\n            className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n            id={name + \":error\"}\r\n          >\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":";;AASA,SAAwB,eAAe;AAAA,EACrC;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,UAAU;AAAA,EACV,GAAG;AACL,GAAqB;;AAEb,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;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACjE,UAAM,WAAW,sBAAsB,SAAS,SAAS,OAAO;AAEhE,kBAAc,UAAU;AACxB,kBAAc,QAAQ;AAAA,EAAA;AAGxB,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA,GAC5B;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,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,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,cACX,iBAAgB;AAAA,cACf,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,WAAA,YAAO,IAAI,MAAX,mBAAc;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/components/form/FileInput.js

@@ -2489,7 +2489,7 @@ const FileInput = ({
               ...getRootProps(),
               className: `w-full p-4 border-dashed border-2 rounded-lg text-center ${isDragActive ? "border-indigo-300 bg-indigo-50" : "border-gray-300"}`,
               children: [
-                /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+                /* @__PURE__ */ jsx("input", { ...getInputProps(), id: name }),
                 /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: isDragActive ? "Sem přetáhněte soubor" : "Klikněte pro nahrání, nebo nahrajte přetažením souboru" })
               ]
             }
@@ -2523,8 +2523,22 @@ const FileInput = ({
         }
       )
     ] }),
-    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: (_d = errors[name]) == null ? void 0 : _d.message })
+    description && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight",
+        id: name + ":description",
+        children: description
+      }
+    ),
+    errors[name] && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight",
+        id: name + ":error",
+        children: (_d = errors[name]) == null ? void 0 : _d.message
+      }
+    )
   ] });
 };
 export {