Merge release/v3.1.1 into main branch (#1233)

Author: github-actions[bot]

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "yarn" # See documentation for possible values
+  - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"

.github/workflows/chromatic.yml

@@ -16,6 +16,8 @@ jobs:
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
 
       - name: Setup Node
         uses: actions/setup-node@v4

.github/workflows/gh-pages-deploy.yml

@@ -38,7 +38,7 @@ jobs:
         run: yarn build-storybook
 
       - name: Upload
-        uses: actions/upload-pages-artifact@v4
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "storybook-static"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "dependencies": {
     "@tiptap/core": "^2.3.1",
     "@tiptap/extension-bold": "^2.3.1",

src/Drawer/Drawer.test.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import propTypes from 'prop-types';
 
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -26,6 +25,9 @@ const elements = {
   drawerThreeToggleVisibilityButton: {
     get: () => screen.getByRole('button', { name: /toggle visibility drawerThree/ }),
   },
+  drawerFourToggleVisibilityButton: {
+    get: () => screen.getByRole('button', { name: /toggle visibility drawerFour/ }),
+  },
 };
 
 function SetupDrawerWithChildren(props) {
@@ -40,14 +42,23 @@ function SetupDrawerWithChildren(props) {
   );
 }
 
+interface SetupMultipleDrawersProps {
+  drawerOneVisibleDefault?: boolean
+  drawerTwoVisibleDefault?: boolean,
+  drawerThreeVisibleDefault?: boolean
+  drawerFourVisibleDefault?: boolean,
+}
+
 function SetupMultipleDrawers({
-  drawerOneVisibleDefault,
-  drawerTwoVisibleDefault,
-  drawerThreeVisibleDefault,
-}) {
+  drawerOneVisibleDefault = false,
+  drawerTwoVisibleDefault = false,
+  drawerThreeVisibleDefault = false,
+  drawerFourVisibleDefault = false,
+}: SetupMultipleDrawersProps) {
   const [isDrawerOneVisible, setIsDrawerOneVisible] = useState(drawerOneVisibleDefault);
   const [isDrawerTwoVisible, setIsDrawerTwoVisible] = useState(drawerTwoVisibleDefault);
   const [isDrawerThreeVisible, setIsDrawerThreeVisible] = useState(drawerThreeVisibleDefault);
+  const [isDrawerFourVisible, setIsDrawerFourVisible] = useState(drawerFourVisibleDefault);
 
   return (
     <div>
@@ -72,6 +83,13 @@ function SetupMultipleDrawers({
         toggle visibility drawerThree
       </button>
 
+      <button
+        type="button"
+        onClick={() => setIsDrawerFourVisible((prevState) => !prevState)}
+      >
+        toggle visibility drawerFour
+      </button>
+
       <Drawer
         visible={isDrawerOneVisible}
         onRequestClose={() => setIsDrawerOneVisible(false)}
@@ -90,22 +108,20 @@ function SetupMultipleDrawers({
       >
         <div>childrenDrawerThree</div>
       </Drawer>
+
+      {/* Testing what happens when drawer unmounts */}
+      {isDrawerFourVisible && (
+        <Drawer
+          visible={isDrawerFourVisible}
+          onRequestClose={() => setIsDrawerThreeVisible(false)}
+        >
+          <div>childrenDrawerFour</div>
+        </Drawer>
+      )}
     </div>
   );
 }
 
-SetupMultipleDrawers.propTypes = {
-  drawerOneVisibleDefault: propTypes.bool,
-  drawerThreeVisibleDefault: propTypes.bool,
-  drawerTwoVisibleDefault: propTypes.bool,
-};
-
-SetupMultipleDrawers.defaultProps = {
-  drawerOneVisibleDefault: false,
-  drawerTwoVisibleDefault: false,
-  drawerThreeVisibleDefault: false,
-};
-
 describe('Drawer', () => {
   beforeEach(() => {
     // Need to manually clean classList on body since jsdom instance can stay
@@ -270,5 +286,19 @@ describe('Drawer', () => {
         });
       });
     });
+
+    describe('when user unmounts the drawer that is open (e.g navigation to a different page)', () => {
+      it('body tag does not have Drawer--open', async () => {
+        const { container } = render(<SetupMultipleDrawers drawerFourVisibleDefault />);
+
+        userEvent.click(elements.drawerFourToggleVisibilityButton.get());
+
+        const body = container.closest('body');
+
+        await waitFor(() => {
+          expect(body?.classList).not.toContain('Drawer--open');
+        });
+      });
+    });
   });
 });

src/Drawer/Drawer.tsx

@@ -95,6 +95,16 @@ const Drawer = ({
     if (hasBackgroundOverlay) {
       disableBackgroundScrolling();
     }
+
+    return () => {
+      // Cleanup function to remove the class and reset the ref.
+      // Covers the edge where you navigate to a new page
+      // from drawer via a link
+      if (hasBackgroundOverlay) {
+        document.body.classList.remove('Drawer--open');
+        isCurrentlyOpen.current = false;
+      }
+    };
   }, [hasBackgroundOverlay, visible]);
 
   return (

src/Select/AsyncSelect.jsx

@@ -9,7 +9,9 @@ import { defaultStyles, defaultTheme, SELECT_SIZES } from './styles';
 const AsyncSelect = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  cacheOptions,
   className,
+  closeMenuOnSelect,
   components,
   defaultOptions,
   defaultValue,
@@ -26,7 +28,6 @@ const AsyncSelect = ({
   modal,
   name,
   noOptionsMessage,
-  placeholder,
   size,
   value,
 
@@ -37,8 +38,10 @@ const AsyncSelect = ({
     {...props}
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
+    cacheOptions={cacheOptions}
     className={`${className || ''} AsyncSelect`}
     classNamePrefix="Select"
+    closeMenuOnSelect={closeMenuOnSelect}
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}
@@ -54,7 +57,7 @@ const AsyncSelect = ({
     menuPortalTarget={modal ? document.body : undefined}
     name={name}
     noOptionsMessage={noOptionsMessage}
-    placeholder={placeholder}
+    placeholder="Search"
     shouldShowValue
     styles={{
       ...defaultStyles({ menuWidth, size }),
@@ -75,7 +78,9 @@ const AsyncSelect = ({
 AsyncSelect.propTypes = {
   'aria-label': propTypes.string,
   'aria-labelledby': propTypes.string,
+  cacheOptions: propTypes.bool,
   className: propTypes.string,
+  closeMenuOnSelect: propTypes.bool,
   components: propTypes.any,
   defaultOptions: propTypes.oneOfType([propTypes.bool, propTypes.array]),
   defaultValue: propTypes.object,
@@ -106,7 +111,9 @@ AsyncSelect.propTypes = {
 AsyncSelect.defaultProps = {
   'aria-label': undefined,
   'aria-labelledby': undefined,
+  cacheOptions: undefined,
   className: undefined,
+  closeMenuOnSelect: undefined,
   components: undefined,
   defaultOptions: false,
   defaultValue: undefined,
@@ -124,7 +131,6 @@ AsyncSelect.defaultProps = {
   placeholder: undefined,
   size: SELECT_SIZES.SMALL,
   value: undefined,
-
   onChange: undefined,
 };
 

src/Select/AsyncSelect.stories.jsx

@@ -7,6 +7,8 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'src/Modal';
 
+import Option from './Option';
+
 export default {
   title: 'Components/Selects/Async',
   component: AsyncSelect,
@@ -90,3 +92,23 @@ export const InModal = () => {
     </>
   );
 };
+
+export const MultiSelect = () => (
+  <FormGroup
+    label="Async MultiSelect"
+    labelHtmlFor="async-multiselect"
+  >
+    <AsyncSelect
+      cacheOptions
+      closeMenuOnSelect={false}
+      components={{ Option }}
+      getOptionLabel={({ label }) => label}
+      getOptionValue={({ value }) => value}
+      inputId="async-multiselect"
+      isClearable
+      isMulti
+      loadOptions={loadOptions}
+      noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'}
+    />
+  </FormGroup>
+);

src/Select/Option.jsx

@@ -16,14 +16,15 @@ import './Option.scss';
 const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
-      <label>{props.label}</label>
       <CheckboxButton
         checked={props.isSelected}
+        className="Checkbox"
         id={props.label}
         indeterminate={indeterminate}
         ref={ref}
         onChange={() => null}
       />
+      <label>{props.label}</label>
     </div>
   </components.Option>
   ));

src/Select/Option.scss

@@ -1,5 +1,8 @@
 .Option {
-  display: flex; 
-  justify-content: space-between; 
+  display: flex;
   align-items: center;
+
+  .Checkbox {
+    margin-right: var(--synth-spacing-3);
+  }
 }