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

package/dist/components/form/FormField.js

@@ -160,7 +160,7 @@ const FormField = ({
           }
         ) });
       case "radioGroup":
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col", id: name, children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs(
           "label",
           {
             className: "inline-flex items-center space-x-2 my-2",
@@ -271,14 +271,35 @@ const FormField = ({
           children: /* @__PURE__ */ jsxs("div", { className: "flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full  ", children: [
             renderInput(),
             children && /* @__PURE__ */ jsx("div", { onClick: focusInput, children }),
-            clearable && value && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(MdClose, { onClick: handleClear, size: 20 }) }),
+            clearable && value && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+              MdClose,
+              {
+                onClick: handleClear,
+                size: 20,
+                id: name + ":clear"
+              }
+            ) }),
             " "
           ] })
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
-    errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_e = errors[name]) == null ? void 0 : _e.message })
+    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: (_e = errors[name]) == null ? void 0 : _e.message
+      }
+    )
   ] });
 };
 export {

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

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

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

@@ -1,7 +1,8 @@
 import { IFormFieldGlobalProps } from '../../types';
-
+import * as React from "react";
 export interface IInputFieldProps extends IFormFieldGlobalProps {
     maxLength?: number;
     debounceTimeout?: number;
+    manualRef?: React.RefObject<HTMLInputElement>;
 }
-export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, required, }: 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, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/InputField.js

@@ -19,7 +19,13 @@ function InputField({
   errors = {},
   rounded = true,
   debounceTimeout,
-  required
+  required,
+  onFocus = () => {
+  },
+  onBlur = () => {
+  },
+  manualRef,
+  children
 }) {
   var _a;
   const wrapperRef = React.useRef(null);
@@ -40,7 +46,7 @@ function InputField({
       }
     });
   };
-  const fallbackRef = React.useRef(null);
+  const fallbackRef = manualRef || React.useRef(null);
   const {
     ref: registeredRef = fallbackRef,
     onBlur: formOnBlur = () => {
@@ -117,8 +123,14 @@ function InputField({
             ref,
             placeholder,
             onChange: (e) => handleDebouncedChange(e),
-            onFocus: () => setIsFocused(true),
-            onBlur: handleBlur
+            onFocus: () => {
+              setIsFocused(true);
+              onFocus();
+            },
+            onBlur: (e) => {
+              handleBlur(e);
+              onBlur();
+            }
           }
         ) });
     }
