Merge branch 'master' into STCOM-1348

CHANGELOG.md

@@ -47,6 +47,8 @@
 * AdvancedSearch - added a wrapping div to ref for a HotKeys ref. Refs STCOM-1343.
 * `<MultiColumnList>` components `<CellMeasurer>` and `<RowMeasurer>` updated to use refs vs `findDOMNode`. Refs STCOM-1343.
 * `<AccordionHeaders>` are wrapped with a div for use as a HotKeys ref. Refs STCOM-1343.
+* Use whole `dataOptions` array for memoization dependency rather that just `length` property. STCOM-1346.
+* Default the scope of `<CommandList>` to `document.body`. Remove internal wrapping div. Refs STCOM-1351.
 * Remove inline styling from `<Modal>` content. Refs STCOM-1348.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)

lib/Commander/CommandList.js

@@ -4,6 +4,7 @@ import { HotKeys } from '../HotKeys';
 
 class CommandList extends Component {
   static propTypes = {
+    attach: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
     children: PropTypes.node,
     commands: PropTypes.arrayOf(
       PropTypes.shape({
@@ -16,11 +17,6 @@ class CommandList extends Component {
     id: PropTypes.string,
   };
 
-  constructor(props) {
-    super(props);
-    this.shortcutRef = createRef(null);
-  }
-
   generateHotKeysProps() {
     const {
       commands
@@ -44,14 +40,13 @@ class CommandList extends Component {
   render() {
     const {
       children,
-      id
+      id,
+      attach
     } = this.props;
 
     return (
-      <HotKeys id={id} {...this.generateHotKeysProps()} attach={this.shortcutRef.current} noWrapper>
-        <div ref={this.shortcutRef}>
+      <HotKeys id={id} {...this.generateHotKeysProps()} attach={attach || document.body} noWrapper>
         {children}
-        </div>
       </HotKeys>
     );
   }

lib/Selection/Selection.js

@@ -161,7 +161,7 @@ const Selection = ({
   // we need to skip over group headings since those can neither be selectable or cursored over.
   const reducedListItems = useMemo(
     () => { return hasGroups ? reduceOptionsRef(options) : options },
-    [options.length, hasGroups]
+    [options, hasGroups]
   )
 
   const {
@@ -281,7 +281,7 @@ const Selection = ({
   const optionsProcessing = false;
   const renderedOptions = useMemo(
     () => renderedOptionsFn(flattenedOptions),
-    [flattenedOptions.length, debouncedFilterValue]
+    [flattenedOptions, debouncedFilterValue]
   );
 
   // It doesn't need to update if *all of the things it uses change...