From 2a6e3ca0a65af26a9db362b9bdd0ea0cf4624e43 Mon Sep 17 00:00:00 2001
From: FOLIO Translations Bot
 <38661258+folio-translations@users.noreply.github.com>
Date: Mon, 21 Oct 2024 18:28:44 -0400
Subject: [PATCH 01/10] Lokalise: updates

---
 translations/stripes-components/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/translations/stripes-components/de.json b/translations/stripes-components/de.json
index 9bbd86dbb..768c43c39 100644
--- a/translations/stripes-components/de.json
+++ b/translations/stripes-components/de.json
@@ -17,7 +17,7 @@
     "fieldHasError": "Feld hat Fehler",
     "addressLine1": "Anschriftenzeile 1",
     "addressLine2": "Anschriftenzeile 2",
-    "stateProviceOrRegion": "Bundesland",
+    "stateProviceOrRegion": "Staat / Land / Bundesland",
     "zipOrPostalCode": "PLZ/Postleitzahl",
     "addressType": "Adresstyp",
     "city": "Stadt",

From b0ec27770e4a32c50d4e0af8e871391158535035 Mon Sep 17 00:00:00 2001
From: Dmytro-Melnyshyn <77053927+Dmytro-Melnyshyn@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:34:33 +0300
Subject: [PATCH 02/10] STCOM-1369: TextArea - move focus to the field after
 clearing the field by clicking on the x icon. (#2370)

---
 CHANGELOG.md                        |  1 +
 lib/TextArea/TextArea.js            | 20 ++++++++++++++++++--
 lib/TextArea/tests/TextArea-test.js | 14 +++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4cdfc5c62..3ced1665b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,7 @@
 * Use `<Selection>`'s formatter for rendering the selected value within the field and prevent overflow of text. Refs STCOM-1344.
 * Export `<StripesOverlayWrapper>` that will automatically apply the `usePortal` behavior to nested overlay components. Refs STCOM-1353.
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
+* `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/TextArea/TextArea.js b/lib/TextArea/TextArea.js
index 036445f59..eab452e28 100644
--- a/lib/TextArea/TextArea.js
+++ b/lib/TextArea/TextArea.js
@@ -10,6 +10,7 @@ import parseMeta from '../FormField/parseMeta';
 import formField from '../FormField';
 import TextFieldIcon from '../TextField/TextFieldIcon';
 import omitProps from '../../util/omitProps';
+import nativeChangeField from '../../util/nativeChangeFieldValue';
 import sharedInputStylesHelper from '../sharedStyles/sharedInputStylesHelper';
 
 import formStyles from '../sharedStyles/form.css';
@@ -284,6 +285,22 @@ class TextArea extends Component {
     onKeyDown(event);
   }
 
+  clearField = () => {
+    const { onClearField } = this.props;
+
+    if (typeof onClearField === 'function') {
+      onClearField();
+    }
+
+    // Clear value on input natively, dispatch an event to be picked up by handleChange, and focus on input again
+    if (this.textareaRef.current) {
+      nativeChangeField(this.textareaRef, true, '');
+      if (this.state.value !== '') {
+        this.setState({ value: '' });
+      }
+    }
+  }
+
   render() {
     /* eslint-disable no-unused-vars */
     const {
@@ -308,7 +325,6 @@ class TextArea extends Component {
       warning,
       hasClearIcon,
       clearFieldId,
-      onClearField,
       ...rest
     } = this.props;
 
@@ -359,7 +375,7 @@ class TextArea extends Component {
               aria-label={ariaLabel}
               icon="times-circle-solid"
               id={clearFieldId || `clickable-${this.testId}-clear-field`}
-              onClick={onClearField}
+              onClick={this.clearField}
               tabIndex="-1"
             />
           )}
diff --git a/lib/TextArea/tests/TextArea-test.js b/lib/TextArea/tests/TextArea-test.js
index 40293cffa..00f7d4415 100644
--- a/lib/TextArea/tests/TextArea-test.js
+++ b/lib/TextArea/tests/TextArea-test.js
@@ -15,7 +15,11 @@ describe('TextArea', () => {
     describe('rendering a basic TextArea', async () => {
       beforeEach(async () => {
         await mountWithContext(
-          <TextArea aria-label="test label" id="test" />
+          <TextArea
+            aria-label="test label"
+            id="test"
+            hasClearIcon
+          />
         );
       });
 
@@ -34,6 +38,14 @@ describe('TextArea', () => {
         beforeEach(() => textArea.fillIn('test'));
 
         it('updates the value', () => textArea.has({ value: 'test' }));
+
+        describe('then clicking clear', () => {
+          beforeEach(() => textArea.clear());
+
+          it('clears the value', () => textArea.has({ value: '' }));
+
+          it('focuses the textarea', () => textArea.is({ focused: true }));
+        });
       });
     });
 

From ccdf147c6a7719769a7e36d3e3c7c15d4c5a37c4 Mon Sep 17 00:00:00 2001
From: Vadym Shchekotilin <86330150+vashjs@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:20:00 +0200
Subject: [PATCH 03/10] STCOM-1341Change Repeatable fields component's focus
 behaviour (#2371)

---
 CHANGELOG.md                                  |  1 +
 lib/RepeatableField/RepeatableField.js        | 12 ++++++--
 lib/RepeatableField/RepeatableFieldContent.js |  7 ++---
 .../hooks/useIsElementFocused.js              | 30 +++++++++++++++++++
 4 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 lib/RepeatableField/hooks/useIsElementFocused.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ced1665b..36caaff1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,7 @@
 * Export `<StripesOverlayWrapper>` that will automatically apply the `usePortal` behavior to nested overlay components. Refs STCOM-1353.
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
 * `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
+* Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/RepeatableField/RepeatableField.js b/lib/RepeatableField/RepeatableField.js
index 5b340812d..c3ace1b0b 100644
--- a/lib/RepeatableField/RepeatableField.js
+++ b/lib/RepeatableField/RepeatableField.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -11,6 +11,7 @@ import IconButton from '../IconButton';
 import { RepeatableFieldContent } from "./RepeatableFieldContent";
 import css from './RepeatableField.css';
 import { useFocusedIndex } from "./hooks/useFocusedIndex";
+import { useIsElementFocused } from "./hooks/useIsElementFocused";
 
 
 const RepeatableField = ({
@@ -29,12 +30,16 @@ const RepeatableField = ({
   onRemove,
   renderField,
 }) => {
+  const rootRef = useRef(null);
   const showDeleteBtn = typeof onRemove === 'function';
   const fieldsLength = fields.length;
+  const isSomeChildElementFocused = useIsElementFocused(rootRef);
   const focusedIndex = useFocusedIndex(fieldsLength);
+  const hasToBeFocused = (index) => isSomeChildElementFocused && focusedIndex === index;
 
   return (
     <fieldset
+      ref={rootRef}
       id={id}
       data-test-repeatable-field
       className={classnames(css.repeatableField, { [css.hasMargin]: hasMargin }, className)}
@@ -78,7 +83,10 @@ const RepeatableField = ({
               key={getFieldUniqueKey(field, index, fields)}
               data-test-repeatable-field-list-item
             >
-              <RepeatableFieldContent isFocused={focusedIndex === index} >
+              <RepeatableFieldContent
+                rootRef={rootRef}
+                isFocused={hasToBeFocused(index)}
+              >
                 {renderField(field, index, fields)}
               </RepeatableFieldContent>
               {
diff --git a/lib/RepeatableField/RepeatableFieldContent.js b/lib/RepeatableField/RepeatableFieldContent.js
index 1cdf00a2c..854cdb341 100644
--- a/lib/RepeatableField/RepeatableFieldContent.js
+++ b/lib/RepeatableField/RepeatableFieldContent.js
@@ -6,13 +6,12 @@ import { getFirstFocusable } from "../../util/getFocusableElements";
 import css from "./RepeatableField.css";
 
 export const RepeatableFieldContent = ({ children, isFocused }) => {
+
   const callbackRef = useCallback((node) => {
-    if (node) {
+    if (node && isFocused) {
       const elem = getFirstFocusable(node, true, true);
 
-      if (isFocused) {
-        elem?.focus();
-      }
+      elem?.focus();
     }
   }, [isFocused])
 
diff --git a/lib/RepeatableField/hooks/useIsElementFocused.js b/lib/RepeatableField/hooks/useIsElementFocused.js
new file mode 100644
index 000000000..0944bbe0f
--- /dev/null
+++ b/lib/RepeatableField/hooks/useIsElementFocused.js
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+export const useIsElementFocused = (ref) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    const checkIfFocused = () => {
+      if (ref.current) {
+        const focusedElement = document.activeElement;
+        if (ref.current.contains(focusedElement)) {
+          setIsFocused(true);
+        } else {
+          setIsFocused(false);
+        }
+      }
+    };
+
+    window.addEventListener("focusin", checkIfFocused);
+    window.addEventListener("focusout", checkIfFocused);
+
+    checkIfFocused();
+
+    return () => {
+      window.removeEventListener("focusin", checkIfFocused);
+      window.removeEventListener("focusout", checkIfFocused);
+    };
+  }, [ref]);
+
+  return isFocused;
+};

From 2f72ee3857771f0f1d561991f690cee84f6cde05 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 25 Oct 2024 09:49:34 -0500
Subject: [PATCH 04/10] STCOM-1371 Selection Bug - scrollbar not working with
 mouse for long lists. (#2373)

* Selection - add tabIndex to selection list to allow it to catch focus for scrolling

* white space

* log changes

* add focus-styling to select list
---
 CHANGELOG.md                          |  1 +
 lib/Selection/Selection.css           | 10 +++++++++-
 lib/Selection/SelectionList.js        |  1 +
 lib/Selection/tests/Selection-test.js |  4 ++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36caaff1e..0dab71dc4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,6 +55,7 @@
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
 * `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
+* Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/Selection/Selection.css b/lib/Selection/Selection.css
index df73dc993..8b851b13c 100644
--- a/lib/Selection/Selection.css
+++ b/lib/Selection/Selection.css
@@ -19,10 +19,18 @@
 
 .selectionList {
   list-style: none;
-  padding: 4px;
+  padding: 2px 4px;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   margin-bottom: 0;
   overflow: auto;
   position: relative;
+  outline: 0;
+
+  &:focus {
+    border-top-color: var(--primary);
+    border-bottom-color: var(--primary);
+  }
 }
 
 .selectListSection {
diff --git a/lib/Selection/SelectionList.js b/lib/Selection/SelectionList.js
index 142f81dbf..fab57308c 100644
--- a/lib/Selection/SelectionList.js
+++ b/lib/Selection/SelectionList.js
@@ -15,6 +15,7 @@ const SelectionList = ({
     })}
     style={{ maxHeight: listMaxHeight }}
     className={css.selectionList}
+    tabIndex="-1"
   >
     { isOpen && renderOptions()}
   </ul>
diff --git a/lib/Selection/tests/Selection-test.js b/lib/Selection/tests/Selection-test.js
index 2c7a68729..cf0eb62fd 100644
--- a/lib/Selection/tests/Selection-test.js
+++ b/lib/Selection/tests/Selection-test.js
@@ -743,7 +743,7 @@ describe('Selection', () => {
     beforeEach(async () => {
       filterSpy.resetHistory();
       await mountWithContext(
-        <AsyncFilter filterSpy={filterSpy}/>
+        <AsyncFilter filterSpy={filterSpy} />
       );
     });
 
@@ -756,7 +756,7 @@ describe('Selection', () => {
         await asyncSelection.filterOptions('tes');
       });
 
-      it ('calls filter function only once (not for each letter)', async () => converge(() => { if (filterSpy.calledTwice) { throw new Error('Selection - onFilter should only be called once.'); }}));
+      it('calls filter function only once (not for each letter)', async () => converge(() => { if (filterSpy.calledTwice) { throw new Error('Selection - onFilter should only be called once.'); } }));
 
       it('displays spinner in optionsList', () => asyncSelectionList().is({ loading: true }));
 

From e5f1b449c6384ce77856e9392a101cec7dee919d Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 25 Oct 2024 09:55:15 -0500
Subject: [PATCH 05/10] STCOM-1373 - Selection - blank options are not
 selectable. (#2374)

* Selection - switch to 'undefined' value in option-rendering conditionals rather than boolean

* log changes
---
 CHANGELOG.md                          |  1 +
 lib/Selection/Selection.js            |  4 ++--
 lib/Selection/stories/BasicUsage.js   |  1 +
 lib/Selection/tests/Selection-test.js | 13 ++++++++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0dab71dc4..0d929b365 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,7 @@
 * `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 * Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
+* `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/Selection/Selection.js b/lib/Selection/Selection.js
index eccfde626..dc16cfacc 100644
--- a/lib/Selection/Selection.js
+++ b/lib/Selection/Selection.js
@@ -44,7 +44,7 @@ const getControlWidth = (control) => {
 const getItemClass = (item, i, props) => {
   const { value } = item;
   const { selectedItem, highlightedIndex, dataOptions } = props;
-  if (!value) {
+  if (value === undefined) {
     return;
   }
 
@@ -260,7 +260,7 @@ const Selection = ({
     const rendered = [];
     for (let i = 0; i < data.length; i++) {
       const item = data[i]
-      if (item.value) {
+      if (item.value !== undefined) {
         const reducedIndex = reconcileReducedIndex(item, reducedListItems);
         rendered.push(
           <li
diff --git a/lib/Selection/stories/BasicUsage.js b/lib/Selection/stories/BasicUsage.js
index 76c503e5e..28a0e7bea 100644
--- a/lib/Selection/stories/BasicUsage.js
+++ b/lib/Selection/stories/BasicUsage.js
@@ -14,6 +14,7 @@ const hugeOptionsList = syncGenerate(3000, 0, () => {
 
 // the dataOptions prop takes an array of objects with 'label' and 'value' keys
 const countriesOptions = [
+  { value: '', label: 'blank' },
   { value: 'AU', label: 'Australia' },
   { value: 'CN', label: 'China' },
   { value: 'DK', label: 'Denmark' },
diff --git a/lib/Selection/tests/Selection-test.js b/lib/Selection/tests/Selection-test.js
index cf0eb62fd..2950c341a 100644
--- a/lib/Selection/tests/Selection-test.js
+++ b/lib/Selection/tests/Selection-test.js
@@ -47,7 +47,8 @@ describe('Selection', () => {
     { value: 'test2', label: 'Option 2' },
     { value: 'sample0', label: 'Sample 0' },
     { value: 'invalid', label: 'Sample 1' },
-    { value: 'sample2', label: 'Sample 2' }
+    { value: 'sample2', label: 'Sample 2' },
+    { value: '', label: '' },
   ];
 
   const groupedOptions = [
@@ -281,6 +282,16 @@ describe('Selection', () => {
       it('focuses the control/trigger', () => {
         selection.has({ focused: true });
       });
+
+      describe('clicking a "blank" option', () => {
+        beforeEach(async () => {
+          await selection.choose('');
+        });
+
+        it('sets control value to ""', () => {
+          selection.has({ value: 'select control' });
+        });
+      });
     });
 
     describe('filtering options', () => {

From 4b06eed17c0cdb774f0009793c723260c81fdce0 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Fri, 25 Oct 2024 14:01:21 -0400
Subject: [PATCH 06/10] bump minor version to 12.3 (#2375)

---
 CHANGELOG.md | 15 ++++++++++-----
 package.json |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d929b365..26097ad1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,15 @@
 # Change history for stripes-components
 
-## 12.2.0 IN PROGRESS
+## 12.3.0 IN PROGRESS
+
+* `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
+* Change `Repeatable field` focus behaviour. Refs STCOM-1341.
+* Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
+* `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
+
+## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
+[Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
+
 * Add specific loading props to MCL to pass to Prev/Next pagination row, Refs STCOM-1305
 * Exclude invalid additional currencies. Refs STCOM-1274.
 * Validate ref in `Paneset` before dereferencing it. Refs STCOM-1235.
@@ -53,10 +62,6 @@
 * Use `<Selection>`'s formatter for rendering the selected value within the field and prevent overflow of text. Refs STCOM-1344.
 * Export `<StripesOverlayWrapper>` that will automatically apply the `usePortal` behavior to nested overlay components. Refs STCOM-1353.
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
-* `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
-* Change `Repeatable field` focus behaviour. Refs STCOM-1341.
-* Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
-* `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/package.json b/package.json
index 57b0ef1b2..1a95a141d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-components",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "Component library for building Stripes applications.",
   "license": "Apache-2.0",
   "repository": "folio-org/stripes-components",

From d7e23fb03bfff74713b7ce797bd4d63d29af3f97 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Mon, 28 Oct 2024 18:32:26 -0500
Subject: [PATCH 07/10] STCOM-1372 Use mutationobserver for focus management in
 repeatable field (#2376)

* use mutationobserver for focusmanagement in repeatable field

* cleanup RFContent, mild refactor, check for RF-items addition, deletion, specifically.

* use state to check if the user has interacted with the repeatableField

* add comments for conditionals

* Update CHANGELOG.md
---
 CHANGELOG.md                                  |  1 +
 lib/RepeatableField/RepeatableField.js        | 59 ++++++++++++++++---
 lib/RepeatableField/RepeatableFieldContent.js | 30 +++-------
 3 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26097ad1d..b79d90655 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 * Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
 * `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
+* `<RepeatableField>` - switch to MutationObserver to resolve focus-management issues. Refs STCOM-1372.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
diff --git a/lib/RepeatableField/RepeatableField.js b/lib/RepeatableField/RepeatableField.js
index c3ace1b0b..d44e17af8 100644
--- a/lib/RepeatableField/RepeatableField.js
+++ b/lib/RepeatableField/RepeatableField.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -8,11 +8,9 @@ import Button from '../Button';
 import Headline from '../Headline';
 import EmptyMessage from '../EmptyMessage';
 import IconButton from '../IconButton';
-import { RepeatableFieldContent } from "./RepeatableFieldContent";
+import { RepeatableFieldContent } from './RepeatableFieldContent';
 import css from './RepeatableField.css';
-import { useFocusedIndex } from "./hooks/useFocusedIndex";
-import { useIsElementFocused } from "./hooks/useIsElementFocused";
-
+import { getFirstFocusable } from '../../util/getFocusableElements';
 
 const RepeatableField = ({
   canAdd = true,
@@ -33,9 +31,51 @@ const RepeatableField = ({
   const rootRef = useRef(null);
   const showDeleteBtn = typeof onRemove === 'function';
   const fieldsLength = fields.length;
-  const isSomeChildElementFocused = useIsElementFocused(rootRef);
-  const focusedIndex = useFocusedIndex(fieldsLength);
-  const hasToBeFocused = (index) => isSomeChildElementFocused && focusedIndex === index;
+  const [hasBeenFocused, setHasBeenFocused] = useState(false);
+
+  // use mutation observers to handle focus-management since we only have internal state.
+  useEffect(() => {
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type !== 'childList') return;
+
+        const addedNode = mutation.addedNodes?.[0];
+        const removedNode = mutation.removedNodes?.[0];
+        let rowElem;
+        // Handle added node
+        // we check if the user has interacted with the component before handling this, otherwise focus could be
+        // unwantedly moved when a form is initialized.
+        if (hasBeenFocused) {
+          if (addedNode &&
+            addedNode.nodeType === 1 && // looking for nodeType: element only... not attribute (2) or text (3)
+            addedNode.matches(`.${css.repeatableFieldItem}`)) { // only apply to repeatable field item addition removal
+            rowElem = getFirstFocusable(addedNode);
+            rowElem?.focus();
+          }
+        }
+
+        // Handle removed node
+        if (removedNode &&
+          mutation.previousSibling &&
+          mutation.previousSibling.matches(`.${css.repeatableFieldItem}`)) {
+          rowElem = getFirstFocusable(mutation.previousSibling);
+          rowElem?.focus();
+        }
+      });
+    });
+
+    if (rootRef.current) {
+    // observe for item additions/removals from list.
+      observer.observe(rootRef.current, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasBeenFocused])
 
   return (
     <fieldset
@@ -43,6 +83,8 @@ const RepeatableField = ({
       id={id}
       data-test-repeatable-field
       className={classnames(css.repeatableField, { [css.hasMargin]: hasMargin }, className)}
+      tabIndex="-1"
+      onFocus={() => { setHasBeenFocused(true) }}
     >
       {legend && (
         <Headline
@@ -85,7 +127,6 @@ const RepeatableField = ({
             >
               <RepeatableFieldContent
                 rootRef={rootRef}
-                isFocused={hasToBeFocused(index)}
               >
                 {renderField(field, index, fields)}
               </RepeatableFieldContent>
diff --git a/lib/RepeatableField/RepeatableFieldContent.js b/lib/RepeatableField/RepeatableFieldContent.js
index 854cdb341..edbeae103 100644
--- a/lib/RepeatableField/RepeatableFieldContent.js
+++ b/lib/RepeatableField/RepeatableFieldContent.js
@@ -1,31 +1,17 @@
-import React, { useCallback } from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import { getFirstFocusable } from "../../util/getFocusableElements";
+import css from './RepeatableField.css';
 
-import css from "./RepeatableField.css";
-
-export const RepeatableFieldContent = ({ children, isFocused }) => {
-
-  const callbackRef = useCallback((node) => {
-    if (node && isFocused) {
-      const elem = getFirstFocusable(node, true, true);
-
-      elem?.focus();
-    }
-  }, [isFocused])
-
-  return (
-    <div className={css.repeatableFieldItemContent} ref={callbackRef}>
-      {children}
-    </div>
-  );
-}
+export const RepeatableFieldContent = ({ children }) => (
+  <div className={css.repeatableFieldItemContent}>
+    {children}
+  </div>
+);
 
 RepeatableFieldContent.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.func,
   ]).isRequired,
-  isFocused: PropTypes.bool.isRequired,
 }

From ae911bf535f922cf2eb83489c68856b5155d0656 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Tue, 29 Oct 2024 11:07:25 -0400
Subject: [PATCH 08/10] STCOM-1354 add Kosovo to country list (#2377)

Add Kosovo to the list of countries and translations. Codes pulled from
https://en.wikipedia.org/wiki/Country_codes:_J%E2%80%93K#_Kosovo.

Refs STCOM-1354

Co-authored-by: John Coburn <jcoburn@ebsco.com>
---
 CHANGELOG.md                            | 1 +
 translations/stripes-components/en.json | 1 +
 util/countries.js                       | 1 +
 3 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b79d90655..ec01f8de6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 * Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
 * `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
+* Include Kosovo in the countries list. Refs STCOM-1354.
 * `<RepeatableField>` - switch to MutationObserver to resolve focus-management issues. Refs STCOM-1372.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
diff --git a/translations/stripes-components/en.json b/translations/stripes-components/en.json
index b4b167642..f17fbb612 100644
--- a/translations/stripes-components/en.json
+++ b/translations/stripes-components/en.json
@@ -247,6 +247,7 @@
   "countries.KE": "Kenya",
   "countries.KI": "Kiribati",
   "countries.KR": "Korea",
+  "countries.XK": "Kosovo",
   "countries.KW": "Kuwait",
   "countries.KG": "Kyrgyzstan",
   "countries.LA": "Lao People\\'s Democratic Republic",
diff --git a/util/countries.js b/util/countries.js
index 5552faa22..2830d8a9f 100644
--- a/util/countries.js
+++ b/util/countries.js
@@ -242,6 +242,7 @@ const countries = [
   { alpha2: 'VN', alpha3: 'VNM', numeric: '704' },
   { alpha2: 'VI', alpha3: 'VIR', numeric: '850' },
   { alpha2: 'WF', alpha3: 'WLF', numeric: '876' },
+  { alpha2: 'XK', alpha3: 'XXK', numeric: '926' },
   { alpha2: 'EH', alpha3: 'ESH', numeric: '732' },
   { alpha2: 'YE', alpha3: 'YEM', numeric: '887' },
   { alpha2: 'ZM', alpha3: 'ZMB', numeric: '894' },

From 70b960596ae1db7e58bdc6d3d0be2fe7b0696cb7 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Wed, 30 Oct 2024 16:51:04 -0400
Subject: [PATCH 09/10] STCOM-1343 bump stripes-react-hotkeys for compatibility
 (#2380)

Bump `stripes-react-hotkeys` to `v3.2.1` for compatibility with the
changes it made in STCOM-1285 to maintain compatibility.

Refs STCOM-1343
---
 CHANGELOG.md | 1 +
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec01f8de6..76c528c33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
 * Include Kosovo in the countries list. Refs STCOM-1354.
 * `<RepeatableField>` - switch to MutationObserver to resolve focus-management issues. Refs STCOM-1372.
+* Bump `stripes-react-hotkeys` to `v3.2.0` for compatibility with `findDOMNode()` changes. STCOM-1343.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
diff --git a/package.json b/package.json
index 1a95a141d..c8fa760a5 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
-    "@folio/stripes-react-hotkeys": "^3.1.0",
+    "@folio/stripes-react-hotkeys": "^3.2.1",
     "classnames": "^2.2.5",
     "currency-codes": "^2.1.0",
     "dayjs": "^1.11.10",
diff --git a/yarn.lock b/yarn.lock
index 91335fa1d..c4f9ceb79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2325,10 +2325,10 @@
     webpack-bundle-analyzer "^4.4.2"
     yargs "^17.3.1"
 
-"@folio/stripes-react-hotkeys@^3.1.0":
-  version "3.1.10990000000033"
-  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-react-hotkeys/-/stripes-react-hotkeys-3.1.10990000000033.tgz#ca5e58a89cf9dbd1d9b5c1b7e5daf9c635289dc0"
-  integrity sha512-IyMnHi0WJqdWQaNiNF/O+HtilF/OrIFdC58Ru539SnTFgfE1kMODmCAKKStfNravjGpazZrF7puJTSCP/X5sig==
+"@folio/stripes-react-hotkeys@^3.2.1":
+  version "3.2.10990000000048"
+  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-react-hotkeys/-/stripes-react-hotkeys-3.2.10990000000048.tgz#18b16fffbf9bbc278034308c667aff17a8b52291"
+  integrity sha512-XlYtrDhfxyGT6loiBLSaypld13mO2npsxDkr1JklltyczTU/krRQmmFj659N/Ck1s6sS2eBZc3hMx1WX9DKMQQ==
   dependencies:
     core-js "^3.0.0"
     keyboardjs "~2.5.1"

From 651f68c41bdd5976f35932ef06dd0c27f33fa6f6 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Fri, 1 Nov 2024 15:57:53 -0400
Subject: [PATCH 10/10] STCOM-1379 pin currency-codes to avoid unexpected dupes
 (#2383)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Data that was uniquely keyed up through `v2.1.0` is not so in `v2.2.0`
(there are multiple entries for the currency `Bolívar Soberano`). It is
not clear if the uniqueness property was intentional or incidental.

Since we have tests that directly rely on the data we import, we should
_always_ depend on a specific version in order to avoid this kind of
problem, and so we can choose when to address it instead of being forced
to address it whenever the third-party dependency happens to publish a
new release.

Refs STCOM-1379
---
 CHANGELOG.md                                   |  1 +
 .../tests/CurrencySelect-test.js               | 18 +++++++++++++++++-
 package.json                                   |  2 +-
 yarn.lock                                      |  2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76c528c33..b20fce4e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Include Kosovo in the countries list. Refs STCOM-1354.
 * `<RepeatableField>` - switch to MutationObserver to resolve focus-management issues. Refs STCOM-1372.
 * Bump `stripes-react-hotkeys` to `v3.2.0` for compatibility with `findDOMNode()` changes. STCOM-1343.
+* Pin `currency-codes` to `v2.1.0` to avoid duplicate entries in `v2.2.0`. Refs STCOM-1379.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)
diff --git a/lib/CurrencySelect/tests/CurrencySelect-test.js b/lib/CurrencySelect/tests/CurrencySelect-test.js
index 203d776c2..0c018b237 100644
--- a/lib/CurrencySelect/tests/CurrencySelect-test.js
+++ b/lib/CurrencySelect/tests/CurrencySelect-test.js
@@ -33,10 +33,26 @@ describe('CurrencySelect', () => {
 
   describe('utility functions', () => {
     const CURRENCY_COUNT = 159;
-    it('expects currency maps to contain the same element counts', () => {
+    it('expects currency maps to contain the same element counts (reduce by CODE)', () => {
       expect(Object.keys(currenciesByCode).length).to.equal(CURRENCY_COUNT);
+    });
+
+    // this test fails with currency-codes v2.2.0 which supplies duplicate
+    // entries for Bolívar Soberano. it isn't clear if this is intentional
+    // (and so this map-by-name function should never have been written) or
+    // accidental (names are unique in previous releases).
+    //
+    // if we unpin the dependency from v2.1.0 then we need to remove this function,
+    // a breaking change. leave comments at STCOM-1379.
+    it('expects currency maps to contain the same element counts (reduce by NAME)', () => {
       expect(Object.keys(currenciesByName).length).to.equal(CURRENCY_COUNT);
+    });
+
+    it('expects currency maps to contain the same element counts (reduce by NUMBER)', () => {
       expect(Object.keys(currenciesByNumber).length).to.equal(CURRENCY_COUNT);
+    });
+
+    it('expects currency maps to contain the same element counts', () => {
       expect(currenciesOptions.length).to.equal(CURRENCY_COUNT);
     });
 
diff --git a/package.json b/package.json
index c8fa760a5..a906ceae4 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "@csstools/postcss-global-data": "^2.1.1",
     "@folio/stripes-react-hotkeys": "^3.2.1",
     "classnames": "^2.2.5",
-    "currency-codes": "^2.1.0",
+    "currency-codes": "2.1.0",
     "dayjs": "^1.11.10",
     "downshift": "^9.0.4",
     "flexboxgrid2": "^7.2.0",
diff --git a/yarn.lock b/yarn.lock
index c4f9ceb79..fd869353a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7540,7 +7540,7 @@ ctrlc-windows@^2.1.0:
   resolved "https://registry.yarnpkg.com/ctrlc-windows/-/ctrlc-windows-2.1.0.tgz#f2096a96ac1d03181e0ec808c2c8a67fdc20b300"
   integrity sha512-OrX5KI+K+2NMN91QIhYZdW7VDO2YsSdTZW494pA7Nvw/wBdU2hz+MGP006bR978zOTrG6Q8EIeJvLJmLqc6MsQ==
 
-currency-codes@^2.1.0:
+currency-codes@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/currency-codes/-/currency-codes-2.1.0.tgz#6d84a1b7fec70ecb9ef64e57bf60f4271899044c"
   integrity sha512-aASwFNP8VjZ0y0PWlSW7c9N/isYTLxK6OCbm7aVuQMk7dWO2zgup9KGiFQgeL9OGL5P/ulvCHcjQizmuEeZXtw==