@arbor-education/design-system.components 0.24.3 → 0.25.1

package/eslint.config.mts

@@ -11,7 +11,9 @@ const relativeImportExtensions: Rule.RuleModule = {
   create(context) {
     function check(node: Parameters<Rule.RuleListener['ImportDeclaration']>[0] | NonNullable<Parameters<Rule.RuleListener['ExportNamedDeclaration']>[0]>) {
       const source = 'source' in node && node.source ? node.source : null;
-      if (!source) return;
+      if (!source) {
+        return;
+      }
       const path = source.value as string;
       if ((path.startsWith('./') || path.startsWith('../')) && !/\.[a-z]{2,5}$/.test(path)) {
         context.report({ node: source, message: `Relative import '${path}' must include a file extension (e.g. '${path}.js').` });
@@ -23,6 +25,7 @@ const relativeImportExtensions: Rule.RuleModule = {
 
 export default defineConfig([
   globalIgnores([
+    '.claude/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
     '.gather/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
     'dist/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
   ]),
@@ -48,6 +51,34 @@ export default defineConfig([
       '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
       '@typescript-eslint/no-namespace': 'off',
       'local/relative-import-extensions': 'error',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      'no-nested-ternary': 'error',
+      'curly': ['error', 'all'],
+      '@stylistic/curly-newline': ['error', { minElements: 1 }],
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['../../*'],
+              message: 'Use a path alias (Components/*, Utils/*) instead of a deep relative import.',
+            },
+          ],
+        },
+      ],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: "CallExpression[callee.name='useEffect'][arguments.length<2]",
+          message: 'useEffect must always declare a dependency array, even if empty.',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.stories.tsx', '**/*.story.tsx', '**/*.test.{ts,tsx}'],
+    rules: {
+      'no-restricted-imports': 'off',
     },
   },
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.24.3",
+  "version": "0.25.1",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "type": "module",

package/src/components/avatarGroup/AvatarGroup.stories.tsx

@@ -372,11 +372,15 @@ const LiveOverflowCounterTemplate = () => {
 
   const addItem = () => {
     const next = extraItems[items.length - initialItems.length];
-    if (next) setItems(prev => [...prev, next]);
+    if (next) {
+      setItems(prev => [...prev, next]);
+    }
   };
 
   const removeItem = () => {
-    if (items.length > 1) setItems(prev => prev.slice(0, -1));
+    if (items.length > 1) {
+      setItems(prev => prev.slice(0, -1));
+    }
   };
 
   return (

package/src/components/card/Card.tsx

@@ -115,7 +115,9 @@ export const Card = ({
         }
       }}
       onKeyDown={(e) => {
-        if (!isCardInteractive) return;
+        if (!isCardInteractive) {
+          return;
+        }
 
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();

package/src/components/combobox/Combobox.stories.tsx

@@ -850,7 +850,9 @@ function AsyncSearchTemplate() {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleSearch = (query: string) => {
-    if (timerRef.current) clearTimeout(timerRef.current);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
     timerRef.current = setTimeout(() => {
       setOptions(
         comboboxAsyncSearchOptions.filter(o =>

package/src/components/combobox/Combobox.test.tsx

@@ -13,7 +13,9 @@ const people: ComboboxOption[] = [
 
 describe('Combobox', () => {
   const openWithChevron = async () => {
-    if (screen.queryByRole('listbox')) return;
+    if (screen.queryByRole('listbox')) {
+      return;
+    }
     await userEvent.click(screen.getByRole('button', { name: 'Open suggestions' }));
   };
 
@@ -240,10 +242,18 @@ describe('Combobox', () => {
     const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
       let width = 0;
 
-      if (this.classList.contains('ds-combobox__button-content')) width = 420;
-      else if (this.classList.contains('ds-combobox__measure-chip')) width = 80;
-      else if (this.classList.contains('ds-combobox__button-ellipsis')) width = 11.6;
-      else if (this.classList.contains('ds-badge')) width = 24.2;
+      if (this.classList.contains('ds-combobox__button-content')) {
+        width = 420;
+      }
+      else if (this.classList.contains('ds-combobox__measure-chip')) {
+        width = 80;
+      }
+      else if (this.classList.contains('ds-combobox__button-ellipsis')) {
+        width = 11.6;
+      }
+      else if (this.classList.contains('ds-badge')) {
+        width = 24.2;
+      }
 
       return {
         width,
@@ -281,10 +291,18 @@ describe('Combobox', () => {
     const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
       let width = 0;
 
-      if (this.classList.contains('ds-combobox__button-content')) width = 220;
-      else if (this.classList.contains('ds-combobox__measure-chip')) width = 120.4;
-      else if (this.classList.contains('ds-combobox__button-ellipsis')) width = 11.6;
-      else if (this.classList.contains('ds-badge')) width = 24.2;
+      if (this.classList.contains('ds-combobox__button-content')) {
+        width = 220;
+      }
+      else if (this.classList.contains('ds-combobox__measure-chip')) {
+        width = 120.4;
+      }
+      else if (this.classList.contains('ds-combobox__button-ellipsis')) {
+        width = 11.6;
+      }
+      else if (this.classList.contains('ds-badge')) {
+        width = 24.2;
+      }
 
       return {
         width,
@@ -943,7 +961,12 @@ describe('Combobox', () => {
 
   test('loading state sets aria-busy, role=status (spinner only, accessible name), and hides options', async () => {
     render(
-      <Combobox options={people} loading onSearch={() => {}} aria-label="People" />,
+      <Combobox
+        options={people}
+        loading
+        onSearch={() => {}}
+        aria-label="People"
+      />,
     );
     await openWithChevron();
 
@@ -958,7 +981,12 @@ describe('Combobox', () => {
   });
 
   test('loading is false does not set aria-busy on listbox', async () => {
-    render(<Combobox options={people} onSearch={() => {}} />);
+    render(
+      <Combobox
+        options={people}
+        onSearch={() => {}}
+      />,
+    );
     await openWithChevron();
 
     expect(screen.getByRole('listbox')).not.toHaveAttribute('aria-busy');

package/src/components/combobox/Combobox.tsx

@@ -154,7 +154,9 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
 
   const resolveTagLabel = useCallback(
     (opt: { tagLabel?: string; label: string }): string => {
-      if (getTagLabel) return getTagLabel(opt as Parameters<typeof getTagLabel>[0]);
+      if (getTagLabel) {
+        return getTagLabel(opt as Parameters<typeof getTagLabel>[0]);
+      }
       return opt.tagLabel ?? opt.label;
     },
     [getTagLabel],
@@ -170,13 +172,19 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
   }, []);
 
   const focusDeleteButtonForHighlighted = useCallback((): boolean => {
-    if (highlightIndex < 0 || highlightIndex >= filteredOptions.length) return false;
+    if (highlightIndex < 0 || highlightIndex >= filteredOptions.length) {
+      return false;
+    }
 
     const highlightedOption = filteredOptions[highlightIndex];
-    if (!highlightedOption || !createdValuesSet.has(highlightedOption.value)) return false;
+    if (!highlightedOption || !createdValuesSet.has(highlightedOption.value)) {
+      return false;
+    }
 
     const button = deleteButtonRefs.current.get(highlightedOption.value);
-    if (!button) return false;
+    if (!button) {
+      return false;
+    }
 
     button.focus();
     return true;
@@ -281,7 +289,9 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
 
   const handleButtonTriggerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (disabled) return;
+      if (disabled) {
+        return;
+      }
       if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
         e.preventDefault();
         handleTriggerClick();

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -202,7 +202,9 @@ export const ComboboxButtonTrigger = ({
             <div className="ds-combobox__button-tags-track" ref={measureTrackRef}>
               {selectedTags.map((opt, tagIdx) => (
                 <span key={`measure-${opt.value}`} className="ds-combobox__measure-chip">
-                  {renderSelectionTag(opt, tagIdx, disabled ? undefined : () => {})}
+                  {renderSelectionTag(opt, tagIdx, disabled
+                    ? undefined
+                    : () => {})}
                 </span>
               ))}
             </div>

package/src/components/combobox/ComboboxListbox.tsx

@@ -100,7 +100,9 @@ export const ComboboxListbox = (props: ComboboxListboxProps): React.JSX.Element
         onMouseEnter={() => setHighlightIndex(idx)}
         onMouseDown={preventMouseDefault}
         onClick={() => {
-          if (!opt.disabled) selectOption(opt.value);
+          if (!opt.disabled) {
+            selectOption(opt.value);
+          }
         }}
         onDeleteCreated={(value) => {
           deleteCreatedOption(value, idx);
@@ -128,7 +130,9 @@ export const ComboboxListbox = (props: ComboboxListboxProps): React.JSX.Element
             className="ds-combobox__listbox-search-input-wrap"
             onMouseDown={(e) => {
               const el = inputRef.current;
-              if (!el || e.button !== 0) return;
+              if (!el || e.button !== 0) {
+                return;
+              }
               if (e.target !== el && !el.contains(e.target as Node)) {
                 el.focus();
               }
@@ -178,11 +182,15 @@ export const ComboboxListbox = (props: ComboboxListboxProps): React.JSX.Element
         : (
             <>
               {Array.from(optionGroups.entries()).map(([groupName, groupOptions]) => {
-                if (groupOptions.length === 0) return null;
+                if (groupOptions.length === 0) {
+                  return null;
+                }
 
                 const groupItems = groupOptions.map(opt => renderOptionRow(opt));
 
-                if (!groupName) return groupItems;
+                if (!groupName) {
+                  return groupItems;
+                }
 
                 return (
                   <li key={groupName} role="presentation" className="ds-combobox__group">

package/src/components/combobox/buildListboxDisplayOptions.ts

@@ -5,8 +5,12 @@ export function buildOptionGroups(options: ComboboxOption[]): Map<string, Combob
   for (const opt of options) {
     const key = opt.group ?? '';
     const list = map.get(key);
-    if (list) list.push(opt);
-    else map.set(key, [opt]);
+    if (list) {
+      list.push(opt);
+    }
+    else {
+      map.set(key, [opt]);
+    }
   }
   return map;
 }

package/src/components/combobox/highlightLabel.tsx

@@ -20,9 +20,10 @@ export const highlightLabel = ({
 
   const lowerLabel = label.toLowerCase();
   const lowerQuery = trimmedQuery.toLowerCase();
+  const prefixMatchStart = lowerLabel.startsWith(lowerQuery) ? 0 : -1;
   const matchStart
     = searchType === 'prefix'
-      ? (lowerLabel.startsWith(lowerQuery) ? 0 : -1)
+      ? prefixMatchStart
       : lowerLabel.indexOf(lowerQuery);
 
   if (matchStart === -1) {

package/src/components/combobox/useChipSelection.ts

@@ -30,7 +30,9 @@ export const useChipSelection = (selectedValues: string[]): UseChipSelectionRetu
 
   useEffect(() => {
     setSelectedChipValues((prev) => {
-      if (prev.length === 0) return prev;
+      if (prev.length === 0) {
+        return prev;
+      }
       return prev.filter(value => selectedValues.includes(value));
     });
   }, [selectedValues]);

package/src/components/combobox/useComboboxListboxKeyboard.ts

@@ -64,7 +64,9 @@ export const useComboboxListboxKeyboard = ({
             exitChipNav();
             return;
           }
-          if (!isOpen) return;
+          if (!isOpen) {
+            return;
+          }
           if (showListboxLoading) {
             return;
           }
@@ -74,14 +76,18 @@ export const useComboboxListboxKeyboard = ({
           break;
         }
         case 'ArrowRight': {
-          if (inChipNav || !isOpen || showListboxLoading) return;
+          if (inChipNav || !isOpen || showListboxLoading) {
+            return;
+          }
           if (focusDeleteButtonForHighlighted()) {
             e.preventDefault();
           }
           break;
         }
         case 'Tab': {
-          if (e.shiftKey || inChipNav || !isOpen || showListboxLoading) return;
+          if (e.shiftKey || inChipNav || !isOpen || showListboxLoading) {
+            return;
+          }
           if (focusDeleteButtonForHighlighted()) {
             e.preventDefault();
           }
@@ -102,7 +108,9 @@ export const useComboboxListboxKeyboard = ({
           }
           if (highlightIndex >= 0 && highlightIndex < listboxOptions.length) {
             const opt = listboxOptions[highlightIndex];
-            if (opt && !opt.disabled) selectOption(opt.value);
+            if (opt && !opt.disabled) {
+              selectOption(opt.value);
+            }
           }
           else if (showCreateRow && highlightIndex === listboxOptions.length) {
             handleCreate();

package/src/components/combobox/useComboboxPopoverBehavior.ts

@@ -84,7 +84,9 @@ export const useComboboxPopoverBehavior = ({
       else if (!isOpen) {
         openPopover();
       }
-      if (isAsync) onSearch?.(val);
+      if (isAsync) {
+        onSearch?.(val);
+      }
     },
     [
       clearChipSelection,
@@ -101,7 +103,9 @@ export const useComboboxPopoverBehavior = ({
   );
 
   useEffect(() => {
-    if (loading) return;
+    if (loading) {
+      return;
+    }
     if (isOpen && showCreateRow && highlightIndex === -1) {
       setHighlightIndex(filteredOptionsLength);
     }
@@ -114,14 +118,18 @@ export const useComboboxPopoverBehavior = ({
   }, [showListboxLoading, setHighlightIndex]);
 
   const requestOpen = useCallback(() => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     if (canOpenPopover) {
       openPopover();
     }
   }, [disabled, openPopover, canOpenPopover]);
 
   const handleTriggerClick = useCallback(() => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     if (triggerContainsInput) {
       inputRef.current?.focus();
     }
@@ -131,15 +139,21 @@ export const useComboboxPopoverBehavior = ({
   }, [disabled, dropdownOnFocus, inputRef, requestOpen, triggerContainsInput]);
 
   const handleInputFocus = useCallback(() => {
-    if (!dropdownOnFocus || disabled) return;
+    if (!dropdownOnFocus || disabled) {
+      return;
+    }
     requestOpen();
   }, [disabled, dropdownOnFocus, requestOpen]);
 
   const handleInputBlur = useCallback(
     (e: React.FocusEvent<HTMLInputElement>) => {
       const relatedTarget = e.relatedTarget as Node | null;
-      if (relatedTarget && triggerRef.current?.contains(relatedTarget)) return;
-      if (relatedTarget && listboxRef.current?.contains(relatedTarget)) return;
+      if (relatedTarget && triggerRef.current?.contains(relatedTarget)) {
+        return;
+      }
+      if (relatedTarget && listboxRef.current?.contains(relatedTarget)) {
+        return;
+      }
       clearChipSelection();
       exitChipNav();
     },
@@ -149,7 +163,9 @@ export const useComboboxPopoverBehavior = ({
   const handleChevronClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      if (disabled) return;
+      if (disabled) {
+        return;
+      }
       if (triggerContainsInput) {
         inputRef.current?.focus();
       }

package/src/components/combobox/useComboboxState.ts

@@ -73,7 +73,9 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
 
   const updateValue = useCallback(
     (next: string[]) => {
-      if (!isControlled) setInternalValue(next);
+      if (!isControlled) {
+        setInternalValue(next);
+      }
       onValueChange?.(next);
     },
     [isControlled, onValueChange],
@@ -91,14 +93,18 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
   );
 
   const mergedOptions = useMemo(() => {
-    if (createdOptions.length === 0) return options;
+    if (createdOptions.length === 0) {
+      return options;
+    }
     const existingValues = new Set(options.map(opt => opt.value));
     const extras = createdOptions.filter(opt => !existingValues.has(opt.value));
     return [...options, ...extras];
   }, [options, createdOptions]);
 
   const filteredOptions = useMemo(() => {
-    if (isAsync || !query) return mergedOptions;
+    if (isAsync || !query) {
+      return mergedOptions;
+    }
     return mergedOptions.filter(opt => filter(opt, query));
   }, [mergedOptions, query, isAsync, filter]);
 
@@ -122,11 +128,16 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
 
   const selectOption = useCallback(
     (optionValue: string) => {
-      const next = multiple
-        ? selectedValuesSet.has(optionValue)
-          ? selectedValues.filter(v => v !== optionValue)
-          : [...selectedValues, optionValue]
-        : [optionValue];
+      let next: string[];
+      if (!multiple) {
+        next = [optionValue];
+      }
+      else if (selectedValuesSet.has(optionValue)) {
+        next = selectedValues.filter(v => v !== optionValue);
+      }
+      else {
+        next = [...selectedValues, optionValue];
+      }
       updateValue(next);
       setQuery('');
       if (!multiple) {
@@ -149,7 +160,9 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
   }, [updateValue]);
 
   const openPopover = useCallback(() => {
-    if (!disabled) setIsOpen(true);
+    if (!disabled) {
+      setIsOpen(true);
+    }
   }, [disabled]);
 
   const ensureCreatedOption = useCallback(
@@ -167,7 +180,9 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
       const existingByValue = mergedOptions.find(opt => opt.value === created.value);
       if (!existingByValue) {
         setCreatedOptions((prev) => {
-          if (prev.some(opt => opt.value === created.value)) return prev;
+          if (prev.some(opt => opt.value === created.value)) {
+            return prev;
+          }
           return [...prev, created];
         });
       }
@@ -179,7 +194,9 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
 
   const handleCreate = useCallback(() => {
     const trimmed = query.trim();
-    if (!trimmed) return;
+    if (!trimmed) {
+      return;
+    }
 
     const existing = mergedOptions.find(
       opt => normaliseComboboxQuery(opt.label) === normaliseComboboxQuery(trimmed),

package/src/components/datePicker/DatePickerCalendarHeader.tsx

@@ -33,14 +33,18 @@ export const DatePickerCalendarHeader = ({
 
   const handleMonthSelection = (selectedValues: string[]) => {
     const nextMonthIndex = Number.parseInt(selectedValues[0] ?? String(month.getMonth()), 10);
-    if (Number.isNaN(nextMonthIndex)) return;
+    if (Number.isNaN(nextMonthIndex)) {
+      return;
+    }
 
     onMonthChange(new Date(month.getFullYear(), nextMonthIndex, 1));
   };
 
   const handleYearSelection = (selectedValues: string[]) => {
     const nextYear = Number.parseInt(selectedValues[0] ?? String(month.getFullYear()), 10);
-    if (Number.isNaN(nextYear)) return;
+    if (Number.isNaN(nextYear)) {
+      return;
+    }
 
     onMonthChange(new Date(nextYear, month.getMonth(), 1));
   };

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -9,7 +9,9 @@ describe('DateTimePicker', () => {
   beforeEach(() => {
     globalThis.ResizeObserver = class {
       observe() {}
+
       unobserve() {}
+
       disconnect() {}
     } as unknown as typeof ResizeObserver;
   });

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -199,6 +199,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
 
   const popupParentRef = useContext(PopupParentContext);
 
+  const nativeStep = granularity === 'second' ? 1 : 60;
+
   return (
     <div className={classNames('ds-date-time-picker', className)}>
       <div
@@ -215,7 +217,7 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           onPointerDown={onNativeFieldHintPointerDown}
           readOnly={hasCustomEmptyHint}
           id={id}
-          step={isNative ? (granularity === 'second' ? 1 : 60) : undefined}
+          step={isNative ? nativeStep : undefined}
           placeholder={showFieldHint ? '' : resolvedPlaceholder}
           hasError={hasError}
           aria-describedby={ariaDescribedBy}

package/src/components/dropdown/Dropdown.stories.tsx

@@ -392,11 +392,16 @@ const SchoolContextExampleTemplate = () => {
     year11 && 'Year 11',
   ].filter(Boolean);
 
-  const label = allYears
-    ? 'All year groups'
-    : selectedYears.length === 0
-      ? 'Select year groups'
-      : selectedYears.join(', ');
+  let label: string;
+  if (allYears) {
+    label = 'All year groups';
+  }
+  else if (selectedYears.length === 0) {
+    label = 'Select year groups';
+  }
+  else {
+    label = selectedYears.join(', ');
+  }
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)', padding: 'var(--spacing-xlarge)', minWidth: '280px' }}>
@@ -450,9 +455,15 @@ export const Default: Story = withDescription(
             <Button variant="primary">Open menu</Button>
           </Dropdown.Trigger>
           <Dropdown.Content>
-            <Dropdown.Item onSelect={() => {}}>View student profile</Dropdown.Item>
-            <Dropdown.Item onSelect={() => {}}>Edit assessment details</Dropdown.Item>
-            <Dropdown.Item onSelect={() => {}}>Archive record</Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              View student profile
+            </Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              Edit assessment details
+            </Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              Archive record
+            </Dropdown.Item>
           </Dropdown.Content>
         </Dropdown>
       </div>

package/src/components/filterBar/FilterBar.stories.tsx

@@ -553,7 +553,9 @@ const ModalWiringTemplate = () => {
   };
 
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      return;
+    }
 
     const frame = requestAnimationFrame(() => {
       document.getElementById(pendingFocusFieldId)?.focus();
@@ -582,7 +584,9 @@ const ModalWiringTemplate = () => {
 
   const items: FilterBar.TagItem[] = APPLIED_ITEM_SEEDS.flatMap((item) => {
     const value = fieldValues[item.fieldId]?.trim();
-    if (!value) return [];
+    if (!value) {
+      return [];
+    }
 
     return [{
       ...item,
@@ -593,7 +597,9 @@ const ModalWiringTemplate = () => {
       removeLabel: `Remove ${item.label.toLowerCase()} ${item.type}`,
       onClick: clickedItem => openModal(clickedItem.type, clickedItem.fieldId ?? PANEL_FIELD_IDS[clickedItem.type]),
       onRemove: (removedItem) => {
-        if (!removedItem.fieldId) return;
+        if (!removedItem.fieldId) {
+          return;
+        }
         updateFieldValue(removedItem.fieldId, '');
       },
     }];