STCOM-1091 Upgrade Downshift dependency.

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;
+  }
+}