npm - @addsign/moje-agenda-shared-lib - Versions diffs - 1.0.22 → 1.0.23 - Mend

@addsign/moje-agenda-shared-lib 1.0.22 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/components/form/AutocompleteSearchBarServer.js CHANGED Viewed

@@ -68,6 +68,7 @@ const AutocompleteSearchBarServer = ({
     if (event.target.value == (selectedOption == null ? void 0 : selectedOption.label)) {
       return;
     } else if (event.target.value) {
+      setIsFocused(true);
       setSearchResults([]);
       setQuery(event.target.value);
       setSelectedOption(null);

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

	@@ -1 +1 @@
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 returnObject: 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 returnObject,\r\n value,\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 useEffect(() => {\r\n if (!value) {\r\n setQuery(\"\");\r\n setSelectedOption(null);\r\n }\r\n }, [value]);\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 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(returnObject ? option : 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 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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"}
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 returnObject: 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 returnObject,\r\n value,\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 useEffect(() => {\r\n if (!value) {\r\n setQuery(\"\");\r\n setSelectedOption(null);\r\n }\r\n }, [value]);\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 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 setIsFocused(true);\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(returnObject ? option : 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":";;;;;;;;;;AAYA,MAAM,8BAiBD,CAAC;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE;AAC3D,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EAAA;AAEF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,CAAE,CAAA;AAC9D,QAAA,WAAW,OAAyB,IAAI;AACxC,QAAA,MAAM,OAAO,IAAI;AACvB,QAAM,oBAAoB;AAC1B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,YAAU,MAAM;AACd,QAAI,CAAC,OAAO;AACV,eAAS,EAAE;AACX,wBAAkB,IAAI;AAAA,IACxB;AAAA,EAAA,GACC,CAAC,KAAK,CAAC;AAGV,YAAU,MAAM;AACd,UAAM,eAAe,YAAY;AACzB,YAAA,EAAE,KAAS,IAAA,MAAM,kBAAkB,UAAU,IAAI,WAAW,KAAK;AACjE,YAAA,UAAU,KAAK,WAAW;AAEhC;AAAA,QACE,QAAQ,IAAI,CAAC,UAAe;AAAA,UAC1B,OAAO,KAAK,QAAQ;AAAA,UACpB,OAAO,oBAAoB,WAAW,SAAS,IAAI,IAAI,KAAK,QAAQ;AAAA,QAAA,EACpE;AAAA,MAAA;AAAA,IACJ;AAEF,qBAAiB,CAAE,CAAA;AAEnB,QAAI,SAAS,YAAY,YAAY,YAAY,CAAC,gBAAgB;AACnD;IACf;AAAA,EAAA,GACC,CAAC,OAAO,UAAU,UAAU,UAAU,kBAAkB,SAAS,CAAC;AAErE,eAAa,KAAK,MAAM;AACtB,qBAAiB,CAAE,CAAA;AACnB,aAAS,EAAE;AACX,QAAI,CAAC,gBAAgB;AACnB,eAAS,IAAI;AAAA,IACf;AACO;AACP,iBAAa,KAAK;AAAA,EAAA,CACnB;AAEK,QAAA,oBAAoB,CAAC,UAA+C;AACxE,QAAI,MAAM,OAAO,UAAS,iDAAgB,QAAO;AAC/C;AAAA,IAAA,WACS,MAAM,OAAO,OAAO;AAC7B,mBAAa,IAAI;AACjB,uBAAiB,CAAE,CAAA;AACV,eAAA,MAAM,OAAO,KAAK;AAE3B,wBAAkB,IAAI;AACtB,6BAAuB,EAAE;AAAA,IAAA,OACpB;AAEL,eAAS,IAAI;AACb,eAAS,EAAE;AACX,wBAAkB,IAAI;AACtB,iBAAW,MAAM;AACf,+BAAuB,EAAE;AACzB,yBAAiB,CAAE,CAAA;AAAA,SAClB,GAAG;AACN,mBAAa,KAAK;AAAA,IACpB;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;;AACxB,iBAAa,IAAI;AACjB,qBAAiB,CAAE,CAAA;AACX;AACR,mBAAS,YAAT,mBAAkB;AAAA,EAAO;AAGrB,QAAA,oBAAoB,CAAC,WAAwB;AACjD,sBAAkB,MAAM;AACxB,qBAAiB,CAAE,CAAA;AACnB,2BAAuB,EAAE;AACzB,aAAS,EAAE;AACF,aAAA,eAAe,SAAS,OAAO,KAAK;AAC7C,iBAAa,KAAK;AAAA,EAAA;AAEpB,QAAM,aAAa,MAAM;AACvB,qBAAiB,CAAE,CAAA;AACnB,eAAW,MAAM;AACf,UAAI,CAAC,gBAAgB;AACnB,iBAAS,EAAE;AACX,iBAAS,IAAI;AAAA,MACf;AAAA,OACC,CAAC;AAEG;AACP,iBAAa,KAAK;AAAA,EAAA;AAIlB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,MAAM,OAAO,IAAI,IAAI;AAAA,YACrB,eAAe;AAAA,YACf,MAAK;AAAA,YACL,QAAO,iDAAgB,UAAS;AAAA,YAChC;AAAA,YACA,WAAS;AAAA,YACT,WAAU;AAAA,YACV,SAAS;AAAA,YACT;AAAA,YACA,iBAAiB;AAAA,YACjB;AAAA,YACA,SAAS;AAAA,YACT,QAAQ;AAAA,YAER,UAAA,qBAAC,OAAI,EAAA,WAAU,uGACZ,UAAA;AAAA,cAAA,iCAAc,cAAa,EAAA;AAAA,cAC3B,CAAC,aAAa,oBAAC,cAAa,EAAA;AAAA,YAAA,GAC/B;AAAA,UAAA;AAAA,QACF;AAAA,QACC,cAAc,UAAU,KAAK,aAAa,CAAC,SAC1C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,mHAAmH,QAAQ,eAAe,YAAY;AAAA,YAClK,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,QAED,cAAc,UAAU,KAAK,aAAa,SACzC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,oHAAoH,QAAQ,eAAe,YAAY;AAAA,YACnK,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,QAED,cAAc,SAAS,KAAK,aAAa,SACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;;AAEd,QAAI,uBAAuB,KAAK,sBAAsB,QAAQ,QAAQ;AACpE,YAAM,mBAAkB,kBAAa,YAAb,mBAAsB,SAC5C;AAEF,yDAAiB,eAAe;AAAA,QAC9B,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,EACC,GAAA,CAAC,qBAAqB,QAAQ,MAAM,CAAC;AAClC,QAAA,kBAAkB,CAAC,UAAe;AACtC,UAAM,eAAe;AAAA,EAAA;AAGrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,oJAAoJ,QAAQ,eAAe,YAAY;AAAA;AAAA;AAAA,MAIjM,UAAS,mCAAA,IAAI,CAAC,QAAQ,UACrB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,8FACT,wBAAwB,QAAQ,gBAAgB,EAClD;AAAA,UACA,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,8BAAkB,MAAM;AAAA,UAC1B;AAAA,UACA,aAAa;AAAA,UAEb,UAAC,oBAAA,KAAA,EAAE,WAAU,eAAe,iBAAO,OAAM;AAAA,QAAA;AAAA,QAVpC,OAAO;AAAA,MAAA;AAAA,IAYf;AAAA,EAAA;AAGP;"}

package/dist/components/form/InputField.d.ts CHANGED Viewed

@@ -4,5 +4,6 @@ export interface IInputFieldProps extends IFormFieldGlobalProps {
     maxLength?: number;
     debounceTimeout?: number;
     manualRef?: React.RefObject<HTMLInputElement>;
+    disableAutocomplete?: boolean;
 }
-export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, required, onFocus, onBlur, manualRef, children, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, required, onFocus, onBlur, manualRef, children, disableAutocomplete, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/InputField.js CHANGED Viewed

@@ -25,7 +25,8 @@ function InputField({
   onBlur = () => {
   },
   manualRef,
-  children
+  children,
+  disableAutocomplete
 }) {
   var _a;
   const wrapperRef = React.useRef(null);
@@ -116,6 +117,7 @@ function InputField({
           {
             className: `text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full `,
             id: name,
+            name,
             disabled,
             value: inputValue || "",
             type,
@@ -130,7 +132,8 @@ function InputField({
             onBlur: (e) => {
               handleBlur(e);
               onBlur();
-            }
+            },
+            autoComplete: disableAutocomplete ? "off" : "on"
           }
         ) });
     }

package/dist/components/form/InputField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n manualRef?: React.RefObject<HTMLInputElement>;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n required,\r\n onFocus = () => {},\r\n onBlur = () => {},\r\n manualRef,\r\n children,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout \| null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value);\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = manualRef \|\| React.useRef(null);\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 ref = registeredRef \|\| fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref.current.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\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 bg-white \"\r\n disabled={disabled}\r\n value={inputValue \|\| \"\"}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength \|\| 4000}\r\n onBlur={handleBlur}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full `}\r\n id={name}\r\n disabled={disabled}\r\n value={inputValue \|\| \"\"}\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={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n />\r\n </>\r\n );\r\n }\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 ref={wrapperRef}\r\n id=\"component\"\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 <div\r\n className={`self-stretch w-full pl-3 pr-2 py-1 bg-white border justify-between items-center gap-0 inline-flex outline-none \r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \"!bg-gray-100 \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"flex-grow basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n <div className=\"items-center content-center flex-shrink flex\">\r\n {inputIsChanging === true && (\r\n <div className=\"w-6 h-6 relative flex items-center justify-center align-middle\">\r\n <SpinnerIcon icon={<FaSpinner />} />\r\n </div>\r\n )}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg\"\r\n onClick={handleClear}\r\n id={name + \":clear\"}\r\n >\r\n <MdClose />\r\n </div>\r\n )}\r\n {children}\r\n </div>\r\n </div>\r\n </div>\r\n {description && !isFocused && (\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 mt-1\"\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":["value"],"mappings":"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"}
1	+ {"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n manualRef?: React.RefObject<HTMLInputElement>;\r\n disableAutocomplete?: boolean;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n required,\r\n onFocus = () => {},\r\n onBlur = () => {},\r\n manualRef,\r\n children,\r\n disableAutocomplete,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout \| null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value);\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = manualRef \|\| React.useRef(null);\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 ref = registeredRef \|\| fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref.current.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\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 bg-white \"\r\n disabled={disabled}\r\n value={inputValue \|\| \"\"}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength \|\| 4000}\r\n onBlur={handleBlur}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full `}\r\n id={name}\r\n name={name}\r\n disabled={disabled}\r\n value={inputValue \|\| \"\"}\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={(e) => handleDebouncedChange(e)}\r\n onFocus={() => {\r\n setIsFocused(true);\r\n onFocus();\r\n }}\r\n onBlur={(e) => {\r\n handleBlur(e);\r\n onBlur();\r\n }}\r\n autoComplete={disableAutocomplete ? \"off\" : \"on\"}\r\n />\r\n </>\r\n );\r\n }\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 ref={wrapperRef}\r\n id=\"component\"\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 <div\r\n className={`self-stretch w-full pl-3 pr-2 py-1 bg-white border justify-between items-center gap-0 inline-flex outline-none \r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \"!bg-gray-100 \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"flex-grow basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n <div className=\"items-center content-center flex-shrink flex\">\r\n {inputIsChanging === true && (\r\n <div className=\"w-6 h-6 relative flex items-center justify-center align-middle\">\r\n <SpinnerIcon icon={<FaSpinner />} />\r\n </div>\r\n )}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg\"\r\n onClick={handleClear}\r\n id={name + \":clear\"}\r\n >\r\n <MdClose />\r\n </div>\r\n )}\r\n {children}\r\n </div>\r\n </div>\r\n </div>\r\n {description && !isFocused && (\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 mt-1\"\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":["value"],"mappings":"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"}

package/package.json CHANGED Viewed

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