iguazio.dashboard-react-controls 3.2.2 → 3.2.4

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

@@ -1 +1 @@
-{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n  chipOptions = {\n    background: 'purple',\n    boldValue: false,\n    borderRadius: 'primary',\n    borderColor: 'transparent',\n    density: 'dense',\n    font: 'purple'\n  },\n  className = '',\n  delimiter = null,\n  formState,\n  initialValues,\n  isEditable = false,\n  label = null,\n  name,\n  onClick = () => {},\n  onExitEditModeCallback = null,\n  shortChips = false,\n  validationRules = {},\n  validator = null,\n  visibleChipsMaxLength = null,\n  withInitialParentWidth = false\n}) => {\n  const chipsClassName = classnames('chips', className)\n  const [chipSizeIsRecalculated, setChipSizeIsRecalculated] = useState(false)\n  const {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  } = useChipCell(isEditable, visibleChipsMaxLength, withInitialParentWidth)\n\n  const [editConfig, setEditConfig] = useState({\n    chipIndex: null,\n    isEdit: false,\n    isKeyFocused: false,\n    isValueFocused: false,\n    isNewChip: false\n  })\n\n  let chips = useMemo(() => {\n    return isEditable || visibleChipsMaxLength === 'all'\n      ? {\n          visibleChips: get(formState.values, name),\n          hiddenChips: []\n        }\n      : generateChipsList(\n          get(formState.values, name),\n          visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n        )\n  }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n  const checkChipsList = useCallback(\n    currentChipsList => {\n      if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n        set(formState.initialValues, name, currentChipsList)\n      }\n\n      formState.form.mutators.setFieldState(name, { modified: true })\n      formState.form.mutators.setFieldState(name, { touched: true })\n    },\n    [initialValues, name, formState]\n  )\n\n  const handleAddNewChip = useCallback(\n    (event, fields) => {\n      const fieldsLength = fields.value?.length || 0\n\n      if (!editConfig.isEdit && !editConfig.chipIndex) {\n        formState.form.mutators.push(name, {\n          id: fieldsLength + new Date(),\n          key: '',\n          value: '',\n          delimiter: delimiter\n        })\n      }\n\n      if (showHiddenChips) {\n        setShowHiddenChips(false)\n      }\n\n      setEditConfig({\n        chipIndex: fieldsLength,\n        isEdit: true,\n        isKeyFocused: true,\n        isValueFocused: false,\n        isNewChip: true\n      })\n\n      event && event.preventDefault()\n    },\n    [\n      editConfig.isEdit,\n      editConfig.chipIndex,\n      showHiddenChips,\n      formState.form.mutators,\n      name,\n      delimiter,\n      setShowHiddenChips\n    ]\n  )\n\n  const handleRemoveChip = useCallback(\n    (event, fields, chipIndex, isOutsideClick = false) => {\n      checkChipsList(\n        lodash\n          .chain(formState)\n          .get(['values', name])\n          .filter((_, index) => index !== chipIndex)\n          .value()\n      )\n\n      if (fields.length === 1) {\n        formState.form.change(name, [])\n      } else {\n        fields.remove(chipIndex)\n      }\n\n      onExitEditModeCallback && onExitEditModeCallback()\n      event && !isOutsideClick && event.stopPropagation()\n    },\n    [checkChipsList, formState, name, onExitEditModeCallback]\n  )\n\n  const handleEditChip = useCallback(\n    (event, fields, nameEvent, isOutsideClick) => {\n      const { key, value } = fields.value[editConfig.chipIndex]\n      const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n      if (nameEvent === CLICK) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n        }\n\n        setEditConfig({\n          chipIndex: null,\n          isEdit: false,\n          isKeyFocused: false,\n          isValueFocused: false,\n          isNewChip: false\n        })\n        isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n      } else if (nameEvent === TAB) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n          isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n          return {\n            chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n            isEdit: !lastChipSelected,\n            isKeyFocused: !lastChipSelected,\n            isValueFocused: false,\n            isNewChip: false\n          }\n        })\n      } else if (nameEvent === TAB_SHIFT) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const firstChipIsSelected = prevState.chipIndex === 0\n\n          isChipNotEmpty &&\n            firstChipIsSelected &&\n            onExitEditModeCallback &&\n            onExitEditModeCallback()\n\n          return {\n            chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n            isEdit: !firstChipIsSelected,\n            isKeyFocused: false,\n            isValueFocused: !firstChipIsSelected,\n            isNewChip: false\n          }\n        })\n      }\n\n      checkChipsList(get(formState.values, name))\n\n      if (\n        (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n        (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n        (fields.value.length > 1 &&\n          editConfig.chipIndex === fields.value.length - 1 &&\n          nameEvent !== TAB)\n      ) {\n        event && event.preventDefault()\n      }\n    },\n    [\n      editConfig.chipIndex,\n      checkChipsList,\n      formState.values,\n      name,\n      onExitEditModeCallback,\n      handleRemoveChip\n    ]\n  )\n\n  const handleToEditMode = useCallback(\n    (event, chipIndex, keyName) => {\n      if (isEditable) {\n        const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n        let isKeyClicked = false\n        const isClickedInsideInputElement = (\n          pointerCoordinateX,\n          pointerCoordinateY,\n          inputElement\n        ) => {\n          if (inputElement) {\n            const {\n              top: topPosition,\n              left: leftPosition,\n              right: rightPosition,\n              bottom: bottomPosition\n            } = inputElement.getBoundingClientRect()\n            if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n              return false\n            if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n              return false\n\n            return true\n          }\n        }\n        event.stopPropagation()\n\n        if (event.target.nodeName !== 'INPUT') {\n          if (event.target.firstElementChild) {\n            isKeyClicked = isClickedInsideInputElement(\n              pointerCoordinateX,\n              pointerCoordinateY,\n              event.target.firstElementChild\n            )\n          }\n        } else {\n          isKeyClicked = event.target.name === keyName\n        }\n\n        setEditConfig(preState => ({\n          ...preState,\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyClicked,\n          isValueFocused: !isKeyClicked\n        }))\n      }\n\n      onClick && onClick()\n    },\n    [isEditable, onClick]\n  )\n\n  const validateFields = fieldsArray => {\n    if (!fieldsArray) return null\n\n    let errorData = []\n\n    const uniquenessValidator = (newValue, idx) => {\n      return !fieldsArray.some(({ key }, index) => {\n        return newValue === key && index !== idx\n      })\n    }\n\n    if (!isEmpty(validationRules)) {\n      errorData = fieldsArray.map(chip => {\n        const [keyValidation, valueValidation] = validateChip(chip)\n\n        if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n        if (keyValidation) return { key: keyValidation }\n\n        if (valueValidation) return { value: valueValidation }\n\n        return null\n      })\n    }\n\n    // uniqueness\n    fieldsArray.forEach((chip, index) => {\n      const isUnique = uniquenessValidator(chip.key, index)\n\n      if (!isUnique) {\n        if (get(errorData, [index, 'key'], false)) {\n          errorData.at(index).key.push(uniquenessError)\n        } else {\n          set(errorData, [index, 'key'], [uniquenessError])\n        }\n      }\n    })\n\n    if (isEmpty(errorData) && validator) {\n      errorData = validator(fieldsArray)\n    }\n\n    if (errorData.every(label => isNil(label))) {\n      return null\n    }\n\n    return errorData\n  }\n\n  const validateChip = ({ key, value, disabled }) => {\n    const validateField = (value, field) => {\n      const [newRules, isValidField] = checkPatternsValidity(\n        validationRules[field].filter(rule => rule.pattern),\n        value\n      )\n\n      if (isValidField) return null\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n    }\n\n    return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n  }\n\n  return (\n    <div className={chipsClassName} data-testid={`${name}-chips`}>\n      {label && <div className=\"chips__label\">{label}</div>}\n      <div className={label ? 'chips__wrapper' : ''}>\n        <FormChipCellView\n          chipOptions={chipOptions}\n          chipSizeIsRecalculated={chipSizeIsRecalculated}\n          chips={chips}\n          editConfig={editConfig}\n          formState={formState}\n          handleAddNewChip={handleAddNewChip}\n          handleEditChip={handleEditChip}\n          handleRemoveChip={handleRemoveChip}\n          handleShowElements={handleShowElements}\n          handleToEditMode={handleToEditMode}\n          isEditable={isEditable}\n          name={name}\n          ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n          setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n          setChipsSizes={setChipsSizes}\n          setEditConfig={setEditConfig}\n          shortChips={shortChips}\n          showChips={showChips}\n          showHiddenChips={showHiddenChips}\n          validateFields={validateFields}\n          validationRules={validationRules}\n        />\n      </div>\n    </div>\n  )\n}\n\nFormChipCell.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  className: PropTypes.string,\n  delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  formState: PropTypes.object.isRequired,\n  initialValues: PropTypes.object.isRequired,\n  isEditable: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  onExitEditModeCallback: PropTypes.func,\n  shortChips: PropTypes.bool,\n  validationRules: PropTypes.object,\n  validator: PropTypes.func,\n  visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  withInitialParentWidth: PropTypes.bool\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","delimiter","formState","initialValues","isEditable","label","name","onClick","onExitEditModeCallback","shortChips","validationRules","validator","visibleChipsMaxLength","withInitialParentWidth","chipsClassName","classnames","chipSizeIsRecalculated","setChipSizeIsRecalculated","useState","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","React","FormChipCell$1"],"mappings":"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"}
+{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS, VISIBLE_CHIPS_MAX_LENGTH } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n  chipOptions = {\n    background: 'purple',\n    boldValue: false,\n    borderRadius: 'primary',\n    borderColor: 'transparent',\n    density: 'dense',\n    font: 'purple'\n  },\n  className = '',\n  children,\n  delimiter = null,\n  formState,\n  initialValues,\n  isDeletable = false,\n  isEditable = false,\n  label = null,\n  name,\n  onClick = () => {},\n  onExitEditModeCallback = null,\n  shortChips = false,\n  validationRules = {},\n  validator = null,\n  visibleChipsMaxLength = null,\n  withInitialParentWidth = false\n}) => {\n  const chipsClassName = classnames('chips', className)\n  const [chipSizeIsRecalculated, setChipSizeIsRecalculated] = useState(false)\n  const {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  } = useChipCell(isEditable, visibleChipsMaxLength, withInitialParentWidth)\n\n  const [editConfig, setEditConfig] = useState({\n    chipIndex: null,\n    isEdit: false,\n    isKeyFocused: false,\n    isValueFocused: false,\n    isNewChip: false\n  })\n\n  let chips = useMemo(() => {\n    return isEditable || visibleChipsMaxLength === 'all'\n      ? {\n          visibleChips: get(formState.values, name),\n          hiddenChips: []\n        }\n      : generateChipsList(\n          get(formState.values, name),\n          visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n        )\n  }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n  const checkChipsList = useCallback(\n    currentChipsList => {\n      if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n        set(formState.initialValues, name, currentChipsList)\n      }\n\n      formState.form.mutators.setFieldState(name, { modified: true })\n      formState.form.mutators.setFieldState(name, { touched: true })\n    },\n    [initialValues, name, formState]\n  )\n\n  const handleAddNewChip = useCallback(\n    (event, fields) => {\n      const fieldsLength = fields.value?.length || 0\n\n      if (!editConfig.isEdit && !editConfig.chipIndex) {\n        formState.form.mutators.push(name, {\n          id: fieldsLength + new Date(),\n          key: '',\n          value: '',\n          delimiter: delimiter\n        })\n      }\n\n      if (showHiddenChips) {\n        setShowHiddenChips(false)\n      }\n\n      setEditConfig({\n        chipIndex: fieldsLength,\n        isEdit: true,\n        isKeyFocused: true,\n        isValueFocused: false,\n        isNewChip: true\n      })\n\n      event && event.preventDefault()\n    },\n    [\n      editConfig.isEdit,\n      editConfig.chipIndex,\n      showHiddenChips,\n      formState.form.mutators,\n      name,\n      delimiter,\n      setShowHiddenChips\n    ]\n  )\n\n  const handleRemoveChip = useCallback(\n    (event, fields, chipIndex, isOutsideClick = false) => {\n      checkChipsList(\n        lodash\n          .chain(formState)\n          .get(['values', name])\n          .filter((_, index) => index !== chipIndex)\n          .value()\n      )\n\n      if (fields.length === 1) {\n        formState.form.change(name, [])\n      } else {\n        fields.remove(chipIndex)\n      }\n\n      onExitEditModeCallback && onExitEditModeCallback()\n      event && !isOutsideClick && event.stopPropagation()\n    },\n    [checkChipsList, formState, name, onExitEditModeCallback]\n  )\n\n  const handleEditChip = useCallback(\n    (event, fields, nameEvent, isOutsideClick) => {\n      const { key, value } = fields.value[editConfig.chipIndex]\n      const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n      if (nameEvent === CLICK) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n        }\n\n        setEditConfig({\n          chipIndex: null,\n          isEdit: false,\n          isKeyFocused: false,\n          isValueFocused: false,\n          isNewChip: false\n        })\n        isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n      } else if (nameEvent === TAB) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n          isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n          return {\n            chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n            isEdit: !lastChipSelected,\n            isKeyFocused: !lastChipSelected,\n            isValueFocused: false,\n            isNewChip: false\n          }\n        })\n      } else if (nameEvent === TAB_SHIFT) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const firstChipIsSelected = prevState.chipIndex === 0\n\n          isChipNotEmpty &&\n            firstChipIsSelected &&\n            onExitEditModeCallback &&\n            onExitEditModeCallback()\n\n          return {\n            chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n            isEdit: !firstChipIsSelected,\n            isKeyFocused: false,\n            isValueFocused: !firstChipIsSelected,\n            isNewChip: false\n          }\n        })\n      }\n\n      checkChipsList(get(formState.values, name))\n\n      if (\n        (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n        (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n        (fields.value.length > 1 &&\n          editConfig.chipIndex === fields.value.length - 1 &&\n          nameEvent !== TAB)\n      ) {\n        event && event.preventDefault()\n      }\n    },\n    [\n      editConfig.chipIndex,\n      checkChipsList,\n      formState.values,\n      name,\n      onExitEditModeCallback,\n      handleRemoveChip\n    ]\n  )\n\n  const handleToEditMode = useCallback(\n    (event, chipIndex, keyName) => {\n      if (isEditable) {\n        const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n        let isKeyClicked = false\n        const isClickedInsideInputElement = (\n          pointerCoordinateX,\n          pointerCoordinateY,\n          inputElement\n        ) => {\n          if (inputElement) {\n            const {\n              top: topPosition,\n              left: leftPosition,\n              right: rightPosition,\n              bottom: bottomPosition\n            } = inputElement.getBoundingClientRect()\n            if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n              return false\n            if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n              return false\n\n            return true\n          }\n        }\n        event.stopPropagation()\n\n        if (event.target.nodeName !== 'INPUT') {\n          if (event.target.firstElementChild) {\n            isKeyClicked = isClickedInsideInputElement(\n              pointerCoordinateX,\n              pointerCoordinateY,\n              event.target.firstElementChild\n            )\n          }\n        } else {\n          isKeyClicked = event.target.name === keyName\n        }\n\n        setEditConfig(preState => ({\n          ...preState,\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyClicked,\n          isValueFocused: !isKeyClicked\n        }))\n      }\n\n      onClick && onClick()\n    },\n    [isEditable, onClick]\n  )\n\n  const validateFields = fieldsArray => {\n    if (!fieldsArray) return null\n\n    let errorData = []\n\n    const uniquenessValidator = (newValue, idx) => {\n      return !fieldsArray.some(({ key }, index) => {\n        return newValue === key && index !== idx\n      })\n    }\n\n    if (!isEmpty(validationRules)) {\n      errorData = fieldsArray.map(chip => {\n        const [keyValidation, valueValidation] = validateChip(chip)\n\n        if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n        if (keyValidation) return { key: keyValidation }\n\n        if (valueValidation) return { value: valueValidation }\n\n        return null\n      })\n    }\n\n    // uniqueness\n    fieldsArray.forEach((chip, index) => {\n      const isUnique = uniquenessValidator(chip.key, index)\n\n      if (!isUnique) {\n        if (get(errorData, [index, 'key'], false)) {\n          errorData.at(index).key.push(uniquenessError)\n        } else {\n          set(errorData, [index, 'key'], [uniquenessError])\n        }\n      }\n    })\n\n    if (isEmpty(errorData) && validator) {\n      errorData = validator(fieldsArray)\n    }\n\n    if (errorData.every(label => isNil(label))) {\n      return null\n    }\n\n    return errorData\n  }\n\n  const validateChip = ({ key, value, disabled }) => {\n    const validateField = (value, field) => {\n      const [newRules, isValidField] = checkPatternsValidity(\n        validationRules[field].filter(rule => rule.pattern),\n        value\n      )\n\n      if (isValidField) return null\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n    }\n\n    return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n  }\n\n  return (\n    <div className={chipsClassName} data-testid={`${name}-chips`}>\n      {label && <div className=\"chips__label\">{label}</div>}\n      <div className={label ? 'chips__wrapper' : ''}>\n        <FormChipCellView\n          chipOptions={chipOptions}\n          chipSizeIsRecalculated={chipSizeIsRecalculated}\n          chips={chips}\n          editConfig={editConfig}\n          formState={formState}\n          handleAddNewChip={handleAddNewChip}\n          handleEditChip={handleEditChip}\n          handleRemoveChip={handleRemoveChip}\n          handleShowElements={handleShowElements}\n          handleToEditMode={handleToEditMode}\n          isDeletable={isDeletable}\n          isEditable={isEditable}\n          name={name}\n          ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n          setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n          setChipsSizes={setChipsSizes}\n          setEditConfig={setEditConfig}\n          shortChips={shortChips}\n          showChips={showChips}\n          showHiddenChips={showHiddenChips}\n          validateFields={validateFields}\n          validationRules={validationRules}\n          visibleChipsMaxLength={visibleChipsMaxLength}\n        >\n          {children}\n        </FormChipCellView>\n      </div>\n    </div>\n  )\n}\n\nFormChipCell.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  formState: PropTypes.object.isRequired,\n  initialValues: PropTypes.object.isRequired,\n  isDeletable: PropTypes.bool,\n  isEditable: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  onExitEditModeCallback: PropTypes.func,\n  shortChips: PropTypes.bool,\n  validationRules: PropTypes.object,\n  validator: PropTypes.func,\n  visibleChipsMaxLength: VISIBLE_CHIPS_MAX_LENGTH,\n  withInitialParentWidth: PropTypes.bool\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","children","delimiter","formState","initialValues","isDeletable","isEditable","label","name","onClick","onExitEditModeCallback","shortChips","validationRules","validator","visibleChipsMaxLength","withInitialParentWidth","chipsClassName","classnames","chipSizeIsRecalculated","setChipSizeIsRecalculated","useState","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","VISIBLE_CHIPS_MAX_LENGTH","React","FormChipCell$1"],"mappings":"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"}

package/dist/components/FormChipCell/FormChipCellView.d.ts

@@ -1,5 +1,5 @@
 export default FormChipCellView;
-declare function FormChipCellView({ chipOptions, chipSizeIsRecalculated, setChipSizeIsRecalculated, chips, editConfig, handleAddNewChip, handleEditChip, handleRemoveChip, handleShowElements, handleToEditMode, isEditable, name, setChipsSizes, setEditConfig, shortChips, showChips, showHiddenChips, validateFields, validationRules }: {
+declare function FormChipCellView({ chipOptions, chipSizeIsRecalculated, setChipSizeIsRecalculated, children, chips, editConfig, handleAddNewChip, handleEditChip, handleRemoveChip, handleShowElements, handleToEditMode, isDeletable, isEditable, name, setChipsSizes, setEditConfig, shortChips, showChips, showHiddenChips, validateFields, validationRules, visibleChipsMaxLength }: {
     chipOptions?: {
         background: string;
         boldValue: boolean;
@@ -10,6 +10,7 @@ declare function FormChipCellView({ chipOptions, chipSizeIsRecalculated, setChip
     };
     chipSizeIsRecalculated: any;
     setChipSizeIsRecalculated: any;
+    children: any;
     chips: any;
     editConfig: any;
     handleAddNewChip: any;
@@ -17,6 +18,7 @@ declare function FormChipCellView({ chipOptions, chipSizeIsRecalculated, setChip
     handleRemoveChip: any;
     handleShowElements: any;
     handleToEditMode: any;
+    isDeletable?: boolean;
     isEditable?: boolean;
     name: any;
     setChipsSizes: any;
@@ -26,6 +28,7 @@ declare function FormChipCellView({ chipOptions, chipSizeIsRecalculated, setChip
     showHiddenChips: any;
     validateFields: any;
     validationRules?: {};
+    visibleChipsMaxLength?: any;
 }, { chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }: {
     chipsCellRef: any;
     chipsWrapperRef: any;
@@ -38,6 +41,7 @@ declare namespace FormChipCellView {
         export { CHIP_OPTIONS as chipOptions };
         export let chipSizeIsRecalculated: any;
         export let setChipSizeIsRecalculated: any;
+        export let children: any;
         export let chips: any;
         export let editConfig: any;
         export let formState: any;
@@ -46,6 +50,7 @@ declare namespace FormChipCellView {
         export let handleRemoveChip: any;
         export let handleShowElements: any;
         export let handleToEditMode: any;
+        export let isDeletable: any;
         export let isEditable: any;
         export let name: any;
         export let setChipsSizes: any;
@@ -55,7 +60,9 @@ declare namespace FormChipCellView {
         export let showHiddenChips: any;
         export let validateFields: any;
         export let validationRules: any;
+        export { VISIBLE_CHIPS_MAX_LENGTH as visibleChipsMaxLength };
     }
 }
 import { CHIP_OPTIONS } from '../../types';
+import { VISIBLE_CHIPS_MAX_LENGTH } from '../../types';
 //# sourceMappingURL=FormChipCellView.d.ts.map

package/dist/components/FormChipCell/FormChipCellView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormChipCellView.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCellView.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6KC;;;;;;;;;;;;;;;;;;;;;;;;;;6BAnL4B,aAAa"}
+{"version":3,"file":"FormChipCellView.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCellView.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAmLC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAzLsD,aAAa;yCAAb,aAAa"}

package/dist/components/FormChipCell/FormChipCellView.mjs

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

package/dist/components/FormChipCell/NewChipForm/NewChipForm.d.ts

@@ -1,11 +1,12 @@
 export default NewChipForm;
-declare function NewChipForm({ chip, chipIndex, chipOptions, className, editConfig, handleRemoveChip, isEditable, keyName, meta, onChange, setChipSizeIsRecalculated, setEditConfig, validationRules: rules, valueName }: {
+declare function NewChipForm({ chip, chipIndex, chipOptions, className, editConfig, handleRemoveChip, isDeletable, isEditable, keyName, meta, onChange, setChipSizeIsRecalculated, setEditConfig, validationRules: rules, valueName }: {
     chip: any;
     chipIndex: any;
     chipOptions: any;
     className?: string;
     editConfig: any;
     handleRemoveChip: any;
+    isDeletable: any;
     isEditable: any;
     keyName: any;
     meta: any;
@@ -24,6 +25,7 @@ declare namespace NewChipForm {
         let className: any;
         let editConfig: any;
         let handleRemoveChip: any;
+        let isDeletable: any;
         let isEditable: any;
         let keyName: any;
         let meta: any;

package/dist/components/FormChipCell/NewChipForm/NewChipForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewChipForm.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FormChipCell/NewChipForm/NewChipForm.jsx"],"names":[],"mappings":";AA6CA;;;;;;;;;;;;;;;0BAsaC"}
+{"version":3,"file":"NewChipForm.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FormChipCell/NewChipForm/NewChipForm.jsx"],"names":[],"mappings":";AA6CA;;;;;;;;;;;;;;;;0BAmbC"}