iguazio.dashboard-react-controls 3.0.0 → 3.0.1

package/dist/components/FormCombobox/FormCombobox.mjs

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import { useState as c, useRef as k, useEffect as C, useCallback as K } from "react";
+import { useState as c, useRef as R, useEffect as C, useCallback as K } from "react";
 import { useField as Ee, Field as Oe } from "react-final-form";
 import { isEmpty as q } from "lodash";
 import t from "prop-types";
@@ -32,7 +32,7 @@ const Be = ({
   onBlur: _ = null,
   onChange: g = null,
   onFocus: N = null,
-  required: R = !1,
+  required: T = !1,
   rules: H = [],
   selectDefaultValue: re = {
     label: "",
@@ -45,9 +45,9 @@ const Be = ({
   validator: U = null,
   withoutBorder: ae = !1
 }) => {
-  const { input: a, meta: r } = Ee(d), [T, F] = c(ie), [n, ne] = c(re), [ce, D] = c({
+  const { input: a, meta: r } = Ee(d), [F, D] = c(ie), [n, ne] = c(re), [ce, L] = c({
     left: "0px"
-  }), [f, u] = c(!1), [L, w] = c(!1), [x, X] = c(S), [v, y] = c(!1), [V, de] = c(!1), [I, me] = c(H), [$, E] = c(!1), p = k(), A = k(), b = k(), P = k();
+  }), [f, u] = c(!1), [$, w] = c(!1), [x, X] = c(S), [v, y] = c(!1), [I, de] = c(!1), [V, me] = c(H), [A, E] = c(!1), p = R(), P = R(), b = R(), O = R();
   We(p, () => E(!1));
   const fe = h("form-field__label", W && "form-field__label-disabled"), ue = h(
     "form-field-combobox__input",
@@ -69,7 +69,7 @@ const Be = ({
   }, [r.invalid, r.modified, r.submitFailed, r.touched, r.validating]);
   const j = K(
     (e) => {
-      p.current && !p.current.contains(e.target) && P.current && !P.current.contains(e.target) && (y(!1), u(!1), w(!1), a.onBlur(new Event("blur")), _ && _(a.value));
+      p.current && !p.current.contains(e.target) && O.current && !O.current.contains(e.target) && (y(!1), u(!1), w(!1), a.onBlur(new Event("blur")), _ && _(a.value));
     },
     [a, _]
   ), Y = (e) => {
@@ -77,20 +77,20 @@ const Be = ({
   };
   C(() => (window.addEventListener("click", j), () => {
     window.removeEventListener("click", j);
-  }), [j]), C(() => (($ || f || L) && window.addEventListener("scroll", Y, !0), () => {
+  }), [j]), C(() => ((A || f || $) && window.addEventListener("scroll", Y, !0), () => {
     window.removeEventListener("scroll", Y, !0);
-  }), [f, L, $]);
-  const pe = () => I.map(({ isValid: e = !1, label: o, name: s }) => /* @__PURE__ */ i(Re, { valid: e, validationMessage: o }, s)), be = (e) => {
+  }), [f, $, A]);
+  const pe = () => V.map(({ isValid: e = !1, label: o, name: s }) => /* @__PURE__ */ i(Re, { valid: e, validationMessage: o }, s)), be = (e) => {
     const o = e.target;
-    D({
+    L({
       left: `${o.selectionStart < 30 ? o.selectionStart : 30}ch`
-    }), v && y(!1), F(o.value), a.onChange(`${n.id}${o.value}`), g && g(n.id, o.value), x.length > 0 && w(!0);
+    }), v && y(!1), D(o.value), a.onChange(`${n.id}${o.value}`), g && g(n.id, o.value), x.length > 0 && w(!0);
   }, he = (e) => {
-    e.id !== n.id && (ne(e), a.onChange(e.id), F(""), g && g(e.id), u(!1), b.current.disabled = !1, b.current.focus());
+    e.id !== n.id && (ne(e), a.onChange(e.id), D(""), g && g(e.id), u(!1), b.current.disabled = !1, b.current.focus());
   }, _e = (e) => {
-    const o = T.split("/"), s = o.length - 1;
+    const o = F.split("/"), s = o.length - 1;
     let l = e.customDelimiter ? o[s].replace(new RegExp(`${e.customDelimiter}.*`), "") + e.id : e.id;
-    o.length <= te - 1 && (l += "/"), o[s] = l, v && y(!1), o.join("/") !== T && (F(o.join("/")), a.onChange(`${n.id}${o.join("/")}`), g && g(n.id, o.join("/"))), w(!1), b.current.focus(), D({
+    o.length <= te - 1 && (l += "/"), o[s] = l, v && y(!1), o.join("/") !== F && (D(o.join("/")), a.onChange(`${n.id}${o.join("/")}`), g && g(n.id, o.join("/"))), w(!1), b.current.focus(), L({
       left: `${b.current.selectionStart < 30 ? b.current.selectionStart : 30}ch`
     });
   }, ge = () => {
@@ -100,24 +100,24 @@ const Be = ({
       () => S.filter((o) => o.id.startsWith(e.target.value))
     );
   }, z = K(() => {
-    f ? (u(!1), a.onBlur(new Event("blur")), _ && _(a.value)) : (w(!1), E(!1), D({
+    f ? (u(!1), a.onBlur(new Event("blur")), _ && _(a.value)) : (w(!1), E(!1), L({
       left: "0px"
     }), u(!0), a.onFocus(new Event("focus")), N && N(a.value));
   }, [a, _, N, f]), xe = (e = "", o) => {
     const s = e.startsWith(n.id) ? e.substring(n.id.length) : e ?? "";
     let l = null;
-    if (!q(I)) {
-      const [M, Ve] = De(H, s), Ie = M.filter((O) => !O.isValid);
-      Ve || (l = Ie.map((O) => ({ name: O.name, label: O.label })));
+    if (!q(V)) {
+      const [M, Ie] = De(H, s), Ve = M.filter((k) => !k.isValid);
+      Ie || (l = Ve.map((k) => ({ name: k.name, label: k.label })));
     }
-    return q(l) && (s.startsWith(" ") ? l = { name: "empty", label: B } : R && s.trim().length === 0 && (l = { name: "required", label: "This field is required" })), !l && U && (l = U(e, o)), l;
+    return q(l) && (s.startsWith(" ") ? l = { name: "empty", label: B } : T && s.trim().length === 0 && (l = { name: "required", label: "This field is required" })), !l && U && (l = U(e, o)), l;
   }, ve = () => {
     E((e) => !e), u(!1);
   }, Ne = h(
     Z,
     "form-field-combobox",
     "form-field",
-    V && "form-field-combobox_invalid"
+    I && "form-field-combobox_invalid"
   ), Se = h(
     f && "form-field-combobox__icon_open",
     "form-field-combobox__icon"
@@ -125,7 +125,7 @@ const Be = ({
     "form-field__wrapper",
     `form-field__wrapper-${ee}`,
     W && "form-field__wrapper-disabled",
-    V && "form-field__wrapper-invalid",
+    I && "form-field__wrapper-invalid",
     ae && "without-border"
   );
   return /* @__PURE__ */ i(Oe, { name: d, validate: xe, children: ({ input: e, meta: o }) => {
@@ -139,11 +139,11 @@ const Be = ({
         children: [
           G && /* @__PURE__ */ i("div", { className: fe, children: /* @__PURE__ */ m("label", { "data-testid": "label", htmlFor: e.name, children: [
             G,
-            (R || I.find((l) => l.name === "required")) && /* @__PURE__ */ i("span", { className: "form-field__label-mandatory", children: " *" })
+            (T || V.find((l) => l.name === "required")) && /* @__PURE__ */ i("span", { className: "form-field__label-mandatory", children: " *" })
           ] }) }),
           /* @__PURE__ */ m("div", { className: ye, children: [
             /* @__PURE__ */ i("div", { className: "form-field__icons", children: /* @__PURE__ */ i(Pe, { className: Se, onClick: z }) }),
-            /* @__PURE__ */ m("div", { className: "form-field-combobox__select form-field__control", ref: A, children: [
+            /* @__PURE__ */ m("div", { className: "form-field-combobox__select form-field__control", ref: P, children: [
               /* @__PURE__ */ m("div", { className: "form-field-combobox__select-header", onClick: z, children: [
                 /* @__PURE__ */ i("span", { className: Ce, children: n.id }),
                 n.id.length === 0 && J && /* @__PURE__ */ i("div", { className: "form-field-combobox__placeholder", children: /* @__PURE__ */ i("label", { children: J }) })
@@ -153,11 +153,11 @@ const Be = ({
                 {
                   headerIsHidden: !0,
                   customPosition: {
-                    element: A,
+                    element: P,
                     position: "bottom-right"
                   },
                   className: "form-field-combobox__dropdown form-field-combobox__dropdown-select",
-                  children: /* @__PURE__ */ i("ul", { className: "form-field-combobox__dropdown-list", children: se.map((l) => {
+                  children: /* @__PURE__ */ i("ul", { className: "form-field-combobox__dropdown-list", ref: O, children: se.map((l) => {
                     if (!l.hidden) {
                       const M = h(
                         "form-field-combobox__dropdown-list-option",
@@ -187,24 +187,24 @@ const Be = ({
                 onFocus: ge,
                 placeholder: le,
                 ref: b,
-                required: R,
+                required: T,
                 type: "text",
-                value: T
+                value: F
               }
             ),
-            L && (x.length > 0 || v) && /* @__PURE__ */ i(
+            $ && (x.length > 0 || v) && /* @__PURE__ */ i(
               Q,
               {
                 headerIsHidden: !0,
                 customPosition: {
-                  element: A,
+                  element: P,
                   position: "bottom-right"
                 },
                 className: "form-field-combobox__dropdown form-field-combobox__dropdown-suggestions",
                 style: {
                   ...ce
                 },
-                children: /* @__PURE__ */ m("div", { ref: P, children: [
+                children: /* @__PURE__ */ m("div", { ref: O, children: [
                   !oe && /* @__PURE__ */ m("div", { className: "form-field-combobox__search-wrapper", children: [
                     /* @__PURE__ */ i(
                       "input",
@@ -232,7 +232,7 @@ const Be = ({
               }
             ),
             /* @__PURE__ */ m("div", { className: "form-field__icons", children: [
-              V && !Array.isArray(o.error) && /* @__PURE__ */ i(
+              I && !Array.isArray(o.error) && /* @__PURE__ */ i(
                 Fe,
                 {
                   className: "form-field__warning",
@@ -240,9 +240,9 @@ const Be = ({
                   children: /* @__PURE__ */ i(qe, {})
                 }
               ),
-              V && Array.isArray(o.error) && /* @__PURE__ */ i("button", { className: "form-field__warning", onClick: ve, children: /* @__PURE__ */ i(Me, {}) })
+              I && Array.isArray(o.error) && /* @__PURE__ */ i("button", { className: "form-field__warning", onClick: ve, children: /* @__PURE__ */ i(Me, {}) })
             ] }),
-            !q(I) && /* @__PURE__ */ i(ke, { show: $, ref: p, children: pe() })
+            !q(V) && /* @__PURE__ */ i(ke, { show: A, ref: { refInputContainer: p }, children: pe() })
           ] })
         ]
       }

package/dist/components/FormCombobox/FormCombobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormCombobox.mjs","sources":["../../../src/lib/components/FormCombobox/FormCombobox.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Field, useField } from 'react-final-form'\nimport { isEmpty } from 'lodash'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\n\nimport OptionsMenu from '../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../elements/ValidationTemplate/ValidationTemplate'\nimport PopUpDialog from '../PopUpDialog/PopUpDialog'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { useDetectOutsideClick } from '../../hooks'\nimport { COMBOBOX_SELECT_OPTIONS, COMBOBOX_SUGGESTION_LIST, DENSITY } from '../../types'\n\nimport Arrow from '../../images/arrow.svg?react'\nimport SearchIcon from '../../images/search.svg?react'\nimport WarningIcon from '../../images/warning.svg?react'\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\n\nimport './formCombobox.scss'\n\nconst FormCombobox = ({\n  comboboxClassName = '',\n  density = 'normal',\n  disabled = false,\n  hideSearchInput = false,\n  inputDefaultValue = '',\n  inputPlaceholder = '',\n  invalidText = 'Invalid',\n  label = '',\n  maxSuggestedMatches = 1,\n  name,\n  onBlur = null,\n  onChange = null,\n  onFocus = null,\n  required = false,\n  rules = [],\n  selectDefaultValue = {\n    label: '',\n    id: '',\n    className: ''\n  },\n  selectOptions,\n  selectPlaceholder = '',\n  suggestionList = [],\n  validator = null,\n  withoutBorder = false\n}) => {\n  const { input, meta } = useField(name)\n  const [inputValue, setInputValue] = useState(inputDefaultValue)\n  const [selectValue, setSelectValue] = useState(selectDefaultValue)\n  const [dropdownStyle, setDropdownStyle] = useState({\n    left: '0px'\n  })\n  const [showSelectDropdown, setShowSelectDropdown] = useState(false)\n  const [showSuggestionList, setShowSuggestionList] = useState(false)\n  const [dropdownList, setDropdownList] = useState(suggestionList)\n  const [searchIsFocused, setSearchIsFocused] = useState(false)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n  const comboboxRef = useRef()\n  const selectRef = useRef()\n  const inputRef = useRef()\n  const suggestionListRef = useRef()\n  useDetectOutsideClick(comboboxRef, () => setShowValidationRules(false))\n\n  const labelClassNames = classnames('form-field__label', disabled && 'form-field__label-disabled')\n  const inputClassNames = classnames(\n    'form-field-combobox__input',\n    selectValue.id.length === 0 && 'form-field-combobox__input_hidden'\n  )\n\n  useEffect(() => {\n    setValidationRules(prevState =>\n      prevState.map(rule => ({\n        ...rule,\n        isValid:\n          !meta.error || !Array.isArray(meta.error)\n            ? true\n            : !meta.error.some(err => err.name === rule.name)\n      }))\n    )\n  }, [meta.error])\n\n  useEffect(() => {\n    if (!searchIsFocused) {\n      if (JSON.stringify(dropdownList) !== JSON.stringify(suggestionList)) {\n        setDropdownList(suggestionList)\n      }\n    }\n  }, [dropdownList, suggestionList, searchIsFocused])\n\n  useEffect(() => {\n    setIsInvalid(\n      meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    )\n  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])\n\n  const handleOutsideClick = useCallback(\n    event => {\n      if (\n        comboboxRef.current &&\n        !comboboxRef.current.contains(event.target) &&\n        suggestionListRef.current &&\n        !suggestionListRef.current.contains(event.target)\n      ) {\n        setSearchIsFocused(false)\n        setShowSelectDropdown(false)\n        setShowSuggestionList(false)\n        input.onBlur(new Event('blur'))\n        onBlur && onBlur(input.value)\n      }\n    },\n    [input, onBlur]\n  )\n\n  const handleScroll = event => {\n    if (comboboxRef.current && comboboxRef.current.contains(event.target)) return\n\n    if (\n      !event.target.closest('.pop-up-dialog') &&\n      !event.target.classList.contains('form-field-combobox')\n    ) {\n      setShowValidationRules(false)\n      setShowSelectDropdown(false)\n      setShowSuggestionList(false)\n      inputRef.current.blur()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick)\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick)\n    }\n  }, [handleOutsideClick])\n\n  useEffect(() => {\n    if (showValidationRules || showSelectDropdown || showSuggestionList) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [showSelectDropdown, showSuggestionList, showValidationRules])\n\n  const getValidationRules = () => {\n    return validationRules.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }\n\n  const handleInputChange = event => {\n    const target = event.target\n\n    setDropdownStyle({\n      left: `${target.selectionStart < 30 ? target.selectionStart : 30}ch`\n    })\n\n    if (searchIsFocused) {\n      setSearchIsFocused(false)\n    }\n\n    setInputValue(target.value)\n    input.onChange(`${selectValue.id}${target.value}`)\n    onChange && onChange(selectValue.id, target.value)\n\n    if (dropdownList.length > 0) {\n      setShowSuggestionList(true)\n    }\n  }\n\n  const handleSelectOptionClick = selectedOption => {\n    if (selectedOption.id !== selectValue.id) {\n      setSelectValue(selectedOption)\n      input.onChange(selectedOption.id)\n      setInputValue('')\n      onChange && onChange(selectedOption.id)\n      setShowSelectDropdown(false)\n      inputRef.current.disabled = false\n      inputRef.current.focus()\n    }\n  }\n\n  const handleSuggestionListOptionClick = option => {\n    const inputValueItems = inputValue.split('/')\n    const valueIndex = inputValueItems.length - 1\n    let formattedValue = option.customDelimiter\n      ? inputValueItems[valueIndex].replace(new RegExp(`${option.customDelimiter}.*`), '') +\n        option.id\n      : option.id\n\n    if (inputValueItems.length <= maxSuggestedMatches - 1) formattedValue += '/'\n\n    inputValueItems[valueIndex] = formattedValue\n\n    if (searchIsFocused) {\n      setSearchIsFocused(false)\n    }\n\n    if (inputValueItems.join('/') !== inputValue) {\n      setInputValue(inputValueItems.join('/'))\n      input.onChange(`${selectValue.id}${inputValueItems.join('/')}`)\n      onChange && onChange(selectValue.id, inputValueItems.join('/'))\n    }\n\n    setShowSuggestionList(false)\n    inputRef.current.focus()\n    setDropdownStyle({\n      left: `${inputRef.current.selectionStart < 30 ? inputRef.current.selectionStart : 30}ch`\n    })\n  }\n\n  const inputOnFocus = () => {\n    onFocus && onFocus()\n    input.onFocus(new Event('focus'))\n\n    if (showSelectDropdown) {\n      setShowSelectDropdown(false)\n    }\n\n    setShowSuggestionList(true)\n  }\n\n  const suggestionListSearchChange = event => {\n    event.persist()\n    setDropdownList(() =>\n      suggestionList.filter(option => {\n        return option.id.startsWith(event.target.value)\n      })\n    )\n  }\n\n  const toggleSelect = useCallback(() => {\n    if (showSelectDropdown) {\n      setShowSelectDropdown(false)\n      input.onBlur(new Event('blur'))\n      onBlur && onBlur(input.value)\n    } else {\n      setShowSuggestionList(false)\n      setShowValidationRules(false)\n      setDropdownStyle({\n        left: '0px'\n      })\n      setShowSelectDropdown(true)\n      input.onFocus(new Event('focus'))\n      onFocus && onFocus(input.value)\n    }\n  }, [input, onBlur, onFocus, showSelectDropdown])\n\n  const validateField = (value = '', allValues) => {\n    const valueToValidate = value.startsWith(selectValue.id)\n      ? value.substring(selectValue.id.length)\n      : (value ?? '')\n    let validationError = null\n\n    if (!isEmpty(validationRules)) {\n      const [newRules, isValidField] = checkPatternsValidity(rules, valueToValidate)\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    if (isEmpty(validationError)) {\n      if (valueToValidate.startsWith(' ')) {\n        validationError = { name: 'empty', label: invalidText }\n      } else if (required && valueToValidate.trim().length === 0) {\n        validationError = { name: 'required', label: 'This field is required' }\n      }\n    }\n\n    if (!validationError && validator) {\n      validationError = validator(value, allValues)\n    }\n\n    return validationError\n  }\n\n  const warningIconClick = () => {\n    setShowValidationRules(state => !state)\n    setShowSelectDropdown(false)\n  }\n\n  const comboboxClassNames = classnames(\n    comboboxClassName,\n    'form-field-combobox',\n    'form-field',\n    isInvalid && 'form-field-combobox_invalid'\n  )\n  const iconClassNames = classnames(\n    showSelectDropdown && 'form-field-combobox__icon_open',\n    'form-field-combobox__icon'\n  )\n  const selectValueClassNames = classnames(selectValue.className)\n\n  const wrapperClassNames = classnames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n\n  return (\n    <Field name={name} validate={validateField}>\n      {({ input, meta }) => (\n        <div\n          className={comboboxClassNames}\n          ref={comboboxRef}\n          data-testid={name ? `${name}-form-combobox` : 'form-combobox'}\n        >\n          {label && (\n            <div className={labelClassNames}>\n              <label data-testid=\"label\" htmlFor={input.name}>\n                {label}\n                {(required || validationRules.find(rule => rule.name === 'required')) && (\n                  <span className=\"form-field__label-mandatory\"> *</span>\n                )}\n              </label>\n            </div>\n          )}\n          <div className={wrapperClassNames}>\n            <div className=\"form-field__icons\">\n              <Arrow className={iconClassNames} onClick={toggleSelect} />\n            </div>\n            <div className=\"form-field-combobox__select form-field__control\" ref={selectRef}>\n              <div className=\"form-field-combobox__select-header\" onClick={toggleSelect}>\n                <span className={selectValueClassNames}>{selectValue.id}</span>\n                {selectValue.id.length === 0 && selectPlaceholder && (\n                  <div className=\"form-field-combobox__placeholder\">\n                    <label>{selectPlaceholder}</label>\n                  </div>\n                )}\n              </div>\n              {showSelectDropdown && (\n                <PopUpDialog\n                  headerIsHidden\n                  customPosition={{\n                    element: selectRef,\n                    position: 'bottom-right'\n                  }}\n                  className=\"form-field-combobox__dropdown form-field-combobox__dropdown-select\"\n                >\n                  <ul className=\"form-field-combobox__dropdown-list\">\n                    {selectOptions.map(option => {\n                      if (!option.hidden) {\n                        const selectOptionClassNames = classnames(\n                          'form-field-combobox__dropdown-list-option',\n                          option.className\n                        )\n\n                        return (\n                          <li\n                            className={selectOptionClassNames}\n                            key={option.id}\n                            onClick={() => handleSelectOptionClick(option)}\n                          >\n                            {option.label}\n                          </li>\n                        )\n                      }\n                    })}\n                  </ul>\n                </PopUpDialog>\n              )}\n            </div>\n            <input\n              className={inputClassNames}\n              data-testid={name ? `${name}-form-combobox-input` : 'form-combobox-input'}\n              id={input.name}\n              onChange={handleInputChange}\n              onFocus={inputOnFocus}\n              placeholder={inputPlaceholder}\n              ref={inputRef}\n              required={required}\n              type=\"text\"\n              value={inputValue}\n            />\n            {showSuggestionList && (dropdownList.length > 0 || searchIsFocused) && (\n              <PopUpDialog\n                headerIsHidden\n                customPosition={{\n                  element: selectRef,\n                  position: 'bottom-right'\n                }}\n                className=\"form-field-combobox__dropdown form-field-combobox__dropdown-suggestions\"\n                style={{\n                  ...dropdownStyle\n                }}\n              >\n                <div ref={suggestionListRef}>\n                  {!hideSearchInput && (\n                    <div className=\"form-field-combobox__search-wrapper\">\n                      <input\n                        data-testid={name ? `${name}-form-combobox-search` : 'form-combobox-search'}\n                        className=\"form-field-combobox__search form-field__control\"\n                        onChange={suggestionListSearchChange}\n                        onFocus={() => setSearchIsFocused(true)}\n                        placeholder=\"Type to search\"\n                        type=\"text\"\n                      />\n                      <SearchIcon />\n                    </div>\n                  )}\n                  <ul className=\"form-field-combobox__dropdown-list\">\n                    {searchIsFocused && dropdownList.length === 0 ? (\n                      <li className=\"form-field-combobox__dropdown-list-option\" key=\"no data\">\n                        No data\n                      </li>\n                    ) : (\n                      dropdownList.map(value => (\n                        <li\n                          className=\"form-field-combobox__dropdown-list-option\"\n                          key={value.id}\n                          onClick={() => handleSuggestionListOptionClick(value)}\n                        >\n                          {value.label}\n                        </li>\n                      ))\n                    )}\n                  </ul>\n                </div>\n              </PopUpDialog>\n            )}\n            <div className=\"form-field__icons\">\n              {isInvalid && !Array.isArray(meta.error) && (\n                <Tooltip\n                  className=\"form-field__warning\"\n                  template={<TextTooltipTemplate text={meta.error?.label ?? invalidText} warning />}\n                >\n                  <ExclamationMarkIcon />\n                </Tooltip>\n              )}\n              {isInvalid && Array.isArray(meta.error) && (\n                <button className=\"form-field__warning\" onClick={warningIconClick}>\n                  <WarningIcon />\n                </button>\n              )}\n            </div>\n            {!isEmpty(validationRules) && (\n              <OptionsMenu show={showValidationRules} ref={comboboxRef}>\n                {getValidationRules()}\n              </OptionsMenu>\n            )}\n          </div>\n        </div>\n      )}\n    </Field>\n  )\n}\n\nFormCombobox.propTypes = {\n  comboboxClassName: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  hideSearchInput: PropTypes.bool,\n  inputDefaultValue: PropTypes.string,\n  inputPlaceholder: PropTypes.string,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  maxSuggestedMatches: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  required: PropTypes.bool,\n  rules: PropTypes.array,\n  selectDefaultValue: PropTypes.shape({}),\n  selectOptions: COMBOBOX_SELECT_OPTIONS.isRequired,\n  selectPlaceholder: PropTypes.string,\n  suggestionList: COMBOBOX_SUGGESTION_LIST,\n  validator: PropTypes.func,\n  withoutBorder: PropTypes.bool\n}\n\nexport default FormCombobox\n"],"names":["FormCombobox","comboboxClassName","density","disabled","hideSearchInput","inputDefaultValue","inputPlaceholder","invalidText","label","maxSuggestedMatches","name","onBlur","onChange","onFocus","required","rules","selectDefaultValue","selectOptions","selectPlaceholder","suggestionList","validator","withoutBorder","input","meta","useField","inputValue","setInputValue","useState","selectValue","setSelectValue","dropdownStyle","setDropdownStyle","showSelectDropdown","setShowSelectDropdown","showSuggestionList","setShowSuggestionList","dropdownList","setDropdownList","searchIsFocused","setSearchIsFocused","isInvalid","setIsInvalid","validationRules","setValidationRules","showValidationRules","setShowValidationRules","comboboxRef","useRef","selectRef","inputRef","suggestionListRef","useDetectOutsideClick","labelClassNames","classnames","inputClassNames","useEffect","prevState","rule","err","handleOutsideClick","useCallback","event","handleScroll","getValidationRules","isValid","ValidationTemplate","handleInputChange","target","handleSelectOptionClick","selectedOption","handleSuggestionListOptionClick","option","inputValueItems","valueIndex","formattedValue","inputOnFocus","suggestionListSearchChange","toggleSelect","validateField","value","allValues","valueToValidate","validationError","isEmpty","newRules","isValidField","checkPatternsValidity","invalidRules","warningIconClick","state","comboboxClassNames","iconClassNames","selectValueClassNames","wrapperClassNames","jsx","Field","jsxs","Arrow","PopUpDialog","selectOptionClassNames","SearchIcon","Tooltip","TextTooltipTemplate","ExclamationMarkIcon","WarningIcon","OptionsMenu","PropTypes","DENSITY","COMBOBOX_SELECT_OPTIONS","COMBOBOX_SUGGESTION_LIST"],"mappings":"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"}
+{"version":3,"file":"FormCombobox.mjs","sources":["../../../src/lib/components/FormCombobox/FormCombobox.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Field, useField } from 'react-final-form'\nimport { isEmpty } from 'lodash'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\n\nimport OptionsMenu from '../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../elements/ValidationTemplate/ValidationTemplate'\nimport PopUpDialog from '../PopUpDialog/PopUpDialog'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { useDetectOutsideClick } from '../../hooks'\nimport { COMBOBOX_SELECT_OPTIONS, COMBOBOX_SUGGESTION_LIST, DENSITY } from '../../types'\n\nimport Arrow from '../../images/arrow.svg?react'\nimport SearchIcon from '../../images/search.svg?react'\nimport WarningIcon from '../../images/warning.svg?react'\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\n\nimport './formCombobox.scss'\n\nconst FormCombobox = ({\n  comboboxClassName = '',\n  density = 'normal',\n  disabled = false,\n  hideSearchInput = false,\n  inputDefaultValue = '',\n  inputPlaceholder = '',\n  invalidText = 'Invalid',\n  label = '',\n  maxSuggestedMatches = 1,\n  name,\n  onBlur = null,\n  onChange = null,\n  onFocus = null,\n  required = false,\n  rules = [],\n  selectDefaultValue = {\n    label: '',\n    id: '',\n    className: ''\n  },\n  selectOptions,\n  selectPlaceholder = '',\n  suggestionList = [],\n  validator = null,\n  withoutBorder = false\n}) => {\n  const { input, meta } = useField(name)\n  const [inputValue, setInputValue] = useState(inputDefaultValue)\n  const [selectValue, setSelectValue] = useState(selectDefaultValue)\n  const [dropdownStyle, setDropdownStyle] = useState({\n    left: '0px'\n  })\n  const [showSelectDropdown, setShowSelectDropdown] = useState(false)\n  const [showSuggestionList, setShowSuggestionList] = useState(false)\n  const [dropdownList, setDropdownList] = useState(suggestionList)\n  const [searchIsFocused, setSearchIsFocused] = useState(false)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n  const comboboxRef = useRef()\n  const selectRef = useRef()\n  const inputRef = useRef()\n  const suggestionListRef = useRef()\n  useDetectOutsideClick(comboboxRef, () => setShowValidationRules(false))\n\n  const labelClassNames = classnames('form-field__label', disabled && 'form-field__label-disabled')\n  const inputClassNames = classnames(\n    'form-field-combobox__input',\n    selectValue.id.length === 0 && 'form-field-combobox__input_hidden'\n  )\n\n  useEffect(() => {\n    setValidationRules(prevState =>\n      prevState.map(rule => ({\n        ...rule,\n        isValid:\n          !meta.error || !Array.isArray(meta.error)\n            ? true\n            : !meta.error.some(err => err.name === rule.name)\n      }))\n    )\n  }, [meta.error])\n\n  useEffect(() => {\n    if (!searchIsFocused) {\n      if (JSON.stringify(dropdownList) !== JSON.stringify(suggestionList)) {\n        setDropdownList(suggestionList)\n      }\n    }\n  }, [dropdownList, suggestionList, searchIsFocused])\n\n  useEffect(() => {\n    setIsInvalid(\n      meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    )\n  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])\n\n  const handleOutsideClick = useCallback(\n    event => {\n      if (\n        comboboxRef.current &&\n        !comboboxRef.current.contains(event.target) &&\n        suggestionListRef.current &&\n        !suggestionListRef.current.contains(event.target)\n      ) {\n        setSearchIsFocused(false)\n        setShowSelectDropdown(false)\n        setShowSuggestionList(false)\n        input.onBlur(new Event('blur'))\n        onBlur && onBlur(input.value)\n      }\n    },\n    [input, onBlur]\n  )\n\n  const handleScroll = event => {\n    if (comboboxRef.current && comboboxRef.current.contains(event.target)) return\n\n    if (\n      !event.target.closest('.pop-up-dialog') &&\n      !event.target.classList.contains('form-field-combobox')\n    ) {\n      setShowValidationRules(false)\n      setShowSelectDropdown(false)\n      setShowSuggestionList(false)\n      inputRef.current.blur()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick)\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick)\n    }\n  }, [handleOutsideClick])\n\n  useEffect(() => {\n    if (showValidationRules || showSelectDropdown || showSuggestionList) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [showSelectDropdown, showSuggestionList, showValidationRules])\n\n  const getValidationRules = () => {\n    return validationRules.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }\n\n  const handleInputChange = event => {\n    const target = event.target\n\n    setDropdownStyle({\n      left: `${target.selectionStart < 30 ? target.selectionStart : 30}ch`\n    })\n\n    if (searchIsFocused) {\n      setSearchIsFocused(false)\n    }\n\n    setInputValue(target.value)\n    input.onChange(`${selectValue.id}${target.value}`)\n    onChange && onChange(selectValue.id, target.value)\n\n    if (dropdownList.length > 0) {\n      setShowSuggestionList(true)\n    }\n  }\n\n  const handleSelectOptionClick = selectedOption => {\n    if (selectedOption.id !== selectValue.id) {\n      setSelectValue(selectedOption)\n      input.onChange(selectedOption.id)\n      setInputValue('')\n      onChange && onChange(selectedOption.id)\n      setShowSelectDropdown(false)\n      inputRef.current.disabled = false\n      inputRef.current.focus()\n    }\n  }\n\n  const handleSuggestionListOptionClick = option => {\n    const inputValueItems = inputValue.split('/')\n    const valueIndex = inputValueItems.length - 1\n    let formattedValue = option.customDelimiter\n      ? inputValueItems[valueIndex].replace(new RegExp(`${option.customDelimiter}.*`), '') +\n        option.id\n      : option.id\n\n    if (inputValueItems.length <= maxSuggestedMatches - 1) formattedValue += '/'\n\n    inputValueItems[valueIndex] = formattedValue\n\n    if (searchIsFocused) {\n      setSearchIsFocused(false)\n    }\n\n    if (inputValueItems.join('/') !== inputValue) {\n      setInputValue(inputValueItems.join('/'))\n      input.onChange(`${selectValue.id}${inputValueItems.join('/')}`)\n      onChange && onChange(selectValue.id, inputValueItems.join('/'))\n    }\n\n    setShowSuggestionList(false)\n    inputRef.current.focus()\n    setDropdownStyle({\n      left: `${inputRef.current.selectionStart < 30 ? inputRef.current.selectionStart : 30}ch`\n    })\n  }\n\n  const inputOnFocus = () => {\n    onFocus && onFocus()\n    input.onFocus(new Event('focus'))\n\n    if (showSelectDropdown) {\n      setShowSelectDropdown(false)\n    }\n\n    setShowSuggestionList(true)\n  }\n\n  const suggestionListSearchChange = event => {\n    event.persist()\n    setDropdownList(() =>\n      suggestionList.filter(option => {\n        return option.id.startsWith(event.target.value)\n      })\n    )\n  }\n\n  const toggleSelect = useCallback(() => {\n    if (showSelectDropdown) {\n      setShowSelectDropdown(false)\n      input.onBlur(new Event('blur'))\n      onBlur && onBlur(input.value)\n    } else {\n      setShowSuggestionList(false)\n      setShowValidationRules(false)\n      setDropdownStyle({\n        left: '0px'\n      })\n      setShowSelectDropdown(true)\n      input.onFocus(new Event('focus'))\n      onFocus && onFocus(input.value)\n    }\n  }, [input, onBlur, onFocus, showSelectDropdown])\n\n  const validateField = (value = '', allValues) => {\n    const valueToValidate = value.startsWith(selectValue.id)\n      ? value.substring(selectValue.id.length)\n      : (value ?? '')\n    let validationError = null\n\n    if (!isEmpty(validationRules)) {\n      const [newRules, isValidField] = checkPatternsValidity(rules, valueToValidate)\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    if (isEmpty(validationError)) {\n      if (valueToValidate.startsWith(' ')) {\n        validationError = { name: 'empty', label: invalidText }\n      } else if (required && valueToValidate.trim().length === 0) {\n        validationError = { name: 'required', label: 'This field is required' }\n      }\n    }\n\n    if (!validationError && validator) {\n      validationError = validator(value, allValues)\n    }\n\n    return validationError\n  }\n\n  const warningIconClick = () => {\n    setShowValidationRules(state => !state)\n    setShowSelectDropdown(false)\n  }\n\n  const comboboxClassNames = classnames(\n    comboboxClassName,\n    'form-field-combobox',\n    'form-field',\n    isInvalid && 'form-field-combobox_invalid'\n  )\n  const iconClassNames = classnames(\n    showSelectDropdown && 'form-field-combobox__icon_open',\n    'form-field-combobox__icon'\n  )\n  const selectValueClassNames = classnames(selectValue.className)\n\n  const wrapperClassNames = classnames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n\n  return (\n    <Field name={name} validate={validateField}>\n      {({ input, meta }) => (\n        <div\n          className={comboboxClassNames}\n          ref={comboboxRef}\n          data-testid={name ? `${name}-form-combobox` : 'form-combobox'}\n        >\n          {label && (\n            <div className={labelClassNames}>\n              <label data-testid=\"label\" htmlFor={input.name}>\n                {label}\n                {(required || validationRules.find(rule => rule.name === 'required')) && (\n                  <span className=\"form-field__label-mandatory\"> *</span>\n                )}\n              </label>\n            </div>\n          )}\n          <div className={wrapperClassNames}>\n            <div className=\"form-field__icons\">\n              <Arrow className={iconClassNames} onClick={toggleSelect} />\n            </div>\n            <div className=\"form-field-combobox__select form-field__control\" ref={selectRef}>\n              <div className=\"form-field-combobox__select-header\" onClick={toggleSelect}>\n                <span className={selectValueClassNames}>{selectValue.id}</span>\n                {selectValue.id.length === 0 && selectPlaceholder && (\n                  <div className=\"form-field-combobox__placeholder\">\n                    <label>{selectPlaceholder}</label>\n                  </div>\n                )}\n              </div>\n              {showSelectDropdown && (\n                <PopUpDialog\n                  headerIsHidden\n                  customPosition={{\n                    element: selectRef,\n                    position: 'bottom-right'\n                  }}\n                  className=\"form-field-combobox__dropdown form-field-combobox__dropdown-select\"\n                >\n                  <ul className=\"form-field-combobox__dropdown-list\" ref={suggestionListRef}>\n                    {selectOptions.map(option => {\n                      if (!option.hidden) {\n                        const selectOptionClassNames = classnames(\n                          'form-field-combobox__dropdown-list-option',\n                          option.className\n                        )\n\n                        return (\n                          <li\n                            className={selectOptionClassNames}\n                            key={option.id}\n                            onClick={() => handleSelectOptionClick(option)}\n                          >\n                            {option.label}\n                          </li>\n                        )\n                      }\n                    })}\n                  </ul>\n                </PopUpDialog>\n              )}\n            </div>\n            <input\n              className={inputClassNames}\n              data-testid={name ? `${name}-form-combobox-input` : 'form-combobox-input'}\n              id={input.name}\n              onChange={handleInputChange}\n              onFocus={inputOnFocus}\n              placeholder={inputPlaceholder}\n              ref={inputRef}\n              required={required}\n              type=\"text\"\n              value={inputValue}\n            />\n            {showSuggestionList && (dropdownList.length > 0 || searchIsFocused) && (\n              <PopUpDialog\n                headerIsHidden\n                customPosition={{\n                  element: selectRef,\n                  position: 'bottom-right'\n                }}\n                className=\"form-field-combobox__dropdown form-field-combobox__dropdown-suggestions\"\n                style={{\n                  ...dropdownStyle\n                }}\n              >\n                <div ref={suggestionListRef}>\n                  {!hideSearchInput && (\n                    <div className=\"form-field-combobox__search-wrapper\">\n                      <input\n                        data-testid={name ? `${name}-form-combobox-search` : 'form-combobox-search'}\n                        className=\"form-field-combobox__search form-field__control\"\n                        onChange={suggestionListSearchChange}\n                        onFocus={() => setSearchIsFocused(true)}\n                        placeholder=\"Type to search\"\n                        type=\"text\"\n                      />\n                      <SearchIcon />\n                    </div>\n                  )}\n                  <ul className=\"form-field-combobox__dropdown-list\">\n                    {searchIsFocused && dropdownList.length === 0 ? (\n                      <li className=\"form-field-combobox__dropdown-list-option\" key=\"no data\">\n                        No data\n                      </li>\n                    ) : (\n                      dropdownList.map(value => (\n                        <li\n                          className=\"form-field-combobox__dropdown-list-option\"\n                          key={value.id}\n                          onClick={() => handleSuggestionListOptionClick(value)}\n                        >\n                          {value.label}\n                        </li>\n                      ))\n                    )}\n                  </ul>\n                </div>\n              </PopUpDialog>\n            )}\n            <div className=\"form-field__icons\">\n              {isInvalid && !Array.isArray(meta.error) && (\n                <Tooltip\n                  className=\"form-field__warning\"\n                  template={<TextTooltipTemplate text={meta.error?.label ?? invalidText} warning />}\n                >\n                  <ExclamationMarkIcon />\n                </Tooltip>\n              )}\n              {isInvalid && Array.isArray(meta.error) && (\n                <button className=\"form-field__warning\" onClick={warningIconClick}>\n                  <WarningIcon />\n                </button>\n              )}\n            </div>\n            {!isEmpty(validationRules) && (\n              <OptionsMenu show={showValidationRules} ref={{ refInputContainer: comboboxRef }}>\n                {getValidationRules()}\n              </OptionsMenu>\n            )}\n          </div>\n        </div>\n      )}\n    </Field>\n  )\n}\n\nFormCombobox.propTypes = {\n  comboboxClassName: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  hideSearchInput: PropTypes.bool,\n  inputDefaultValue: PropTypes.string,\n  inputPlaceholder: PropTypes.string,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  maxSuggestedMatches: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  required: PropTypes.bool,\n  rules: PropTypes.array,\n  selectDefaultValue: PropTypes.shape({}),\n  selectOptions: COMBOBOX_SELECT_OPTIONS.isRequired,\n  selectPlaceholder: PropTypes.string,\n  suggestionList: COMBOBOX_SUGGESTION_LIST,\n  validator: PropTypes.func,\n  withoutBorder: PropTypes.bool\n}\n\nexport default FormCombobox\n"],"names":["FormCombobox","comboboxClassName","density","disabled","hideSearchInput","inputDefaultValue","inputPlaceholder","invalidText","label","maxSuggestedMatches","name","onBlur","onChange","onFocus","required","rules","selectDefaultValue","selectOptions","selectPlaceholder","suggestionList","validator","withoutBorder","input","meta","useField","inputValue","setInputValue","useState","selectValue","setSelectValue","dropdownStyle","setDropdownStyle","showSelectDropdown","setShowSelectDropdown","showSuggestionList","setShowSuggestionList","dropdownList","setDropdownList","searchIsFocused","setSearchIsFocused","isInvalid","setIsInvalid","validationRules","setValidationRules","showValidationRules","setShowValidationRules","comboboxRef","useRef","selectRef","inputRef","suggestionListRef","useDetectOutsideClick","labelClassNames","classnames","inputClassNames","useEffect","prevState","rule","err","handleOutsideClick","useCallback","event","handleScroll","getValidationRules","isValid","ValidationTemplate","handleInputChange","target","handleSelectOptionClick","selectedOption","handleSuggestionListOptionClick","option","inputValueItems","valueIndex","formattedValue","inputOnFocus","suggestionListSearchChange","toggleSelect","validateField","value","allValues","valueToValidate","validationError","isEmpty","newRules","isValidField","checkPatternsValidity","invalidRules","warningIconClick","state","comboboxClassNames","iconClassNames","selectValueClassNames","wrapperClassNames","jsx","Field","jsxs","Arrow","PopUpDialog","selectOptionClassNames","SearchIcon","Tooltip","TextTooltipTemplate","ExclamationMarkIcon","WarningIcon","OptionsMenu","PropTypes","DENSITY","COMBOBOX_SELECT_OPTIONS","COMBOBOX_SUGGESTION_LIST"],"mappings":"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"}

package/dist/components/FormInput/FormInput.mjs

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import ie, { useState as g, useRef as C, useEffect as b, forwardRef as Ie } from "react";
+import ie, { useState as g, useRef as x, useEffect as b, forwardRef as Fe } from "react";
 import r from "prop-types";
 import q from "classnames";
 import { isNil as Z, isEmpty as A } from "lodash";
-import { useField as Ee, Field as xe } from "react-final-form";
-import Ce from "./InputNumberButtons/InputNumberButtons.mjs";
+import { useField as Ce, Field as Ee } from "react-final-form";
+import xe from "./InputNumberButtons/InputNumberButtons.mjs";
 import Ae from "../../elements/OptionsMenu/OptionsMenu.mjs";
 import ke from "../../elements/ValidationTemplate/ValidationTemplate.mjs";
 import "../index.mjs";
@@ -38,8 +38,8 @@ const p = {
 let R = ({
   async: L = !1,
   className: te = "",
-  customRequiredLabel: le = "",
-  density: ne = "normal",
+  customRequiredLabel: ne = "",
+  density: le = "normal",
   disabled: h = !1,
   focused: U = !1,
   iconClass: ae = "",
@@ -58,19 +58,19 @@ let R = ({
   suggestionList: V = [],
   step: se = "1",
   tip: Y = "",
-  type: F = "text",
+  type: I = "text",
   validationRules: f = p.rules,
   validator: z = p.validator,
   withoutBorder: me = !1,
   ...m
-}, I) => {
-  const { input: s, meta: a } = Ee(c), [_, de] = g(!1), [ce, $] = g(!1), [E, fe] = g(""), [ue] = g(RegExp(D)), [O, pe] = g(f), [y, x] = g(!1), ge = C();
-  I ?? (I = ge);
-  const v = C(), o = C(), B = C(!1);
-  Ue(I, () => x(!1));
+}, F) => {
+  const { input: s, meta: a } = Ce(c), [_, de] = g(!1), [ce, $] = g(!1), [C, fe] = g(""), [ue] = g(RegExp(D)), [O, pe] = g(f), [y, E] = g(!1), ge = x();
+  F ?? (F = ge);
+  const v = x(), o = x(), B = x(!1);
+  Ue(F, () => E(!1));
   const be = We(), he = q("form-field-input", te), _e = q(
     "form-field__wrapper",
-    `form-field__wrapper-${ne}`,
+    `form-field__wrapper-${le}`,
     h && "form-field__wrapper-disabled",
     _ && "form-field__wrapper-invalid",
     me && "without-border"
@@ -88,7 +88,7 @@ let R = ({
     a.validating,
     Q
   ]), b(() => {
-    o.current || a.valid && y && x(!1);
+    o.current || a.valid && y && E(!1);
   }, [a.valid, y]), b(() => (y && window.addEventListener("scroll", J, !0), () => {
     window.removeEventListener("scroll", J, !0);
   }), [y]), b(() => {
@@ -96,58 +96,58 @@ let R = ({
   }, [U]), b(() => {
     pe(() => (B.current = !1, f.map((e) => (e.name === Ke.REQUIRED.NAME && (B.current = !0), {
       ...e,
-      isValid: !o.current || !Array.isArray(o.current) ? !0 : !o.current.some((n) => n.name === e.name)
+      isValid: !o.current || !Array.isArray(o.current) ? !0 : !o.current.some((l) => l.name === e.name)
     }))));
   }, [f]);
-  const ve = () => O.map(({ isValid: e = !1, label: n, name: i }) => /* @__PURE__ */ t(ke, { valid: e, validationMessage: n }, i)), G = (e) => !e && !T || h, we = (e) => {
-    var n;
-    s.onBlur && s.onBlur(e), (!e.relatedTarget || !((n = e.relatedTarget) != null && n.closest(".form-field__suggestion-list"))) && ($(!1), S && S(e));
+  const ve = () => O.map(({ isValid: e = !1, label: l, name: i }) => /* @__PURE__ */ t(ke, { valid: e, validationMessage: l }, i)), G = (e) => !e && !T || h, we = (e) => {
+    var l;
+    s.onBlur && s.onBlur(e), (!e.relatedTarget || !((l = e.relatedTarget) != null && l.closest(".form-field__suggestion-list"))) && ($(!1), S && S(e));
   }, Re = (e) => {
     s.onFocus && s.onFocus(e), P && P(e), $(!0);
   }, Ne = (e) => {
     s.onKeyDown && s.onKeyDown(e), H && H(e);
   }, J = (e) => {
-    v.current && v.current.contains(e.target) || !e.target.closest(".options-menu") && !e.target.classList.contains("form-field-input") && x(!1);
+    v.current && v.current.contains(e.target) || !e.target.closest(".options-menu") && !e.target.classList.contains("form-field-input") && E(!1);
   }, Te = (e) => {
     s.onChange && s.onChange(e), $(!1), S();
   }, Ve = () => {
-    v.current.focus(), x((e) => !e);
-  }, X = (e, n) => {
+    v.current.focus(), E((e) => !e);
+  }, X = (e, l) => {
     let i = Z(e) ? "" : String(e);
     if (G(i)) return;
-    let l = null;
+    let n = null;
     if (T && i.trim().length === 0 && !B.current)
-      l = {
+      n = {
         name: "required",
-        label: le || "This field is required"
+        label: ne || "This field is required"
       };
     else if (!A(f) && !L) {
       const [u, K] = Oe(f, i), M = u.filter((d) => !d.isValid);
-      K || (l = M.map((d) => ({ name: d.name, label: d.label })));
+      K || (n = M.map((d) => ({ name: d.name, label: d.label })));
     }
-    return A(l) && (F === "number" && (m.max && +i > +m.max && (l = {
+    return A(n) && (I === "number" && (m.max && +i > +m.max && (n = {
       name: "maxValue",
       label: `The maximum value must be ${m.max}`
-    }), m.min && +i < +m.min && (l = {
+    }), m.min && +i < +m.min && (n = {
       name: "minValue",
       label: `The minimum value must be ${m.min}`
-    })), D && !ue.test(i) ? l = { name: "pattern", label: k } : i.startsWith(" ") && (l = { name: "empty", label: k })), !l && z && (l = z(e, n)), o.current = l, l;
-  }, Fe = be(async (e, n) => {
+    })), D && !ue.test(i) ? n = { name: "pattern", label: k } : i.startsWith(" ") && (n = { name: "empty", label: k })), !n && z && (n = z(e, l)), o.current = n, n;
+  }, Ie = be(async (e, l) => {
     let i = Z(e) ? "" : String(e);
     if (G(i)) return;
-    let l = X(i, n);
+    let n = X(i, l);
     if (!A(f)) {
       const [u, K] = await Be(f, i), M = u.filter((d) => !d.isValid);
-      K || (l = M.map((d) => ({ name: d.name, label: d.label })));
+      K || (n = M.map((d) => ({ name: d.name, label: d.label })));
     }
-    return o.current = l, l;
+    return o.current = n, n;
   }, 400);
-  return /* @__PURE__ */ t(xe, { validate: L ? Fe : X, name: c, parse: (e) => F === "number" && e && parseFloat(e) || e, children: ({ input: e }) => {
-    var n;
+  return /* @__PURE__ */ t(Ee, { validate: L ? Ie : X, name: c, parse: (e) => I === "number" && e && parseFloat(e) || e, children: ({ input: e }) => {
+    var l;
     return /* @__PURE__ */ w(
       "div",
       {
-        ref: I,
+        ref: F,
         className: he,
         "data-testid": c ? `${c}-form-field-input` : "form-field-input",
         children: [
@@ -163,10 +163,10 @@ let R = ({
                 ]
               }
             ),
-            N && N.show && E.trim() && /* @__PURE__ */ t("div", { className: "form-field__label-icon", children: /* @__PURE__ */ t(ee, { template: /* @__PURE__ */ t(re, { text: N.url || E }), children: /* @__PURE__ */ t(
+            N && N.show && C.trim() && /* @__PURE__ */ t("div", { className: "form-field__label-icon", children: /* @__PURE__ */ t(ee, { template: /* @__PURE__ */ t(re, { text: N.url || C }), children: /* @__PURE__ */ t(
               "a",
               {
-                href: N.url || E,
+                href: N.url || C,
                 onClick: (i) => i.stopPropagation(),
                 target: "_blank",
                 rel: "noreferrer",
@@ -184,7 +184,7 @@ let R = ({
                 required: _ || T,
                 disabled: h,
                 pattern: D,
-                type: F,
+                type: I,
                 ...m,
                 ...e,
                 autoComplete: m.autocomplete ?? "off",
@@ -198,7 +198,7 @@ let R = ({
                 ee,
                 {
                   className: "form-field__warning",
-                  template: /* @__PURE__ */ t(re, { text: ((n = o.current) == null ? void 0 : n.label) ?? k, warning: !0 }),
+                  template: /* @__PURE__ */ t(re, { text: ((l = o.current) == null ? void 0 : l.label) ?? k, warning: !0 }),
                   children: /* @__PURE__ */ t(Me, {})
                 }
               ),
@@ -206,32 +206,32 @@ let R = ({
               Y && /* @__PURE__ */ t(je, { text: Y, className: "form-field__tip" }),
               W && /* @__PURE__ */ t("span", { "data-testid": "input-icon", className: ae, onClick: oe, children: W })
             ] }),
-            F === "number" && /* @__PURE__ */ t(Ce, { ...m, step: +se, ...e, disabled: h })
+            I === "number" && /* @__PURE__ */ t(xe, { ...m, step: +se, ...e, disabled: h })
           ] }),
-          (V == null ? void 0 : V.length) > 0 && ce && /* @__PURE__ */ t("ul", { className: "form-field__suggestion-list", children: V.map((i, l) => /* @__PURE__ */ t(
+          (V == null ? void 0 : V.length) > 0 && ce && /* @__PURE__ */ t("ul", { className: "form-field__suggestion-list", children: V.map((i, n) => /* @__PURE__ */ t(
             "li",
             {
               className: "suggestion-item",
               onClick: () => {
                 Te(i);
               },
-              tabIndex: l,
+              tabIndex: n,
               dangerouslySetInnerHTML: {
                 __html: i.replace(
-                  new RegExp(E, "gi"),
+                  new RegExp(C, "gi"),
                   (u) => u && `<b>${u}</b>`
                 )
               }
             },
-            `${i}${l}`
+            `${i}${n}`
           )) }),
-          !A(O) && _ && Array.isArray(o.current) && /* @__PURE__ */ t(Ae, { show: y, ref: I, children: ve() })
+          !A(O) && _ && Array.isArray(o.current) && /* @__PURE__ */ t(Ae, { show: y, ref: { refInputContainer: F }, children: ve() })
         ]
       }
     );
   } });
 };
-R = ie.memo(Ie(R));
+R = ie.memo(Fe(R));
 R.displayName = "FormInput";
 R.propTypes = {
   async: r.bool,

package/dist/components/FormInput/FormInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.mjs","sources":["../../../src/lib/components/FormInput/FormInput.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useEffect, useRef, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { isEmpty, isNil } from 'lodash'\nimport { Field, useField } from 'react-final-form'\n\nimport InputNumberButtons from './InputNumberButtons/InputNumberButtons'\nimport OptionsMenu from '../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../elements/ValidationTemplate/ValidationTemplate'\nimport { TextTooltipTemplate, Tip, Tooltip } from '../../components'\n\nimport { DENSITY, INPUT_LINK, INPUT_VALIDATION_RULES } from '../../types'\nimport { checkPatternsValidity, checkPatternsValidityAsync } from '../../utils/validation.util'\nimport { useDetectOutsideClick, useDebounce } from '../../hooks'\nimport { validation as ValidationConstants } from '../../constants'\n\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\nimport Popout from '../../images/popout.svg?react'\nimport WarningIcon from '../../images/warning.svg?react'\n\nimport './formInput.scss'\n\nconst defaultProps = {\n  iconClick: () => {},\n  link: { show: '', value: '' },\n  onBlur: () => {},\n  onKeyDown: () => {},\n  onValidationError: () => {},\n  validator: () => {},\n  rules: []\n}\n\nlet FormInput = (\n  {\n    async = false,\n    className = '',\n    customRequiredLabel = '',\n    density = 'normal',\n    disabled = false,\n    focused = false,\n    iconClass = '',\n    iconClick = defaultProps.iconClick,\n    inputIcon = null,\n    invalidText = 'This field is invalid',\n    label = '',\n    link = defaultProps.link,\n    name,\n    onBlur = defaultProps.onBlur,\n    onFocus,\n    onKeyDown = defaultProps.onKeyDown,\n    pattern = null,\n    required = false,\n    onValidationError = defaultProps.onValidationError,\n    suggestionList = [],\n    step = '1',\n    tip = '',\n    type = 'text',\n    validationRules: rules = defaultProps.rules,\n    validator = defaultProps.validator,\n    withoutBorder = false,\n    ...inputProps\n  },\n  ref\n) => {\n  const { input, meta } = useField(name)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const [typedValue, setTypedValue] = useState('')\n  const [validationPattern] = useState(RegExp(pattern))\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n  const wrapperRef = useRef()\n  ref ??= wrapperRef\n  const inputRef = useRef()\n  const errorsRef = useRef()\n  const isRequiredRulePresentRef = useRef(false)\n  useDetectOutsideClick(ref, () => setShowValidationRules(false))\n  const debounceAsync = useDebounce()\n\n  const formFieldClassNames = classNames('form-field-input', className)\n\n  const inputWrapperClassNames = classNames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n  const labelClassNames = classNames('form-field__label', disabled && 'form-field__label-disabled')\n\n  useEffect(() => {\n    setTypedValue(String(input.value)) // convert from number to string\n  }, [input.value])\n\n  useEffect(() => {\n    const isInputInvalid =\n      errorsRef.current &&\n      meta.invalid &&\n      (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    setIsInvalid(isInputInvalid)\n    onValidationError(isInputInvalid)\n  }, [\n    meta.invalid,\n    meta.modified,\n    meta.submitFailed,\n    meta.touched,\n    meta.validating,\n    onValidationError\n  ])\n\n  useEffect(() => {\n    if (!errorsRef.current) {\n      if (meta.valid && showValidationRules) {\n        setShowValidationRules(false)\n      }\n    }\n  }, [meta.valid, showValidationRules])\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [showValidationRules])\n\n  useEffect(() => {\n    if (focused) {\n      inputRef.current.focus()\n    }\n  }, [focused])\n\n  useEffect(() => {\n    setValidationRules(() => {\n      isRequiredRulePresentRef.current = false\n\n      return rules.map(rule => {\n        if (rule.name === ValidationConstants.REQUIRED.NAME) {\n          isRequiredRulePresentRef.current = true\n        }\n\n        return {\n          ...rule,\n          isValid:\n            !errorsRef.current || !Array.isArray(errorsRef.current)\n              ? true\n              : !errorsRef.current.some(err => err.name === rule.name)\n        }\n      })\n    })\n  }, [rules])\n\n  const getValidationRules = () => {\n    return validationRules.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }\n\n  const isValueEmptyAndValid = value => {\n    return (!value && !required) || disabled\n  }\n\n  const handleInputBlur = event => {\n    input.onBlur && input.onBlur(event)\n\n    if (!event.relatedTarget || !event.relatedTarget?.closest('.form-field__suggestion-list')) {\n      setIsFocused(false)\n      onBlur && onBlur(event)\n    }\n  }\n  const handleInputFocus = event => {\n    input.onFocus && input.onFocus(event)\n    onFocus && onFocus(event)\n    setIsFocused(true)\n  }\n\n  const handleInputKeyDown = event => {\n    input.onKeyDown && input.onKeyDown(event)\n    onKeyDown && onKeyDown(event)\n  }\n\n  const handleScroll = event => {\n    if (inputRef.current && inputRef.current.contains(event.target)) return\n\n    if (\n      !event.target.closest('.options-menu') &&\n      !event.target.classList.contains('form-field-input')\n    ) {\n      setShowValidationRules(false)\n    }\n  }\n\n  const handleSuggestionClick = item => {\n    input.onChange && input.onChange(item)\n    setIsFocused(false)\n    onBlur()\n  }\n\n  const toggleValidationRulesMenu = () => {\n    inputRef.current.focus()\n    setShowValidationRules(state => !state)\n  }\n\n  const validateField = (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = null\n\n    if (required && valueToValidate.trim().length === 0 && !isRequiredRulePresentRef.current) {\n      validationError = {\n        name: 'required',\n        label: customRequiredLabel || 'This field is required'\n      }\n    } else if (!isEmpty(rules) && !async) {\n      const [newRules, isValidField] = checkPatternsValidity(rules, valueToValidate)\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    if (isEmpty(validationError)) {\n      if (type === 'number') {\n        if (inputProps.max && +valueToValidate > +inputProps.max) {\n          validationError = {\n            name: 'maxValue',\n            label: `The maximum value must be ${inputProps.max}`\n          }\n        }\n\n        if (inputProps.min && +valueToValidate < +inputProps.min) {\n          validationError = {\n            name: 'minValue',\n            label: `The minimum value must be ${inputProps.min}`\n          }\n        }\n      }\n      if (pattern && !validationPattern.test(valueToValidate)) {\n        validationError = { name: 'pattern', label: invalidText }\n      } else if (valueToValidate.startsWith(' ')) {\n        validationError = { name: 'empty', label: invalidText }\n      }\n    }\n\n    if (!validationError && validator) {\n      validationError = validator(value, allValues)\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }\n\n  const validateFieldAsync = debounceAsync(async (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = validateField(valueToValidate, allValues)\n\n    if (!isEmpty(rules)) {\n      const [newRules, isValidField] = await checkPatternsValidityAsync(rules, valueToValidate)\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }, 400)\n\n  const parseField = val => {\n    return type === 'number' && val ? parseFloat(val) || val : val\n  }\n\n  return (\n    <Field validate={async ? validateFieldAsync : validateField} name={name} parse={parseField}>\n      {({ input }) => {\n        return (\n          <div\n            ref={ref}\n            className={formFieldClassNames}\n            data-testid={name ? `${name}-form-field-input` : 'form-field-input'}\n          >\n            {label && (\n              <div className={labelClassNames}>\n                <label\n                  data-testid={name ? `${name}-form-label` : 'form-label'}\n                  htmlFor={input.name}\n                >\n                  {label}\n                  {(required || validationRules.find(rule => rule.name === 'required')) && (\n                    <span className=\"form-field__label-mandatory\"> *</span>\n                  )}\n                </label>\n                {link && link.show && typedValue.trim() && (\n                  <div className=\"form-field__label-icon\">\n                    <Tooltip template={<TextTooltipTemplate text={link.url || typedValue} />}>\n                      <a\n                        href={link.url || typedValue}\n                        onClick={event => event.stopPropagation()}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                      >\n                        <Popout />\n                      </a>\n                    </Tooltip>\n                  </div>\n                )}\n              </div>\n            )}\n            <div className={inputWrapperClassNames}>\n              <div className=\"form-field__control\">\n                <input\n                  data-testid={name ? `${name}-form-input` : 'form-input'}\n                  id={input.name}\n                  ref={inputRef}\n                  required={isInvalid || required}\n                  {...{\n                    disabled,\n                    pattern,\n                    type,\n                    ...inputProps,\n                    ...input\n                  }}\n                  autoComplete={inputProps.autocomplete ?? 'off'}\n                  onBlur={handleInputBlur}\n                  onKeyDown={handleInputKeyDown}\n                  onFocus={handleInputFocus}\n                />\n              </div>\n              <div className=\"form-field__icons\">\n                {isInvalid && !Array.isArray(errorsRef.current) && (\n                  <Tooltip\n                    className=\"form-field__warning\"\n                    template={\n                      <TextTooltipTemplate text={errorsRef.current?.label ?? invalidText} warning />\n                    }\n                  >\n                    <ExclamationMarkIcon />\n                  </Tooltip>\n                )}\n                {isInvalid && Array.isArray(errorsRef.current) && (\n                  <button className=\"form-field__warning\" onClick={toggleValidationRulesMenu}>\n                    <WarningIcon />\n                  </button>\n                )}\n                {tip && <Tip text={tip} className=\"form-field__tip\" />}\n                {inputIcon && (\n                  <span data-testid=\"input-icon\" className={iconClass} onClick={iconClick}>\n                    {inputIcon}\n                  </span>\n                )}\n              </div>\n              {type === 'number' && (\n                <InputNumberButtons {...{ ...inputProps, step: +step, ...input, disabled }} />\n              )}\n            </div>\n            {suggestionList?.length > 0 && isFocused && (\n              <ul className=\"form-field__suggestion-list\">\n                {suggestionList.map((item, index) => {\n                  return (\n                    <li\n                      className=\"suggestion-item\"\n                      key={`${item}${index}`}\n                      onClick={() => {\n                        handleSuggestionClick(item)\n                      }}\n                      tabIndex={index}\n                      dangerouslySetInnerHTML={{\n                        __html: item.replace(new RegExp(typedValue, 'gi'), match =>\n                          match ? `<b>${match}</b>` : match\n                        )\n                      }}\n                    />\n                  )\n                })}\n              </ul>\n            )}\n            {!isEmpty(validationRules) && isInvalid && Array.isArray(errorsRef.current) && (\n              <OptionsMenu show={showValidationRules} ref={ref}>\n                {getValidationRules()}\n              </OptionsMenu>\n            )}\n          </div>\n        )\n      }}\n    </Field>\n  )\n}\n\nFormInput = React.memo(forwardRef(FormInput))\n\nFormInput.displayName = 'FormInput'\n\nFormInput.propTypes = {\n  async: PropTypes.bool,\n  className: PropTypes.string,\n  customRequiredLabel: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  focused: PropTypes.bool,\n  iconClass: PropTypes.string,\n  iconClick: PropTypes.func,\n  inputIcon: PropTypes.element,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  link: INPUT_LINK,\n  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onFocus: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  onValidationError: PropTypes.func,\n  pattern: PropTypes.string,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  suggestionList: PropTypes.arrayOf(PropTypes.string),\n  tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  type: PropTypes.string,\n  validationRules: INPUT_VALIDATION_RULES,\n  validator: PropTypes.func,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  withoutBorder: PropTypes.bool\n}\n\nexport default React.memo(FormInput)\n"],"names":["defaultProps","FormInput","async","className","customRequiredLabel","density","disabled","focused","iconClass","iconClick","inputIcon","invalidText","label","link","name","onBlur","onFocus","onKeyDown","pattern","required","onValidationError","suggestionList","step","tip","type","rules","validator","withoutBorder","inputProps","ref","input","meta","useField","isInvalid","setIsInvalid","useState","isFocused","setIsFocused","typedValue","setTypedValue","validationPattern","validationRules","setValidationRules","showValidationRules","setShowValidationRules","wrapperRef","useRef","inputRef","errorsRef","isRequiredRulePresentRef","useDetectOutsideClick","debounceAsync","useDebounce","formFieldClassNames","classNames","inputWrapperClassNames","labelClassNames","useEffect","isInputInvalid","handleScroll","rule","ValidationConstants","err","getValidationRules","isValid","ValidationTemplate","isValueEmptyAndValid","value","handleInputBlur","event","_a","handleInputFocus","handleInputKeyDown","handleSuggestionClick","item","toggleValidationRulesMenu","state","validateField","allValues","valueToValidate","isNil","validationError","isEmpty","newRules","isValidField","checkPatternsValidity","invalidRules","validateFieldAsync","checkPatternsValidityAsync","jsx","Field","val","jsxs","Tooltip","TextTooltipTemplate","Popout","ExclamationMarkIcon","WarningIcon","Tip","InputNumberButtons","index","match","OptionsMenu","React","forwardRef","PropTypes","DENSITY","INPUT_LINK","INPUT_VALIDATION_RULES","FormInput$1"],"mappings":"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"}
+{"version":3,"file":"FormInput.mjs","sources":["../../../src/lib/components/FormInput/FormInput.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useEffect, useRef, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { isEmpty, isNil } from 'lodash'\nimport { Field, useField } from 'react-final-form'\n\nimport InputNumberButtons from './InputNumberButtons/InputNumberButtons'\nimport OptionsMenu from '../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../elements/ValidationTemplate/ValidationTemplate'\nimport { TextTooltipTemplate, Tip, Tooltip } from '../../components'\n\nimport { DENSITY, INPUT_LINK, INPUT_VALIDATION_RULES } from '../../types'\nimport { checkPatternsValidity, checkPatternsValidityAsync } from '../../utils/validation.util'\nimport { useDetectOutsideClick, useDebounce } from '../../hooks'\nimport { validation as ValidationConstants } from '../../constants'\n\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\nimport Popout from '../../images/popout.svg?react'\nimport WarningIcon from '../../images/warning.svg?react'\n\nimport './formInput.scss'\n\nconst defaultProps = {\n  iconClick: () => {},\n  link: { show: '', value: '' },\n  onBlur: () => {},\n  onKeyDown: () => {},\n  onValidationError: () => {},\n  validator: () => {},\n  rules: []\n}\n\nlet FormInput = (\n  {\n    async = false,\n    className = '',\n    customRequiredLabel = '',\n    density = 'normal',\n    disabled = false,\n    focused = false,\n    iconClass = '',\n    iconClick = defaultProps.iconClick,\n    inputIcon = null,\n    invalidText = 'This field is invalid',\n    label = '',\n    link = defaultProps.link,\n    name,\n    onBlur = defaultProps.onBlur,\n    onFocus,\n    onKeyDown = defaultProps.onKeyDown,\n    pattern = null,\n    required = false,\n    onValidationError = defaultProps.onValidationError,\n    suggestionList = [],\n    step = '1',\n    tip = '',\n    type = 'text',\n    validationRules: rules = defaultProps.rules,\n    validator = defaultProps.validator,\n    withoutBorder = false,\n    ...inputProps\n  },\n  ref\n) => {\n  const { input, meta } = useField(name)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const [typedValue, setTypedValue] = useState('')\n  const [validationPattern] = useState(RegExp(pattern))\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n  const wrapperRef = useRef()\n  ref ??= wrapperRef\n  const inputRef = useRef()\n  const errorsRef = useRef()\n  const isRequiredRulePresentRef = useRef(false)\n  useDetectOutsideClick(ref, () => setShowValidationRules(false))\n  const debounceAsync = useDebounce()\n\n  const formFieldClassNames = classNames('form-field-input', className)\n\n  const inputWrapperClassNames = classNames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n  const labelClassNames = classNames('form-field__label', disabled && 'form-field__label-disabled')\n\n  useEffect(() => {\n    setTypedValue(String(input.value)) // convert from number to string\n  }, [input.value])\n\n  useEffect(() => {\n    const isInputInvalid =\n      errorsRef.current &&\n      meta.invalid &&\n      (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    setIsInvalid(isInputInvalid)\n    onValidationError(isInputInvalid)\n  }, [\n    meta.invalid,\n    meta.modified,\n    meta.submitFailed,\n    meta.touched,\n    meta.validating,\n    onValidationError\n  ])\n\n  useEffect(() => {\n    if (!errorsRef.current) {\n      if (meta.valid && showValidationRules) {\n        setShowValidationRules(false)\n      }\n    }\n  }, [meta.valid, showValidationRules])\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [showValidationRules])\n\n  useEffect(() => {\n    if (focused) {\n      inputRef.current.focus()\n    }\n  }, [focused])\n\n  useEffect(() => {\n    setValidationRules(() => {\n      isRequiredRulePresentRef.current = false\n\n      return rules.map(rule => {\n        if (rule.name === ValidationConstants.REQUIRED.NAME) {\n          isRequiredRulePresentRef.current = true\n        }\n\n        return {\n          ...rule,\n          isValid:\n            !errorsRef.current || !Array.isArray(errorsRef.current)\n              ? true\n              : !errorsRef.current.some(err => err.name === rule.name)\n        }\n      })\n    })\n  }, [rules])\n\n  const getValidationRules = () => {\n    return validationRules.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }\n\n  const isValueEmptyAndValid = value => {\n    return (!value && !required) || disabled\n  }\n\n  const handleInputBlur = event => {\n    input.onBlur && input.onBlur(event)\n\n    if (!event.relatedTarget || !event.relatedTarget?.closest('.form-field__suggestion-list')) {\n      setIsFocused(false)\n      onBlur && onBlur(event)\n    }\n  }\n  const handleInputFocus = event => {\n    input.onFocus && input.onFocus(event)\n    onFocus && onFocus(event)\n    setIsFocused(true)\n  }\n\n  const handleInputKeyDown = event => {\n    input.onKeyDown && input.onKeyDown(event)\n    onKeyDown && onKeyDown(event)\n  }\n\n  const handleScroll = event => {\n    if (inputRef.current && inputRef.current.contains(event.target)) return\n\n    if (\n      !event.target.closest('.options-menu') &&\n      !event.target.classList.contains('form-field-input')\n    ) {\n      setShowValidationRules(false)\n    }\n  }\n\n  const handleSuggestionClick = item => {\n    input.onChange && input.onChange(item)\n    setIsFocused(false)\n    onBlur()\n  }\n\n  const toggleValidationRulesMenu = () => {\n    inputRef.current.focus()\n    setShowValidationRules(state => !state)\n  }\n\n  const validateField = (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = null\n\n    if (required && valueToValidate.trim().length === 0 && !isRequiredRulePresentRef.current) {\n      validationError = {\n        name: 'required',\n        label: customRequiredLabel || 'This field is required'\n      }\n    } else if (!isEmpty(rules) && !async) {\n      const [newRules, isValidField] = checkPatternsValidity(rules, valueToValidate)\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    if (isEmpty(validationError)) {\n      if (type === 'number') {\n        if (inputProps.max && +valueToValidate > +inputProps.max) {\n          validationError = {\n            name: 'maxValue',\n            label: `The maximum value must be ${inputProps.max}`\n          }\n        }\n\n        if (inputProps.min && +valueToValidate < +inputProps.min) {\n          validationError = {\n            name: 'minValue',\n            label: `The minimum value must be ${inputProps.min}`\n          }\n        }\n      }\n      if (pattern && !validationPattern.test(valueToValidate)) {\n        validationError = { name: 'pattern', label: invalidText }\n      } else if (valueToValidate.startsWith(' ')) {\n        validationError = { name: 'empty', label: invalidText }\n      }\n    }\n\n    if (!validationError && validator) {\n      validationError = validator(value, allValues)\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }\n\n  const validateFieldAsync = debounceAsync(async (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = validateField(valueToValidate, allValues)\n\n    if (!isEmpty(rules)) {\n      const [newRules, isValidField] = await checkPatternsValidityAsync(rules, valueToValidate)\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }, 400)\n\n  const parseField = val => {\n    return type === 'number' && val ? parseFloat(val) || val : val\n  }\n\n  return (\n    <Field validate={async ? validateFieldAsync : validateField} name={name} parse={parseField}>\n      {({ input }) => {\n        return (\n          <div\n            ref={ref}\n            className={formFieldClassNames}\n            data-testid={name ? `${name}-form-field-input` : 'form-field-input'}\n          >\n            {label && (\n              <div className={labelClassNames}>\n                <label\n                  data-testid={name ? `${name}-form-label` : 'form-label'}\n                  htmlFor={input.name}\n                >\n                  {label}\n                  {(required || validationRules.find(rule => rule.name === 'required')) && (\n                    <span className=\"form-field__label-mandatory\"> *</span>\n                  )}\n                </label>\n                {link && link.show && typedValue.trim() && (\n                  <div className=\"form-field__label-icon\">\n                    <Tooltip template={<TextTooltipTemplate text={link.url || typedValue} />}>\n                      <a\n                        href={link.url || typedValue}\n                        onClick={event => event.stopPropagation()}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                      >\n                        <Popout />\n                      </a>\n                    </Tooltip>\n                  </div>\n                )}\n              </div>\n            )}\n            <div className={inputWrapperClassNames}>\n              <div className=\"form-field__control\">\n                <input\n                  data-testid={name ? `${name}-form-input` : 'form-input'}\n                  id={input.name}\n                  ref={inputRef}\n                  required={isInvalid || required}\n                  {...{\n                    disabled,\n                    pattern,\n                    type,\n                    ...inputProps,\n                    ...input\n                  }}\n                  autoComplete={inputProps.autocomplete ?? 'off'}\n                  onBlur={handleInputBlur}\n                  onKeyDown={handleInputKeyDown}\n                  onFocus={handleInputFocus}\n                />\n              </div>\n              <div className=\"form-field__icons\">\n                {isInvalid && !Array.isArray(errorsRef.current) && (\n                  <Tooltip\n                    className=\"form-field__warning\"\n                    template={\n                      <TextTooltipTemplate text={errorsRef.current?.label ?? invalidText} warning />\n                    }\n                  >\n                    <ExclamationMarkIcon />\n                  </Tooltip>\n                )}\n                {isInvalid && Array.isArray(errorsRef.current) && (\n                  <button className=\"form-field__warning\" onClick={toggleValidationRulesMenu}>\n                    <WarningIcon />\n                  </button>\n                )}\n                {tip && <Tip text={tip} className=\"form-field__tip\" />}\n                {inputIcon && (\n                  <span data-testid=\"input-icon\" className={iconClass} onClick={iconClick}>\n                    {inputIcon}\n                  </span>\n                )}\n              </div>\n              {type === 'number' && (\n                <InputNumberButtons {...{ ...inputProps, step: +step, ...input, disabled }} />\n              )}\n            </div>\n            {suggestionList?.length > 0 && isFocused && (\n              <ul className=\"form-field__suggestion-list\">\n                {suggestionList.map((item, index) => {\n                  return (\n                    <li\n                      className=\"suggestion-item\"\n                      key={`${item}${index}`}\n                      onClick={() => {\n                        handleSuggestionClick(item)\n                      }}\n                      tabIndex={index}\n                      dangerouslySetInnerHTML={{\n                        __html: item.replace(new RegExp(typedValue, 'gi'), match =>\n                          match ? `<b>${match}</b>` : match\n                        )\n                      }}\n                    />\n                  )\n                })}\n              </ul>\n            )}\n            {!isEmpty(validationRules) && isInvalid && Array.isArray(errorsRef.current) && (\n              <OptionsMenu show={showValidationRules} ref={{ refInputContainer: ref }}>\n                {getValidationRules()}\n              </OptionsMenu>\n            )}\n          </div>\n        )\n      }}\n    </Field>\n  )\n}\n\nFormInput = React.memo(forwardRef(FormInput))\n\nFormInput.displayName = 'FormInput'\n\nFormInput.propTypes = {\n  async: PropTypes.bool,\n  className: PropTypes.string,\n  customRequiredLabel: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  focused: PropTypes.bool,\n  iconClass: PropTypes.string,\n  iconClick: PropTypes.func,\n  inputIcon: PropTypes.element,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  link: INPUT_LINK,\n  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onFocus: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  onValidationError: PropTypes.func,\n  pattern: PropTypes.string,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  suggestionList: PropTypes.arrayOf(PropTypes.string),\n  tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  type: PropTypes.string,\n  validationRules: INPUT_VALIDATION_RULES,\n  validator: PropTypes.func,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  withoutBorder: PropTypes.bool\n}\n\nexport default React.memo(FormInput)\n"],"names":["defaultProps","FormInput","async","className","customRequiredLabel","density","disabled","focused","iconClass","iconClick","inputIcon","invalidText","label","link","name","onBlur","onFocus","onKeyDown","pattern","required","onValidationError","suggestionList","step","tip","type","rules","validator","withoutBorder","inputProps","ref","input","meta","useField","isInvalid","setIsInvalid","useState","isFocused","setIsFocused","typedValue","setTypedValue","validationPattern","validationRules","setValidationRules","showValidationRules","setShowValidationRules","wrapperRef","useRef","inputRef","errorsRef","isRequiredRulePresentRef","useDetectOutsideClick","debounceAsync","useDebounce","formFieldClassNames","classNames","inputWrapperClassNames","labelClassNames","useEffect","isInputInvalid","handleScroll","rule","ValidationConstants","err","getValidationRules","isValid","ValidationTemplate","isValueEmptyAndValid","value","handleInputBlur","event","_a","handleInputFocus","handleInputKeyDown","handleSuggestionClick","item","toggleValidationRulesMenu","state","validateField","allValues","valueToValidate","isNil","validationError","isEmpty","newRules","isValidField","checkPatternsValidity","invalidRules","validateFieldAsync","checkPatternsValidityAsync","jsx","Field","val","jsxs","Tooltip","TextTooltipTemplate","Popout","ExclamationMarkIcon","WarningIcon","Tip","InputNumberButtons","index","match","OptionsMenu","React","forwardRef","PropTypes","DENSITY","INPUT_LINK","INPUT_VALIDATION_RULES","FormInput$1"],"mappings":"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"}

package/dist/elements/OptionsMenu/OptionsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/elements/OptionsMenu/OptionsMenu.jsx"],"names":[],"mappings":";AAwBA;;;;;;;gBAgCC"}
+{"version":3,"file":"OptionsMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/elements/OptionsMenu/OptionsMenu.jsx"],"names":[],"mappings":";AAwBA;;;;;;;gBAkCC"}

package/dist/elements/OptionsMenu/OptionsMenu.mjs

@@ -1,23 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as u, forwardRef as d } from "react";
 import i from "prop-types";
-import { CSSTransition as l } from "react-transition-group";
-import u from "../../components/PopUpDialog/PopUpDialog.mjs";
+import { CSSTransition as a } from "react-transition-group";
+import c from "../../components/PopUpDialog/PopUpDialog.mjs";
 /* empty css                  */
-let t = ({ children: r = [], show: m, timeout: n = 300 }, { refInputContainer: o, validationRulesRef: s }) => {
-  const { width: p } = o != null && o.current ? o.current.getBoundingClientRect() : {};
-  return /* @__PURE__ */ e(
-    l,
+let t = ({ children: r = [], show: n, timeout: m = 300 }, { refInputContainer: o, validationRulesRef: e }) => {
+  const { width: l } = o != null && o.current ? o.current.getBoundingClientRect() : {}, p = u(null);
+  return e ?? (e = p), /* @__PURE__ */ s(
+    a,
     {
-      nodeRef: s,
-      in: m,
-      timeout: n,
+      nodeRef: e,
+      in: n,
+      timeout: m,
       classNames: "options-menu-transition",
       unmountOnExit: !0,
-      children: /* @__PURE__ */ e(
-        u,
+      children: /* @__PURE__ */ s(
+        c,
         {
-          ref: s,
+          ref: e,
           headerIsHidden: !0,
           className: "options-menu",
           customPosition: {
@@ -26,8 +26,8 @@ let t = ({ children: r = [], show: m, timeout: n = 300 }, { refInputContainer: o
             autoVerticalPosition: !0,
             autoHorizontalPosition: !0
           },
-          style: { minWidth: `${p}px` },
-          children: /* @__PURE__ */ e("ul", { className: "options-menu__body", children: r })
+          style: { minWidth: `${l}px` },
+          children: /* @__PURE__ */ s("ul", { className: "options-menu__body", children: r })
         }
       )
     }
@@ -40,8 +40,8 @@ t.propTypes = {
   show: i.bool,
   timeout: i.number
 };
-const b = t;
+const g = t;
 export {
-  b as default
+  g as default
 };
 //# sourceMappingURL=OptionsMenu.mjs.map

package/dist/elements/OptionsMenu/OptionsMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsMenu.mjs","sources":["../../../src/lib/elements/OptionsMenu/OptionsMenu.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport { CSSTransition } from 'react-transition-group'\n\nimport PopUpDialog from '../../components/PopUpDialog/PopUpDialog'\n\nimport './optionsMenu.scss'\n\nlet OptionsMenu = (\n  { children = [], show, timeout = 300 },\n  { refInputContainer, validationRulesRef }\n) => {\n  const { width: dropdownWidth } = refInputContainer?.current\n    ? refInputContainer.current.getBoundingClientRect()\n    : {}\n\n  return (\n    <CSSTransition\n      nodeRef={validationRulesRef}\n      in={show}\n      timeout={timeout}\n      classNames=\"options-menu-transition\"\n      unmountOnExit\n    >\n      <PopUpDialog\n        ref={validationRulesRef}\n        headerIsHidden\n        className=\"options-menu\"\n        customPosition={{\n          element: refInputContainer,\n          position: 'bottom-right',\n          autoVerticalPosition: true,\n          autoHorizontalPosition: true\n        }}\n        style={{ minWidth: `${dropdownWidth}px` }}\n      >\n        <ul className=\"options-menu__body\">{children}</ul>\n      </PopUpDialog>\n    </CSSTransition>\n  )\n}\n\nOptionsMenu = forwardRef(OptionsMenu)\n\nOptionsMenu.displayName = 'OptionsMenu'\n\nOptionsMenu.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.element),\n  show: PropTypes.bool,\n  timeout: PropTypes.number\n}\n\nexport default OptionsMenu\n"],"names":["OptionsMenu","children","show","timeout","refInputContainer","validationRulesRef","dropdownWidth","jsx","CSSTransition","PopUpDialog","forwardRef","PropTypes","OptionsMenu$1"],"mappings":";;;;;;AAwBA,IAAIA,IAAc,CAChB,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,GAAM,SAAAC,IAAU,OACjC,EAAE,mBAAAC,GAAmB,oBAAAC,QAClB;AACG,QAAA,EAAE,OAAOC,EAAA,IAAkBF,KAAA,QAAAA,EAAmB,UAChDA,EAAkB,QAAQ,sBAAsB,IAChD,CAAC;AAGH,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASH;AAAA,MACT,IAAIH;AAAA,MACJ,SAAAC;AAAA,MACA,YAAW;AAAA,MACX,eAAa;AAAA,MAEb,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKJ;AAAA,UACL,gBAAc;AAAA,UACd,WAAU;AAAA,UACV,gBAAgB;AAAA,YACd,SAASD;AAAA,YACT,UAAU;AAAA,YACV,sBAAsB;AAAA,YACtB,wBAAwB;AAAA,UAC1B;AAAA,UACA,OAAO,EAAE,UAAU,GAAGE,CAAa,KAAK;AAAA,UAExC,UAAC,gBAAAC,EAAA,MAAA,EAAG,WAAU,sBAAsB,UAAAN,EAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EACF;AAEJ;AAEAD,IAAcU,EAAWV,CAAW;AAEpCA,EAAY,cAAc;AAE1BA,EAAY,YAAY;AAAA,EACtB,UAAUW,EAAU,QAAQA,EAAU,OAAO;AAAA,EAC7C,MAAMA,EAAU;AAAA,EAChB,SAASA,EAAU;AACrB;AAEA,MAAAC,IAAeZ;"}
+{"version":3,"file":"OptionsMenu.mjs","sources":["../../../src/lib/elements/OptionsMenu/OptionsMenu.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { forwardRef, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport { CSSTransition } from 'react-transition-group'\n\nimport PopUpDialog from '../../components/PopUpDialog/PopUpDialog'\n\nimport './optionsMenu.scss'\n\nlet OptionsMenu = (\n  { children = [], show, timeout = 300 },\n  { refInputContainer, validationRulesRef }\n) => {\n  const { width: dropdownWidth } = refInputContainer?.current\n    ? refInputContainer.current.getBoundingClientRect()\n    : {}\n  const internalValidationRulesRef = useRef(null)\n  validationRulesRef ??= internalValidationRulesRef\n\n  return (\n    <CSSTransition\n      nodeRef={validationRulesRef}\n      in={show}\n      timeout={timeout}\n      classNames=\"options-menu-transition\"\n      unmountOnExit\n    >\n      <PopUpDialog\n        ref={validationRulesRef}\n        headerIsHidden\n        className=\"options-menu\"\n        customPosition={{\n          element: refInputContainer,\n          position: 'bottom-right',\n          autoVerticalPosition: true,\n          autoHorizontalPosition: true\n        }}\n        style={{ minWidth: `${dropdownWidth}px` }}\n      >\n        <ul className=\"options-menu__body\">{children}</ul>\n      </PopUpDialog>\n    </CSSTransition>\n  )\n}\n\nOptionsMenu = forwardRef(OptionsMenu)\n\nOptionsMenu.displayName = 'OptionsMenu'\n\nOptionsMenu.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.element),\n  show: PropTypes.bool,\n  timeout: PropTypes.number\n}\n\nexport default OptionsMenu\n"],"names":["OptionsMenu","children","show","timeout","refInputContainer","validationRulesRef","dropdownWidth","internalValidationRulesRef","useRef","jsx","CSSTransition","PopUpDialog","forwardRef","PropTypes","OptionsMenu$1"],"mappings":";;;;;;AAwBA,IAAIA,IAAc,CAChB,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,GAAM,SAAAC,IAAU,OACjC,EAAE,mBAAAC,GAAmB,oBAAAC,QAClB;AACG,QAAA,EAAE,OAAOC,EAAA,IAAkBF,KAAA,QAAAA,EAAmB,UAChDA,EAAkB,QAAQ,sBAAsB,IAChD,CAAC,GACCG,IAA6BC,EAAO,IAAI;AACvB,SAAAH,UAAAE,IAGrB,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,IAAIH;AAAA,MACJ,SAAAC;AAAA,MACA,YAAW;AAAA,MACX,eAAa;AAAA,MAEb,UAAA,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKN;AAAA,UACL,gBAAc;AAAA,UACd,WAAU;AAAA,UACV,gBAAgB;AAAA,YACd,SAASD;AAAA,YACT,UAAU;AAAA,YACV,sBAAsB;AAAA,YACtB,wBAAwB;AAAA,UAC1B;AAAA,UACA,OAAO,EAAE,UAAU,GAAGE,CAAa,KAAK;AAAA,UAExC,UAAC,gBAAAG,EAAA,MAAA,EAAG,WAAU,sBAAsB,UAAAR,EAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EACF;AAEJ;AAEAD,IAAcY,EAAWZ,CAAW;AAEpCA,EAAY,cAAc;AAE1BA,EAAY,YAAY;AAAA,EACtB,UAAUa,EAAU,QAAQA,EAAU,OAAO;AAAA,EAC7C,MAAMA,EAAU;AAAA,EAChB,SAASA,EAAU;AACrB;AAEA,MAAAC,IAAed;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "module": "./dist/index.mjs",
     "main": "./dist/index.mjs",