@@ -139,32 +151,47 @@ function InputField({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `self-stretch w-full px-3  py-1 bg-white   border justify-start items-center gap-0 inline-flex outline-none 
+              className: `self-stretch w-full pl-3 pr-2  py-1 bg-white   border justify-between items-center gap-0 inline-flex outline-none 
                ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
                ${rounded ? " rounded-lg " : " rounded-none "}
                ${disabled ? "!bg-gray-100 " : ""}`,
               onClick: handleSetFocus,
               children: [
-                /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: renderInput() }),
-                inputIsChanging === true && /* @__PURE__ */ jsx(SpinnerIcon, { icon: /* @__PURE__ */ jsx(FaSpinner, {}) }),
-                value && !disabled && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "w-6 h-6 relative  cursor-pointer  ",
-                    onClick: handleClear,
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: /* @__PURE__ */ jsx(MdClose, {}) }),
-                      " "
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx("div", { className: "flex-grow  basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: renderInput() }),
+                /* @__PURE__ */ jsxs("div", { className: "items-center content-center flex-shrink flex", children: [
+                  inputIsChanging === true && /* @__PURE__ */ jsx("div", { className: "w-6 h-6 relative flex  items-center justify-center align-middle", children: /* @__PURE__ */ jsx(SpinnerIcon, { icon: /* @__PURE__ */ jsx(FaSpinner, {}) }) }),
+                  value && !disabled && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-6 h-6 relative flex cursor-pointer items-center justify-center align-middle hover:bg-gray-100 rounded-full text-lg",
+                      onClick: handleClear,
+                      id: name + ":clear",
+                      children: /* @__PURE__ */ jsx(MdClose, {})
+                    }
+                  ),
+                  children
+                ] })
               ]
             }
           )
         ] }),
-        description && !isFocused && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+        description && !isFocused && /* @__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 mt-1", 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 mt-1",
+            id: name + ":error",
+            children: (_a = errors[name]) == null ? void 0 : _a.message
+          }
+        )
       ]
     }
   ) });

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

@@ -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}\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}: 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 = 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={() => setIsFocused(true)}\r\n              onBlur={handleBlur}\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 px-3  py-1 bg-white   border justify-start 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=\"grow shrink 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            {inputIsChanging === true && <SpinnerIcon icon={<FaSpinner />} />}\r\n            {value && !disabled && (\r\n              <div\r\n                className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                onClick={handleClear}\r\n              >\r\n                <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                  <MdClose />\r\n                </div>{\" \"}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n        {description && !isFocused && (\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 mt-1\">\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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"}
+{"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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"}

package/dist/components/form/PositionsSelectorSingle.js

@@ -3,8 +3,8 @@ import { useState, useEffect } from "react";
 import '../../assets/tailwind.css';/* empty css                      */
 import Button from "../Button.js";
 import AutocompleteSearchBar from "./AutocompleteSearchBar.js";
-import FormField from "./FormField.js";
 import { a as MdCheck } from "../../index-BMFehNPK.js";
+import FormField from "./FormField.js";
 import SectionTitle from "../layout/SectionTitle.js";
 import "../../index.esm-DjnEVdAW.js";
 import "../../contexts/FederationContext.js";

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

@@ -5,4 +5,4 @@ export interface ISelectFieldProps extends IFormFieldGlobalProps {
     valueKey?: string;
     labelKey?: string;
 }
-export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, required, rounded, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, required, disabled, rounded, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField.js

@@ -14,9 +14,10 @@ function SelectField({
   errors = {},
   clearable,
   required,
+  disabled,
   rounded = true
 }) {
-  var _a;
+  var _a, _b, _c;
   const [isFocused, setIsFocused] = React.useState(false);
   const ref = React.useRef(null);
   const handleClear = (e) => {
@@ -47,7 +48,7 @@ function SelectField({
     setIsFocused(false);
   };
   const currentlySelectedOption = React.useMemo(() => {
-    if (value === null || value === void 0 || value === "")
+    if (value === void 0 || value === "")
       return null;
     return options == null ? void 0 : options.find((option) => option.value === value);
   }, [options, value]);
@@ -92,8 +93,8 @@ function SelectField({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative " + className,
-      id: "component",
+      className: "w-full min-h-30   flex-col justify-start items-start gap-1.5 inline-flex " + className,
+      id: "selectField",
       ref,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
@@ -114,26 +115,35 @@ function SelectField({
             {
               className: `self-stretch w-full px-3  py-1 bg-white  border justify-start items-center gap-0 inline-flex outline-none 
                ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
-               
-                  ${rounded ? " rounded-lg " : " rounded-none "}
-                  
+                  ${isFocused && ((_a = errors[name]) == null ? void 0 : _a.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  
+                    ${rounded ? " rounded-lg " : " rounded-none "}
+                     ${!isFocused && ((_b = errors[name]) == null ? void 0 : _b.message) ? "border-red-200" : ""}   
+                   ${disabled ? "bg-gray-100" : "bg-transparent"}
                   `,
               onClick: () => handleToggleFocus(),
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full", children: [
-                    currentlySelectedOption == null ? void 0 : currentlySelectedOption.label,
-                    !(currentlySelectedOption == null ? void 0 : currentlySelectedOption.label) && placeholder && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal", children: [
-                      " ",
-                      placeholder
-                    ] })
-                  ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 min-h-5 xl:!min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full",
+                      id: name,
+                      children: [
+                        currentlySelectedOption == null ? void 0 : currentlySelectedOption.label,
+                        !(currentlySelectedOption == null ? void 0 : currentlySelectedOption.label) && placeholder && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal", children: [
+                          " ",
+                          placeholder
+                        ] })
+                      ]
+                    }
+                  ),
                   /* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: currentlySelectedOption == null ? void 0 : currentlySelectedOption.description })
                 ] }),
                 clearable && value !== "" && value !== null && value !== void 0 && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "w-6 h-6 relative  cursor-pointer  ",
+                    id: name + ":clear",
                     onClick: handleClear,
                     children: [
                       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: /* @__PURE__ */ jsx(MdClose, {}) }),
@@ -151,8 +161,22 @@ function SelectField({
         ] }),
         " ",
         /* @__PURE__ */ jsx("div", { className: "w-full relative", children: isFocused && listOfOptions() }),
-        description && !isFocused && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
-        errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
+        description && !isFocused && /* @__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",
+            id: name + ":error",
+            children: (_c = errors[name]) == null ? void 0 : _c.message
+          }
+        )
       ]
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  className,\r\n  errors = {},\r\n  clearable,\r\n  required,\r\n  rounded = true,\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\r\n  const handleClear = (e: any) => {\r\n    // value;\r\n    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\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 handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (value === null || value === undefined || value === \"\") return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px] min-w-20  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 \"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-sm font-normal  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 sm-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && value !== \"\" && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\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        id=\"component\"\r\n        ref={ref}\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n          {label && (\r\n            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label} {required ? \"*\" : \"\"}\r\n            </label>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white  border justify-start items-center gap-0 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n               \r\n                  ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n                  \r\n                  `}\r\n            onClick={() => handleToggleFocus()}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              <div className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full\">\r\n                {currentlySelectedOption?.label}\r\n                {!currentlySelectedOption?.label && placeholder && (\r\n                  <span className=\"text-slate-400 font-normal\">\r\n                    {\" \"}\r\n                    {placeholder}\r\n                  </span>\r\n                )}\r\n              </div>\r\n              <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                {currentlySelectedOption?.description}\r\n              </div>\r\n            </div>\r\n            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              value !== undefined && (\r\n                <div\r\n                  className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                  onClick={handleClear}\r\n                >\r\n                  <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                    <MdClose />\r\n                  </div>{\" \"}\r\n                </div>\r\n              )}\r\n            <div className=\"w-6 h-6 relative  cursor-pointer \">\r\n              <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                {isFocused && <MdExpandLess />}\r\n                {!isFocused && <MdExpandMore />}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>{\" \"}\r\n        <div className=\"w-full relative\">{isFocused && listOfOptions()}</div>\r\n        {description && !isFocused && (\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":[],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  className,\r\n  errors = {},\r\n  clearable,\r\n  required,\r\n  disabled,\r\n  rounded = true,\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\r\n  const handleClear = (e: any) => {\r\n    // value;\r\n    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\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 handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (value === undefined || value === \"\") return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px] min-w-20  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 \"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-sm font-normal  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 sm-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && value !== \"\" && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={\r\n          \"w-full min-h-30   flex-col justify-start items-start gap-1.5 inline-flex \" +\r\n          className\r\n        }\r\n        id=\"selectField\"\r\n        ref={ref}\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n          {label && (\r\n            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label} {required ? \"*\" : \"\"}\r\n            </label>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white  border justify-start items-center gap-0 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\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                    ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n                     ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"}   \r\n                   ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}\r\n                  `}\r\n            onClick={() => handleToggleFocus()}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-5 xl:!min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              <div\r\n                className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full\"\r\n                id={name}\r\n              >\r\n                {currentlySelectedOption?.label}\r\n                {!currentlySelectedOption?.label && placeholder && (\r\n                  <span className=\"text-slate-400 font-normal\">\r\n                    {\" \"}\r\n                    {placeholder}\r\n                  </span>\r\n                )}\r\n              </div>\r\n              <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                {currentlySelectedOption?.description}\r\n              </div>\r\n            </div>\r\n            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              value !== undefined && (\r\n                <div\r\n                  className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                  id={name + \":clear\"}\r\n                  onClick={handleClear}\r\n                >\r\n                  <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                    <MdClose />\r\n                  </div>{\" \"}\r\n                </div>\r\n              )}\r\n            <div className=\"w-6 h-6 relative  cursor-pointer \">\r\n              <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                {isFocused && <MdExpandLess />}\r\n                {!isFocused && <MdExpandMore />}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>{\" \"}\r\n        <div className=\"w-full relative\">{isFocused && listOfOptions()}</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\"\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":[],"mappings":"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"}

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 
 export { default as Button } from './components/Button.tsx';
 export { default as AutocompleteSearchBar } from './components/form/AutocompleteSearchBar.tsx';
+export { default as AutocompleteSearchBarServer } from './components/form/AutocompleteSearchBarServer.tsx';
 export { default as FormField } from './components/form/FormField.tsx';
 export { default as InputField } from './components/form/InputField.tsx';
 export { default as SelectField } from './components/form/SelectField.tsx';

package/dist/main.js

@@ -1,23 +1,24 @@
 import './assets/tailwind.css';/* empty css                  */
 import { default as default2 } from "./components/Button.js";
 import { default as default3 } from "./components/form/AutocompleteSearchBar.js";
-import { default as default4 } from "./components/form/FormField.js";
-import { default as default5 } from "./components/form/InputField.js";
-import { default as default6 } from "./components/form/SelectField.js";
-import { default as default7 } from "./components/form/RadioGroup.js";
-import { default as default8 } from "./components/form/FileInput.js";
-import { default as default9 } from "./components/layout/SectionTitle.js";
-import { default as default10 } from "./components/layout/PageTitle.js";
-import { default as default11 } from "./components/Spinner.js";
+import { default as default4 } from "./components/form/AutocompleteSearchBarServer.js";
+import { default as default5 } from "./components/form/FormField.js";
+import { default as default6 } from "./components/form/InputField.js";
+import { default as default7 } from "./components/form/SelectField.js";
+import { default as default8 } from "./components/form/RadioGroup.js";
+import { default as default9 } from "./components/form/FileInput.js";
+import { default as default10 } from "./components/layout/SectionTitle.js";
+import { default as default11 } from "./components/layout/PageTitle.js";
+import { default as default12 } from "./components/Spinner.js";
 import { ConfirmationModalDialog } from "./components/ConfirmationModalDialog.js";
 import { Modal } from "./components/Modal.js";
-import { default as default12 } from "./components/form/PositionsSelectorSingle.js";
-import { default as default13 } from "./components/Calendar.js";
-import { default as default14 } from "./components/datatable/DataTable.js";
-import { default as default15 } from "./components/datatable/DataTableServer.js";
-import { default as default16 } from "./components/form/DateRangeField.js";
-import { default as default17 } from "./components/form/DateField.js";
-import { default as default18 } from "./components/SpinnerIcon.js";
+import { default as default13 } from "./components/form/PositionsSelectorSingle.js";
+import { default as default14 } from "./components/Calendar.js";
+import { default as default15 } from "./components/datatable/DataTable.js";
+import { default as default16 } from "./components/datatable/DataTableServer.js";
+import { default as default17 } from "./components/form/DateRangeField.js";
+import { default as default18 } from "./components/form/DateField.js";
+import { default as default19 } from "./components/SpinnerIcon.js";
 import { FederationContext, FederationContextProvider } from "./contexts/FederationContext.js";
 import { useFederationContext } from "./contexts/useFederationContext.js";
 import { getFullName, getFullNameList, getFullNameListPositionWithEmployee, getFullNamePositionWithEmployee } from "./utils/getFullName.js";
@@ -28,29 +29,30 @@ import { hasRole } from "./utils/hasRole.js";
 import { EApproverRoles, EApproverTypes, EDecisionsTranslations } from "./types.js";
 export {
   default3 as AutocompleteSearchBar,
+  default4 as AutocompleteSearchBarServer,
   default2 as Button,
-  default13 as Calendar,
+  default14 as Calendar,
   ConfirmationModalDialog,
-  default14 as DataTable,
-  default15 as DataTableServer,
-  default17 as DateField,
-  default16 as DateRangeField,
+  default15 as DataTable,
+  default16 as DataTableServer,
+  default18 as DateField,
+  default17 as DateRangeField,
   EApproverRoles,
   EApproverTypes,
   EDecisionsTranslations,
   FederationContext,
   FederationContextProvider,
-  default8 as FileInput,
-  default4 as FormField,
-  default5 as InputField,
+  default9 as FileInput,
+  default5 as FormField,
+  default6 as InputField,
   Modal,
-  default10 as PageTitle,
-  default12 as PositionsSelectorSingle,
-  default7 as RadioGroup,
-  default9 as SectionTitle,
-  default6 as SelectField,
-  default11 as Spinner,
-  default18 as SpinnerIcon,
+  default11 as PageTitle,
+  default13 as PositionsSelectorSingle,
+  default8 as RadioGroup,
+  default10 as SectionTitle,
+  default7 as SelectField,
+  default12 as Spinner,
+  default19 as SpinnerIcon,
   getFullName,
   getFullNameList,
   getFullNameListPositionWithEmployee,

package/dist/main.js.map

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

package/dist/types.d.ts

@@ -189,7 +189,10 @@ export interface IFormFieldGlobalProps {
     className?: string;
     rounded?: boolean;
     onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
     inline?: boolean;
+    ref?: any;
 }
 export interface SysConfigHolidayEntityResponse {
     "id": number;