@instructure/ui-dialog 8.46.2-snapshot-7 → 8.46.2-snapshot-9

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.46.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-7) (2023-10-20)
+## [8.46.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-9) (2023-10-24)
 
 **Note:** Version bump only for package @instructure/ui-dialog
 

package/es/Dialog/__new-tests__/Dialog.test.js

@@ -0,0 +1,479 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _button, _div, _div2, _DialogExample, _DialogExample2, _DialogExample3, _div3, _div4, _DialogExample4, _DialogExample5, _DialogExample6, _DialogExample7, _DialogExample8;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Dialog } from '../index';
+const TEST_TEXT = 'test-text';
+const TEST_LABEL = 'test-label';
+const renderDialog = props => {
+  const allProps = {
+    open: true,
+    label: TEST_LABEL,
+    ...props
+  };
+  return render( /*#__PURE__*/React.createElement(Dialog, allProps, _button || (_button = /*#__PURE__*/React.createElement("button", null, TEST_TEXT))));
+};
+const DialogExample = /*#__PURE__*/forwardRef((props, ref) => {
+  const inputRef = useRef(null);
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (!props.open) {
+      inputRef.current.focus();
+    }
+  }, [props.open]);
+  useImperativeHandle(ref, () => ({
+    focusDialog: () => dialogRef.current.focus(),
+    blurDialog: () => dialogRef.current.blur()
+  }));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    "data-testid": "input-trigger",
+    type: "text",
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    shouldContainFocus: true,
+    shouldReturnFocus: true,
+    label: TEST_LABEL
+  }, props, {
+    ref: dialogRef
+  }), props.children || _div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    "data-testid": "input-one"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    "data-testid": "input-two"
+  })))));
+});
+DialogExample.displayName = 'DialogExample';
+const NestedDialogExample = props => {
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    nestedOpen = _useState2[0],
+    setNestedOpen = _useState2[1];
+  const handleTriggerClick = () => setNestedOpen(true);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    open: true,
+    shouldReturnFocus: true,
+    label: TEST_LABEL
+  }, props), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    onClick: handleTriggerClick,
+    type: "text",
+    "data-testid": "nested-input-one"
+  }), /*#__PURE__*/React.createElement("input", {
+    onClick: handleTriggerClick,
+    type: "text",
+    "data-testid": "nested-input-two"
+  })), /*#__PURE__*/React.createElement(Dialog, {
+    open: nestedOpen,
+    label: TEST_LABEL
+  }, TEST_TEXT))));
+};
+NestedDialogExample.displayName = 'NestedDialogExample';
+describe('<Dialog />', () => {
+  it('should render nothing when closed', () => {
+    const _renderDialog = renderDialog({
+        open: false
+      }),
+      container = _renderDialog.container;
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+  it('should render children when open', async () => {
+    const _renderDialog2 = renderDialog({
+        open: true
+      }),
+      container = _renderDialog2.container;
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveTextContent(TEST_TEXT);
+  });
+  it('should apply the a11y attributes', () => {
+    const _renderDialog3 = renderDialog({
+        label: TEST_LABEL
+      }),
+      getByRole = _renderDialog3.getByRole,
+      getByLabelText = _renderDialog3.getByLabelText;
+    const dialog = getByRole('dialog');
+    const label = getByLabelText(TEST_LABEL);
+    expect(dialog).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  it('should apply the role attributes, if explicitly passed', () => {
+    const _renderDialog4 = renderDialog({
+        label: TEST_LABEL,
+        role: 'region'
+      }),
+      getByRole = _renderDialog4.getByRole,
+      getByLabelText = _renderDialog4.getByLabelText;
+    const regionRole = getByRole('region');
+    const label = getByLabelText(TEST_LABEL);
+    expect(regionRole).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  it('should call onDismiss prop when Esc key pressed', async () => {
+    const onDismiss = jest.fn();
+    const _renderDialog5 = renderDialog({
+        onDismiss
+      }),
+      getByRole = _renderDialog5.getByRole;
+    const dialog = getByRole('dialog');
+    await waitFor(() => {
+      fireEvent.keyUp(dialog, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27
+      });
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  it('should call onDismiss prop when the document is clicked', async () => {
+    const onDismiss = jest.fn();
+    renderDialog({
+      onDismiss,
+      shouldCloseOnDocumentClick: true
+    });
+    await waitFor(() => {
+      fireEvent.click(document);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  describe('managed focus', () => {
+    it('should provide focus method', async () => {
+      const _render = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogExample, {
+          open: true,
+          contentElement: () => getByTestId('non-tabbable')
+        }, TEST_TEXT), _div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await waitFor(() => {
+        userEvent.tab();
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should warn when trying to focus or blur a closed dialog', () => {
+      const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+      let ref;
+      render( /*#__PURE__*/React.createElement(DialogExample, {
+        open: false,
+        ref: el => ref = el
+      }));
+      ref.focusDialog();
+      expect(consoleError.mock.calls[0][0]).toBe("Warning: [Dialog] Can't focus a Dialog that isn't open.");
+      ref.blurDialog();
+      expect(consoleError.mock.calls[1][0]).toBe("Warning: [Dialog] Can't blur a Dialog that isn't open.");
+      consoleError.mockRestore();
+    });
+    it('should focus the first tabbable element by default', async () => {
+      const _render2 = render(_DialogExample || (_DialogExample = /*#__PURE__*/React.createElement(DialogExample, {
+          open: true
+        }))),
+        getByTestId = _render2.getByTestId;
+      const inputOne = getByTestId('input-one');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(inputOne);
+      });
+    });
+    it('should focus the first tabbable element when open prop becomes true', async () => {
+      const _render3 = render(_DialogExample2 || (_DialogExample2 = /*#__PURE__*/React.createElement(DialogExample, {
+          open: false
+        }))),
+        rerender = _render3.rerender,
+        getByTestId = _render3.getByTestId;
+      const inputTrigger = getByTestId('input-trigger');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(inputTrigger);
+      });
+      rerender(_DialogExample3 || (_DialogExample3 = /*#__PURE__*/React.createElement(DialogExample, {
+        open: true
+      })));
+      const inputOne = getByTestId('input-one');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(inputOne);
+      });
+    });
+    it('should take a prop for finding default focus', async () => {
+      const _render4 = render( /*#__PURE__*/React.createElement(DialogExample, {
+          open: true,
+          defaultFocusElement: () => getByTestId('input-two')
+        })),
+        getByTestId = _render4.getByTestId;
+      const inputTwo = getByTestId('input-two');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(inputTwo);
+      });
+    });
+    it('should still focus the defaultFocusElement when it is focusable but not tabbable', async () => {
+      const _render5 = render( /*#__PURE__*/React.createElement(DialogExample, {
+          open: true,
+          defaultFocusElement: () => getByTestId('non-tabbable')
+        }, _div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render5.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should focus the contentElement by default if focusable and no defaultFocusElement is provided', async () => {
+      const _render6 = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogExample, {
+          open: true,
+          contentElement: () => getByTestId('non-tabbable')
+        }, TEST_TEXT), _div4 || (_div4 = /*#__PURE__*/React.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render6.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await waitFor(() => {
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should focus the document body if there is no defaultFocusElement, tabbable elements, or focusable contentElement', async () => {
+      const _render7 = render(_DialogExample4 || (_DialogExample4 = /*#__PURE__*/React.createElement(DialogExample, {
+          open: false
+        }, TEST_TEXT))),
+        rerender = _render7.rerender,
+        getByTestId = _render7.getByTestId;
+      const inputTrigger = getByTestId('input-trigger');
+      inputTrigger.focus();
+      rerender(_DialogExample5 || (_DialogExample5 = /*#__PURE__*/React.createElement(DialogExample, {
+        open: true
+      }, TEST_TEXT)));
+      await waitFor(() => {
+        expect(document.activeElement).toBe(document.body);
+      });
+    });
+    it('should return focus', async () => {
+      const _render8 = render(_DialogExample6 || (_DialogExample6 = /*#__PURE__*/React.createElement(DialogExample, {
+          open: false
+        }))),
+        rerender = _render8.rerender,
+        getByTestId = _render8.getByTestId;
+      expect(document.activeElement).toBe(getByTestId('input-trigger'));
+      rerender(_DialogExample7 || (_DialogExample7 = /*#__PURE__*/React.createElement(DialogExample, {
+        open: true
+      })));
+      await waitFor(() => {
+        expect(document.activeElement).toBe(getByTestId('input-one'));
+      });
+      rerender(_DialogExample8 || (_DialogExample8 = /*#__PURE__*/React.createElement(DialogExample, {
+        open: false
+      })));
+      await waitFor(() => {
+        expect(document.activeElement).toBe(getByTestId('input-trigger'));
+      });
+    });
+    describe('when focus leaves the first and last tabbable', () => {
+      it(`should NOT call onBlur when shouldContainFocus=true and tab pressing last tabbable`, async () => {
+        const onBlur = jest.fn();
+        const _render9 = render( /*#__PURE__*/React.createElement(DialogExample, {
+            open: true,
+            onBlur: onBlur,
+            shouldContainFocus: true,
+            defaultFocusElement: () => getByTestId('input-two')
+          })),
+          getByTestId = _render9.getByTestId;
+        const inputOne = getByTestId('input-one');
+        const inputTwo = getByTestId('input-two');
+        await waitFor(() => {
+          expect(document.activeElement).toBe(inputTwo);
+        });
+        await waitFor(() => {
+          userEvent.tab();
+          expect(onBlur).not.toHaveBeenCalled();
+          expect(document.activeElement).toBe(inputOne);
+        });
+      });
+      it('should NOT call onBlur when shouldContainFocus=true and Shift+Tab pressing first tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render10 = render( /*#__PURE__*/React.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: true,
+            defaultFocusElement: () => getByTestId('input-one'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render10.getByTestId;
+        const inputOne = getByTestId('input-one');
+        const inputTwo = getByTestId('input-two');
+        await waitFor(() => {
+          expect(document.activeElement).toBe(inputOne);
+          fireEvent.keyDown(inputOne, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9,
+            shiftKey: true
+          });
+          expect(onBlur).not.toHaveBeenCalled();
+          expect(document.activeElement).toBe(inputTwo);
+        });
+      });
+      it('should call onBlur when shouldContainFocus=false and tab pressing last tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render11 = render( /*#__PURE__*/React.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: false,
+            defaultFocusElement: () => getByTestId('input-two'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render11.getByTestId;
+        const inputTwo = getByTestId('input-two');
+        inputTwo.focus();
+        await waitFor(() => {
+          expect(document.activeElement).toBe(inputTwo);
+          fireEvent.keyDown(inputTwo, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9
+          });
+          expect(onBlur).toHaveBeenCalled();
+        });
+      });
+      it('should call onBlur when shouldContainFocus=false and pressing Shift+Tab on the first tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render12 = render( /*#__PURE__*/React.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: false,
+            defaultFocusElement: () => getByTestId('input-one'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render12.getByTestId;
+        const inputOne = getByTestId('input-one');
+        inputOne.focus();
+        await waitFor(() => {
+          expect(document.activeElement).toBe(inputOne);
+          fireEvent.keyDown(inputOne, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9,
+            shiftKey: true
+          });
+          expect(onBlur).toHaveBeenCalled();
+        });
+      });
+      describe('when launching a dialog w/out focusable content from another dialog', () => {
+        it(`should contain focus when last tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render13 = render( /*#__PURE__*/React.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: true,
+              defaultFocusElement: () => getByTestId('nested-input-two')
+            })),
+            getByTestId = _render13.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          const inputTwo = getByTestId('nested-input-two');
+          await waitFor(() => {
+            userEvent.click(inputTwo);
+            expect(document.activeElement).toBe(inputTwo);
+            fireEvent.keyDown(inputTwo, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9
+            });
+            expect(onBlur).not.toHaveBeenCalled();
+            expect(document.activeElement).toBe(inputOne);
+          });
+        });
+        it('should contain focus when first tabbable element triggers dialog w/out focusable content', async () => {
+          const onBlur = jest.fn();
+          const _render14 = render( /*#__PURE__*/React.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: true,
+              defaultFocusElement: () => getByTestId('nested-input-one')
+            })),
+            getByTestId = _render14.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          const inputTwo = getByTestId('nested-input-two');
+          await waitFor(() => {
+            userEvent.click(inputOne);
+            expect(document.activeElement).toBe(inputOne);
+            fireEvent.keyDown(inputOne, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9,
+              shiftKey: true
+            });
+            expect(onBlur).not.toHaveBeenCalled();
+            expect(document.activeElement).toBe(inputTwo);
+          });
+        });
+        it(`should call onBlur when shouldContainFocus=false and last tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render15 = render( /*#__PURE__*/React.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: false,
+              defaultFocusElement: () => getByTestId('nested-input-two')
+            })),
+            getByTestId = _render15.getByTestId;
+          const inputTwo = getByTestId('nested-input-two');
+          await waitFor(() => {
+            userEvent.click(inputTwo);
+            expect(document.activeElement).toBe(inputTwo);
+            fireEvent.keyDown(inputTwo, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9
+            });
+            expect(onBlur).toHaveBeenCalled();
+          });
+        });
+        it(`should call onBlur when shouldContainFocus=false and first tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render16 = render( /*#__PURE__*/React.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: false,
+              defaultFocusElement: () => getByTestId('nested-input-one')
+            })),
+            getByTestId = _render16.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          await waitFor(() => {
+            userEvent.click(inputOne);
+            expect(document.activeElement).toBe(inputOne);
+            fireEvent.keyDown(inputOne, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9,
+              shiftKey: true
+            });
+            expect(onBlur).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+});