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

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

@@ -23,12 +23,13 @@ var _button, _button2, _input, _a, _a2, _button3, _button4, _span, _span2, _span
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { Focusable } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Focusable />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,18 +43,25 @@ describe('<Focusable />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', async () => {
-    render(/*#__PURE__*/React.createElement(Focusable, null, () => _button || (_button = /*#__PURE__*/React.createElement("button", null, "hello world"))));
+    render(_jsx(Focusable, {
+      children: () => _button || (_button = _jsx("button", {
+        children: "hello world"
+      }))
+    }));
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('hello world');
   });
   it('should call children function with focused when element receives focus', async () => {
     const renderSpy = vi.fn();
-    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
-      renderSpy(args);
-      return _button2 || (_button2 = /*#__PURE__*/React.createElement("button", {
-        type: "button"
-      }, "foo"));
+    render(_jsx(Focusable, {
+      children: args => {
+        renderSpy(args);
+        return _button2 || (_button2 = _jsx("button", {
+          type: "button",
+          children: "foo"
+        }));
+      }
     }));
     const focusable = screen.getByRole('button');
     await waitFor(() => {
@@ -83,12 +91,15 @@ describe('<Focusable />', () => {
   it('should handle conditionally rendered focus elements', async () => {
     const renderSpy = vi.fn(({
       focused
-    }) => /*#__PURE__*/React.createElement("div", null, focused ? _input || (_input = /*#__PURE__*/React.createElement("input", {
-      type: "text"
-    })) : _a || (_a = /*#__PURE__*/React.createElement("a", {
-      href: "http://focus.net"
-    }, "Click"))));
-    render(/*#__PURE__*/React.createElement(Focusable, {
+    }) => _jsx("div", {
+      children: focused ? _input || (_input = _jsx("input", {
+        type: "text"
+      })) : _a || (_a = _jsx("a", {
+        href: "http://focus.net",
+        children: "Click"
+      }))
+    }));
+    render(_jsx(Focusable, {
       render: renderSpy
     }));
     const firstFocusable = screen.getByText('Click');
@@ -119,10 +130,11 @@ describe('<Focusable />', () => {
     });
   });
   it('should maintain focus when the focus element changes', async () => {
-    const renderSpy = vi.fn(() => _a2 || (_a2 = /*#__PURE__*/React.createElement("a", {
-      href: "http://focus.net"
-    }, "Click")));
-    const _render = render(/*#__PURE__*/React.createElement(Focusable, {
+    const renderSpy = vi.fn(() => _a2 || (_a2 = _jsx("a", {
+      href: "http://focus.net",
+      children: "Click"
+    })));
+    const _render = render(_jsx(Focusable, {
         render: renderSpy
       })),
       rerender = _render.rerender;
@@ -137,8 +149,10 @@ describe('<Focusable />', () => {
     });
 
     // Set prop: render
-    const nextRenderSpy = vi.fn(() => _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "Click")));
-    rerender(/*#__PURE__*/React.createElement(Focusable, {
+    const nextRenderSpy = vi.fn(() => _button3 || (_button3 = _jsx("button", {
+      children: "Click"
+    })));
+    rerender(_jsx(Focusable, {
       render: nextRenderSpy
     }));
     const nextFocusable = screen.getByText('Click');
@@ -154,9 +168,13 @@ describe('<Focusable />', () => {
   });
   it('should update the focus element correctly', async () => {
     const renderSpy = vi.fn();
-    const _render2 = render(/*#__PURE__*/React.createElement(Focusable, null, args => {
-        renderSpy(args);
-        return _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "foo"));
+    const _render2 = render(_jsx(Focusable, {
+        children: args => {
+          renderSpy(args);
+          return _button4 || (_button4 = _jsx("button", {
+            children: "foo"
+          }));
+        }
       })),
       rerender = _render2.rerender;
     const firstButton = screen.getByText('foo');
@@ -172,9 +190,15 @@ describe('<Focusable />', () => {
     });
 
     // Set child
-    rerender(/*#__PURE__*/React.createElement(Focusable, null, args => {
-      renderSpy(args);
-      return _span || (_span = /*#__PURE__*/React.createElement("span", null, "some content text", /*#__PURE__*/React.createElement("button", null, "bar")));
+    rerender(_jsx(Focusable, {
+      children: args => {
+        renderSpy(args);
+        return _span || (_span = _jsxs("span", {
+          children: ["some content text", _jsx("button", {
+            children: "bar"
+          })]
+        }));
+      }
     }));
     const secondButton = screen.getByText('bar');
     await secondButton.focus();
@@ -184,24 +208,50 @@ describe('<Focusable />', () => {
     });
   });
   it('should warn when there is more than one focusable descendant', async () => {
-    render(/*#__PURE__*/React.createElement(Focusable, null, () => {
-      return _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "foo"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "bar"))));
+    render(_jsx(Focusable, {
+      children: () => {
+        return _span2 || (_span2 = _jsxs("span", {
+          children: [_jsx("button", {
+            children: "foo"
+          }), _jsx("span", {
+            children: _jsx("button", {
+              children: "bar"
+            })
+          })]
+        }));
+      }
     }));
     const expectedWarningMessage = 'Warning: [Focusable] Exactly one focusable child is required (2 found).';
     expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
   });
   it('should warn when there are no focusable descendants', async () => {
-    render(/*#__PURE__*/React.createElement(Focusable, null, () => {
-      return _span3 || (_span3 = /*#__PURE__*/React.createElement("span", null, "hello!"));
+    render(_jsx(Focusable, {
+      children: () => {
+        return _span3 || (_span3 = _jsx("span", {
+          children: "hello!"
+        }));
+      }
     }));
     const expectedWarningMessage = 'Warning: [Focusable] Exactly one focusable child is required (0 found).';
     expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
   });
   it('should attach event listener correctly even when the focusable element is not the root', async () => {
     const renderSpy = vi.fn();
-    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
-      renderSpy(args);
-      return _span4 || (_span4 = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("h1", null, "hello world"), /*#__PURE__*/React.createElement("p", null, "some content"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "foo"))));
+    render(_jsx(Focusable, {
+      children: args => {
+        renderSpy(args);
+        return _span4 || (_span4 = _jsxs("span", {
+          children: [_jsx("h1", {
+            children: "hello world"
+          }), _jsx("p", {
+            children: "some content"
+          }), _jsx("span", {
+            children: _jsx("button", {
+              children: "foo"
+            })
+          })]
+        }));
+      }
     }));
     const button = screen.getByRole('button');
     await waitFor(() => {
@@ -216,11 +266,14 @@ describe('<Focusable />', () => {
   });
   it('should provide a focus method', async () => {
     let focusable;
-    render(/*#__PURE__*/React.createElement(Focusable, {
+    render(_jsx(Focusable, {
       ref: el => {
         focusable = el;
-      }
-    }, () => _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "hello world"))));
+      },
+      children: () => _button5 || (_button5 = _jsx("button", {
+        children: "hello world"
+      }))
+    }));
     await focusable.focus();
     const button = screen.getByText('hello world');
     expect(button).toHaveFocus();
@@ -228,9 +281,13 @@ describe('<Focusable />', () => {
   it('should provide a focused getter', async () => {
     var _focusableInstance;
     let focusableInstance;
-    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
-      focusableInstance = args;
-      return _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "Click me"));
+    render(_jsx(Focusable, {
+      children: args => {
+        focusableInstance = args;
+        return _button6 || (_button6 = _jsx("button", {
+          children: "Click me"
+        }));
+      }
     }));
     const button = screen.getByText('Click me');
     expect((_focusableInstance = focusableInstance) === null || _focusableInstance === void 0 ? void 0 : _focusableInstance.focused).toBe(false);
@@ -246,21 +303,23 @@ describe('<Focusable />', () => {
     class TestComponent extends Component {
       render() {
         const changeValue = this.props.changeValue;
-        return /*#__PURE__*/React.createElement(Focusable, null, ({
-          focusVisible
-        }) => {
-          return /*#__PURE__*/React.createElement("input", {
-            readOnly: true,
-            ref: el => {
-              inputRef = el;
-            },
-            value: `${focusVisible}_${changeValue}`
-          });
+        return _jsx(Focusable, {
+          children: ({
+            focusVisible
+          }) => {
+            return _jsx("input", {
+              readOnly: true,
+              ref: el => {
+                inputRef = el;
+              },
+              value: `${focusVisible}_${changeValue}`
+            });
+          }
         });
       }
     }
     TestComponent.displayName = "TestComponent";
-    const _render3 = render(/*#__PURE__*/React.createElement(TestComponent, {
+    const _render3 = render(_jsx(TestComponent, {
         changeValue: "A"
       })),
       rerender = _render3.rerender,
@@ -271,7 +330,7 @@ describe('<Focusable />', () => {
     });
 
     // Set Prop: changeValue
-    rerender(/*#__PURE__*/React.createElement(TestComponent, {
+    rerender(_jsx(TestComponent, {
       changeValue: "B"
     }));
     await inputRef.focus();
@@ -295,40 +354,45 @@ describe('<Focusable />', () => {
         const _this$state = this.state,
           checked = _this$state.checked,
           disabled = _this$state.disabled;
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Focusable, {
-          ref: el => {
-            focusableRef = el;
-          }
-        }, () => {
-          return /*#__PURE__*/React.createElement("label", {
+        return _jsxs("div", {
+          children: [_jsx(Focusable, {
             ref: el => {
-              labelRef = el;
+              focusableRef = el;
             },
-            "aria-label": 'test-label'
-          }, /*#__PURE__*/React.createElement("input", {
-            checked: checked,
-            disabled: disabled,
-            onChange: () => {
+            children: () => {
+              return _jsx("label", {
+                ref: el => {
+                  labelRef = el;
+                },
+                "aria-label": 'test-label',
+                children: _jsx("input", {
+                  checked: checked,
+                  disabled: disabled,
+                  onChange: () => {
+                    this.setState({
+                      checked: true
+                    });
+                  },
+                  type: "checkbox"
+                })
+              });
+            }
+          }), _jsx("button", {
+            onClick: () => {
               this.setState({
-                checked: true
+                disabled: true
               });
             },
-            type: "checkbox"
-          }));
-        }), /*#__PURE__*/React.createElement("button", {
-          onClick: () => {
-            this.setState({
-              disabled: true
-            });
-          },
-          ref: el => {
-            buttonRef = el;
-          }
-        }, "hello world"));
+            ref: el => {
+              buttonRef = el;
+            },
+            children: "hello world"
+          })]
+        });
       }
     }
     TestComponent.displayName = "TestComponent";
-    const _render4 = render(/*#__PURE__*/React.createElement(TestComponent, null)),
+    const _render4 = render(_jsx(TestComponent, {})),
       container = _render4.container;
     const input = container.querySelector('input');
     await waitFor(() => {