iguazio.dashboard-react-controls 3.2.1 → 3.2.3

package/dist/components/FormChipCell/NewChipForm/NewChipForm.mjs

@@ -1,279 +1,285 @@
-import { jsx as k, jsxs as ve } from "react/jsx-runtime";
-import T, { useState as $, useMemo as H, useCallback as W, useEffect as f, useLayoutEffect as Fe, forwardRef as fe } from "react";
-import o from "prop-types";
+import { jsx as W, jsxs as Fe } from "react/jsx-runtime";
+import T, { useState as $, useMemo as H, useCallback as I, useEffect as h, useLayoutEffect as fe, forwardRef as we } from "react";
+import a from "prop-types";
 import j from "classnames";
-import { isEmpty as h, get as D, throttle as we, isNil as G } from "lodash";
-import re from "../NewChipInput/NewChipInput.mjs";
-import Re from "../../../elements/OptionsMenu/OptionsMenu.mjs";
-import be from "../../../elements/ValidationTemplate/ValidationTemplate.mjs";
-import { CHIP_OPTIONS as ke } from "../../../types.mjs";
-import { CLICK as We, TAB as J, TAB_SHIFT as Ie } from "../../../constants.mjs";
-import { getTextWidth as z } from "../formChipCell.util.mjs";
-import { getTransitionEndEventName as Ke } from "../../../utils/common.util.mjs";
-import Ve from "../../../images/close.svg.mjs";
+import { isEmpty as y, get as z, throttle as Re, isNil as G } from "lodash";
+import se from "../NewChipInput/NewChipInput.mjs";
+import be from "../../../elements/OptionsMenu/OptionsMenu.mjs";
+import ke from "../../../elements/ValidationTemplate/ValidationTemplate.mjs";
+import { CHIP_OPTIONS as We } from "../../../types.mjs";
+import { CLICK as Ie, TAB as J, TAB_SHIFT as Ke } from "../../../constants.mjs";
+import { getTextWidth as D } from "../formChipCell.util.mjs";
+import { getTransitionEndEventName as Ve } from "../../../utils/common.util.mjs";
+import _e from "../../../images/close.svg.mjs";
 /* empty css                  */
