STCOM-1091 Upgrade Downshift dependency. (#2283)

* upgrade downshift dependency v2 -> v9 XD

* refactor Selection to use downshift. Implement option group feature - STCOM-1278

* assign proper aria-attributes to list items, properly render when no list items are present

* add hook to use provided ref or use an internal ref

* fill out props for Selection migration

* remove only from selection tests

* refactor AutoSugggest. Convert to functional component.

* refactor MultiSelection component to use Downshift hooks.

* clean up tests

* apply aria-labelledby to filter field

* factor out OptionListWrapper component

* lint selection components

* whitespace

* fix option click removal in MultiSelection

* get Selection in line with conventions in MultiSelection

* lint AutoSuggest

* actually return something from getClass in AutoSuggest.

* clean up sonardad's 'intentionality' suggestions

* fix tests for multiSelection - use preventKeyAction in getDropdownProps

* render proper empy list message in Selection

* remove toggle from custom control click handler

* test multiselection onChange handler

* minor lint in OptionSegment, multiselection

* add tests for Selection option groups, indented style...

* add onChange tests for AutoSuggest

* remove only, you goof

* document/test option groups for Selection

* add hook for generating an id or accepting a provided id

* ensure same value is returned in getHookExecutionResult

* fix incorrect aria-labelledby attribute in SelectionList, ensure elements have correct label associations under various labeling scenarios

* Multiselection - fix actions feature

* Selection - fix error message about SelectedItem becoming controlled

* remove unnecessary variable in SelectionOverlay

* fix problem with changing the value for AutoSuggest

* absorb changes from STCOM-1299 into new MultiSelect

* apply isDisabled to items, disabled to filter field

* MultiSelection - clicking the control should open the menu, fix propType on Selection for 'warning'

* skip legacy popover test

* remove renderLoading prop from MultiSelect Option List

* log changes

CHANGELOG.md

@@ -14,6 +14,8 @@
 * Add `dndProvided` prop to the `<MCLRenderer>` to render a placeholder for a draggable row. Refs STCOM-1297.
 * Adjust styles for links within default `<MessageBanner>`. Refs STCOM-1276.
 * Support Optimistic Locking in Tags - allow disable and show loading indicator in MultiSelect. Refs STCOM-1299.
+* Update `downshift` dependency. Refactor `<Selection>`, `<MultiSelection>`, `<AutoSuggest>` to functional components. Refs STCOM-1091.
+* Implement option grouping feature in `<Selection>`. Refs STCOM-1278.
 
 ## [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)

hooks/tests/useProvidedIdOrCreate-test.js

@@ -0,0 +1,25 @@
+import {
+  describe,
+  it,
+} from 'mocha';
+import { expect } from 'chai';
+
+import getHookExecutionResult from '../../tests/helpers/getHookExecutionResult';
+import useProvidedIdOrCreate from '../useProvidedIdOrCreate';
+
+describe('useProvidedIdOrCreate', () => {
+  it('should return the provided id', async () => {
+    const res = await getHookExecutionResult(useProvidedIdOrCreate, 'testId');
+    expect(res).to.equal('testId');
+  });
+
+  it('with no id parameter provided, it should return a generated id', async () => {
+    const res = await getHookExecutionResult(useProvidedIdOrCreate);
+    expect(res).to.not.equal('testId');
+  });
+
+  it('supplies generated id with prefix', async () => {
+    const res = await getHookExecutionResult(useProvidedIdOrCreate, [undefined, 'testPrefix-']);
+    expect(res).to.match(new RegExp('^testPrefix-'));
+  });
+});

hooks/useProvidedIdOrCreate/index.js

@@ -0,0 +1 @@
+export { default } from './useProvidedIdOrCreate';

hooks/useProvidedIdOrCreate/useProvidedIdOrCreate.js

@@ -0,0 +1,8 @@
+import { useId, useRef } from 'react';
+
+const useProvidedIdOrCreate = (id, prefix = '') => {
+  const autoId = `${prefix}${useId()}`;
+  return useRef(id || autoId).current;
+};
+
+export default useProvidedIdOrCreate;

hooks/useProvidedRefOrCreate/index.js

@@ -0,0 +1 @@
+export { default } from './useProvidedRefOrCreate';

hooks/useProvidedRefOrCreate/useProvidedRefOrCreate.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+/** useProvidedRefOrCreate
+ * There are some situations where we only want to create a new ref if one is not provided to a component as a prop.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ */
+export default function useProvidedRefOrCreate(providedRef) {
+  const internalRef = useRef(null);
+  return providedRef ?
+    providedRef :
+    internalRef;
+}

lib/AutoSuggest/AutoSuggest.css

@@ -26,3 +26,20 @@
   display: 'inline-block';
   position: 'relative';
 }
+
+.autoSuggestItem {
+  padding: 1rem;
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  background-color: white;
+  font-weight: normal;
+
+  &.cursor {
+    background-color: var(--color-fill-hover);
+  }
+
+  &.selected {
+    font-weight: bold;
+  }
+}