From 14df4586e43887c189118219da23e93ef9fd6c44 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 8 Nov 2024 14:46:47 -0600
Subject: [PATCH 1/2] STCOM-1332 Selection should occupy the full width of its
 container. (#2385)

* wrap Selection in full-width div

* log changes

* add position: relative to SelectionOuter CSS class
---
 CHANGELOG.md                | 1 +
 lib/Selection/Selection.css | 5 +++++
 lib/Selection/Selection.js  | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b20fce4e0..a3dbe424a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * `<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.
+* Wrap `<Selection>` in full-width div. Refs STCOM-1332.
 
 ## [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/Selection/Selection.css b/lib/Selection/Selection.css
index 8b851b13c..25f699fa1 100644
--- a/lib/Selection/Selection.css
+++ b/lib/Selection/Selection.css
@@ -1,5 +1,10 @@
 
 
+.selectionOuter {
+  width: 100%;
+  position: relative;
+}
+
 .selectionRoot {
   position: relative;
 }
diff --git a/lib/Selection/Selection.js b/lib/Selection/Selection.js
index dc16cfacc..373152ef5 100644
--- a/lib/Selection/Selection.js
+++ b/lib/Selection/Selection.js
@@ -424,7 +424,7 @@ const Selection = ({
   /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
-    <div>
+    <div className={css.selectionOuter}>
       {label && (
         <Label
           {...getLabelProps({

From 2f43c1c06a326e0458756b643d79edcf7210e25f Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Wed, 13 Nov 2024 08:25:26 -0600
Subject: [PATCH 2/2] assign modal escape key handler to modal element rather
 than document (#2389)

---
 CHANGELOG.md                 | 1 +
 lib/Modal/WrappingElement.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3dbe424a..63bf14b5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * 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.
 * Wrap `<Selection>` in full-width div. Refs STCOM-1332.
+* Assign `<Modal>`'s exit key handler to Modal's element rather than `document`. refs STCOM-1382.
 
 ## [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/Modal/WrappingElement.js b/lib/Modal/WrappingElement.js
index a9b436b99..535e9e9e1 100644
--- a/lib/Modal/WrappingElement.js
+++ b/lib/Modal/WrappingElement.js
@@ -123,7 +123,7 @@ const WrappingElement = forwardRef(({
         focusTrapRef.current.activate();
         ATTrap.apply();
       }
-      keyDownHandlerRef.current = listen(document, 'keydown', keyDownHandler);
+      keyDownHandlerRef.current = listen(modalElementRef.current, 'keydown', keyDownHandler);
       focusHandlerRef.current = listen(document, 'focus', enforceFocusTimeout, true);
       onOpen();
     }