Fix [General] Wrong calculation of visible chips

src/lib/components/FormChipCell/FormChip/formChip.scss

@@ -45,6 +45,7 @@
 
   &.chips_button {
     padding: 8px 7px;
+    width: max-content;
   }
 
   &-background {

src/lib/components/FormChipCell/FormChipCell.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types'
 
 import FormChipCellView from './FormChipCellView'
 
-import { CHIP_OPTIONS } from '../../types'
+import { CHIP_OPTIONS, VISIBLE_CHIPS_MAX_LENGTH } from '../../types'
 import { CLICK, TAB, TAB_SHIFT } from '../../constants'
 import { areArraysEqual } from '../../utils/common.util'
 import { checkPatternsValidity } from '../../utils/validation.util'
@@ -388,6 +388,7 @@ let FormChipCell = ({
           showHiddenChips={showHiddenChips}
           validateFields={validateFields}
           validationRules={validationRules}
+          visibleChipsMaxLength={visibleChipsMaxLength}
         />
       </div>
     </div>
@@ -408,7 +409,7 @@ FormChipCell.propTypes = {
   shortChips: PropTypes.bool,
   validationRules: PropTypes.object,
   validator: PropTypes.func,
-  visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  visibleChipsMaxLength: VISIBLE_CHIPS_MAX_LENGTH,
   withInitialParentWidth: PropTypes.bool
 }
 

src/lib/components/FormChipCell/FormChipCellView.jsx

@@ -25,7 +25,7 @@ import HiddenChipsBlock from './HiddenChipsBlock/HiddenChipsBlock'
 import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'
 import Tooltip from '../Tooltip/Tooltip'
 
-import { CHIP_OPTIONS } from '../../types'
+import { CHIP_OPTIONS, VISIBLE_CHIPS_MAX_LENGTH } from '../../types'
 import { isEveryObjectValueEmpty } from '../../utils/common.util'
 import { uniquenessError } from './formChipCell.util'
 
@@ -58,7 +58,8 @@ let FormChipCellView = (
     showChips,
     showHiddenChips,
     validateFields,
-    validationRules = {}
+    validationRules = {},
+    visibleChipsMaxLength = null
   },
   { chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }
 ) => {
@@ -72,7 +73,8 @@ let FormChipCellView = (
   const wrapperClassNames = classnames(
     'chips-wrapper',
     isEditable && 'fixed-max-width',
-    chips.visibleChips?.length > 0 && !chipSizeIsRecalculated && 'chip_invisible'
+    chips.visibleChips?.length > 0 && !chipSizeIsRecalculated && 'chip_invisible',
+    visibleChipsMaxLength === 'all' && 'chips-wrapper_all-visible'
   )
   const chipClassNames = classnames(
     'chip',
@@ -230,7 +232,8 @@ FormChipCellView.propTypes = {
   showChips: PropTypes.bool.isRequired,
   showHiddenChips: PropTypes.bool.isRequired,
   validateFields: PropTypes.func.isRequired,
-  validationRules: PropTypes.object
+  validationRules: PropTypes.object,
+  visibleChipsMaxLength: VISIBLE_CHIPS_MAX_LENGTH
 }
 
 export default FormChipCellView

src/lib/components/FormChipCell/formChipCell.scss

@@ -5,6 +5,7 @@
 
   & {
     height: auto;
+    min-width: 0;
   }
 
   &__wrapper {
@@ -13,8 +14,14 @@
 
   &-wrapper {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: row;
     align-items: center;
+    overflow: hidden;
+
+    &.chips-wrapper_all-visible {
+      flex-wrap: wrap;
+      overflow: auto;
+    }
   }
 
   &-cell {

src/lib/hooks/useChipCell.hook.js

@@ -118,31 +118,42 @@ export const useChipCell = (isEditMode, visibleChipsMaxLength, withInitialParent
       const parentSize = withInitialParentWidth
         ? chipCellInitialWidth
         : chipsCellRef.current?.getBoundingClientRect().width
+      const hiddenChipsCounterWidth =
+        (hiddenChipsCounterRef.current?.getBoundingClientRect().width ?? 0) + chipBlockMarginRight
 
-      let maxLength = 0
+      let chipsLengthSum = 0
       let chipIndex = 0
-      const padding = 65
-
-      Object.values(chipsSizes).every((chipSize, index) => {
-        // Check if adding chipSize to maxLength exceeds parentSize
-        // or if adding chipSize and padding exceeds parentSize when there are multiple chips
-        if (
-          maxLength + chipSize > parentSize ||
-          (Object.values(chipsSizes).length > 1 &&
-            maxLength + chipSize + chipBlockMarginRight + padding > parentSize)
-        ) {
-          chipIndex = index
+      const chipsSizesList = Object.values(chipsSizes)
+
+      chipsSizesList.every((chipSize, index) => {
+        const chipSizeWithMargin = chipSize + chipBlockMarginRight
+        const isLastChip = index === chipsSizesList.length - 1
+        const newChipsLengthSum = chipsLengthSum + chipSizeWithMargin
+        const wouldExceedWithCounter = newChipsLengthSum + hiddenChipsCounterWidth > parentSize
+        const wouldExceedWithoutCounter = newChipsLengthSum > parentSize
+
+        // If we've exceeded the limit
+        if (wouldExceedWithCounter) {
+          // Special case: last chip might fit without the counter
+          if (isLastChip && !wouldExceedWithoutCounter) {
+            chipsLengthSum = newChipsLengthSum
+            chipIndex = chipsSizesList.length
+            return true
+          }
 
+          // Stop here - this chip doesn't fit
+          chipIndex = index
           return false
-        } else {
-          maxLength += chipSize
+        }
 
-          if (index === Object.values(chipsSizes).length - 1) {
-            chipIndex = 8
-          }
+        // Chip fits, add it
+        chipsLengthSum = newChipsLengthSum
 
-          return true
+        if (isLastChip) {
+          chipIndex = chipsSizesList.length
         }
+
+        return true
       })
 
       setVisibleChipsCount(chipIndex)

src/lib/types.js

@@ -85,6 +85,11 @@ export const CHIP_OPTIONS = PropTypes.shape({
 
 export const CHIPS = PropTypes.arrayOf(CHIP)
 
+export const VISIBLE_CHIPS_MAX_LENGTH = PropTypes.oneOfType([
+  PropTypes.number,
+  PropTypes.oneOf(['all'])
+])
+
 export const POP_UP_CUSTOM_POSITION = PropTypes.shape({
   element: PropTypes.shape({}),
   position: PropTypes.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),