@instructure/ui-dialog 10.16.1-snapshot-0 → 10.16.1-snapshot-1

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.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-dialog
 

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

@@ -24,12 +24,13 @@ var _button, _div, _div2, _DialogExample, _DialogExample2, _DialogExample3, _div
  * SOFTWARE.
  */
 
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import { userEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Dialog } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const TEST_TEXT = 'test-text';
 const TEST_LABEL = 'test-label';
 const renderDialog = props => {
@@ -38,7 +39,12 @@ const renderDialog = props => {
     label: TEST_LABEL,
     ...props
   };
-  return render(/*#__PURE__*/React.createElement(Dialog, allProps, _button || (_button = /*#__PURE__*/React.createElement("button", null, TEST_TEXT))));
+  return render(_jsx(Dialog, {
+    ...allProps,
+    children: _button || (_button = _jsx("button", {
+      children: TEST_TEXT
+    }))
+  }));
 };
 const DialogExample = /*#__PURE__*/forwardRef((props, ref) => {
   const inputRef = useRef(null);
@@ -52,23 +58,28 @@ const DialogExample = /*#__PURE__*/forwardRef((props, 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"
-  })))));
+  return _jsxs("div", {
+    children: [_jsx("input", {
+      "data-testid": "input-trigger",
+      type: "text",
+      ref: inputRef
+    }), _jsx(Dialog, {
+      shouldContainFocus: true,
+      shouldReturnFocus: true,
+      label: TEST_LABEL,
+      ...props,
+      ref: dialogRef,
+      children: props.children || _div || (_div = _jsxs("div", {
+        children: [_jsx("input", {
+          type: "text",
+          "data-testid": "input-one"
+        }), _jsx("input", {
+          type: "text",
+          "data-testid": "input-two"
+        })]
+      }))
+    })]
+  });
 });
 DialogExample.displayName = 'DialogExample';
 const NestedDialogExample = props => {
@@ -77,22 +88,31 @@ const NestedDialogExample = props => {
     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))));
+  return _jsx("div", {
+    children: _jsx(Dialog, {
+      open: true,
+      shouldReturnFocus: true,
+      label: TEST_LABEL,
+      ...props,
+      children: _jsxs("div", {
+        children: [_jsxs("div", {
+          children: [_jsx("input", {
+            onClick: handleTriggerClick,
+            type: "text",
+            "data-testid": "nested-input-one"
+          }), _jsx("input", {
+            onClick: handleTriggerClick,
+            type: "text",
+            "data-testid": "nested-input-two"
+          })]
+        }), _jsx(Dialog, {
+          open: nestedOpen,
+          label: TEST_LABEL,
+          children: TEST_TEXT
+        })]
+      })
+    })
+  });
 };
 NestedDialogExample.displayName = 'NestedDialogExample';
 describe('<Dialog />', () => {
@@ -164,13 +184,17 @@ describe('<Dialog />', () => {
   });
   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)))),
+      const _render = render(_jsxs("div", {
+          children: [_jsx(DialogExample, {
+            open: true,
+            contentElement: () => getByTestId('non-tabbable'),
+            children: TEST_TEXT
+          }), _div2 || (_div2 = _jsx("div", {
+            tabIndex: -1,
+            "data-testid": "non-tabbable",
+            children: TEST_TEXT
+          }))]
+        })),
         getByTestId = _render.getByTestId;
       const nonTabbableContent = getByTestId('non-tabbable');
       userEvent.tab();
