iguazio.dashboard-react-controls 3.0.3 → 3.0.4

package/dist/components/FormChipCell/FormChip/FormChip.mjs

@@ -1,15 +1,15 @@
-import { jsx as s } from "react/jsx-runtime";
-import j, { useLayoutEffect as E, forwardRef as N } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import v, { useLayoutEffect as F, forwardRef as T } from "react";
 import e from "prop-types";
-import v from "../NewChipForm/NewChipForm.mjs";
-import { CHIP_OPTIONS as F } from "../../../types.mjs";
+import k from "../NewChipForm/NewChipForm.mjs";
+import { CHIP_OPTIONS as w } from "../../../types.mjs";
 /* empty css               */
 let i = ({
-  chip: a,
+  chip: f,
   chipIndex: r,
-  chipSizeIsRecalculated: d,
-  setChipSizeIsRecalculated: l,
-  chipOptions: p = {
+  chipSizeIsRecalculated: n,
+  setChipSizeIsRecalculated: c,
+  chipOptions: m = {
     background: "purple",
     boldValue: !1,
     borderRadius: "primary",
@@ -17,53 +17,56 @@ let i = ({
     density: "dense",
     font: "purple"
   },
-  editConfig: f,
-  handleEditChip: c,
-  handleRemoveChip: m,
-  handleToEditMode: R,
-  isEditable: b = !1,
-  keyName: n = "",
-  meta: h,
-  setChipsSizes: o,
-  setEditConfig: C,
-  validationRules: q = {},
-  valueName: g = ""
-}, y) => {
-  const t = j.useRef();
-  return E(() => {
-    t.current && o && d && o((u) => ({
-      ...u,
-      [r]: t.current.getBoundingClientRect().width
-    }));
-  }, [r, d, o]), /* @__PURE__ */ s("div", { onClick: (u) => R(u, r, n), ref: t, children: /* @__PURE__ */ s(
-    v,
+  editConfig: R,
+  handleEditChip: b,
+  handleRemoveChip: h,
+  handleToEditMode: C,
+  isEditable: q = !1,
+  keyName: s = "",
+  meta: g,
+  setChipsSizes: t,
+  setEditConfig: y,
+  validationRules: j = {},
+  valueName: E = ""
+}, N) => {
+  const u = v.useRef();
+  return F(() => {
+    u.current && t && n && t((d) => {
+      var o, a, l;
+      return {
+        ...d,
+        [r]: ((l = (a = (o = u.current) == null ? void 0 : o.getBoundingClientRect) == null ? void 0 : a.call(o)) == null ? void 0 : l.width) ?? 50
+      };
+    });
+  }, [r, n, t]), /* @__PURE__ */ p("div", { onClick: (d) => C(d, r, s), ref: u, children: /* @__PURE__ */ p(
+    k,
     {
-      chip: a,
+      chip: f,
       chipIndex: r,
-      chipOptions: p,
+      chipOptions: m,
       className: "input-label-key",
-      editConfig: f,
-      handleRemoveChip: m,
-      isEditable: b,
-      keyName: n,
-      meta: h,
-      onChange: c,
-      ref: y,
-      setChipSizeIsRecalculated: l,
-      setEditConfig: C,
-      validationRules: q,
-      valueName: g
+      editConfig: R,
+      handleRemoveChip: h,
+      isEditable: q,
+      keyName: s,
+      meta: g,
+      onChange: b,
+      ref: N,
+      setChipSizeIsRecalculated: c,
+      setEditConfig: y,
+      validationRules: j,
+      valueName: E
     }
   ) });
 };
-i = N(i);
+i = T(i);
 i.displayName = "FormChip";
 i.propTypes = {
   chip: e.object.isRequired,
   chipSizeIsRecalculated: e.bool.isRequired,
   setChipSizeIsRecalculated: e.func.isRequired,
   chipIndex: e.number.isRequired,
-  chipOptions: F,
+  chipOptions: w,
   editConfig: e.object.isRequired,
   handleEditChip: e.func.isRequired,
   handleRemoveChip: e.func.isRequired,
@@ -76,8 +79,8 @@ i.propTypes = {
   validationRules: e.object,
   valueName: e.string
 };
-const B = i;
+const L = i;
 export {
-  B as default
+  L as default
 };
 //# sourceMappingURL=FormChip.mjs.map

package/dist/components/FormChipCell/FormChip/FormChip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormChip.mjs","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.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, { useLayoutEffect, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport NewChipForm from '../NewChipForm/NewChipForm'\n\nimport { CHIP_OPTIONS } from '../../../types'\n\nimport './formChip.scss'\n\nlet FormChip = (\n  {\n    chip,\n    chipIndex,\n    chipSizeIsRecalculated,\n    setChipSizeIsRecalculated,\n    chipOptions = {\n      background: 'purple',\n      boldValue: false,\n      borderRadius: 'primary',\n      borderColor: 'transparent',\n      density: 'dense',\n      font: 'purple'\n    },\n    editConfig,\n    handleEditChip,\n    handleRemoveChip,\n    handleToEditMode,\n    isEditable = false,\n    keyName = '',\n    meta,\n    setChipsSizes,\n    setEditConfig,\n    validationRules = {},\n    valueName = ''\n  },\n  ref\n) => {\n  const chipRef = React.useRef()\n  useLayoutEffect(() => {\n    if (chipRef.current && setChipsSizes && chipSizeIsRecalculated) {\n      setChipsSizes(state => ({\n        ...state,\n        [chipIndex]: chipRef.current.getBoundingClientRect().width\n      }))\n    }\n  }, [chipIndex, chipSizeIsRecalculated, setChipsSizes])\n\n  return (\n    <div onClick={event => handleToEditMode(event, chipIndex, keyName)} ref={chipRef}>\n      <NewChipForm\n        chip={chip}\n        chipIndex={chipIndex}\n        chipOptions={chipOptions}\n        className=\"input-label-key\"\n        editConfig={editConfig}\n        handleRemoveChip={handleRemoveChip}\n        isEditable={isEditable}\n        keyName={keyName}\n        meta={meta}\n        onChange={handleEditChip}\n        ref={ref}\n        setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n        setEditConfig={setEditConfig}\n        validationRules={validationRules}\n        valueName={valueName}\n      />\n    </div>\n  )\n}\n\nFormChip = forwardRef(FormChip)\n\nFormChip.displayName = 'FormChip'\n\nFormChip.propTypes = {\n  chip: PropTypes.object.isRequired,\n  chipSizeIsRecalculated: PropTypes.bool.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  chipIndex: PropTypes.number.isRequired,\n  chipOptions: CHIP_OPTIONS,\n  editConfig: PropTypes.object.isRequired,\n  handleEditChip: PropTypes.func.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  handleToEditMode: PropTypes.func.isRequired,\n  isEditable: PropTypes.bool,\n  keyName: PropTypes.string,\n  meta: PropTypes.object.isRequired,\n  setChipsSizes: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  validationRules: PropTypes.object,\n  valueName: PropTypes.string\n}\n\nexport default FormChip\n"],"names":["FormChip","chip","chipIndex","chipSizeIsRecalculated","setChipSizeIsRecalculated","chipOptions","editConfig","handleEditChip","handleRemoveChip","handleToEditMode","isEditable","keyName","meta","setChipsSizes","setEditConfig","validationRules","valueName","ref","chipRef","React","useLayoutEffect","state","jsx","event","NewChipForm","forwardRef","PropTypes","CHIP_OPTIONS","FormChip$1"],"mappings":";;;;;;AAyBA,IAAIA,IAAW,CACb;AAAA,EACE,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC;AAAA,EACnB,WAAAC,IAAY;AACd,GACAC,MACG;AACG,QAAAC,IAAUC,EAAM,OAAO;AAC7B,SAAAC,EAAgB,MAAM;AAChB,IAAAF,EAAQ,WAAWL,KAAiBV,KACtCU,EAAc,CAAUQ,OAAA;AAAA,MACtB,GAAGA;AAAA,MACH,CAACnB,CAAS,GAAGgB,EAAQ,QAAQ,wBAAwB;AAAA,IAAA,EACrD;AAAA,EAEH,GAAA,CAAChB,GAAWC,GAAwBU,CAAa,CAAC,GAGnD,gBAAAS,EAAC,OAAI,EAAA,SAAS,CAASC,MAAAd,EAAiBc,GAAOrB,GAAWS,CAAO,GAAG,KAAKO,GACvE,UAAA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,MAAAvB;AAAA,MACA,WAAAC;AAAA,MACA,aAAAG;AAAA,MACA,WAAU;AAAA,MACV,YAAAC;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAE;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAUL;AAAA,MACV,KAAAU;AAAA,MACA,2BAAAb;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEAhB,IAAWyB,EAAWzB,CAAQ;AAE9BA,EAAS,cAAc;AAEvBA,EAAS,YAAY;AAAA,EACnB,MAAM0B,EAAU,OAAO;AAAA,EACvB,wBAAwBA,EAAU,KAAK;AAAA,EACvC,2BAA2BA,EAAU,KAAK;AAAA,EAC1C,WAAWA,EAAU,OAAO;AAAA,EAC5B,aAAaC;AAAA,EACb,YAAYD,EAAU,OAAO;AAAA,EAC7B,gBAAgBA,EAAU,KAAK;AAAA,EAC/B,kBAAkBA,EAAU,KAAK;AAAA,EACjC,kBAAkBA,EAAU,KAAK;AAAA,EACjC,YAAYA,EAAU;AAAA,EACtB,SAASA,EAAU;AAAA,EACnB,MAAMA,EAAU,OAAO;AAAA,EACvB,eAAeA,EAAU,KAAK;AAAA,EAC9B,eAAeA,EAAU,KAAK;AAAA,EAC9B,iBAAiBA,EAAU;AAAA,EAC3B,WAAWA,EAAU;AACvB;AAEA,MAAAE,IAAe5B;"}
+{"version":3,"file":"FormChip.mjs","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.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, { useLayoutEffect, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport NewChipForm from '../NewChipForm/NewChipForm'\n\nimport { CHIP_OPTIONS } from '../../../types'\n\nimport './formChip.scss'\n\nlet FormChip = (\n  {\n    chip,\n    chipIndex,\n    chipSizeIsRecalculated,\n    setChipSizeIsRecalculated,\n    chipOptions = {\n      background: 'purple',\n      boldValue: false,\n      borderRadius: 'primary',\n      borderColor: 'transparent',\n      density: 'dense',\n      font: 'purple'\n    },\n    editConfig,\n    handleEditChip,\n    handleRemoveChip,\n    handleToEditMode,\n    isEditable = false,\n    keyName = '',\n    meta,\n    setChipsSizes,\n    setEditConfig,\n    validationRules = {},\n    valueName = ''\n  },\n  ref\n) => {\n  const chipRef = React.useRef()\n  useLayoutEffect(() => {\n    if (chipRef.current && setChipsSizes && chipSizeIsRecalculated) {\n      setChipsSizes(state => ({\n        ...state,\n        [chipIndex]: chipRef.current?.getBoundingClientRect?.()?.width ?? 50\n      }))\n    }\n  }, [chipIndex, chipSizeIsRecalculated, setChipsSizes])\n\n  return (\n    <div onClick={event => handleToEditMode(event, chipIndex, keyName)} ref={chipRef}>\n      <NewChipForm\n        chip={chip}\n        chipIndex={chipIndex}\n        chipOptions={chipOptions}\n        className=\"input-label-key\"\n        editConfig={editConfig}\n        handleRemoveChip={handleRemoveChip}\n        isEditable={isEditable}\n        keyName={keyName}\n        meta={meta}\n        onChange={handleEditChip}\n        ref={ref}\n        setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n        setEditConfig={setEditConfig}\n        validationRules={validationRules}\n        valueName={valueName}\n      />\n    </div>\n  )\n}\n\nFormChip = forwardRef(FormChip)\n\nFormChip.displayName = 'FormChip'\n\nFormChip.propTypes = {\n  chip: PropTypes.object.isRequired,\n  chipSizeIsRecalculated: PropTypes.bool.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  chipIndex: PropTypes.number.isRequired,\n  chipOptions: CHIP_OPTIONS,\n  editConfig: PropTypes.object.isRequired,\n  handleEditChip: PropTypes.func.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  handleToEditMode: PropTypes.func.isRequired,\n  isEditable: PropTypes.bool,\n  keyName: PropTypes.string,\n  meta: PropTypes.object.isRequired,\n  setChipsSizes: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  validationRules: PropTypes.object,\n  valueName: PropTypes.string\n}\n\nexport default FormChip\n"],"names":["FormChip","chip","chipIndex","chipSizeIsRecalculated","setChipSizeIsRecalculated","chipOptions","editConfig","handleEditChip","handleRemoveChip","handleToEditMode","isEditable","keyName","meta","setChipsSizes","setEditConfig","validationRules","valueName","ref","chipRef","React","useLayoutEffect","state","_c","_b","_a","jsx","event","NewChipForm","forwardRef","PropTypes","CHIP_OPTIONS","FormChip$1"],"mappings":";;;;;;AAyBA,IAAIA,IAAW,CACb;AAAA,EACE,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC;AAAA,EACnB,WAAAC,IAAY;AACd,GACAC,MACG;AACG,QAAAC,IAAUC,EAAM,OAAO;AAC7B,SAAAC,EAAgB,MAAM;AAChB,IAAAF,EAAQ,WAAWL,KAAiBV,KACtCU,EAAc,CAAUQ,MAAA;;AAAA;AAAA,QACtB,GAAGA;AAAA,QACH,CAACnB,CAAS,KAAGoB,KAAAC,KAAAC,IAAAN,EAAQ,YAAR,gBAAAM,EAAiB,0BAAjB,gBAAAD,EAAA,KAAAC,OAAA,gBAAAF,EAA4C,UAAS;AAAA,MAAA;AAAA,KAClE;AAAA,EAEH,GAAA,CAACpB,GAAWC,GAAwBU,CAAa,CAAC,GAGnD,gBAAAY,EAAC,OAAI,EAAA,SAAS,CAASC,MAAAjB,EAAiBiB,GAAOxB,GAAWS,CAAO,GAAG,KAAKO,GACvE,UAAA,gBAAAO;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,MAAA1B;AAAA,MACA,WAAAC;AAAA,MACA,aAAAG;AAAA,MACA,WAAU;AAAA,MACV,YAAAC;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAE;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAUL;AAAA,MACV,KAAAU;AAAA,MACA,2BAAAb;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEAhB,IAAW4B,EAAW5B,CAAQ;AAE9BA,EAAS,cAAc;AAEvBA,EAAS,YAAY;AAAA,EACnB,MAAM6B,EAAU,OAAO;AAAA,EACvB,wBAAwBA,EAAU,KAAK;AAAA,EACvC,2BAA2BA,EAAU,KAAK;AAAA,EAC1C,WAAWA,EAAU,OAAO;AAAA,EAC5B,aAAaC;AAAA,EACb,YAAYD,EAAU,OAAO;AAAA,EAC7B,gBAAgBA,EAAU,KAAK;AAAA,EAC/B,kBAAkBA,EAAU,KAAK;AAAA,EACjC,kBAAkBA,EAAU,KAAK;AAAA,EACjC,YAAYA,EAAU;AAAA,EACtB,SAASA,EAAU;AAAA,EACnB,MAAMA,EAAU,OAAO;AAAA,EACvB,eAAeA,EAAU,KAAK;AAAA,EAC9B,eAAeA,EAAU,KAAK;AAAA,EAC9B,iBAAiBA,EAAU;AAAA,EAC3B,WAAWA,EAAU;AACvB;AAEA,MAAAE,IAAe/B;"}

package/dist/components/FormChipCell/FormChipCellView.mjs

@@ -1,17 +1,17 @@
-import { jsx as i, jsxs as m, Fragment as K } from "react/jsx-runtime";
-import { forwardRef as M } from "react";
+import { jsx as i, jsxs as m, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as G } from "react";
 import r from "prop-types";
 import p from "classnames";
-import { FieldArray as G } from "react-final-form-arrays";
-import { isEmpty as J } from "lodash";
-import L from "./FormChip/FormChip.mjs";
-import Q from "./HiddenChipsBlock/HiddenChipsBlock.mjs";
-import U from "../TooltipTemplate/TextTooltipTemplate.mjs";
-import W from "../Tooltip/Tooltip.mjs";
-import { CHIP_OPTIONS as X } from "../../types.mjs";
-import { isEveryObjectValueEmpty as Y } from "../../utils/common.util.mjs";
-import { uniquenessError as v } from "./formChipCell.util.mjs";
-import Z from "../../images/add.svg.mjs";
+import { FieldArray as J } from "react-final-form-arrays";
+import { isEmpty as L } from "lodash";
+import Q from "./FormChip/FormChip.mjs";
+import U from "./HiddenChipsBlock/HiddenChipsBlock.mjs";
+import W from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import X from "../Tooltip/Tooltip.mjs";
+import { CHIP_OPTIONS as Y } from "../../types.mjs";
+import { isEveryObjectValueEmpty as Z } from "../../utils/common.util.mjs";
+import { uniquenessError as g } from "./formChipCell.util.mjs";
+import O from "../../images/add.svg.mjs";
 let n = ({
   chipOptions: e = {
     background: "purple",
@@ -23,66 +23,67 @@ let n = ({
   },
   chipSizeIsRecalculated: b,
   setChipSizeIsRecalculated: $,
-  chips: a,
+  chips: o,
   editConfig: f,
-  handleAddNewChip: g,
-  handleEditChip: w,
-  handleRemoveChip: T,
+  handleAddNewChip: w,
+  handleEditChip: T,
+  handleRemoveChip: j,
   handleShowElements: C,
-  handleToEditMode: j,
-  isEditable: o = !1,
+  handleToEditMode: x,
+  isEditable: t = !1,
   name: _,
-  setChipsSizes: x,
-  setEditConfig: F,
-  shortChips: V = !1,
-  showChips: E,
-  showHiddenChips: S,
-  validateFields: A,
+  setChipsSizes: F,
+  setEditConfig: V,
+  shortChips: E = !1,
+  showChips: S,
+  showHiddenChips: A,
+  validateFields: H,
   validationRules: s = {}
-}, { chipsCellRef: y, chipsWrapperRef: H, hiddenChipsCounterRef: N, hiddenChipsPopUpRef: I }) => {
-  const P = p(
+}, { chipsCellRef: y, chipsWrapperRef: I, hiddenChipsCounterRef: N, hiddenChipsPopUpRef: P }) => {
+  var k;
+  const z = p(
     "button-add",
     e.background && `button-add-background_${e.background}`,
     e.borderColor && `button-add-border_${e.borderColor}`,
     e.font && `button-add-font_${e.font}`,
     e.density && `button-add-density_${e.density}`
-  ), z = p(
+  ), B = p(
     "chips-wrapper",
-    o && "fixed-max-width",
-    !b && "chip_invisible"
+    t && "fixed-max-width",
+    ((k = o.visibleChips) == null ? void 0 : k.length) > 0 && !b && "chip_invisible"
   ), R = p(
     "chip",
     "chip__content",
-    o && "data-ellipsis",
-    V && "chip_short",
-    a.hiddenChips && "chip_hidden",
+    t && "data-ellipsis",
+    E && "chip_short",
+    o.hiddenChips && "chip_hidden",
     e.density && `chip-density_${e.density}`,
     e.borderRadius && `chip-border_${e.borderRadius}`,
     e.background && `chip-background_${e.background}`,
     e.borderColor && `chip-border_${e.borderColor}`,
     e.font && `chip-font_${e.font}`,
-    o && "editable",
-    (E || o) && "chip_visible"
+    t && "editable",
+    (S || t) && "chip_visible"
   );
-  return /* @__PURE__ */ i(G, { name: _, validate: A, children: ({ fields: t, meta: B }) => {
-    let k = { ...s };
-    return !J(s) && s.key.every((l) => l.name !== v.name) && (k = {
+  return /* @__PURE__ */ i(J, { name: _, validate: H, children: ({ fields: a, meta: D }) => {
+    let v = { ...s };
+    return !L(s) && s.key.every((l) => l.name !== g.name) && (v = {
       ...s,
-      key: [...s.key, v]
-    }), (o || !Y(t)) && /* @__PURE__ */ i("div", { className: "chips-cell", ref: y, children: /* @__PURE__ */ m("div", { className: z, ref: H, children: [
-      t.map((l, c) => {
+      key: [...s.key, g]
+    }), (t || !Z(a)) && /* @__PURE__ */ i("div", { className: "chips-cell", ref: y, children: /* @__PURE__ */ m("div", { className: B, ref: I, children: [
+      a.map((l, c) => {
         var q;
-        const d = t.value[c];
-        return c < ((q = a.visibleChips) == null ? void 0 : q.length) && /* @__PURE__ */ i("div", { className: "chip-block", children: /* @__PURE__ */ i(
-          W,
+        const d = a.value[c];
+        return c < ((q = o.visibleChips) == null ? void 0 : q.length) && /* @__PURE__ */ i("div", { className: "chip-block", children: /* @__PURE__ */ i(
+          X,
           {
             hidden: f.isEdit && !d.tooltip,
             template: /* @__PURE__ */ i(
-              U,
+              W,
               {
                 text: d.tooltip || /* @__PURE__ */ m("span", { className: "chip__content", children: [
                   /* @__PURE__ */ i("span", { className: "chip__content-item", children: d.key }),
-                  !d.isKeyOnly && /* @__PURE__ */ m(K, { children: [
+                  !d.isKeyOnly && /* @__PURE__ */ m(M, { children: [
                     /* @__PURE__ */ i("span", { className: "chip__delimiter", children: d.delimiter ? d.delimiter : ":" }),
                     /* @__PURE__ */ i("span", { className: "chip__content-item", children: d.value })
                   ] })
@@ -90,7 +91,7 @@ let n = ({
               }
             ),
             children: /* @__PURE__ */ i(
-              L,
+              Q,
               {
                 chip: d,
                 chipSizeIsRecalculated: b,
@@ -98,16 +99,16 @@ let n = ({
                 chipIndex: c,
                 chipOptions: e,
                 editConfig: f,
-                handleEditChip: (u, h, D) => w(u, t, h, D),
-                handleRemoveChip: (u, h) => T(u, t, h),
-                handleToEditMode: j,
-                isEditable: o,
+                handleEditChip: (u, h, K) => T(u, a, h, K),
+                handleRemoveChip: (u, h) => j(u, a, h),
+                handleToEditMode: x,
+                isEditable: t,
                 keyName: `${l}.key`,
-                meta: B,
+                meta: D,
                 ref: y,
-                setChipsSizes: x,
-                setEditConfig: F,
-                validationRules: k,
+                setChipsSizes: F,
+                setEditConfig: V,
+                validationRules: v,
                 valueName: `${l}.value`
               }
             )
@@ -116,43 +117,43 @@ let n = ({
         ) }, d.id);
       }),
       /* @__PURE__ */ m("div", { className: "chip-block", children: [
-        a.hiddenChips.length > 0 && S && /* @__PURE__ */ i(
-          Q,
+        o.hiddenChips.length > 0 && A && /* @__PURE__ */ i(
+          U,
           {
             chipClassNames: R,
             chipOptions: e,
-            chips: a.hiddenChips,
+            chips: o.hiddenChips,
             handleShowElements: C,
-            ref: { hiddenChipsCounterRef: N, hiddenChipsPopUpRef: I },
+            ref: { hiddenChipsCounterRef: N, hiddenChipsPopUpRef: P },
             textOverflowEllipsis: !0
           }
         ),
-        a.hiddenChipsNumber && /* @__PURE__ */ i(
+        o.hiddenChipsNumber && /* @__PURE__ */ i(
           "span",
           {
             ref: N,
             className: `${R} chips_button`,
             onClick: C,
-            children: a.hiddenChipsNumber
+            children: o.hiddenChipsNumber
           }
         )
       ] }),
-      o && /* @__PURE__ */ i(
+      t && /* @__PURE__ */ i(
         "button",
         {
           "data-testid": `${_}-add-chip`,
-          className: P,
-          onClick: (l) => g(l, t),
-          children: /* @__PURE__ */ i(Z, {})
+          className: z,
+          onClick: (l) => w(l, a),
+          children: /* @__PURE__ */ i(O, {})
         }
       )
     ] }) });
   } });
 };
-n = M(n);
+n = G(n);
 n.displayName = "FormChipCellView";
 n.propTypes = {
-  chipOptions: X,
+  chipOptions: Y,
   chipSizeIsRecalculated: r.bool.isRequired,
   setChipSizeIsRecalculated: r.func.isRequired,
   chips: r.object.isRequired,
@@ -173,8 +174,8 @@ n.propTypes = {
   validateFields: r.func.isRequired,
   validationRules: r.object
 };
-const he = n;
+const pe = n;
 export {
-  he as default
+  pe as default
 };
 //# sourceMappingURL=FormChipCellView.mjs.map

package/dist/components/FormChipCell/FormChipCellView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormChipCellView.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCellView.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 classnames from 'classnames'\nimport { FieldArray } from 'react-final-form-arrays'\nimport { isEmpty } from 'lodash'\n\nimport FormChip from './FormChip/FormChip'\nimport HiddenChipsBlock from './HiddenChipsBlock/HiddenChipsBlock'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { isEveryObjectValueEmpty } from '../../utils/common.util'\nimport { uniquenessError } from './formChipCell.util'\n\nimport Add from '../../images/add.svg?react'\n\nlet FormChipCellView = (\n  {\n    chipOptions = {\n      background: 'purple',\n      boldValue: false,\n      borderRadius: 'primary',\n      borderColor: 'transparent',\n      density: 'dense',\n      font: 'purple'\n    },\n    chipSizeIsRecalculated,\n    setChipSizeIsRecalculated,\n    chips,\n    editConfig,\n    handleAddNewChip,\n    handleEditChip,\n    handleRemoveChip,\n    handleShowElements,\n    handleToEditMode,\n    isEditable = false,\n    name,\n    setChipsSizes,\n    setEditConfig,\n    shortChips = false,\n    showChips,\n    showHiddenChips,\n    validateFields,\n    validationRules = {}\n  },\n  { chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }\n) => {\n  const buttonAddClassNames = classnames(\n    'button-add',\n    chipOptions.background && `button-add-background_${chipOptions.background}`,\n    chipOptions.borderColor && `button-add-border_${chipOptions.borderColor}`,\n    chipOptions.font && `button-add-font_${chipOptions.font}`,\n    chipOptions.density && `button-add-density_${chipOptions.density}`\n  )\n  const wrapperClassNames = classnames(\n    'chips-wrapper',\n    isEditable && 'fixed-max-width',\n    !chipSizeIsRecalculated && 'chip_invisible'\n  )\n  const chipClassNames = classnames(\n    'chip',\n    'chip__content',\n    isEditable && 'data-ellipsis',\n    shortChips && 'chip_short',\n    chips.hiddenChips && 'chip_hidden',\n    chipOptions.density && `chip-density_${chipOptions.density}`,\n    chipOptions.borderRadius && `chip-border_${chipOptions.borderRadius}`,\n    chipOptions.background && `chip-background_${chipOptions.background}`,\n    chipOptions.borderColor && `chip-border_${chipOptions.borderColor}`,\n    chipOptions.font && `chip-font_${chipOptions.font}`,\n    isEditable && 'editable',\n    (showChips || isEditable) && 'chip_visible'\n  )\n\n  return (\n    <FieldArray name={name} validate={validateFields}>\n      {({ fields, meta }) => {\n        let newValidationRules = { ...validationRules }\n\n        if (\n          !isEmpty(validationRules) &&\n          validationRules.key.every(rule => rule.name !== uniquenessError.name)\n        ) {\n          newValidationRules = {\n            ...validationRules,\n            key: [...validationRules.key, uniquenessError]\n          }\n        }\n\n        return (\n          (isEditable || !isEveryObjectValueEmpty(fields)) && (\n            <div className=\"chips-cell\" ref={chipsCellRef}>\n              <div className={wrapperClassNames} ref={chipsWrapperRef}>\n                {fields.map((contentItem, index) => {\n                  const chipData = fields.value[index]\n\n                  return (\n                    index < chips.visibleChips?.length && (\n                      <div className=\"chip-block\" key={chipData.id}>\n                        <Tooltip\n                          hidden={editConfig.isEdit && !chipData.tooltip}\n                          key={chipData.id}\n                          template={\n                            <TextTooltipTemplate\n                              text={\n                                chipData.tooltip || (\n                                  <span className=\"chip__content\">\n                                    <span className=\"chip__content-item\">{chipData.key}</span>\n                                    {!chipData.isKeyOnly && (\n                                      <>\n                                        <span className=\"chip__delimiter\">\n                                          {chipData.delimiter ? chipData.delimiter : ':'}\n                                        </span>\n                                        <span className=\"chip__content-item\">{chipData.value}</span>\n                                      </>\n                                    )}\n                                  </span>\n                                )\n                              }\n                            />\n                          }\n                        >\n                          <FormChip\n                            chip={chipData}\n                            chipSizeIsRecalculated={chipSizeIsRecalculated}\n                            setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n                            chipIndex={index}\n                            chipOptions={chipOptions}\n                            editConfig={editConfig}\n                            handleEditChip={(event, nameEvent, isOutsideClick) =>\n                              handleEditChip(event, fields, nameEvent, isOutsideClick)\n                            }\n                            handleRemoveChip={(event, index) =>\n                              handleRemoveChip(event, fields, index)\n                            }\n                            handleToEditMode={handleToEditMode}\n                            isEditable={isEditable}\n                            keyName={`${contentItem}.key`}\n                            meta={meta}\n                            ref={chipsCellRef}\n                            setChipsSizes={setChipsSizes}\n                            setEditConfig={setEditConfig}\n                            validationRules={newValidationRules}\n                            valueName={`${contentItem}.value`}\n                          />\n                        </Tooltip>\n                      </div>\n                    )\n                  )\n                })}\n\n                <div className=\"chip-block\">\n                  {chips.hiddenChips.length > 0 && showHiddenChips && (\n                    <HiddenChipsBlock\n                      chipClassNames={chipClassNames}\n                      chipOptions={chipOptions}\n                      chips={chips.hiddenChips}\n                      handleShowElements={handleShowElements}\n                      ref={{ hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n                      textOverflowEllipsis\n                    />\n                  )}\n                  {chips.hiddenChipsNumber && (\n                    <span\n                      ref={hiddenChipsCounterRef}\n                      className={`${chipClassNames} chips_button`}\n                      onClick={handleShowElements}\n                    >\n                      {chips.hiddenChipsNumber}\n                    </span>\n                  )}\n                </div>\n\n                {isEditable && (\n                  <button\n                    data-testid={`${name}-add-chip`}\n                    className={buttonAddClassNames}\n                    onClick={e => handleAddNewChip(e, fields)}\n                  >\n                    <Add />\n                  </button>\n                )}\n              </div>\n            </div>\n          )\n        )\n      }}\n    </FieldArray>\n  )\n}\n\nFormChipCellView = forwardRef(FormChipCellView)\n\nFormChipCellView.displayName = 'FormChipCellView'\n\nFormChipCellView.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  chipSizeIsRecalculated: PropTypes.bool.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  chips: PropTypes.object.isRequired,\n  editConfig: PropTypes.object.isRequired,\n  formState: PropTypes.object.isRequired,\n  handleAddNewChip: PropTypes.func.isRequired,\n  handleEditChip: PropTypes.func.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  handleShowElements: PropTypes.func.isRequired,\n  handleToEditMode: PropTypes.func.isRequired,\n  isEditable: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  setChipsSizes: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  shortChips: PropTypes.bool,\n  showChips: PropTypes.bool.isRequired,\n  showHiddenChips: PropTypes.bool.isRequired,\n  validateFields: PropTypes.func.isRequired,\n  validationRules: PropTypes.object\n}\n\nexport default FormChipCellView\n"],"names":["FormChipCellView","chipOptions","chipSizeIsRecalculated","setChipSizeIsRecalculated","chips","editConfig","handleAddNewChip","handleEditChip","handleRemoveChip","handleShowElements","handleToEditMode","isEditable","name","setChipsSizes","setEditConfig","shortChips","showChips","showHiddenChips","validateFields","validationRules","chipsCellRef","chipsWrapperRef","hiddenChipsCounterRef","hiddenChipsPopUpRef","buttonAddClassNames","classnames","wrapperClassNames","chipClassNames","jsx","FieldArray","fields","meta","newValidationRules","isEmpty","rule","uniquenessError","isEveryObjectValueEmpty","jsxs","contentItem","index","chipData","_a","Tooltip","TextTooltipTemplate","Fragment","FormChip","event","nameEvent","isOutsideClick","HiddenChipsBlock","e","Add","forwardRef","CHIP_OPTIONS","PropTypes","FormChipCellView$1"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAIA,IAAmB,CACrB;AAAA,EACE,aAAAC,IAAc;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AACpB,GACA,EAAE,cAAAC,GAAc,iBAAAC,GAAiB,uBAAAC,GAAuB,qBAAAC,QACrD;AACH,QAAMC,IAAsBC;AAAA,IAC1B;AAAA,IACAxB,EAAY,cAAc,yBAAyBA,EAAY,UAAU;AAAA,IACzEA,EAAY,eAAe,qBAAqBA,EAAY,WAAW;AAAA,IACvEA,EAAY,QAAQ,mBAAmBA,EAAY,IAAI;AAAA,IACvDA,EAAY,WAAW,sBAAsBA,EAAY,OAAO;AAAA,EAClE,GACMyB,IAAoBD;AAAA,IACxB;AAAA,IACAd,KAAc;AAAA,IACd,CAACT,KAA0B;AAAA,EAC7B,GACMyB,IAAiBF;AAAA,IACrB;AAAA,IACA;AAAA,IACAd,KAAc;AAAA,IACdI,KAAc;AAAA,IACdX,EAAM,eAAe;AAAA,IACrBH,EAAY,WAAW,gBAAgBA,EAAY,OAAO;AAAA,IAC1DA,EAAY,gBAAgB,eAAeA,EAAY,YAAY;AAAA,IACnEA,EAAY,cAAc,mBAAmBA,EAAY,UAAU;AAAA,IACnEA,EAAY,eAAe,eAAeA,EAAY,WAAW;AAAA,IACjEA,EAAY,QAAQ,aAAaA,EAAY,IAAI;AAAA,IACjDU,KAAc;AAAA,KACbK,KAAaL,MAAe;AAAA,EAC/B;AAGE,SAAA,gBAAAiB,EAACC,KAAW,MAAAjB,GAAY,UAAUM,GAC/B,UAAC,CAAA,EAAE,QAAAY,GAAQ,MAAAC,QAAW;AACjB,QAAAC,IAAqB,EAAE,GAAGb,EAAgB;AAE9C,WACE,CAACc,EAAQd,CAAe,KACxBA,EAAgB,IAAI,MAAM,CAAAe,MAAQA,EAAK,SAASC,EAAgB,IAAI,MAE/CH,IAAA;AAAA,MACnB,GAAGb;AAAA,MACH,KAAK,CAAC,GAAGA,EAAgB,KAAKgB,CAAe;AAAA,IAC/C,KAICxB,KAAc,CAACyB,EAAwBN,CAAM,wBAC3C,OAAI,EAAA,WAAU,cAAa,KAAKV,GAC/B,UAAC,gBAAAiB,EAAA,OAAA,EAAI,WAAWX,GAAmB,KAAKL,GACrC,UAAA;AAAA,MAAOS,EAAA,IAAI,CAACQ,GAAaC,MAAU;;AAC5B,cAAAC,IAAWV,EAAO,MAAMS,CAAK;AAEnC,eACEA,MAAQE,IAAArC,EAAM,iBAAN,gBAAAqC,EAAoB,WACzB,gBAAAb,EAAA,OAAA,EAAI,WAAU,cACb,UAAA,gBAAAA;AAAA,UAACc;AAAA,UAAA;AAAA,YACC,QAAQrC,EAAW,UAAU,CAACmC,EAAS;AAAA,YAEvC,UACE,gBAAAZ;AAAA,cAACe;AAAA,cAAA;AAAA,gBACC,MACEH,EAAS,WACN,gBAAAH,EAAA,QAAA,EAAK,WAAU,iBACd,UAAA;AAAA,kBAAA,gBAAAT,EAAC,QAAK,EAAA,WAAU,sBAAsB,UAAAY,EAAS,KAAI;AAAA,kBAClD,CAACA,EAAS,aAEP,gBAAAH,EAAAO,GAAA,EAAA,UAAA;AAAA,oBAAA,gBAAAhB,EAAC,UAAK,WAAU,mBACb,YAAS,YAAYY,EAAS,YAAY,IAC7C,CAAA;AAAA,oBACC,gBAAAZ,EAAA,QAAA,EAAK,WAAU,sBAAsB,YAAS,MAAM,CAAA;AAAA,kBAAA,EACvD,CAAA;AAAA,gBAAA,EAEJ,CAAA;AAAA,cAAA;AAAA,YAGN;AAAA,YAGF,UAAA,gBAAAA;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACC,MAAML;AAAA,gBACN,wBAAAtC;AAAA,gBACA,2BAAAC;AAAA,gBACA,WAAWoC;AAAA,gBACX,aAAAtC;AAAA,gBACA,YAAAI;AAAA,gBACA,gBAAgB,CAACyC,GAAOC,GAAWC,MACjCzC,EAAeuC,GAAOhB,GAAQiB,GAAWC,CAAc;AAAA,gBAEzD,kBAAkB,CAACF,GAAOP,MACxB/B,EAAiBsC,GAAOhB,GAAQS,CAAK;AAAA,gBAEvC,kBAAA7B;AAAA,gBACA,YAAAC;AAAA,gBACA,SAAS,GAAG2B,CAAW;AAAA,gBACvB,MAAAP;AAAA,gBACA,KAAKX;AAAA,gBACL,eAAAP;AAAA,gBACA,eAAAC;AAAA,gBACA,iBAAiBkB;AAAA,gBACjB,WAAW,GAAGM,CAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UAC3B;AAAA,UA3CKE,EAAS;AAAA,QAAA,EA4ChB,GA/C+BA,EAAS,EAgD1C;AAAA,MAAA,CAGL;AAAA,MAED,gBAAAH,EAAC,OAAI,EAAA,WAAU,cACZ,UAAA;AAAA,QAAMjC,EAAA,YAAY,SAAS,KAAKa,KAC/B,gBAAAW;AAAA,UAACqB;AAAA,UAAA;AAAA,YACC,gBAAAtB;AAAA,YACA,aAAA1B;AAAA,YACA,OAAOG,EAAM;AAAA,YACb,oBAAAK;AAAA,YACA,KAAK,EAAE,uBAAAa,GAAuB,qBAAAC,EAAoB;AAAA,YAClD,sBAAoB;AAAA,UAAA;AAAA,QACtB;AAAA,QAEDnB,EAAM,qBACL,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKN;AAAA,YACL,WAAW,GAAGK,CAAc;AAAA,YAC5B,SAASlB;AAAA,YAER,UAAML,EAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACT,GAEJ;AAAA,MAECO,KACC,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAa,GAAGhB,CAAI;AAAA,UACpB,WAAWY;AAAA,UACX,SAAS,CAAA0B,MAAK5C,EAAiB4C,GAAGpB,CAAM;AAAA,UAExC,4BAACqB,GAAI,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CAEJ,EACF,CAAA;AAAA,EAAA,GAIR;AAEJ;AAEAnD,IAAmBoD,EAAWpD,CAAgB;AAE9CA,EAAiB,cAAc;AAE/BA,EAAiB,YAAY;AAAA,EAC3B,aAAaqD;AAAA,EACb,wBAAwBC,EAAU,KAAK;AAAA,EACvC,2BAA2BA,EAAU,KAAK;AAAA,EAC1C,OAAOA,EAAU,OAAO;AAAA,EACxB,YAAYA,EAAU,OAAO;AAAA,EAC7B,WAAWA,EAAU,OAAO;AAAA,EAC5B,kBAAkBA,EAAU,KAAK;AAAA,EACjC,gBAAgBA,EAAU,KAAK;AAAA,EAC/B,kBAAkBA,EAAU,KAAK;AAAA,EACjC,oBAAoBA,EAAU,KAAK;AAAA,EACnC,kBAAkBA,EAAU,KAAK;AAAA,EACjC,YAAYA,EAAU;AAAA,EACtB,MAAMA,EAAU,OAAO;AAAA,EACvB,eAAeA,EAAU,KAAK;AAAA,EAC9B,eAAeA,EAAU,KAAK;AAAA,EAC9B,YAAYA,EAAU;AAAA,EACtB,WAAWA,EAAU,KAAK;AAAA,EAC1B,iBAAiBA,EAAU,KAAK;AAAA,EAChC,gBAAgBA,EAAU,KAAK;AAAA,EAC/B,iBAAiBA,EAAU;AAC7B;AAEA,MAAAC,KAAevD;"}
+{"version":3,"file":"FormChipCellView.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCellView.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 classnames from 'classnames'\nimport { FieldArray } from 'react-final-form-arrays'\nimport { isEmpty } from 'lodash'\n\nimport FormChip from './FormChip/FormChip'\nimport HiddenChipsBlock from './HiddenChipsBlock/HiddenChipsBlock'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { isEveryObjectValueEmpty } from '../../utils/common.util'\nimport { uniquenessError } from './formChipCell.util'\n\nimport Add from '../../images/add.svg?react'\n\nlet FormChipCellView = (\n  {\n    chipOptions = {\n      background: 'purple',\n      boldValue: false,\n      borderRadius: 'primary',\n      borderColor: 'transparent',\n      density: 'dense',\n      font: 'purple'\n    },\n    chipSizeIsRecalculated,\n    setChipSizeIsRecalculated,\n    chips,\n    editConfig,\n    handleAddNewChip,\n    handleEditChip,\n    handleRemoveChip,\n    handleShowElements,\n    handleToEditMode,\n    isEditable = false,\n    name,\n    setChipsSizes,\n    setEditConfig,\n    shortChips = false,\n    showChips,\n    showHiddenChips,\n    validateFields,\n    validationRules = {}\n  },\n  { chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }\n) => {\n  const buttonAddClassNames = classnames(\n    'button-add',\n    chipOptions.background && `button-add-background_${chipOptions.background}`,\n    chipOptions.borderColor && `button-add-border_${chipOptions.borderColor}`,\n    chipOptions.font && `button-add-font_${chipOptions.font}`,\n    chipOptions.density && `button-add-density_${chipOptions.density}`\n  )\n  const wrapperClassNames = classnames(\n    'chips-wrapper',\n    isEditable && 'fixed-max-width',\n    chips.visibleChips?.length > 0 && !chipSizeIsRecalculated && 'chip_invisible'\n  )\n  const chipClassNames = classnames(\n    'chip',\n    'chip__content',\n    isEditable && 'data-ellipsis',\n    shortChips && 'chip_short',\n    chips.hiddenChips && 'chip_hidden',\n    chipOptions.density && `chip-density_${chipOptions.density}`,\n    chipOptions.borderRadius && `chip-border_${chipOptions.borderRadius}`,\n    chipOptions.background && `chip-background_${chipOptions.background}`,\n    chipOptions.borderColor && `chip-border_${chipOptions.borderColor}`,\n    chipOptions.font && `chip-font_${chipOptions.font}`,\n    isEditable && 'editable',\n    (showChips || isEditable) && 'chip_visible'\n  )\n\n  return (\n    <FieldArray name={name} validate={validateFields}>\n      {({ fields, meta }) => {\n        let newValidationRules = { ...validationRules }\n\n        if (\n          !isEmpty(validationRules) &&\n          validationRules.key.every(rule => rule.name !== uniquenessError.name)\n        ) {\n          newValidationRules = {\n            ...validationRules,\n            key: [...validationRules.key, uniquenessError]\n          }\n        }\n\n        return (\n          (isEditable || !isEveryObjectValueEmpty(fields)) && (\n            <div className=\"chips-cell\" ref={chipsCellRef}>\n              <div className={wrapperClassNames} ref={chipsWrapperRef}>\n                {fields.map((contentItem, index) => {\n                  const chipData = fields.value[index]\n\n                  return (\n                    index < chips.visibleChips?.length && (\n                      <div className=\"chip-block\" key={chipData.id}>\n                        <Tooltip\n                          hidden={editConfig.isEdit && !chipData.tooltip}\n                          key={chipData.id}\n                          template={\n                            <TextTooltipTemplate\n                              text={\n                                chipData.tooltip || (\n                                  <span className=\"chip__content\">\n                                    <span className=\"chip__content-item\">{chipData.key}</span>\n                                    {!chipData.isKeyOnly && (\n                                      <>\n                                        <span className=\"chip__delimiter\">\n                                          {chipData.delimiter ? chipData.delimiter : ':'}\n                                        </span>\n                                        <span className=\"chip__content-item\">{chipData.value}</span>\n                                      </>\n                                    )}\n                                  </span>\n                                )\n                              }\n                            />\n                          }\n                        >\n                          <FormChip\n                            chip={chipData}\n                            chipSizeIsRecalculated={chipSizeIsRecalculated}\n                            setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n                            chipIndex={index}\n                            chipOptions={chipOptions}\n                            editConfig={editConfig}\n                            handleEditChip={(event, nameEvent, isOutsideClick) =>\n                              handleEditChip(event, fields, nameEvent, isOutsideClick)\n                            }\n                            handleRemoveChip={(event, index) =>\n                              handleRemoveChip(event, fields, index)\n                            }\n                            handleToEditMode={handleToEditMode}\n                            isEditable={isEditable}\n                            keyName={`${contentItem}.key`}\n                            meta={meta}\n                            ref={chipsCellRef}\n                            setChipsSizes={setChipsSizes}\n                            setEditConfig={setEditConfig}\n                            validationRules={newValidationRules}\n                            valueName={`${contentItem}.value`}\n                          />\n                        </Tooltip>\n                      </div>\n                    )\n                  )\n                })}\n\n                <div className=\"chip-block\">\n                  {chips.hiddenChips.length > 0 && showHiddenChips && (\n                    <HiddenChipsBlock\n                      chipClassNames={chipClassNames}\n                      chipOptions={chipOptions}\n                      chips={chips.hiddenChips}\n                      handleShowElements={handleShowElements}\n                      ref={{ hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n                      textOverflowEllipsis\n                    />\n                  )}\n                  {chips.hiddenChipsNumber && (\n                    <span\n                      ref={hiddenChipsCounterRef}\n                      className={`${chipClassNames} chips_button`}\n                      onClick={handleShowElements}\n                    >\n                      {chips.hiddenChipsNumber}\n                    </span>\n                  )}\n                </div>\n\n                {isEditable && (\n                  <button\n                    data-testid={`${name}-add-chip`}\n                    className={buttonAddClassNames}\n                    onClick={e => handleAddNewChip(e, fields)}\n                  >\n                    <Add />\n                  </button>\n                )}\n              </div>\n            </div>\n          )\n        )\n      }}\n    </FieldArray>\n  )\n}\n\nFormChipCellView = forwardRef(FormChipCellView)\n\nFormChipCellView.displayName = 'FormChipCellView'\n\nFormChipCellView.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  chipSizeIsRecalculated: PropTypes.bool.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  chips: PropTypes.object.isRequired,\n  editConfig: PropTypes.object.isRequired,\n  formState: PropTypes.object.isRequired,\n  handleAddNewChip: PropTypes.func.isRequired,\n  handleEditChip: PropTypes.func.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  handleShowElements: PropTypes.func.isRequired,\n  handleToEditMode: PropTypes.func.isRequired,\n  isEditable: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  setChipsSizes: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  shortChips: PropTypes.bool,\n  showChips: PropTypes.bool.isRequired,\n  showHiddenChips: PropTypes.bool.isRequired,\n  validateFields: PropTypes.func.isRequired,\n  validationRules: PropTypes.object\n}\n\nexport default FormChipCellView\n"],"names":["FormChipCellView","chipOptions","chipSizeIsRecalculated","setChipSizeIsRecalculated","chips","editConfig","handleAddNewChip","handleEditChip","handleRemoveChip","handleShowElements","handleToEditMode","isEditable","name","setChipsSizes","setEditConfig","shortChips","showChips","showHiddenChips","validateFields","validationRules","chipsCellRef","chipsWrapperRef","hiddenChipsCounterRef","hiddenChipsPopUpRef","buttonAddClassNames","classnames","wrapperClassNames","_a","chipClassNames","jsx","FieldArray","fields","meta","newValidationRules","isEmpty","rule","uniquenessError","isEveryObjectValueEmpty","jsxs","contentItem","index","chipData","Tooltip","TextTooltipTemplate","Fragment","FormChip","event","nameEvent","isOutsideClick","HiddenChipsBlock","e","Add","forwardRef","CHIP_OPTIONS","PropTypes","FormChipCellView$1"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormCombobox.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormCombobox/FormCombobox.jsx"],"names":[],"mappings":";AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgbC;;;;;;;;;;;;;;;;;;;;;;;;;;wBAzb0E,aAAa;yCAAb,aAAa"}
+{"version":3,"file":"FormCombobox.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormCombobox/FormCombobox.jsx"],"names":[],"mappings":";AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;gBAobC;;;;;;;;;;;;;;;;;;;;;;;;;;wBA7b0E,aAAa;yCAAb,aAAa"}

package/dist/components/FormCombobox/FormCombobox.mjs

@@ -1,4 +1,4 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 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";
@@ -23,12 +23,12 @@ const Be = ({
   density: ee = "normal",
   disabled: W = !1,
   hideSearchInput: oe = !1,
-  inputDefaultValue: ie = "",
-  inputPlaceholder: le = "",
+  inputDefaultValue: le = "",
+  inputPlaceholder: ie = "",
   invalidText: B = "Invalid",
   label: G = "",
   maxSuggestedMatches: te = 1,
-  name: d,
+  name: m,
   onBlur: _ = null,
   onChange: g = null,
   onFocus: N = null,
@@ -45,10 +45,10 @@ const Be = ({
   validator: U = null,
   withoutBorder: ae = !1
 }) => {
-  const { input: a, meta: r } = Ee(d), [F, D] = c(ie), [n, ne] = c(re), [ce, L] = c({
+  const { input: a, meta: r } = Ee(m), [F, D] = c(le), [n, ne] = c(re), [ce, L] = c({
     left: "0px"
-  }), [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));
+  }), [p, f] = 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), b = R(), P = R(), d = R(), O = R();
+  We(b, () => E(!1));
   const fe = h("form-field__label", W && "form-field__label-disabled"), ue = h(
     "form-field-combobox__input",
     n.id.length === 0 && "form-field-combobox__input_hidden"
@@ -69,57 +69,57 @@ const Be = ({
   }, [r.invalid, r.modified, r.submitFailed, r.touched, r.validating]);
   const j = K(
     (e) => {
-      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));
+      b.current && !b.current.contains(e.target) && O.current && !O.current.contains(e.target) && (y(!1), f(!1), w(!1), a.onBlur(new Event("blur")), _ && _(a.value));
     },
     [a, _]
   ), Y = (e) => {
-    p.current && p.current.contains(e.target) || !e.target.closest(".pop-up-dialog") && !e.target.classList.contains("form-field-combobox") && (E(!1), u(!1), w(!1), b.current.blur());
+    b.current && b.current.contains(e.target) || !e.target.closest(".pop-up-dialog") && !e.target.classList.contains("form-field-combobox") && (E(!1), f(!1), w(!1), d.current.blur());
   };
   C(() => (window.addEventListener("click", j), () => {
     window.removeEventListener("click", j);
-  }), [j]), C(() => ((A || f || $) && window.addEventListener("scroll", Y, !0), () => {
+  }), [j]), C(() => ((A || p || $) && window.addEventListener("scroll", Y, !0), () => {
     window.removeEventListener("scroll", Y, !0);
-  }), [f, $, A]);
-  const pe = () => V.map(({ isValid: e = !1, label: o, name: s }) => /* @__PURE__ */ i(Re, { valid: e, validationMessage: o }, s)), be = (e) => {
+  }), [p, $, A]);
+  const pe = () => V.map(({ isValid: e = !1, label: o, name: s }) => /* @__PURE__ */ l(Re, { valid: e, validationMessage: o }, s)), be = (e) => {
     const o = e.target;
     L({
       left: `${o.selectionStart < 30 ? o.selectionStart : 30}ch`
     }), 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), D(""), 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), f(!1), d.current.disabled = !1, d.current.focus()) : (f(!1), d.current.disabled = !1, d.current.focus());
   }, _e = (e) => {
     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("/") !== 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`
+    let i = e.customDelimiter ? o[s].replace(new RegExp(`${e.customDelimiter}.*`), "") + e.id : e.id;
+    o.length <= te - 1 && (i += "/"), o[s] = i, v && y(!1), o.join("/") !== F && (D(o.join("/")), a.onChange(`${n.id}${o.join("/")}`), g && g(n.id, o.join("/"))), w(!1), d.current.focus(), L({
+      left: `${d.current.selectionStart < 30 ? d.current.selectionStart : 30}ch`
     });
   }, ge = () => {
-    N && N(), a.onFocus(new Event("focus")), f && u(!1), w(!0);
+    N && N(), a.onFocus(new Event("focus")), p && f(!1), w(!0);
   }, we = (e) => {
     e.persist(), X(
       () => 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), L({
+    p ? (f(!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) => {
+    }), f(!0), a.onFocus(new Event("focus")), N && N(a.value));
+  }, [a, _, N, p]), xe = (e = "", o) => {
     const s = e.startsWith(n.id) ? e.substring(n.id.length) : e ?? "";
-    let l = null;
+    let i = null;
     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 })));
+      Ie || (i = Ve.map((k) => ({ name: k.name, label: k.label })));
     }
-    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;
+    return q(i) && (s.startsWith(" ") ? i = { name: "empty", label: B } : T && s.trim().length === 0 && (i = { name: "required", label: "This field is required" })), !i && U && (i = U(e, o)), i;
   }, ve = () => {
-    E((e) => !e), u(!1);
+    E((e) => !e), f(!1);
   }, Ne = h(
     Z,
     "form-field-combobox",
     "form-field",
     I && "form-field-combobox_invalid"
   ), Se = h(
-    f && "form-field-combobox__icon_open",
+    p && "form-field-combobox__icon_open",
     "form-field-combobox__icon"
   ), Ce = h(n.className), ye = h(
     "form-field__wrapper",
@@ -128,27 +128,27 @@ const Be = ({
     I && "form-field__wrapper-invalid",
     ae && "without-border"
   );
-  return /* @__PURE__ */ i(Oe, { name: d, validate: xe, children: ({ input: e, meta: o }) => {
+  return /* @__PURE__ */ l(Oe, { name: m, validate: xe, children: ({ input: e, meta: o }) => {
     var s;
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ u(
       "div",
       {
         className: Ne,
-        ref: p,
-        "data-testid": d ? `${d}-form-combobox` : "form-combobox",
+        ref: b,
+        "data-testid": m ? `${m}-form-combobox` : "form-combobox",
         children: [
-          G && /* @__PURE__ */ i("div", { className: fe, children: /* @__PURE__ */ m("label", { "data-testid": "label", htmlFor: e.name, children: [
+          G && /* @__PURE__ */ l("div", { className: fe, children: /* @__PURE__ */ u("label", { "data-testid": "label", htmlFor: e.name, children: [
             G,
-            (T || V.find((l) => l.name === "required")) && /* @__PURE__ */ i("span", { className: "form-field__label-mandatory", children: " *" })
+            (T || V.find((i) => i.name === "required")) && /* @__PURE__ */ l("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: 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 }) })
+          /* @__PURE__ */ u("div", { className: ye, children: [
+            /* @__PURE__ */ l("div", { className: "form-field__icons", children: /* @__PURE__ */ l(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__ */ l("span", { className: Ce, children: n.id }),
+                n.id.length === 0 && J && /* @__PURE__ */ l("div", { className: "form-field-combobox__placeholder", children: /* @__PURE__ */ l("label", { children: J }) })
               ] }),
-              f && /* @__PURE__ */ i(
+              p && /* @__PURE__ */ l(
                 Q,
                 {
                   headerIsHidden: !0,
@@ -157,42 +157,42 @@ const Be = ({
                     position: "bottom-right"
                   },
                   className: "form-field-combobox__dropdown form-field-combobox__dropdown-select",
-                  children: /* @__PURE__ */ i("ul", { className: "form-field-combobox__dropdown-list", ref: O, children: se.map((l) => {
-                    if (!l.hidden) {
+                  children: /* @__PURE__ */ l("ul", { className: "form-field-combobox__dropdown-list", ref: O, children: se.map((i) => {
+                    if (!i.hidden) {
                       const M = h(
                         "form-field-combobox__dropdown-list-option",
-                        l.className
+                        i.className
                       );
-                      return /* @__PURE__ */ i(
+                      return /* @__PURE__ */ l(
                         "li",
                         {
                           className: M,
-                          onClick: () => he(l),
-                          children: l.label
+                          onClick: () => he(i),
+                          children: i.label
                         },
-                        l.id
+                        i.id
                       );
                     }
                   }) })
                 }
               )
             ] }),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ l(
               "input",
               {
                 className: ue,
-                "data-testid": d ? `${d}-form-combobox-input` : "form-combobox-input",
+                "data-testid": m ? `${m}-form-combobox-input` : "form-combobox-input",
                 id: e.name,
                 onChange: be,
                 onFocus: ge,
-                placeholder: le,
-                ref: b,
+                placeholder: ie,
+                ref: d,
                 required: T,
                 type: "text",
                 value: F
               }
             ),
-            $ && (x.length > 0 || v) && /* @__PURE__ */ i(
+            $ && (x.length > 0 || v) && /* @__PURE__ */ l(
               Q,
               {
                 headerIsHidden: !0,
@@ -204,12 +204,12 @@ const Be = ({
                 style: {
                   ...ce
                 },
-                children: /* @__PURE__ */ m("div", { ref: O, children: [
-                  !oe && /* @__PURE__ */ m("div", { className: "form-field-combobox__search-wrapper", children: [
-                    /* @__PURE__ */ i(
+                children: /* @__PURE__ */ u("div", { ref: O, children: [
+                  !oe && /* @__PURE__ */ u("div", { className: "form-field-combobox__search-wrapper", children: [
+                    /* @__PURE__ */ l(
                       "input",
                       {
-                        "data-testid": d ? `${d}-form-combobox-search` : "form-combobox-search",
+                        "data-testid": m ? `${m}-form-combobox-search` : "form-combobox-search",
                         className: "form-field-combobox__search form-field__control",
                         onChange: we,
                         onFocus: () => y(!0),
@@ -217,32 +217,32 @@ const Be = ({
                         type: "text"
                       }
                     ),
-                    /* @__PURE__ */ i(je, {})
+                    /* @__PURE__ */ l(je, {})
                   ] }),
-                  /* @__PURE__ */ i("ul", { className: "form-field-combobox__dropdown-list", children: v && x.length === 0 ? /* @__PURE__ */ i("li", { className: "form-field-combobox__dropdown-list-option", children: "No data" }, "no data") : x.map((l) => /* @__PURE__ */ i(
+                  /* @__PURE__ */ l("ul", { className: "form-field-combobox__dropdown-list", children: v && x.length === 0 ? /* @__PURE__ */ l("li", { className: "form-field-combobox__dropdown-list-option", children: "No data" }, "no data") : x.map((i) => /* @__PURE__ */ l(
                     "li",
                     {
                       className: "form-field-combobox__dropdown-list-option",
-                      onClick: () => _e(l),
-                      children: l.label
+                      onClick: () => _e(i),
+                      children: i.label
                     },
-                    l.id
+                    i.id
                   )) })
                 ] })
               }
             ),
-            /* @__PURE__ */ m("div", { className: "form-field__icons", children: [
-              I && !Array.isArray(o.error) && /* @__PURE__ */ i(
+            /* @__PURE__ */ u("div", { className: "form-field__icons", children: [
+              I && !Array.isArray(o.error) && /* @__PURE__ */ l(
                 Fe,
                 {
                   className: "form-field__warning",
-                  template: /* @__PURE__ */ i(Te, { text: ((s = o.error) == null ? void 0 : s.label) ?? B, warning: !0 }),
-                  children: /* @__PURE__ */ i(qe, {})
+                  template: /* @__PURE__ */ l(Te, { text: ((s = o.error) == null ? void 0 : s.label) ?? B, warning: !0 }),
+                  children: /* @__PURE__ */ l(qe, {})
                 }
               ),
-              I && Array.isArray(o.error) && /* @__PURE__ */ i("button", { className: "form-field__warning", onClick: ve, children: /* @__PURE__ */ i(Me, {}) })
+              I && Array.isArray(o.error) && /* @__PURE__ */ l("button", { className: "form-field__warning", onClick: ve, children: /* @__PURE__ */ l(Me, {}) })
             ] }),
-            !q(V) && /* @__PURE__ */ i(ke, { show: A, ref: { refInputContainer: p }, children: pe() })
+            !q(V) && /* @__PURE__ */ l(ke, { show: A, ref: { refInputContainer: b }, 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\" 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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"}
+{"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 = () => {\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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "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",