iguazio.dashboard-react-controls 3.2.15 → 3.2.17

package/dist/components/FormCombobox/FormCombobox.mjs

@@ -0,0 +1,284 @@
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { useState as d, 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 i from "prop-types";
+import _ from "classnames";
+import Te from "../../elements/OptionsMenu/OptionsMenu.mjs";
+import ke from "../../elements/ValidationTemplate/ValidationTemplate.mjs";
+import Q from "../PopUpDialog/PopUpDialog.mjs";
+import Re from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import Fe from "../Tooltip/Tooltip.mjs";
+import { checkPatternsValidity as $e } from "../../utils/validation.util.mjs";
+import "../../hooks/index.mjs";
+import { COMBOBOX_SUGGESTION_LIST as De, COMBOBOX_SELECT_OPTIONS as Le, DENSITY as Ae } from "../../types.mjs";
+import Pe from "../../images/arrow.svg.mjs";
+import je from "../../images/search.svg.mjs";
+import Me from "../../images/warning.svg.mjs";
+import qe from "../../images/exclamation-mark.svg.mjs";
+/* empty css                   */
+import { useDetectOutsideClick as We } from "../../hooks/useDetectOutsideClick.hook.mjs";
+const Be = ({
+  comboboxClassName: Z = "",
+  density: ee = "normal",
+  disabled: W = !1,
+  hideSearchInput: oe = !1,
+  inputDefaultValue: te = "",
+  inputPlaceholder: le = "",
+  invalidText: B = "Invalid",
+  label: G = "",
+  maxSuggestedMatches: ie = 1,
+  name: f,
+  onBlur: g = null,
+  onChange: w = null,
+  onFocus: N = null,
+  required: F = !1,
+  rules: H = [],
+  selectDefaultValue: re = {
+    label: "",
+    id: "",
+    className: ""
+  },
+  selectOptions: se,
+  selectPlaceholder: J = "",
+  suggestionList: S = [],
+  validator: U = null,
+  withoutBorder: ae = !1
+}) => {
+  const { input: a, meta: r } = Ee(f), [$, D] = d(te), [n, ne] = d(re), [ce, y] = d({
+    left: "0px"
+  }), [p, m] = d(!1), [L, b] = d(!1), [x, X] = d(S), [v, I] = d(!1), [V, de] = d(!1), [E, fe] = d(H), [A, O] = d(!1), h = R(), P = R(), c = R(), T = R();
+  We(h, () => O(!1));
+  const me = _("form-field__label", W && "form-field__label-disabled"), ue = _(
+    "form-field-combobox__input",
+    n.id.length === 0 && "form-field-combobox__input_hidden"
+  );
+  C(() => {
+    fe(
+      (e) => e.map((o) => ({
+        ...o,
+        isValid: !r.error || !Array.isArray(r.error) ? !0 : !r.error.some((s) => s.name === o.name)
+      }))
+    );
+  }, [r.error]), C(() => {
+    v || JSON.stringify(x) !== JSON.stringify(S) && X(S);
+  }, [x, S, v]), C(() => {
+    de(
+      r.invalid && (r.validating || r.modified || r.submitFailed && r.touched)
+    );
+  }, [r.invalid, r.modified, r.submitFailed, r.touched, r.validating]);
+  const j = K(
+    (e) => {
+      h.current && !h.current.contains(e.target) && T.current && !T.current.contains(e.target) && (I(!1), m(!1), b(!1), a.onBlur(new Event("blur")), g && g(a.value));
+    },
+    [a, g]
+  ), Y = (e) => {
+    h.current && h.current.contains(e.target) || !e.target.closest(".pop-up-dialog") && !e.target.classList.contains("form-field-combobox") && (O(!1), m(!1), b(!1), c.current.blur());
+  };
+  C(() => (window.addEventListener("click", j), () => {
+    window.removeEventListener("click", j);
+  }), [j]), C(() => ((A || p || L) && window.addEventListener("scroll", Y, !0), () => {
+    window.removeEventListener("scroll", Y, !0);
+  }), [p, L, A]);
+  const pe = () => E.map(({ isValid: e = !1, label: o, name: s }) => /* @__PURE__ */ t(ke, { valid: e, validationMessage: o }, s)), be = (e) => {
+    const o = e.target;
+    y({
+      left: `${o.selectionStart < 30 ? o.selectionStart : 30}ch`
+    }), v && I(!1), D(o.value), a.onChange(`${n.id}${o.value}`), w && w(n.id, o.value), x.length > 0 && b(!0);
+  }, he = (e) => {
+    e.id !== n.id ? (ne(e), a.onChange(e.id), D(""), w && w(e.id), m(!1), c.current.disabled = !1, c.current.focus()) : (m(!1), c.current.disabled = !1, c.current.focus());
+  }, _e = (e) => {
+    const o = $.split("/"), s = o.length - 1;
+    let l = e.customDelimiter ? o[s].replace(new RegExp(`${e.customDelimiter}.*`), "") + e.id : e.id;
+    o.length <= ie - 1 && (l += "/"), o[s] = l, v && I(!1), o.join("/") !== $ && (D(o.join("/")), a.onChange(`${n.id}${o.join("/")}`), w && w(n.id, o.join("/"))), b(!1), c.current.focus(), y({
+      left: `${c.current.selectionStart < 30 ? c.current.selectionStart : 30}ch`
+    });
+  }, ge = (e) => {
+    N && N(), a.onFocus(new Event("focus")), p && m(!1), c.current.selectionStart ? b(!0) : setTimeout(() => {
+      y({
+        left: `${e.target.selectionStart < 30 ? e.target.selectionStart : 30}ch`
+      }), b(!0);
+    });
+  }, we = (e) => {
+    e.persist(), X(
+      () => S.filter((o) => o.id.startsWith(e.target.value))
+    );
+  }, z = K(() => {
+    p ? (m(!1), a.onBlur(new Event("blur")), g && g(a.value)) : (b(!1), O(!1), y({
+      left: "0px"
+    }), m(!0), a.onFocus(new Event("focus")), N && N(a.value));
+  }, [a, g, N, p]), xe = (e = "", o) => {
+    const s = e.startsWith(n.id) ? e.substring(n.id.length) : e ?? "";
+    let l = null;
+    if (!q(E)) {
+      const [M, Ie] = $e(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 } : F && s.trim().length === 0 && (l = { name: "required", label: "This field is required" })), !l && U && (l = U(e, o)), l;
+  }, ve = () => {
+    O((e) => !e), m(!1);
+  }, Ne = _(
+    Z,
+    "form-field-combobox",
+    "form-field",
+    V && "form-field-combobox_invalid"
+  ), Se = _(
+    p && "form-field-combobox__icon_open",
+    "form-field-combobox__icon"
+  ), Ce = _(n.className), ye = _(
+    "form-field__wrapper",
+    `form-field__wrapper-${ee}`,
+    W && "form-field__wrapper-disabled",
+    V && "form-field__wrapper-invalid",
+    ae && "without-border"
+  );
+  return /* @__PURE__ */ t(Oe, { name: f, validate: xe, children: ({ input: e, meta: o }) => {
+    var s;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: Ne,
+        ref: h,
+        "data-testid": f ? `${f}-form-combobox` : "form-combobox",
+        children: [
+          G && /* @__PURE__ */ t("div", { className: me, children: /* @__PURE__ */ u("label", { "data-testid": "label", htmlFor: e.name, children: [
+            G,
+            (F || E.find((l) => l.name === "required")) && /* @__PURE__ */ t("span", { className: "form-field__label-mandatory", children: " *" })
+          ] }) }),
+          /* @__PURE__ */ u("div", { className: ye, children: [
+            /* @__PURE__ */ t("div", { className: "form-field__icons", children: /* @__PURE__ */ t(Pe, { className: Se, onClick: z }) }),
+            /* @__PURE__ */ u("div", { className: "form-field-combobox__select form-field__control", ref: P, children: [
+              /* @__PURE__ */ u("div", { className: "form-field-combobox__select-header", onClick: z, children: [
+                /* @__PURE__ */ t("span", { className: Ce, children: n.id }),
+                n.id.length === 0 && J && /* @__PURE__ */ t("div", { className: "form-field-combobox__placeholder", children: /* @__PURE__ */ t("label", { children: J }) })
+              ] }),
+              p && /* @__PURE__ */ t(
+                Q,
+                {
+                  headerIsHidden: !0,
+                  customPosition: {
+                    element: P,
+                    position: "bottom-right"
+                  },
+                  className: "form-field-combobox__dropdown form-field-combobox__dropdown-select",
+                  children: /* @__PURE__ */ t("ul", { className: "form-field-combobox__dropdown-list", ref: T, children: se.map((l) => {
+                    if (!l.hidden) {
+                      const M = _(
+                        "form-field-combobox__dropdown-list-option",
+                        l.className
+                      );
+                      return /* @__PURE__ */ t(
+                        "li",
+                        {
+                          className: M,
+                          onClick: () => he(l),
+                          children: l.label
+                        },
+                        l.id
+                      );
+                    }
+                  }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                autoComplete: "off",
+                className: ue,
+                "data-testid": f ? `${f}-form-combobox-input` : "form-combobox-input",
+                id: e.name,
+                onChange: be,
+                onFocus: ge,
+                placeholder: le,
+                ref: c,
+                required: F,
+                type: "text",
+                value: $
+              }
+            ),
+            L && (x.length > 0 || v) && /* @__PURE__ */ t(
+              Q,
+              {
+                headerIsHidden: !0,
+                customPosition: {
+                  element: P,
+                  position: "bottom-right"
+                },
+                className: "form-field-combobox__dropdown form-field-combobox__dropdown-suggestions",
+                style: {
+                  ...ce
+                },
+                children: /* @__PURE__ */ u("div", { ref: T, children: [
+                  !oe && /* @__PURE__ */ u("div", { className: "form-field-combobox__search-wrapper", children: [
+                    /* @__PURE__ */ t(
+                      "input",
+                      {
+                        autoComplete: "off",
+                        "data-testid": f ? `${f}-form-combobox-search` : "form-combobox-search",
+                        className: "form-field-combobox__search form-field__control",
+                        onChange: we,
+                        onFocus: () => I(!0),
+                        placeholder: "Type to search",
+                        type: "text"
+                      }
+                    ),
+                    /* @__PURE__ */ t(je, {})
+                  ] }),
+                  /* @__PURE__ */ t("ul", { className: "form-field-combobox__dropdown-list", children: v && x.length === 0 ? /* @__PURE__ */ t("li", { className: "form-field-combobox__dropdown-list-option", children: "No data" }, "no data") : x.map((l) => /* @__PURE__ */ t(
+                    "li",
+                    {
+                      className: "form-field-combobox__dropdown-list-option",
+                      onClick: () => _e(l),
+                      children: l.label
+                    },
+                    l.id
+                  )) })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ u("div", { className: "form-field__icons", children: [
+              V && !Array.isArray(o.error) && /* @__PURE__ */ t(
+                Fe,
+                {
+                  className: "form-field__warning",
+                  template: /* @__PURE__ */ t(Re, { text: ((s = o.error) == null ? void 0 : s.label) ?? B, warning: !0 }),
+                  children: /* @__PURE__ */ t(qe, {})
+                }
+              ),
+              V && Array.isArray(o.error) && /* @__PURE__ */ t("button", { className: "form-field__warning", onClick: ve, children: /* @__PURE__ */ t(Me, {}) })
+            ] }),
+            !q(E) && /* @__PURE__ */ t(Te, { show: A, ref: { refInputContainer: h }, children: pe() })
+          ] })
+        ]
+      }
+    );
+  } });
+};
+Be.propTypes = {
+  comboboxClassName: i.string,
+  density: Ae,
+  disabled: i.bool,
+  hideSearchInput: i.bool,
+  inputDefaultValue: i.string,
+  inputPlaceholder: i.string,
+  invalidText: i.string,
+  label: i.string,
+  maxSuggestedMatches: i.number,
+  name: i.string.isRequired,
+  onBlur: i.func,
+  onChange: i.func,
+  onFocus: i.func,
+  required: i.bool,
+  rules: i.array,
+  selectDefaultValue: i.shape({}),
+  selectOptions: Le.isRequired,
+  selectPlaceholder: i.string,
+  suggestionList: De,
+  validator: i.func,
+  withoutBorder: i.bool
+};
+export {
+  Be as default
+};
+//# sourceMappingURL=FormCombobox.mjs.map

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

@@ -0,0 +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    } else {\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 = event => {\n    onFocus && onFocus()\n    input.onFocus(new Event('focus'))\n\n    if (showSelectDropdown) {\n      setShowSelectDropdown(false)\n    }\n\n    // browser need some time to calculate cursor position after onFocus fired\n    if (!inputRef.current.selectionStart) {\n      setTimeout(() => {\n        setDropdownStyle({\n          left: `${event.target.selectionStart < 30 ? event.target.selectionStart : 30}ch`\n        })\n        setShowSuggestionList(true)\n      })\n    } else {\n      setShowSuggestionList(true)\n    }\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              autoComplete=\"off\"\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                        autoComplete=\"off\"\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/FormCombobox/FormCombobox.stories.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    export let title: string;
+    export { FormCombobox as component };
+}
+export default _default;
+export const Dense: any;
+export const Normal: any;
+export const Medium: any;
+export const Chunky: any;
+export const withDefaultValue: any;
+export const withSuggestions: any;
+//# sourceMappingURL=FormCombobox.stories.d.ts.map

package/dist/components/FormCombobox/FormCombobox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCombobox.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormCombobox/FormCombobox.stories.js"],"names":[],"mappings":";;;;;AA4CA,wBAAsC;AAMtC,yBAAuC;AAMvC,yBAAuC;AAMvC,yBAAuC;AAMvC,mCAAiD;AAWjD,kCAAgD"}

package/dist/components/FormInput/FormInput.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=FormInput.d.ts.map

package/dist/components/FormInput/FormInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormInput/FormInput.jsx"],"names":[],"mappings":""}

package/dist/components/FormInput/FormInput.mjs

@@ -0,0 +1,272 @@
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+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 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";
+import { INPUT_VALIDATION_RULES as Se, INPUT_LINK as De, DENSITY as $e } from "../../types.mjs";
+import { checkPatternsValidity as Oe, checkPatternsValidityAsync as Be } from "../../utils/validation.util.mjs";
+import "../../hooks/index.mjs";
+import { validation as Ke } from "../../constants.mjs";
+import Me from "../../images/exclamation-mark.svg.mjs";
+import qe from "../../images/popout.svg.mjs";
+import Le from "../../images/warning.svg.mjs";
+/* empty css                */
+import { useDetectOutsideClick as Ue } from "../../hooks/useDetectOutsideClick.hook.mjs";
+import { useDebounce as We } from "../../hooks/useDebounce.hook.mjs";
+import ee from "../Tooltip/Tooltip.mjs";
+import re from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import je from "../Tip/Tip.mjs";
+const p = {
+  iconClick: () => {
+  },
+  link: { show: "", value: "" },
+  onBlur: () => {
+  },
+  onKeyDown: () => {
+  },
+  onValidationError: () => {
+  },
+  validator: () => {
+  },
+  rules: []
+};
+let R = ({
+  async: L = !1,
+  className: te = "",
+  customRequiredLabel: ne = "",
+  density: le = "normal",
+  disabled: h = !1,
+  focused: U = !1,
+  iconClass: ae = "",
+  iconClick: oe = p.iconClick,
+  inputIcon: W = null,
+  invalidText: k = "This field is invalid",
+  label: j = "",
+  link: N = p.link,
+  name: c,
+  onBlur: S = p.onBlur,
+  onFocus: P,
+  onKeyDown: H = p.onKeyDown,
+  pattern: D = null,
+  required: T = !1,
+  onValidationError: Q = p.onValidationError,
+  suggestionList: V = [],
+  step: se = "1",
+  tip: Y = "",
+  type: I = "text",
+  validationRules: f = p.rules,
+  validator: z = p.validator,
+  withoutBorder: me = !1,
+  ...m
+}, 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-${le}`,
+    h && "form-field__wrapper-disabled",
+    _ && "form-field__wrapper-invalid",
+    me && "without-border"
+  ), ye = q("form-field__label", h && "form-field__label-disabled");
+  b(() => {
+    fe(String(s.value));
+  }, [s.value]), b(() => {
+    const e = o.current && a.invalid && (a.validating || a.modified || a.submitFailed && a.touched);
+    de(e), Q(e);
+  }, [
+    a.invalid,
+    a.modified,
+    a.submitFailed,
+    a.touched,
+    a.validating,
+    Q
+  ]), b(() => {
+    o.current || a.valid && y && E(!1);
+  }, [a.valid, y]), b(() => (y && window.addEventListener("scroll", J, !0), () => {
+    window.removeEventListener("scroll", J, !0);
+  }), [y]), b(() => {
+    U && v.current.focus();
+  }, [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((l) => l.name === e.name)
+    }))));
+  }, [f]);
+  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") && E(!1);
+  }, Te = (e) => {
+    s.onChange && s.onChange(e), $(!1), S();
+  }, Ve = () => {
+    v.current.focus(), E((e) => !e);
+  }, X = (e, l) => {
+    let i = Z(e) ? "" : String(e);
+    if (G(i)) return;
+    let n = null;
+    if (T && i.trim().length === 0 && !B.current)
+      n = {
+        name: "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 || (n = M.map((d) => ({ name: d.name, label: d.label })));
+    }
+    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 && (n = {
+      name: "minValue",
+      label: `The minimum value must be ${m.min}`
+    })), 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 n = X(i, l);
+    if (!A(f)) {
+      const [u, K] = await Be(f, i), M = u.filter((d) => !d.isValid);
+      K || (n = M.map((d) => ({ name: d.name, label: d.label })));
+    }
+    return o.current = n, n;
+  }, 400);
+  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: F,
+        className: he,
+        "data-testid": c ? `${c}-form-field-input` : "form-field-input",
+        children: [
+          j && /* @__PURE__ */ w("div", { className: ye, children: [
+            /* @__PURE__ */ w(
+              "label",
+              {
+                "data-testid": c ? `${c}-form-label` : "form-label",
+                htmlFor: e.name,
+                children: [
+                  j,
+                  (T || O.find((i) => i.name === "required")) && /* @__PURE__ */ t("span", { className: "form-field__label-mandatory", children: " *" })
+                ]
+              }
+            ),
+            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 || C,
+                onClick: (i) => i.stopPropagation(),
+                target: "_blank",
+                rel: "noreferrer",
+                children: /* @__PURE__ */ t(qe, {})
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ w("div", { className: _e, children: [
+            /* @__PURE__ */ t("div", { className: "form-field__control", children: /* @__PURE__ */ t(
+              "input",
+              {
+                "data-testid": c ? `${c}-form-input` : "form-input",
+                id: e.name,
+                ref: v,
+                required: _ || T,
+                disabled: h,
+                pattern: D,
+                type: I,
+                ...m,
+                ...e,
+                autoComplete: m.autocomplete ?? "off",
+                onBlur: we,
+                onKeyDown: Ne,
+                onFocus: Re
+              }
+            ) }),
+            /* @__PURE__ */ w("div", { className: "form-field__icons", children: [
+              _ && !Array.isArray(o.current) && /* @__PURE__ */ t(
+                ee,
+                {
+                  className: "form-field__warning",
+                  template: /* @__PURE__ */ t(re, { text: ((l = o.current) == null ? void 0 : l.label) ?? k, warning: !0 }),
+                  children: /* @__PURE__ */ t(Me, {})
+                }
+              ),
+              _ && Array.isArray(o.current) && /* @__PURE__ */ t("button", { className: "form-field__warning", onClick: Ve, children: /* @__PURE__ */ t(Le, {}) }),
+              Y && /* @__PURE__ */ t(je, { text: Y, className: "form-field__tip" }),
+              W && /* @__PURE__ */ t("span", { "data-testid": "input-icon", className: ae, onClick: oe, children: W })
+            ] }),
+            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, n) => /* @__PURE__ */ t(
+            "li",
+            {
+              className: "suggestion-item",
+              onClick: () => {
+                Te(i);
+              },
+              tabIndex: n,
+              dangerouslySetInnerHTML: {
+                __html: i.replace(
+                  new RegExp(C, "gi"),
+                  (u) => u && `<b>${u}</b>`
+                )
+              }
+            },
+            `${i}${n}`
+          )) }),
+          !A(O) && _ && Array.isArray(o.current) && /* @__PURE__ */ t(Ae, { show: y, ref: { refInputContainer: F }, children: ve() })
+        ]
+      }
+    );
+  } });
+};
+R = ie.memo(Fe(R));
+R.displayName = "FormInput";
+R.propTypes = {
+  async: r.bool,
+  className: r.string,
+  customRequiredLabel: r.string,
+  density: $e,
+  disabled: r.bool,
+  focused: r.bool,
+  iconClass: r.string,
+  iconClick: r.func,
+  inputIcon: r.element,
+  invalidText: r.string,
+  label: r.string,
+  link: De,
+  max: r.oneOfType([r.string, r.number]),
+  min: r.oneOfType([r.string, r.number]),
+  name: r.string.isRequired,
+  onBlur: r.func,
+  onFocus: r.func,
+  onKeyDown: r.func,
+  onValidationError: r.func,
+  pattern: r.string,
+  placeholder: r.string,
+  required: r.bool,
+  step: r.oneOfType([r.string, r.number]),
+  suggestionList: r.arrayOf(r.string),
+  tip: r.oneOfType([r.string, r.element]),
+  type: r.string,
+  validationRules: Se,
+  validator: r.func,
+  value: r.oneOfType([r.string, r.number]),
+  withoutBorder: r.bool
+};
+const gr = ie.memo(R);
+export {
+  gr as default
+};
+//# sourceMappingURL=FormInput.mjs.map