@@ -181,7 +205,7 @@ describe('<Dialog />', () => {
     it('should warn when trying to focus or blur a closed dialog', () => {
       const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
       let ref;
-      render(/*#__PURE__*/React.createElement(DialogExample, {
+      render(_jsx(DialogExample, {
         open: false,
         ref: el => ref = el
       }));
@@ -192,7 +216,7 @@ describe('<Dialog />', () => {
       consoleError.mockRestore();
     });
     it('should focus the first tabbable element by default', async () => {
-      const _render2 = render(_DialogExample || (_DialogExample = /*#__PURE__*/React.createElement(DialogExample, {
+      const _render2 = render(_DialogExample || (_DialogExample = _jsx(DialogExample, {
           open: true
         }))),
         getByTestId = _render2.getByTestId;
@@ -202,7 +226,7 @@ describe('<Dialog />', () => {
       });
     });
     it('should focus the first tabbable element when open prop becomes true', async () => {
-      const _render3 = render(_DialogExample2 || (_DialogExample2 = /*#__PURE__*/React.createElement(DialogExample, {
+      const _render3 = render(_DialogExample2 || (_DialogExample2 = _jsx(DialogExample, {
           open: false
         }))),
         rerender = _render3.rerender,
@@ -211,7 +235,7 @@ describe('<Dialog />', () => {
       await waitFor(() => {
         expect(document.activeElement).toBe(inputTrigger);
       });
-      rerender(_DialogExample3 || (_DialogExample3 = /*#__PURE__*/React.createElement(DialogExample, {
+      rerender(_DialogExample3 || (_DialogExample3 = _jsx(DialogExample, {
         open: true
       })));
       const inputOne = getByTestId('input-one');
@@ -220,7 +244,7 @@ describe('<Dialog />', () => {
       });
     });
     it('should take a prop for finding default focus', async () => {
-      const _render4 = render(/*#__PURE__*/React.createElement(DialogExample, {
+      const _render4 = render(_jsx(DialogExample, {
           open: true,
           defaultFocusElement: () => getByTestId('input-two')
         })),
@@ -231,13 +255,15 @@ describe('<Dialog />', () => {
       });
     });
     it('should still focus the defaultFocusElement when it is focusable but not tabbable', async () => {
-      const _render5 = render(/*#__PURE__*/React.createElement(DialogExample, {
+      const _render5 = render(_jsx(DialogExample, {
           open: true,
-          defaultFocusElement: () => getByTestId('non-tabbable')
-        }, _div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
-          tabIndex: -1,
-          "data-testid": "non-tabbable"
-        }, TEST_TEXT)))),
+          defaultFocusElement: () => getByTestId('non-tabbable'),
+          children: _div3 || (_div3 = _jsx("div", {
+            tabIndex: -1,
+            "data-testid": "non-tabbable",
+            children: TEST_TEXT
+          }))
+        })),
         getByTestId = _render5.getByTestId;
       const nonTabbableContent = getByTestId('non-tabbable');
       await waitFor(() => {
@@ -245,13 +271,17 @@ describe('<Dialog />', () => {
       });
     });
     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)))),
+      const _render6 = render(_jsxs("div", {
+          children: [_jsx(DialogExample, {
+            open: true,
+            contentElement: () => getByTestId('non-tabbable'),
+            children: TEST_TEXT
+          }), _div4 || (_div4 = _jsx("div", {
+            tabIndex: -1,
+            "data-testid": "non-tabbable",
+            children: TEST_TEXT
+          }))]
+        })),
         getByTestId = _render6.getByTestId;
       const nonTabbableContent = getByTestId('non-tabbable');
       await waitFor(() => {
@@ -259,34 +289,36 @@ describe('<Dialog />', () => {
       });
     });
     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))),
+      const _render7 = render(_DialogExample4 || (_DialogExample4 = _jsx(DialogExample, {
+          open: false,
+          children: 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)));
+      rerender(_DialogExample5 || (_DialogExample5 = _jsx(DialogExample, {
+        open: true,
+        children: TEST_TEXT
+      })));
       await waitFor(() => {
         expect(document.activeElement).toBe(document.body);
       });
     });
     it('should return focus', async () => {
-      const _render8 = render(_DialogExample6 || (_DialogExample6 = /*#__PURE__*/React.createElement(DialogExample, {
+      const _render8 = render(_DialogExample6 || (_DialogExample6 = _jsx(DialogExample, {
           open: false
         }))),
         rerender = _render8.rerender,
         getByTestId = _render8.getByTestId;
       expect(document.activeElement).toBe(getByTestId('input-trigger'));
-      rerender(_DialogExample7 || (_DialogExample7 = /*#__PURE__*/React.createElement(DialogExample, {
+      rerender(_DialogExample7 || (_DialogExample7 = _jsx(DialogExample, {
         open: true
       })));
       await waitFor(() => {
         expect(document.activeElement).toBe(getByTestId('input-one'));
       });
-      rerender(_DialogExample8 || (_DialogExample8 = /*#__PURE__*/React.createElement(DialogExample, {
+      rerender(_DialogExample8 || (_DialogExample8 = _jsx(DialogExample, {
         open: false
       })));
       await waitFor(() => {
@@ -296,7 +328,7 @@ describe('<Dialog />', () => {
     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 = vi.fn();
-        const _render9 = render(/*#__PURE__*/React.createElement(DialogExample, {
+        const _render9 = render(_jsx(DialogExample, {
             open: true,
             onBlur: onBlur,
             shouldContainFocus: true,
@@ -316,7 +348,7 @@ describe('<Dialog />', () => {
       });
       it('should NOT call onBlur when shouldContainFocus=true and Shift+Tab pressing first tabbable', async () => {
         const onBlur = vi.fn();
-        const _render10 = render(/*#__PURE__*/React.createElement(DialogExample, {
+        const _render10 = render(_jsx(DialogExample, {
             open: true,
             shouldContainFocus: true,
             defaultFocusElement: () => getByTestId('input-one'),
@@ -340,7 +372,7 @@ describe('<Dialog />', () => {
       });
       it('should call onBlur when shouldContainFocus=false and tab pressing last tabbable', async () => {
         const onBlur = vi.fn();
-        const _render11 = render(/*#__PURE__*/React.createElement(DialogExample, {
+        const _render11 = render(_jsx(DialogExample, {
             open: true,
             shouldContainFocus: false,
             defaultFocusElement: () => getByTestId('input-two'),
@@ -362,7 +394,7 @@ describe('<Dialog />', () => {
       });
       it('should call onBlur when shouldContainFocus=false and pressing Shift+Tab on the first tabbable', async () => {
         const onBlur = vi.fn();
-        const _render12 = render(/*#__PURE__*/React.createElement(DialogExample, {
+        const _render12 = render(_jsx(DialogExample, {
             open: true,
             shouldContainFocus: false,
             defaultFocusElement: () => getByTestId('input-one'),

package/es/Dialog/index.js

@@ -25,12 +25,13 @@ const _excluded = ["open", "contentElement"],
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
 import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils';
 import { logError as error } from '@instructure/console';
 import { FocusRegionManager } from '@instructure/ui-a11y-utils';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components/utilities
@@ -130,12 +131,14 @@ class Dialog extends Component {
 
     // In case the HTML role attribute is explicitly passed, use props.role
     const role = this.props.role || (this.props.label ? 'dialog' : void 0);
-    return this.props.open ? /*#__PURE__*/React.createElement(ElementType, Object.assign({}, omitProps(this.props, Dialog.allowedProps), {
+    return this.props.open ? _jsx(ElementType, {
+      ...omitProps(this.props, Dialog.allowedProps),
       role: role,
       "aria-label": this.props.label,
       className: this.props.className,
-      ref: this.getRef
-    }), this.props.children) : null;
+      ref: this.getRef,
+      children: this.props.children
+    }) : null;
   }
 }
 Dialog.displayName = "Dialog";