-const _e = {
+const Ne = {
   rules: {}
 };
-let x = ({
-  chip: a,
-  chipIndex: n,
-  chipOptions: se,
+let P = ({
+  chip: d,
+  chipIndex: i,
+  chipOptions: ne,
   className: ie = "",
-  editConfig: t,
-  handleRemoveChip: ne,
-  isEditable: d,
-  keyName: V,
+  editConfig: r,
+  handleRemoveChip: le,
+  isDeletable: Q,
+  isEditable: u,
+  keyName: N,
   meta: m,
-  onChange: _,
-  setChipSizeIsRecalculated: Q,
-  setEditConfig: L,
-  validationRules: le = _e.rules,
-  valueName: ue
-}, P) => {
+  onChange: q,
+  setChipSizeIsRecalculated: U,
+  setEditConfig: O,
+  validationRules: ue = Ne.rules,
+  valueName: oe
+}, w) => {
   const [l, A] = $({
-    isKeyOnly: a.isKeyOnly,
-    key: a.key,
-    value: a.value,
+    isKeyOnly: d.isKeyOnly,
+    key: d.key,
+    value: d.value,
     keyFieldWidth: 0,
     valueFieldWidth: 0
-  }), [y, ce] = $("key"), [U, oe] = $(le), [p, B] = $(!1), { background: X, borderColor: Y, borderRadius: Z, density: C, font: g } = se, v = H(() => d ? 25 : 20, [d]), F = H(() => d ? 35 : 20, [d]), M = H(() => Ke(), []), u = T.useRef({}), c = T.useRef({}), S = T.useRef(), E = T.useRef(), ae = j(
+  }), [v, ce] = $("key"), [X, ae] = $(ue), [p, B] = $(!1), { background: Y, borderColor: Z, borderRadius: C, density: g, font: ee } = ne, F = H(() => u ? 25 : 20, [u]), f = H(() => u ? 35 : 20, [u]), M = H(() => Ve(), []), o = T.useRef({}), c = T.useRef({}), S = T.useRef(), x = T.useRef(), de = j(
     ie,
-    !t.isKeyFocused && "item_edited",
-    !h(D(m, ["error", n, "key"], [])) && !h(l.key) && !a.disabled && "item_edited_invalid"
-  ), de = j(
+    !r.isKeyFocused && "item_edited",
+    !y(z(m, ["error", i, "key"], [])) && !y(l.key) && !d.disabled && u && "item_edited_invalid"
+  ), me = j(
     "edit-chip-container",
-    X && `edit-chip-container-background_${X}`,
-    Y && `edit-chip-container-border_${Y}`,
-    g && `edit-chip-container-font_${g}`,
-    C && `edit-chip-container-density_${C}`,
+    Y && `edit-chip-container-background_${Y}`,
     Z && `edit-chip-container-border_${Z}`,
-    (t.isEdit || t.isNewChip) && "edit-chip-container_edited",
-    a.disabled && "edit-chip-container_disabled edit-chip-container-font_disabled"
-  ), me = j(
-    "input-label-value",
-    !t.isValueFocused && "item_edited",
-    !h(D(m, ["error", n, "value"], [])) && !h(l.value) && "item_edited_invalid"
+    ee && `edit-chip-container-font_${ee}`,
+    g && `edit-chip-container-density_${g}`,
+    C && `edit-chip-container-border_${C}`,
+    (r.isEdit || r.isNewChip) && "edit-chip-container_edited",
+    u && d.disabled && "edit-chip-container_disabled edit-chip-container-font_disabled"
   ), pe = j(
+    "input-label-value",
+    !r.isValueFocused && "item_edited",
+    !y(z(m, ["error", i, "value"], [])) && !y(l.value) && u && "item_edited_invalid"
+  ), he = j(
     "item-icon-close",
-    !a.disabled && t.chipIndex === n && d && "item-icon-close_invisible",
-    !d && "item-icon-close_hidden"
-  ), O = W(() => {
+    !d.disabled && (r.chipIndex === i && u || !Q) && "item-icon-close invisible",
+    !u && !Q && "item-icon-close hidden"
+  ), K = I(() => {
     var e;
-    if (u.current) {
-      const r = z(u.current) + 1, s = z(c.current) + 1, i = ((e = P.current) == null ? void 0 : e.clientWidth) - 50, K = r >= i / 2, q = s >= i / 2;
-      let w = null, R = null;
-      if (K && q)
-        w = R = i / 2;
-      else if (K) {
-        R = l.value ? s : F;
-        const b = i - R;
-        w = b > r ? r : b;
-      } else if (q) {
-        w = l.key ? r : v;
-        const b = i - w;
-        R = b > s ? s : b;
+    if (o.current) {
+      const t = D(o.current) + 1, s = D(c.current) + 1, n = ((e = w.current) == null ? void 0 : e.clientWidth) - 50, _ = t >= n / 2, L = s >= n / 2;
+      let R = null, b = null;
+      if (_ && L)
+        R = b = n / 2;
+      else if (_) {
+        b = l.value ? s : f;
+        const k = n - b;
+        R = k > t ? t : k;
+      } else if (L) {
+        R = l.key ? t : F;
+        const k = n - R;
+        b = k > s ? s : k;
       } else
-        w = !l.key || r <= v ? v : r, R = !l.value || s <= F ? F : s;
-      u.current.style.width = `${w}px`, h(c.current) || (c.current.style.width = `${R}px`), A((b) => ({
-        ...b,
-        keyFieldWidth: w,
-        valueFieldWidth: R
-      })), Q(!0);
+        R = !l.key || t <= F ? F : t, b = !l.value || s <= f ? f : s;
+      o.current.style.width = `${R}px`, y(c.current) || (c.current.style.width = `${b}px`), A((k) => ({
+        ...k,
+        keyFieldWidth: R,
+        valueFieldWidth: b
+      })), U(!0);
     }
   }, [
     l.key,
     l.value,
-    v,
     F,
-    P,
-    Q
+    f,
+    w,
+    U
   ]);
-  f(() => {
-    const e = we(O, 500);
-    if (d)
+  h(() => {
+    if (!w.current) return;
+    const e = w.current, t = new ResizeObserver(K);
+    return t.observe(e), () => t.unobserve(e);
+  }, [w, K]), h(() => {
+    const e = Re(K, 500);
+    if (u)
       return window.addEventListener("resize", e), window.addEventListener(M, e), () => {
         window.removeEventListener("resize", e), window.removeEventListener(M, e);
       };
-  }, [d, O, M]), f(() => {
-    !l.keyFieldWidth && !l.valueFieldWidth && O();
-  }, [l.keyFieldWidth, l.valueFieldWidth, O]);
-  const N = W(
-    (e, r) => {
+  }, [u, K, M]), h(() => {
+    !l.keyFieldWidth && !l.valueFieldWidth && K();
+  }, [l.keyFieldWidth, l.valueFieldWidth, K]);
+  const E = I(
+    (e, t) => {
       var s;
-      t.chipIndex === n && (!(e.path ?? ((s = e.composedPath) == null ? void 0 : s.call(e))).includes(S.current) || r ? (_(e, We, !0), window.getSelection().removeAllRanges(), document.activeElement.blur()) : e.stopPropagation());
+      r.chipIndex === i && (!(e.path ?? ((s = e.composedPath) == null ? void 0 : s.call(e))).includes(S.current) || t ? (q(e, Ie, !0), window.getSelection().removeAllRanges(), document.activeElement.blur()) : e.stopPropagation());
     },
-    [_, S, n, t.chipIndex]
-  ), I = W(
+    [q, S, i, r.chipIndex]
+  ), V = I(
     (e) => {
-      E != null && E.current && !E.current.contains(e.target) && (B(!1), N(e, !0));
+      x != null && x.current && !x.current.contains(e.target) && (B(!1), E(e, !0));
     },
-    [N]
+    [E]
   );
-  f(() => (p && window.addEventListener("scroll", I, !0), () => {
-    window.removeEventListener("scroll", I, !0);
-  }), [I, p]), f(() => {
-    t.chipIndex === n && (t.isKeyFocused ? u.current.focus() : t.isValueFocused && c.current.focus());
+  h(() => (p && window.addEventListener("scroll", V, !0), () => {
+    window.removeEventListener("scroll", V, !0);
+  }), [V, p]), h(() => {
+    r.chipIndex === i && (r.isKeyFocused ? o.current.focus() : r.isValueFocused && c.current.focus());
   }, [
-    t.isKeyFocused,
-    t.isValueFocused,
-    u,
+    r.isKeyFocused,
+    r.isValueFocused,
+    o,
     c,
-    n,
-    t.chipIndex
-  ]), f(() => (p && window.addEventListener("scroll", I, !0), () => {
-    window.removeEventListener("scroll", I, !0);
-  }), [I, p]), f(() => {
-    if (t.isEdit)
-      return document.addEventListener("click", N, !0), () => {
-        document.removeEventListener("click", N, !0);
+    i,
+    r.chipIndex
+  ]), h(() => (p && window.addEventListener("scroll", V, !0), () => {
+    window.removeEventListener("scroll", V, !0);
+  }), [V, p]), h(() => {
+    if (r.isEdit)
+      return document.addEventListener("click", E, !0), () => {
+        document.removeEventListener("click", E, !0);
       };
-  }, [N, t.isEdit]);
-  const he = W(
+  }, [E, r.isEdit]);
+  const ye = I(
     (e) => {
-      if (t.chipIndex === n && d) {
-        if (!e.shiftKey && e.key === J && t.isValueFocused)
-          return _(e, J);
-        if (e.shiftKey && e.key === J && t.isKeyFocused)
-          return _(e, Ie);
+      if (r.chipIndex === i && u) {
+        if (!e.shiftKey && e.key === J && r.isValueFocused)
+          return q(e, J);
+        if (e.shiftKey && e.key === J && r.isKeyFocused)
+          return q(e, Ke);
       }
       e.stopPropagation();
     },
-    [t, _, n, d]
-  ), ee = W(
+    [r, q, i, u]
+  ), re = I(
     (e) => {
-      const r = e.target.name === V;
-      t.chipIndex === n ? (r ? (u.current.selectionStart = u.current.selectionEnd, L((s) => ({
+      const t = e.target.name === N;
+      r.chipIndex === i ? (t ? (o.current.selectionStart = o.current.selectionEnd, O((s) => ({
         ...s,
         isKeyFocused: !0,
         isValueFocused: !1
-      }))) : (c.current.selectionStart = c.current.selectionEnd, L((s) => ({
+      }))) : (c.current.selectionStart = c.current.selectionEnd, O((s) => ({
         ...s,
         isKeyFocused: !1,
         isValueFocused: !0
-      }))), e && e.stopPropagation()) : G(t.chipIndex) && (r ? u.current.selectionStart = u.current.selectionEnd : c.current.selectionStart = c.current.selectionEnd, L({
-        chipIndex: n,
+      }))), e && e.stopPropagation()) : G(r.chipIndex) && (t ? o.current.selectionStart = o.current.selectionEnd : c.current.selectionStart = c.current.selectionEnd, O({
+        chipIndex: i,
         isEdit: !0,
-        isKeyFocused: r,
-        isValueFocused: !r
+        isKeyFocused: t,
+        isValueFocused: !t
       }));
     },
-    [V, u, c, L, t.chipIndex, n]
-  ), te = W(
+    [N, o, c, O, r.chipIndex, i]
+  ), te = I(
     (e) => {
       var s;
-      const r = ((s = P.current) == null ? void 0 : s.clientWidth) - 50;
-      if (e.preventDefault(), e.target.name === V) {
-        const i = z(u.current);
-        A((K) => ({
-          ...K,
-          key: u.current.value,
-          keyFieldWidth: u.current.value.length <= 1 ? v : i >= r ? r : i > v ? i + 2 : v
+      const t = ((s = w.current) == null ? void 0 : s.clientWidth) - 50;
+      if (e.preventDefault(), e.target.name === N) {
+        const n = D(o.current);
+        A((_) => ({
+          ..._,
+          key: o.current.value,
+          keyFieldWidth: o.current.value.length <= 1 ? F : n >= t ? t : n > F ? n + 2 : F
         }));
       } else {
-        const i = z(c.current);
-        A((K) => {
-          var q;
+        const n = D(c.current);
+        A((_) => {
+          var L;
           return {
-            ...K,
+            ..._,
             value: c.current.value,
-            valueFieldWidth: ((q = c.current.value) == null ? void 0 : q.length) <= 1 ? F : i >= r ? r : i > F ? i + 2 : F
+            valueFieldWidth: ((L = c.current.value) == null ? void 0 : L.length) <= 1 ? f : n >= t ? t : n > f ? n + 2 : f
           };
         });
       }
     },
-    [V, v, P, F]
+    [N, F, w, f]
   );
-  Fe(() => {
-    t.chipIndex === n && ce(t.isKeyFocused ? "key" : t.isValueFocused ? "value" : null);
-  }, [t.isKeyFocused, t.isValueFocused, t.chipIndex, n]), f(() => {
+  fe(() => {
+    r.chipIndex === i && ce(r.isKeyFocused ? "key" : r.isValueFocused ? "value" : null);
+  }, [r.isKeyFocused, r.isValueFocused, r.chipIndex, i]), h(() => {
     m.valid && p && B(!1);
-  }, [m.valid, p]), f(() => {
-    m.error && (oe((e) => {
-      var r;
+  }, [m.valid, p]), h(() => {
+    m.error && (ae((e) => {
+      var t;
       return {
         ...e,
-        [y]: (r = e[y]) == null ? void 0 : r.map((s) => ({
+        [v]: (t = e[v]) == null ? void 0 : t.map((s) => ({
           ...s,
-          isValid: h(D(m, ["error", t.chipIndex, y], [])) ? !0 : !m.error[t.chipIndex][y].some(
-            (i) => i && i.name === s.name
+          isValid: y(z(m, ["error", r.chipIndex, v], [])) ? !0 : !m.error[r.chipIndex][v].some(
+            (n) => n && n.name === s.name
           )
         }))
       };
     }), !p && B(!0));
-  }, [m, p, y, t.chipIndex]);
-  const ye = W(() => {
+  }, [m, p, v, r.chipIndex]);
+  const ve = I(() => {
     var e;
-    return (e = U[y]) == null ? void 0 : e.map(({ isValid: r = !1, label: s, name: i }) => /* @__PURE__ */ k(be, { valid: r, validationMessage: s }, i));
-  }, [y, U]);
-  return /* @__PURE__ */ ve(
+    return (e = X[v]) == null ? void 0 : e.map(({ isValid: t = !1, label: s, name: n }) => /* @__PURE__ */ W(ke, { valid: t, validationMessage: s }, n));
+  }, [v, X]);
+  return /* @__PURE__ */ Fe(
     "div",
     {
-      className: de,
-      onKeyDown: (e) => !a.disabled && t.isEdit && he(e),
+      className: me,
+      onKeyDown: (e) => !d.disabled && r.isEdit && ye(e),
       ref: S,
       children: [
-        /* @__PURE__ */ k(
-          re,
+        /* @__PURE__ */ W(
+          se,
           {
-            className: ae,
-            disabled: a.disabled || !d || !G(t.chipIndex) && t.chipIndex !== n,
-            name: V,
+            className: de,
+            disabled: d.disabled || !u || !G(r.chipIndex) && r.chipIndex !== i,
+            name: N,
             onChange: te,
-            onFocus: ee,
-            placeholder: "key",
-            ref: u,
+            onFocus: re,
+            placeholder: u ? "key" : "",
+            ref: o,
             style: { width: l.keyFieldWidth }
           }
         ),
-        !l.isKeyOnly && /* @__PURE__ */ k("div", { className: "edit-chip-separator", children: ":" }),
-        !l.isKeyOnly && /* @__PURE__ */ k(
-          re,
+        !l.isKeyOnly && /* @__PURE__ */ W("div", { className: "edit-chip-separator", children: ":" }),
+        !l.isKeyOnly && /* @__PURE__ */ W(
+          se,
           {
-            className: me,
-            disabled: a.disabled || !d || !G(t.chipIndex) && t.chipIndex !== n,
-            name: ue,
+            className: pe,
+            disabled: d.disabled || !u || !G(r.chipIndex) && r.chipIndex !== i,
+            name: oe,
             onChange: te,
-            onFocus: ee,
-            placeholder: "value",
+            onFocus: re,
+            placeholder: u ? "value" : "",
             ref: c,
             style: { width: l.valueFieldWidth }
           }
         ),
-        /* @__PURE__ */ k(
+        /* @__PURE__ */ W(
           "button",
           {
-            disabled: a.disabled,
-            className: pe,
-            onClick: (e) => !a.disabled && ne(e, n),
-            children: /* @__PURE__ */ k(Ve, {})
+            disabled: d.disabled,
+            className: he,
+            onClick: (e) => !d.disabled && le(e, i),
+            children: /* @__PURE__ */ W(_e, {})
           }
         ),
-        !a.disabled && (t.isKeyFocused ? !h(l.key) : !h(l.value)) && t.chipIndex === n && !h(D(m, ["error", t.chipIndex, y], [])) && /* @__PURE__ */ k(Re, { show: p, ref: { refInputContainer: S, validationRulesRef: E }, children: ye() })
+        !d.disabled && (r.isKeyFocused ? !y(l.key) : !y(l.value)) && r.chipIndex === i && !y(z(m, ["error", r.chipIndex, v], [])) && /* @__PURE__ */ W(be, { show: p, ref: { refInputContainer: S, validationRulesRef: x }, children: ve() })
       ]
     }
   );
 };
-x = fe(x);
-x.displayName = "NewChipForm";
-x.propTypes = {
-  chip: o.object.isRequired,
-  chipIndex: o.number.isRequired,
-  chipOptions: ke.isRequired,
-  className: o.string,
-  editConfig: o.object.isRequired,
-  handleRemoveChip: o.func.isRequired,
-  isEditable: o.bool.isRequired,
-  keyName: o.string.isRequired,
-  meta: o.object.isRequired,
-  onChange: o.func.isRequired,
-  setChipSizeIsRecalculated: o.func.isRequired,
-  setEditConfig: o.func.isRequired,
-  validationRules: o.object,
-  valueName: o.string.isRequired
+P = we(P);
+P.displayName = "NewChipForm";
+P.propTypes = {
+  chip: a.object.isRequired,
+  chipIndex: a.number.isRequired,
+  chipOptions: We.isRequired,
+  className: a.string,
+  editConfig: a.object.isRequired,
+  handleRemoveChip: a.func.isRequired,
+  isDeletable: a.bool.isRequired,
+  isEditable: a.bool.isRequired,
+  keyName: a.string.isRequired,
+  meta: a.object.isRequired,
+  onChange: a.func.isRequired,
+  setChipSizeIsRecalculated: a.func.isRequired,
+  setEditConfig: a.func.isRequired,
+  validationRules: a.object,
+  valueName: a.string.isRequired
 };
-const Be = x;
+const Me = P;
 export {
-  Be as default
+  Me as default
 };
 //# sourceMappingURL=NewChipForm.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewChipForm.mjs","sources":["../../../../src/lib/components/FormChipCell/NewChipForm/NewChipForm.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, {\n  useState,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  forwardRef\n} from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { isEmpty, get, isNil, throttle } from 'lodash'\n\nimport NewChipInput from '../NewChipInput/NewChipInput'\nimport OptionsMenu from '../../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../../elements/ValidationTemplate/ValidationTemplate'\n\nimport { CHIP_OPTIONS } from '../../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../../constants'\nimport { getTextWidth } from '../formChipCell.util'\nimport { getTransitionEndEventName } from '../../../utils/common.util'\n\nimport Close from '../../../images/close.svg?react'\n\nimport './newChipForm.scss'\n\nconst defaultProps = {\n  rules: {}\n}\n\nlet NewChipForm = (\n  {\n    chip,\n    chipIndex,\n    chipOptions,\n    className = '',\n    editConfig,\n    handleRemoveChip,\n    isEditable,\n    keyName,\n    meta,\n    onChange,\n    setChipSizeIsRecalculated,\n    setEditConfig,\n    validationRules: rules = defaultProps.rules,\n    valueName\n  },\n  ref\n) => {\n  const [chipData, setChipData] = useState({\n    isKeyOnly: chip.isKeyOnly,\n    key: chip.key,\n    value: chip.value,\n    keyFieldWidth: 0,\n    valueFieldWidth: 0\n  })\n  const [selectedInput, setSelectedInput] = useState('key')\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n\n  const { background, borderColor, borderRadius, density, font } = chipOptions\n  const minWidthInput = useMemo(() => {\n    return isEditable ? 25 : 20\n  }, [isEditable])\n  const minWidthValueInput = useMemo(() => {\n    return isEditable ? 35 : 20\n  }, [isEditable])\n  const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])\n\n  const refInputKey = React.useRef({})\n  const refInputValue = React.useRef({})\n  const refInputContainer = React.useRef()\n  const validationRulesRef = React.useRef()\n\n  const labelKeyClassName = classnames(\n    className,\n    !editConfig.isKeyFocused && 'item_edited',\n    !isEmpty(get(meta, ['error', chipIndex, 'key'], [])) &&\n      !isEmpty(chipData.key) &&\n      !chip.disabled &&\n      'item_edited_invalid'\n  )\n  const labelContainerClassName = classnames(\n    'edit-chip-container',\n    background && `edit-chip-container-background_${background}`,\n    borderColor && `edit-chip-container-border_${borderColor}`,\n    font && `edit-chip-container-font_${font}`,\n    density && `edit-chip-container-density_${density}`,\n    borderRadius && `edit-chip-container-border_${borderRadius}`,\n    (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited',\n    chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled'\n  )\n  const labelValueClassName = classnames(\n    'input-label-value',\n    !editConfig.isValueFocused && 'item_edited',\n    !isEmpty(get(meta, ['error', chipIndex, 'value'], [])) &&\n      !isEmpty(chipData.value) &&\n      'item_edited_invalid'\n  )\n\n  const closeButtonClass = classnames(\n    'item-icon-close',\n    !chip.disabled &&\n      editConfig.chipIndex === chipIndex &&\n      isEditable &&\n      'item-icon-close_invisible',\n    !isEditable && 'item-icon-close_hidden'\n  )\n\n  const resizeChip = useCallback(() => {\n    if (refInputKey.current) {\n      const currentWidthKeyInput = getTextWidth(refInputKey.current) + 1\n      const currentWidthValueInput = getTextWidth(refInputValue.current) + 1\n      const maxWidthInput = ref.current?.clientWidth - 50\n      const keyEllipsis = currentWidthKeyInput >= maxWidthInput / 2\n      const valueEllipsis = currentWidthValueInput >= maxWidthInput / 2\n      let keyFieldWidth = null\n      let valueFieldWidth = null\n\n      if (keyEllipsis && valueEllipsis) {\n        keyFieldWidth = valueFieldWidth = maxWidthInput / 2\n      } else if (keyEllipsis) {\n        valueFieldWidth = !chipData.value ? minWidthValueInput : currentWidthValueInput\n\n        const remainingPlace = maxWidthInput - valueFieldWidth\n\n        keyFieldWidth =\n          remainingPlace > currentWidthKeyInput ? currentWidthKeyInput : remainingPlace\n      } else if (valueEllipsis) {\n        keyFieldWidth = !chipData.key ? minWidthInput : currentWidthKeyInput\n\n        const remainingPlace = maxWidthInput - keyFieldWidth\n\n        valueFieldWidth =\n          remainingPlace > currentWidthValueInput ? currentWidthValueInput : remainingPlace\n      } else {\n        keyFieldWidth =\n          !chipData.key || currentWidthKeyInput <= minWidthInput\n            ? minWidthInput\n            : currentWidthKeyInput\n        valueFieldWidth =\n          !chipData.value || currentWidthValueInput <= minWidthValueInput\n            ? minWidthValueInput\n            : currentWidthValueInput\n      }\n\n      refInputKey.current.style.width = `${keyFieldWidth}px`\n\n      if (!isEmpty(refInputValue.current)) {\n        refInputValue.current.style.width = `${valueFieldWidth}px`\n      }\n\n      setChipData(prevState => ({\n        ...prevState,\n        keyFieldWidth,\n        valueFieldWidth\n      }))\n      setChipSizeIsRecalculated(true)\n    }\n  }, [\n    chipData.key,\n    chipData.value,\n    minWidthInput,\n    minWidthValueInput,\n    ref,\n    setChipSizeIsRecalculated\n  ])\n\n  useEffect(() => {\n    const resizeChipDebounced = throttle(resizeChip, 500)\n\n    if (isEditable) {\n      window.addEventListener('resize', resizeChipDebounced)\n      window.addEventListener(transitionEndEventName, resizeChipDebounced)\n\n      return () => {\n        window.removeEventListener('resize', resizeChipDebounced)\n        window.removeEventListener(transitionEndEventName, resizeChipDebounced)\n      }\n    }\n  }, [isEditable, resizeChip, transitionEndEventName])\n\n  useEffect(() => {\n    if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {\n      resizeChip()\n    }\n  }, [chipData.keyFieldWidth, chipData.valueFieldWidth, resizeChip])\n\n  const outsideClick = useCallback(\n    (event, forceOutsideClick) => {\n      if (editConfig.chipIndex === chipIndex) {\n        const elementPath = event.path ?? event.composedPath?.()\n\n        if (!elementPath.includes(refInputContainer.current) || forceOutsideClick) {\n          onChange(event, CLICK, true)\n          window.getSelection().removeAllRanges()\n          document.activeElement.blur()\n        } else {\n          event.stopPropagation()\n        }\n      }\n    },\n    [onChange, refInputContainer, chipIndex, editConfig.chipIndex]\n  )\n\n  const handleScroll = useCallback(\n    event => {\n      if (validationRulesRef?.current && !validationRulesRef.current.contains(event.target)) {\n        setShowValidationRules(false)\n        outsideClick(event, true)\n      }\n    },\n    [outsideClick]\n  )\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [handleScroll, showValidationRules])\n\n  useEffect(() => {\n    if (editConfig.chipIndex === chipIndex) {\n      if (editConfig.isKeyFocused) {\n        refInputKey.current.focus()\n      } else if (editConfig.isValueFocused) {\n        refInputValue.current.focus()\n      }\n    }\n  }, [\n    editConfig.isKeyFocused,\n    editConfig.isValueFocused,\n    refInputKey,\n    refInputValue,\n    chipIndex,\n    editConfig.chipIndex\n  ])\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [handleScroll, showValidationRules])\n\n  useEffect(() => {\n    if (editConfig.isEdit) {\n      document.addEventListener('click', outsideClick, true)\n\n      return () => {\n        document.removeEventListener('click', outsideClick, true)\n      }\n    }\n  }, [outsideClick, editConfig.isEdit])\n\n  const focusChip = useCallback(\n    event => {\n      if (editConfig.chipIndex === chipIndex && isEditable) {\n        if (!event.shiftKey && event.key === TAB && editConfig.isValueFocused) {\n          return onChange(event, TAB)\n        } else if (event.shiftKey && event.key === TAB && editConfig.isKeyFocused) {\n          return onChange(event, TAB_SHIFT)\n        }\n      }\n      event.stopPropagation()\n    },\n    [editConfig, onChange, chipIndex, isEditable]\n  )\n\n  const handleOnFocus = useCallback(\n    event => {\n      const isKeyFocused = event.target.name === keyName\n\n      if (editConfig.chipIndex === chipIndex) {\n        if (isKeyFocused) {\n          refInputKey.current.selectionStart = refInputKey.current.selectionEnd\n\n          setEditConfig(prevConfig => ({\n            ...prevConfig,\n            isKeyFocused: true,\n            isValueFocused: false\n          }))\n        } else {\n          refInputValue.current.selectionStart = refInputValue.current.selectionEnd\n\n          setEditConfig(prevConfig => ({\n            ...prevConfig,\n            isKeyFocused: false,\n            isValueFocused: true\n          }))\n        }\n\n        event && event.stopPropagation()\n      } else if (isNil(editConfig.chipIndex)) {\n        if (isKeyFocused) {\n          refInputKey.current.selectionStart = refInputKey.current.selectionEnd\n        } else {\n          refInputValue.current.selectionStart = refInputValue.current.selectionEnd\n        }\n        setEditConfig({\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyFocused,\n          isValueFocused: !isKeyFocused\n        })\n      }\n    },\n    [keyName, refInputKey, refInputValue, setEditConfig, editConfig.chipIndex, chipIndex]\n  )\n\n  const handleOnChange = useCallback(\n    event => {\n      const maxWidthInput = ref.current?.clientWidth - 50\n\n      event.preventDefault()\n\n      if (event.target.name === keyName) {\n        const currentWidthKeyInput = getTextWidth(refInputKey.current)\n\n        setChipData(prevState => ({\n          ...prevState,\n          key: refInputKey.current.value,\n          keyFieldWidth:\n            refInputKey.current.value.length <= 1\n              ? minWidthInput\n              : currentWidthKeyInput >= maxWidthInput\n                ? maxWidthInput\n                : currentWidthKeyInput > minWidthInput\n                  ? currentWidthKeyInput + 2\n                  : minWidthInput\n        }))\n      } else {\n        const currentWidthValueInput = getTextWidth(refInputValue.current)\n\n        setChipData(prevState => ({\n          ...prevState,\n          value: refInputValue.current.value,\n          valueFieldWidth:\n            refInputValue.current.value?.length <= 1\n              ? minWidthValueInput\n              : currentWidthValueInput >= maxWidthInput\n                ? maxWidthInput\n                : currentWidthValueInput > minWidthValueInput\n                  ? currentWidthValueInput + 2\n                  : minWidthValueInput\n        }))\n      }\n    },\n    [keyName, minWidthInput, ref, minWidthValueInput]\n  )\n\n  useLayoutEffect(() => {\n    if (editConfig.chipIndex === chipIndex) {\n      setSelectedInput(editConfig.isKeyFocused ? 'key' : editConfig.isValueFocused ? 'value' : null)\n    }\n  }, [editConfig.isKeyFocused, editConfig.isValueFocused, editConfig.chipIndex, chipIndex])\n\n  useEffect(() => {\n    if (meta.valid && showValidationRules) {\n      setShowValidationRules(false)\n    }\n  }, [meta.valid, showValidationRules])\n\n  useEffect(() => {\n    if (meta.error) {\n      setValidationRules(prevState => {\n        return {\n          ...prevState,\n          [selectedInput]: prevState[selectedInput]?.map(rule => {\n            return {\n              ...rule,\n              isValid: isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], []))\n                ? true\n                : !meta.error[editConfig.chipIndex][selectedInput].some(\n                    err => err && err.name === rule.name\n                  )\n            }\n          })\n        }\n      })\n\n      !showValidationRules && setShowValidationRules(true)\n    }\n  }, [meta, showValidationRules, selectedInput, editConfig.chipIndex])\n\n  const getValidationRules = useCallback(() => {\n    return validationRules[selectedInput]?.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }, [selectedInput, validationRules])\n\n  return (\n    <div\n      className={labelContainerClassName}\n      onKeyDown={event => !chip.disabled && editConfig.isEdit && focusChip(event)}\n      ref={refInputContainer}\n    >\n      <NewChipInput\n        className={labelKeyClassName}\n        disabled={\n          chip.disabled ||\n          !isEditable ||\n          (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)\n        }\n        name={keyName}\n        onChange={handleOnChange}\n        onFocus={handleOnFocus}\n        placeholder=\"key\"\n        ref={refInputKey}\n        style={{ width: chipData.keyFieldWidth }}\n      />\n      {!chipData.isKeyOnly && <div className=\"edit-chip-separator\">:</div>}\n      {!chipData.isKeyOnly && (\n        <NewChipInput\n          className={labelValueClassName}\n          disabled={\n            chip.disabled ||\n            !isEditable ||\n            (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)\n          }\n          name={valueName}\n          onChange={handleOnChange}\n          onFocus={handleOnFocus}\n          placeholder=\"value\"\n          ref={refInputValue}\n          style={{ width: chipData.valueFieldWidth }}\n        />\n      )}\n\n      <button\n        disabled={chip.disabled}\n        className={closeButtonClass}\n        onClick={event => !chip.disabled && handleRemoveChip(event, chipIndex)}\n      >\n        <Close />\n      </button>\n\n      {!chip.disabled &&\n        (editConfig.isKeyFocused ? !isEmpty(chipData.key) : !isEmpty(chipData.value)) &&\n        editConfig.chipIndex === chipIndex &&\n        !isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], [])) && (\n          <OptionsMenu show={showValidationRules} ref={{ refInputContainer, validationRulesRef }}>\n            {getValidationRules()}\n          </OptionsMenu>\n        )}\n    </div>\n  )\n}\n\nNewChipForm = forwardRef(NewChipForm)\n\nNewChipForm.displayName = 'NewChipForm'\n\nNewChipForm.propTypes = {\n  chip: PropTypes.object.isRequired,\n  chipIndex: PropTypes.number.isRequired,\n  chipOptions: CHIP_OPTIONS.isRequired,\n  className: PropTypes.string,\n  editConfig: PropTypes.object.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  isEditable: PropTypes.bool.isRequired,\n  keyName: PropTypes.string.isRequired,\n  meta: PropTypes.object.isRequired,\n  onChange: PropTypes.func.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  validationRules: PropTypes.object,\n  valueName: PropTypes.string.isRequired\n}\n\nexport default NewChipForm\n"],"names":["defaultProps","NewChipForm","chip","chipIndex","chipOptions","className","editConfig","handleRemoveChip","isEditable","keyName","meta","onChange","setChipSizeIsRecalculated","setEditConfig","rules","valueName","ref","chipData","setChipData","useState","selectedInput","setSelectedInput","validationRules","setValidationRules","showValidationRules","setShowValidationRules","background","borderColor","borderRadius","density","font","minWidthInput","useMemo","minWidthValueInput","transitionEndEventName","getTransitionEndEventName","refInputKey","React","refInputValue","refInputContainer","validationRulesRef","labelKeyClassName","classnames","isEmpty","get","labelContainerClassName","labelValueClassName","closeButtonClass","resizeChip","useCallback","currentWidthKeyInput","getTextWidth","currentWidthValueInput","maxWidthInput","_a","keyEllipsis","valueEllipsis","keyFieldWidth","valueFieldWidth","remainingPlace","prevState","useEffect","resizeChipDebounced","throttle","outsideClick","event","forceOutsideClick","CLICK","handleScroll","focusChip","TAB","TAB_SHIFT","handleOnFocus","isKeyFocused","prevConfig","isNil","handleOnChange","useLayoutEffect","rule","err","getValidationRules","isValid","label","name","ValidationTemplate","jsxs","jsx","NewChipInput","Close","OptionsMenu","forwardRef","PropTypes","CHIP_OPTIONS","NewChipForm$1"],"mappings":"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"}
+{"version":3,"file":"NewChipForm.mjs","sources":["../../../../src/lib/components/FormChipCell/NewChipForm/NewChipForm.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, {\n  useState,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  forwardRef\n} from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { isEmpty, get, isNil, throttle } from 'lodash'\n\nimport NewChipInput from '../NewChipInput/NewChipInput'\nimport OptionsMenu from '../../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../../elements/ValidationTemplate/ValidationTemplate'\n\nimport { CHIP_OPTIONS } from '../../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../../constants'\nimport { getTextWidth } from '../formChipCell.util'\nimport { getTransitionEndEventName } from '../../../utils/common.util'\n\nimport Close from '../../../images/close.svg?react'\n\nimport './newChipForm.scss'\n\nconst defaultProps = {\n  rules: {}\n}\n\nlet NewChipForm = (\n  {\n    chip,\n    chipIndex,\n    chipOptions,\n    className = '',\n    editConfig,\n    handleRemoveChip,\n    isDeletable,\n    isEditable,\n    keyName,\n    meta,\n    onChange,\n    setChipSizeIsRecalculated,\n    setEditConfig,\n    validationRules: rules = defaultProps.rules,\n    valueName\n  },\n  ref\n) => {\n  const [chipData, setChipData] = useState({\n    isKeyOnly: chip.isKeyOnly,\n    key: chip.key,\n    value: chip.value,\n    keyFieldWidth: 0,\n    valueFieldWidth: 0\n  })\n  const [selectedInput, setSelectedInput] = useState('key')\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n\n  const { background, borderColor, borderRadius, density, font } = chipOptions\n  const minWidthInput = useMemo(() => {\n    return isEditable ? 25 : 20\n  }, [isEditable])\n  const minWidthValueInput = useMemo(() => {\n    return isEditable ? 35 : 20\n  }, [isEditable])\n  const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])\n\n  const refInputKey = React.useRef({})\n  const refInputValue = React.useRef({})\n  const refInputContainer = React.useRef()\n  const validationRulesRef = React.useRef()\n\n  const labelKeyClassName = classnames(\n    className,\n    !editConfig.isKeyFocused && 'item_edited',\n    !isEmpty(get(meta, ['error', chipIndex, 'key'], [])) &&\n      !isEmpty(chipData.key) &&\n      !chip.disabled &&\n      isEditable &&\n      'item_edited_invalid'\n  )\n  const labelContainerClassName = classnames(\n    'edit-chip-container',\n    background && `edit-chip-container-background_${background}`,\n    borderColor && `edit-chip-container-border_${borderColor}`,\n    font && `edit-chip-container-font_${font}`,\n    density && `edit-chip-container-density_${density}`,\n    borderRadius && `edit-chip-container-border_${borderRadius}`,\n    (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited',\n    isEditable && chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled'\n  )\n  const labelValueClassName = classnames(\n    'input-label-value',\n    !editConfig.isValueFocused && 'item_edited',\n    !isEmpty(get(meta, ['error', chipIndex, 'value'], [])) &&\n      !isEmpty(chipData.value) &&\n      isEditable &&\n      'item_edited_invalid'\n  )\n\n  const closeButtonClass = classnames(\n    'item-icon-close',\n    !chip.disabled &&\n      ((editConfig.chipIndex === chipIndex && isEditable) || !isDeletable) &&\n      'item-icon-close invisible',\n    !isEditable && !isDeletable && 'item-icon-close hidden'\n  )\n\n  const resizeChip = useCallback(() => {\n    if (refInputKey.current) {\n      const currentWidthKeyInput = getTextWidth(refInputKey.current) + 1\n      const currentWidthValueInput = getTextWidth(refInputValue.current) + 1\n      const maxWidthInput = ref.current?.clientWidth - 50\n      const keyEllipsis = currentWidthKeyInput >= maxWidthInput / 2\n      const valueEllipsis = currentWidthValueInput >= maxWidthInput / 2\n      let keyFieldWidth = null\n      let valueFieldWidth = null\n\n      if (keyEllipsis && valueEllipsis) {\n        keyFieldWidth = valueFieldWidth = maxWidthInput / 2\n      } else if (keyEllipsis) {\n        valueFieldWidth = !chipData.value ? minWidthValueInput : currentWidthValueInput\n\n        const remainingPlace = maxWidthInput - valueFieldWidth\n\n        keyFieldWidth =\n          remainingPlace > currentWidthKeyInput ? currentWidthKeyInput : remainingPlace\n      } else if (valueEllipsis) {\n        keyFieldWidth = !chipData.key ? minWidthInput : currentWidthKeyInput\n\n        const remainingPlace = maxWidthInput - keyFieldWidth\n\n        valueFieldWidth =\n          remainingPlace > currentWidthValueInput ? currentWidthValueInput : remainingPlace\n      } else {\n        keyFieldWidth =\n          !chipData.key || currentWidthKeyInput <= minWidthInput\n            ? minWidthInput\n            : currentWidthKeyInput\n        valueFieldWidth =\n          !chipData.value || currentWidthValueInput <= minWidthValueInput\n            ? minWidthValueInput\n            : currentWidthValueInput\n      }\n\n      refInputKey.current.style.width = `${keyFieldWidth}px`\n\n      if (!isEmpty(refInputValue.current)) {\n        refInputValue.current.style.width = `${valueFieldWidth}px`\n      }\n\n      setChipData(prevState => ({\n        ...prevState,\n        keyFieldWidth,\n        valueFieldWidth\n      }))\n      setChipSizeIsRecalculated(true)\n    }\n  }, [\n    chipData.key,\n    chipData.value,\n    minWidthInput,\n    minWidthValueInput,\n    ref,\n    setChipSizeIsRecalculated\n  ])\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    const element = ref.current\n    const observer = new ResizeObserver(resizeChip)\n\n    observer.observe(element)\n\n    return () => observer.unobserve(element)\n  }, [ref, resizeChip])\n\n  useEffect(() => {\n    const resizeChipDebounced = throttle(resizeChip, 500)\n\n    if (isEditable) {\n      window.addEventListener('resize', resizeChipDebounced)\n      window.addEventListener(transitionEndEventName, resizeChipDebounced)\n\n      return () => {\n        window.removeEventListener('resize', resizeChipDebounced)\n        window.removeEventListener(transitionEndEventName, resizeChipDebounced)\n      }\n    }\n  }, [isEditable, resizeChip, transitionEndEventName])\n\n  useEffect(() => {\n    if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {\n      resizeChip()\n    }\n  }, [chipData.keyFieldWidth, chipData.valueFieldWidth, resizeChip])\n\n  const outsideClick = useCallback(\n    (event, forceOutsideClick) => {\n      if (editConfig.chipIndex === chipIndex) {\n        const elementPath = event.path ?? event.composedPath?.()\n\n        if (!elementPath.includes(refInputContainer.current) || forceOutsideClick) {\n          onChange(event, CLICK, true)\n          window.getSelection().removeAllRanges()\n          document.activeElement.blur()\n        } else {\n          event.stopPropagation()\n        }\n      }\n    },\n    [onChange, refInputContainer, chipIndex, editConfig.chipIndex]\n  )\n\n  const handleScroll = useCallback(\n    event => {\n      if (validationRulesRef?.current && !validationRulesRef.current.contains(event.target)) {\n        setShowValidationRules(false)\n        outsideClick(event, true)\n      }\n    },\n    [outsideClick]\n  )\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [handleScroll, showValidationRules])\n\n  useEffect(() => {\n    if (editConfig.chipIndex === chipIndex) {\n      if (editConfig.isKeyFocused) {\n        refInputKey.current.focus()\n      } else if (editConfig.isValueFocused) {\n        refInputValue.current.focus()\n      }\n    }\n  }, [\n    editConfig.isKeyFocused,\n    editConfig.isValueFocused,\n    refInputKey,\n    refInputValue,\n    chipIndex,\n    editConfig.chipIndex\n  ])\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [handleScroll, showValidationRules])\n\n  useEffect(() => {\n    if (editConfig.isEdit) {\n      document.addEventListener('click', outsideClick, true)\n\n      return () => {\n        document.removeEventListener('click', outsideClick, true)\n      }\n    }\n  }, [outsideClick, editConfig.isEdit])\n\n  const focusChip = useCallback(\n    event => {\n      if (editConfig.chipIndex === chipIndex && isEditable) {\n        if (!event.shiftKey && event.key === TAB && editConfig.isValueFocused) {\n          return onChange(event, TAB)\n        } else if (event.shiftKey && event.key === TAB && editConfig.isKeyFocused) {\n          return onChange(event, TAB_SHIFT)\n        }\n      }\n      event.stopPropagation()\n    },\n    [editConfig, onChange, chipIndex, isEditable]\n  )\n\n  const handleOnFocus = useCallback(\n    event => {\n      const isKeyFocused = event.target.name === keyName\n\n      if (editConfig.chipIndex === chipIndex) {\n        if (isKeyFocused) {\n          refInputKey.current.selectionStart = refInputKey.current.selectionEnd\n\n          setEditConfig(prevConfig => ({\n            ...prevConfig,\n            isKeyFocused: true,\n            isValueFocused: false\n          }))\n        } else {\n          refInputValue.current.selectionStart = refInputValue.current.selectionEnd\n\n          setEditConfig(prevConfig => ({\n            ...prevConfig,\n            isKeyFocused: false,\n            isValueFocused: true\n          }))\n        }\n\n        event && event.stopPropagation()\n      } else if (isNil(editConfig.chipIndex)) {\n        if (isKeyFocused) {\n          refInputKey.current.selectionStart = refInputKey.current.selectionEnd\n        } else {\n          refInputValue.current.selectionStart = refInputValue.current.selectionEnd\n        }\n        setEditConfig({\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyFocused,\n          isValueFocused: !isKeyFocused\n        })\n      }\n    },\n    [keyName, refInputKey, refInputValue, setEditConfig, editConfig.chipIndex, chipIndex]\n  )\n\n  const handleOnChange = useCallback(\n    event => {\n      const maxWidthInput = ref.current?.clientWidth - 50\n\n      event.preventDefault()\n\n      if (event.target.name === keyName) {\n        const currentWidthKeyInput = getTextWidth(refInputKey.current)\n\n        setChipData(prevState => ({\n          ...prevState,\n          key: refInputKey.current.value,\n          keyFieldWidth:\n            refInputKey.current.value.length <= 1\n              ? minWidthInput\n              : currentWidthKeyInput >= maxWidthInput\n                ? maxWidthInput\n                : currentWidthKeyInput > minWidthInput\n                  ? currentWidthKeyInput + 2\n                  : minWidthInput\n        }))\n      } else {\n        const currentWidthValueInput = getTextWidth(refInputValue.current)\n\n        setChipData(prevState => ({\n          ...prevState,\n          value: refInputValue.current.value,\n          valueFieldWidth:\n            refInputValue.current.value?.length <= 1\n              ? minWidthValueInput\n              : currentWidthValueInput >= maxWidthInput\n                ? maxWidthInput\n                : currentWidthValueInput > minWidthValueInput\n                  ? currentWidthValueInput + 2\n                  : minWidthValueInput\n        }))\n      }\n    },\n    [keyName, minWidthInput, ref, minWidthValueInput]\n  )\n\n  useLayoutEffect(() => {\n    if (editConfig.chipIndex === chipIndex) {\n      setSelectedInput(editConfig.isKeyFocused ? 'key' : editConfig.isValueFocused ? 'value' : null)\n    }\n  }, [editConfig.isKeyFocused, editConfig.isValueFocused, editConfig.chipIndex, chipIndex])\n\n  useEffect(() => {\n    if (meta.valid && showValidationRules) {\n      setShowValidationRules(false)\n    }\n  }, [meta.valid, showValidationRules])\n\n  useEffect(() => {\n    if (meta.error) {\n      setValidationRules(prevState => {\n        return {\n          ...prevState,\n          [selectedInput]: prevState[selectedInput]?.map(rule => {\n            return {\n              ...rule,\n              isValid: isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], []))\n                ? true\n                : !meta.error[editConfig.chipIndex][selectedInput].some(\n                    err => err && err.name === rule.name\n                  )\n            }\n          })\n        }\n      })\n\n      !showValidationRules && setShowValidationRules(true)\n    }\n  }, [meta, showValidationRules, selectedInput, editConfig.chipIndex])\n\n  const getValidationRules = useCallback(() => {\n    return validationRules[selectedInput]?.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }, [selectedInput, validationRules])\n\n  return (\n    <div\n      className={labelContainerClassName}\n      onKeyDown={event => !chip.disabled && editConfig.isEdit && focusChip(event)}\n      ref={refInputContainer}\n    >\n      <NewChipInput\n        className={labelKeyClassName}\n        disabled={\n          chip.disabled ||\n          !isEditable ||\n          (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)\n        }\n        name={keyName}\n        onChange={handleOnChange}\n        onFocus={handleOnFocus}\n        placeholder={isEditable ? 'key' : ''}\n        ref={refInputKey}\n        style={{ width: chipData.keyFieldWidth }}\n      />\n      {!chipData.isKeyOnly && <div className=\"edit-chip-separator\">:</div>}\n      {!chipData.isKeyOnly && (\n        <NewChipInput\n          className={labelValueClassName}\n          disabled={\n            chip.disabled ||\n            !isEditable ||\n            (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)\n          }\n          name={valueName}\n          onChange={handleOnChange}\n          onFocus={handleOnFocus}\n          placeholder={isEditable ? 'value' : ''}\n          ref={refInputValue}\n          style={{ width: chipData.valueFieldWidth }}\n        />\n      )}\n\n      <button\n        disabled={chip.disabled}\n        className={closeButtonClass}\n        onClick={event => !chip.disabled && handleRemoveChip(event, chipIndex)}\n      >\n        <Close />\n      </button>\n\n      {!chip.disabled &&\n        (editConfig.isKeyFocused ? !isEmpty(chipData.key) : !isEmpty(chipData.value)) &&\n        editConfig.chipIndex === chipIndex &&\n        !isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], [])) && (\n          <OptionsMenu show={showValidationRules} ref={{ refInputContainer, validationRulesRef }}>\n            {getValidationRules()}\n          </OptionsMenu>\n        )}\n    </div>\n  )\n}\n\nNewChipForm = forwardRef(NewChipForm)\n\nNewChipForm.displayName = 'NewChipForm'\n\nNewChipForm.propTypes = {\n  chip: PropTypes.object.isRequired,\n  chipIndex: PropTypes.number.isRequired,\n  chipOptions: CHIP_OPTIONS.isRequired,\n  className: PropTypes.string,\n  editConfig: PropTypes.object.isRequired,\n  handleRemoveChip: PropTypes.func.isRequired,\n  isDeletable: PropTypes.bool.isRequired,\n  isEditable: PropTypes.bool.isRequired,\n  keyName: PropTypes.string.isRequired,\n  meta: PropTypes.object.isRequired,\n  onChange: PropTypes.func.isRequired,\n  setChipSizeIsRecalculated: PropTypes.func.isRequired,\n  setEditConfig: PropTypes.func.isRequired,\n  validationRules: PropTypes.object,\n  valueName: PropTypes.string.isRequired\n}\n\nexport default NewChipForm\n"],"names":["defaultProps","NewChipForm","chip","chipIndex","chipOptions","className","editConfig","handleRemoveChip","isDeletable","isEditable","keyName","meta","onChange","setChipSizeIsRecalculated","setEditConfig","rules","valueName","ref","chipData","setChipData","useState","selectedInput","setSelectedInput","validationRules","setValidationRules","showValidationRules","setShowValidationRules","background","borderColor","borderRadius","density","font","minWidthInput","useMemo","minWidthValueInput","transitionEndEventName","getTransitionEndEventName","refInputKey","React","refInputValue","refInputContainer","validationRulesRef","labelKeyClassName","classnames","isEmpty","get","labelContainerClassName","labelValueClassName","closeButtonClass","resizeChip","useCallback","currentWidthKeyInput","getTextWidth","currentWidthValueInput","maxWidthInput","_a","keyEllipsis","valueEllipsis","keyFieldWidth","valueFieldWidth","remainingPlace","prevState","useEffect","element","observer","resizeChipDebounced","throttle","outsideClick","event","forceOutsideClick","CLICK","handleScroll","focusChip","TAB","TAB_SHIFT","handleOnFocus","isKeyFocused","prevConfig","isNil","handleOnChange","useLayoutEffect","rule","err","getValidationRules","isValid","label","name","ValidationTemplate","jsxs","jsx","NewChipInput","Close","OptionsMenu","forwardRef","PropTypes","CHIP_OPTIONS","NewChipForm$1"],"mappings":"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"}

package/dist/components/ReadOnlyChips/ReadOnlyChips.d.ts

@@ -0,0 +1,22 @@
+export default ReadOnlyChips;
+declare function ReadOnlyChips({ chipOptions, labels, ...args }: {
+    [x: string]: any;
+    chipOptions?: {
+        type: string;
+        boldValue: boolean;
+        background: string;
+        borderColor: string;
+        density: string;
+        font: string;
+        borderRadius: string;
+    };
+    labels?: any[];
+}): JSX.Element;
+declare namespace ReadOnlyChips {
+    namespace propTypes {
+        export { CHIP_OPTIONS as chipOptions };
+        export let labels: any;
+    }
+}
+import { CHIP_OPTIONS } from '../../types';
+//# sourceMappingURL=ReadOnlyChips.d.ts.map