feat: enable granular control over outside interactions for drawers and modals #1033

cheton · 2025-06-02T08:02:58Z

User description

Use onInteractOutside(event) and closeOnInteractOutside instead of passing a closeOnOutsideClick function.

If closeOnInteractOutside is set to true, you can call event.preventDefault() inside onInteractOutside to prevent the drawer/modal from closing.

Reference:
https://chakra-ui.com/docs/components/dialog

PR Type

Enhancement

Description

• Add closeOnInteractOutside and onInteractOutside props to Drawer and Modal
• Deprecate closeOnOutsideClick in favor of new interaction handling
• Enable granular control over outside interactions with event prevention
• Update documentation and demo pages with new API

Changes walkthrough 📝

Relevant files

Enhancement

7 files

usage.js `Update drawer demo with new interaction props`	+18/-5
usage.js `Update modal demo with new interaction props`	+390/-375
Drawer.js `Add closeOnInteractOutside and onInteractOutside props`	+6/-2
DrawerContent.js `Implement new interaction handling with event prevention`	+14/-7
Modal.js `Add closeOnInteractOutside and onInteractOutside props`	+6/-2
ModalContainer.js `Implement new interaction handling with event prevention`	+9/-3
ModalContent.js `Refine escape key handling logic`	+4/-2

Documentation

3 files

useClickOutside.js `Remove unused shouldAllRefsOutside option from comments`	+0/-1
index.page.mdx `Update drawer API documentation`	+4/-2
index.page.mdx `Update modal API documentation`	+3/-1

Miscellaneous

1 files

styles.js `Add focusVisible style with red border`	+3/-0

Need help?
Type /help how to ... in the comments thread for any questions about Qodo Merge usage.
Check out the documentation for more information.

codesandbox · 2025-06-02T08:03:00Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

codecov · 2025-06-02T08:06:38Z

Bundle Report

Changes will increase total bundle size by 2.42kB (0.09%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@tonic-ui/react-hooks-esm	33.23kB	-205 bytes (-0.61%) ⬇️
@tonic-ui/react-esm	788.7kB	2.62kB (0.33%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @tonic-ui/react-hooks-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`useClickOutside.js`	-205 bytes	3.08kB	-6.25%

Files in useClickOutside.js:

./src/useClickOutside.js → Total Size: 2.94kB

view changes for bundle: @tonic-ui/react-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`drawer/Drawer.js`	974 bytes	6.62kB	17.25% ⚠️
`modal/Modal.js`	973 bytes	6.46kB	17.73% ⚠️
`drawer/DrawerContent.js`	351 bytes	3.85kB	10.03% ⚠️
`modal/ModalContent.js`	65 bytes	3.18kB	2.09%
`modal/ModalContainer.js`	258 bytes	1.77kB	17.06% ⚠️

Files in drawer/Drawer.js:

./src/drawer/Drawer.js → Total Size: 5.77kB

Files in modal/Modal.js:

./src/modal/Modal.js → Total Size: 5.62kB

Files in drawer/DrawerContent.js:

./src/drawer/DrawerContent.js → Total Size: 3.07kB

Files in modal/ModalContent.js:

./src/modal/ModalContent.js → Total Size: 2.42kB

Files in modal/ModalContainer.js:

./src/modal/ModalContainer.js → Total Size: 1.29kB

codesandbox-ci · 2025-06-02T08:06:43Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

codecov · 2025-06-02T08:09:45Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.37%. Comparing base (d80ffa5) to head (4a52ac4).
Report is 1 commits behind head on v2.

Additional details and impacted files

@@            Coverage Diff             @@
##               v2    #1033      +/-   ##
==========================================
+ Coverage   78.32%   78.37%   +0.04%     
==========================================
  Files         420      420              
  Lines        6922     6938      +16     
==========================================
+ Hits         5422     5438      +16     
  Misses       1500     1500

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

trendmicro-frontend-bot · 2025-06-02T08:10:34Z

Tonic UI Demo

On 2025-06-29 13:12:12 +0000, PR #1033 (4a52ac4) was successfully deployed. You can view it at the following link:
https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-1033/

changeset-bot · 2025-06-14T01:48:51Z

🦋 Changeset detected

Latest commit: 4a52ac4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tonic-ui/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codiumai-pr-agent-free · 2025-06-14T01:54:55Z

CI Feedback 🧐

(Feedback updated until commit `a53b1e0`)

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: build
Failed stage: Build & Test [❌]
Failed test name: src/textarea/tests/Textarea.test.js
Failure summary: The action failed because a snapshot test in the Textarea component failed. Specifically, in the file `src/textarea/tests/Textarea.test.js` at line 24, the `toMatchSnapshot()` assertion failed. The test expected the rendered Textarea component to match a previously saved snapshot, but the current rendering produced different output.
Relevant error logs: 1: ##[group]Operating System 2: Ubuntu ... 631: �[93m➤�[39m YN0002: │ �[38;5;166m@tonic-ui/�[39m�[38;5;173mreact-icons�[39m�[38;5;111m@�[39m�[38;5;111mworkspace:packages/react-icons [48f97]�[39m doesn't provide �[38;5;166m@babel/�[39m�[38;5;173mcore�[39m (�[38;5;111mp271b5�[39m), requested by �[38;5;166m@trendmicro/�[39m�[38;5;173mbabel-config�[39m 632: �[93m➤�[39m YN0002: │ �[38;5;166m@tonic-ui/�[39m�[38;5;173mreact�[39m�[38;5;111m@�[39m�[38;5;111mworkspace:packages/react�[39m doesn't provide �[38;5;166m@testing-library/�[39m�[38;5;173mdom�[39m (�[38;5;111mp75774�[39m), requested by �[38;5;166m@testing-library/�[39m�[38;5;173muser-event�[39m 633: �[93m➤�[39m YN0002: │ �[38;5;166m@tonic-ui/�[39m�[38;5;173mreact�[39m�[38;5;111m@�[39m�[38;5;111mworkspace:packages/react [7a4d0]�[39m doesn't provide �[38;5;166m@testing-library/�[39m�[38;5;173mdom�[39m (�[38;5;111mpc82d6�[39m), requested by �[38;5;166m@testing-library/�[39m�[38;5;173muser-event�[39m 634: �[93m➤�[39m YN0002: │ �[38;5;173mnext-plugin-svgr�[39m�[38;5;111m@�[39m�[38;5;111mnpm:1.1.10�[39m doesn't provide �[38;5;173mwebpack�[39m (�[38;5;111mp57a50�[39m), requested by �[38;5;173mfile-loader�[39m 635: �[93m➤�[39m YN0000: │ Some peer dependencies are incorrectly met; run �[38;5;111myarn explain peer-requirements <hash>�[39m for details, where �[38;5;111m<hash>�[39m is the six-letter p-prefixed code 636: ##[endgroup] 637: �[94m➤�[39m �[90mYN0000�[39m: └ Completed in 0s 406ms 638: �[94m➤�[39m �[90mYN0000�[39m: ┌ Fetch step 639: ##[group]Fetch step 640: �[93m➤�[39m YN0066: │ �[38;5;173mtypescript�[39m�[38;5;111m@�[39m�[38;5;111mpatch:typescript@npm%3A5.4.3#~builtin<compat/typescript>::version=5.4.3&hash=701156�[39m: Cannot apply hunk #1 641: �[94m➤�[39m YN0013: │ 21 packages were already cached, 1681 had to be fetched 642: ##[endgroup] 643: �[94m➤�[39m �[90mYN0000�[39m: └ Completed in 36s 123ms 644: �[94m➤�[39m �[90mYN0000�[39m: ┌ Link step 645: ##[group]Link step 646: �[94m➤�[39m YN0007: │ �[38;5;166m@parcel/�[39m�[38;5;173mwatcher�[39m�[38;5;111m@�[39m�[38;5;111mnpm:2.0.4�[39m must be built because it never has been before or the last one failed 647: �[94m➤�[39m YN0007: │ �[38;5;173mcore-js�[39m�[38;5;111m@�[39m�[38;5;111mnpm:3.36.1�[39m must be built because it never has been before or the last one failed 648: �[94m➤�[39m YN0007: │ �[38;5;173mnx�[39m�[38;5;111m@�[39m�[38;5;111mnpm:16.10.0 [cc223]�[39m must be built because it never has been before or the last one failed 649: ##[endgroup] ... 1025: └ ○ /theme/z-indices 4.09 kB 384 kB 1026: + First Load JS shared by all 380 kB 1027: ├ chunks/framework-a32fdada02556615.js 44.9 kB 1028: ├ chunks/main-5517790cd0400ae3.js 47.7 kB 1029: ├ chunks/pages/_app-673511ee98cff3d0.js 285 kB 1030: └ other shared chunks (total) 1.85 kB 1031: ○ (Static) prerendered as static content 1032: lerna success exec Executed command in 10 packages: "yarn build" 1033: lerna notice cli v7.4.2 1034: lerna info versioning independent 1035: lerna info ci enabled 1036: lerna info Executing command in 10 packages: "yarn lint" 1037: /home/runner/work/tonic-ui/tonic-ui/packages/theme/src/__tests__/createTheme.test.js 1038: ##[warning] 3:35 warning Arrow function has too many lines (246). Maximum allowed is 200 max-lines-per-function 1039: ##[warning] 264:36 warning Arrow function has too many lines (246). Maximum allowed is 200 max-lines-per-function 1040: ✖ 2 problems (0 errors, 2 warnings) 1041: /home/runner/work/tonic-ui/tonic-ui/packages/utils/src/assertion.js 1042: ##[warning] 40:1 warning This line has a length of 174. Maximum allowed is 160 max-len 1043: ✖ 1 problem (0 errors, 1 warning) 1044: /home/runner/work/tonic-ui/tonic-ui/packages/react-hooks/src/useHydrated.js 1045: ##[warning] 12:9 warning useState call is not destructured into value + setter pair react/hook-use-state 1046: ✖ 1 problem (0 errors, 1 warning) 1047: /home/runner/work/tonic-ui/tonic-ui/packages/styled-system/src/__tests__/pseudo.test.js 1048: ##[warning] 3:36 warning Arrow function has too many lines (216). Maximum allowed is 200 max-lines-per-function 1049: /home/runner/work/tonic-ui/tonic-ui/packages/styled-system/src/__tests__/sx.test.js 1050: ##[warning] 280:21 warning Arrow function has too many lines (309). Maximum allowed is 200 max-lines-per-function 1051: ✖ 2 problems (0 errors, 2 warnings) 1052: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/checkbox/CheckboxControlBox.js ... 1067: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/scrollbar/Scrollbar.js 1068: ##[warning] 23:30 warning Arrow function has too many lines (509). Maximum allowed is 200 max-lines-per-function 1069: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/table/__tests__/Table.test.js 1070: ##[warning] 16:19 warning Arrow function has too many lines (412). Maximum allowed is 200 max-lines-per-function 1071: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/tabs/styles.js 1072: ##[warning] 4:21 warning Arrow function has too many lines (302). Maximum allowed is 200 max-lines-per-function 1073: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/toast/__tests__/ToastManager.test.js 1074: ##[warning] 8:26 warning Arrow function has too many lines (570). Maximum allowed is 200 max-lines-per-function 1075: ##[warning] 511:20 warning Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “TestComponent” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true react/no-unstable-nested-components 1076: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/tree/Tree.js 1077: ##[warning] 15:25 warning Arrow function has too many lines (541). Maximum allowed is 200 max-lines-per-function 1078: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/tree/__tests__/Tree.test.js 1079: ##[warning] 182:18 warning Arrow function has too many lines (444). Maximum allowed is 200 max-lines-per-function 1080: /home/runner/work/tonic-ui/tonic-ui/packages/react/src/utils/descendant/useDescendant.js 1081: ##[warning] 30:9 warning useState call is not destructured into value + setter pair react/hook-use-state 1082: ✖ 17 problems (0 errors, 17 warnings) 1083: 0 errors and 6 warnings potentially fixable with the `--fix` option. 1084: lerna success exec Executed command in 10 packages: "yarn lint" ... 1178: dom-query.js \| 92.3 \| 85.71 \| 100 \| 92.3 \| 23 1179: dom.js \| 80.64 \| 65.45 \| 87.5 \| 81.96 \| 14-21,28,35-39,57,63 1180: index.js \| 0 \| 0 \| 0 \| 0 \| 1181: shared.js \| 88.77 \| 71.83 \| 100 \| 88.65 \| 7,12-15,22,78,99,128,145,158,171 1182: transition.js \| 100 \| 60.52 \| 100 \| 100 \| 32-36,47-51,58-61,68-70 1183: ---------------\|---------\|----------\|---------\|---------\|---------------------------------- 1184: Test Suites: 7 passed, 7 total 1185: Tests: 83 passed, 83 total 1186: Snapshots: 0 total 1187: Time: 6.937 s 1188: Ran all test suites. 1189: PASS src/__tests__/sx.test.js 1190: PASS src/__tests__/useMediaQuery.test.js 1191: PASS src/__tests__/pseudo.test.js 1192: ● Console 1193: console.error 1194: Warning: '_focusActive' is deprecated and will be removed in the next major release. Use '_focus: { '&:active': { } }' instead. 1195: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 1196: �[90m 154 \|�[39m } 1197: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 1198: �[90m \|�[39m �[31m�[1m^�[22m�[39m 1199: �[90m 156 \|�[39m }�[33m;�[39m 1200: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 1201: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 1202: at error (../utils/dist/cjs/shared.js:155:11) 1203: at Object._focusActive (src/pseudo.js:83:28) 1204: at Object._focusActive (src/__tests__/pseudo.test.js:88:53) 1205: console.error 1206: Warning: '_focusHover' is deprecated and will be removed in the next major release. Use '_focus: { '&:hover': { } }' instead. 1207: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 1208: �[90m 154 \|�[39m } 1209: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 1210: �[90m \|�[39m �[31m�[1m^�[22m�[39m 1211: �[90m 156 \|�[39m }�[33m;�[39m 1212: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 1213: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 1214: at error (../utils/dist/cjs/shared.js:155:11) 1215: at Object._focusHover (src/pseudo.js:97:28) ... 1381: UrlIcon.js \| 50 \| 100 \| 0 \| 50 \| 7-11 1382: UsbIcon.js \| 50 \| 100 \| 0 \| 50 \| 7-11 1383: WmiIcon.js \| 50 \| 100 \| 0 \| 50 \| 7-11 1384: src/utils \| 83.33 \| 50 \| 50 \| 83.33 \| 1385: createSVGIcon.js \| 83.33 \| 50 \| 50 \| 83.33 \| 7 1386: -----------------------\|---------\|----------\|---------\|---------\|------------------- 1387: Test Suites: 1 passed, 1 total 1388: Tests: 1 passed, 1 total 1389: Snapshots: 0 total 1390: Time: 4.794 s 1391: Ran all test suites. 1392: PASS src/toast/__tests__/ToastManager.test.js (19.742 s) 1393: PASS src/tree/__tests__/Tree.test.js (20.414 s) 1394: PASS src/table/__tests__/Table.test.js 1395: ● Console 1396: console.error 1397: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1480: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1481: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1482: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1483: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1484: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1485: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1486: at customRender (test-utils/render.js:43:16) 1487: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1488: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1489: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1490: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1491: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1492: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1493: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1494: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1495: console.error 1496: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1579: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1580: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1581: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1582: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1583: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1584: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1585: at customRender (test-utils/render.js:43:16) 1586: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1587: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1588: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1589: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1590: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1591: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1592: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1593: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1594: console.error 1595: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1678: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1679: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1680: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1681: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1682: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1683: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1684: at customRender (test-utils/render.js:43:16) 1685: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1686: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1687: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1688: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1689: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1690: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1691: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1692: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1693: console.error 1694: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1777: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1778: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1779: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1780: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1781: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1782: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1783: at customRender (test-utils/render.js:43:16) 1784: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1785: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1786: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1787: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1788: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1789: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1790: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1791: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1792: console.error 1793: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1876: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1877: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1878: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1879: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1880: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1881: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1882: at customRender (test-utils/render.js:43:16) 1883: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1884: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1885: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1886: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1887: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1888: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1889: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1890: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1891: console.error 1892: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 1975: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 1976: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 1977: at act (../../node_modules/react/cjs/react.development.js:2582:11) 1978: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 1979: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 1980: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 1981: at customRender (test-utils/render.js:43:16) 1982: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 1983: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 1984: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 1985: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 1986: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 1987: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 1988: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 1989: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 1990: console.error 1991: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 2074: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25809:7) 2075: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2076: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2077: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2078: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2079: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2080: at customRender (test-utils/render.js:43:16) 2081: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 2082: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 2083: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 2084: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 2085: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 2086: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 2087: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 2088: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 2089: console.error 2090: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". ... 2180: at _callee3$ (src/table/__tests__/Table.test.js:256:11) 2181: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 2182: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 2183: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 2184: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 2185: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 2186: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 2187: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 2188: PASS src/accordion/__tests__/Accordion.test.js 2189: PASS src/modal/__tests__/Modal.test.js 2190: PASS src/transitions/__tests__/Grow.test.js 2191: PASS src/drawer/__tests__/Drawer.test.js 2192: PASS src/pagination/__tests__/Pagination.test.js 2193: PASS src/popper/__tests__/Popper.test.js 2194: ● Console 2195: console.error 2196: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2197: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2198: �[90m 154 \|�[39m } 2199: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2200: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2201: �[90m 156 \|�[39m }�[33m;�[39m 2202: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2203: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2204: at error (../utils/dist/cjs/shared.js:155:11) 2205: at src/popper/Popper.js:34:26 ... 2207: at src/popper/Popper.js:33:16 2208: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2209: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2210: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2211: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2212: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2213: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2214: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2215: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2216: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2217: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2218: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2219: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2220: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2221: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:25:11) 2222: console.error 2223: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2224: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2225: �[90m 154 \|�[39m } 2226: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2227: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2228: �[90m 156 \|�[39m }�[33m;�[39m 2229: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2230: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2231: at error (../utils/dist/cjs/shared.js:155:11) 2232: at src/popper/Popper.js:34:26 ... 2234: at src/popper/Popper.js:33:16 2235: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2236: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2237: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2238: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2239: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2240: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2241: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2242: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2243: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2244: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2245: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2246: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2247: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2248: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:41:11) 2249: console.error 2250: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2251: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2252: �[90m 154 \|�[39m } 2253: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2254: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2255: �[90m 156 \|�[39m }�[33m;�[39m 2256: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2257: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2258: at error (../utils/dist/cjs/shared.js:155:11) 2259: at src/popper/Popper.js:34:26 ... 2261: at src/popper/Popper.js:33:16 2262: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2263: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2264: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2265: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2266: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2267: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2268: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2269: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2270: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2271: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2272: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2273: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2274: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2275: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:58:11) 2276: console.error 2277: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2278: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2279: �[90m 154 \|�[39m } 2280: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2281: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2282: �[90m 156 \|�[39m }�[33m;�[39m 2283: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2284: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2285: at error (../utils/dist/cjs/shared.js:155:11) 2286: at src/popper/Popper.js:34:26 ... 2288: at src/popper/Popper.js:33:16 2289: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2290: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2291: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2292: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2293: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2294: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2295: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2296: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2297: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2298: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2299: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2300: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2301: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2302: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:87:11) 2303: console.error 2304: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2305: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2306: �[90m 154 \|�[39m } 2307: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2308: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2309: �[90m 156 \|�[39m }�[33m;�[39m 2310: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2311: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2312: at error (../utils/dist/cjs/shared.js:155:11) 2313: at src/popper/Popper.js:34:26 ... 2315: at src/popper/Popper.js:33:16 2316: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2317: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2318: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2319: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2320: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2321: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2322: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2323: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2324: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2325: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2326: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2327: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2328: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2329: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:106:32) 2330: console.error 2331: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2332: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2333: �[90m 154 \|�[39m } 2334: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2335: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2336: �[90m 156 \|�[39m }�[33m;�[39m 2337: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2338: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2339: at error (../utils/dist/cjs/shared.js:155:11) 2340: at src/popper/Popper.js:34:26 ... 2342: at src/popper/Popper.js:33:16 2343: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2344: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2345: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2346: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2347: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2348: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2349: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2350: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2351: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2352: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2353: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2354: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2355: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2356: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:152:31) 2357: console.error 2358: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2359: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2360: �[90m 154 \|�[39m } 2361: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2362: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2363: �[90m 156 \|�[39m }�[33m;�[39m 2364: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2365: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2366: at error (../utils/dist/cjs/shared.js:155:11) 2367: at src/popper/Popper.js:34:26 ... 2369: at src/popper/Popper.js:33:16 2370: at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:16305:18) 2371: at updateForwardRef (../../node_modules/react-dom/cjs/react-dom.development.js:19226:20) 2372: at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:21636:16) 2373: at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:27426:14) 2374: at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:26560:12) 2375: at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:26466:5) 2376: at renderRootSync (../../node_modules/react-dom/cjs/react-dom.development.js:26434:7) 2377: at performConcurrentWorkOnRoot (../../node_modules/react-dom/cjs/react-dom.development.js:25738:74) 2378: at flushActQueue (../../node_modules/react/cjs/react.development.js:2667:24) 2379: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2380: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2381: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2382: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2383: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:170:11) 2384: console.error 2385: Popper: 'anchorEl' is deprecated and will be removed in the next major release. Use 'referenceRef' instead. 2386: �[0m �[90m 153 \|�[39m messages�[33m.�[39mpush(message)�[33m;�[39m 2387: �[90m 154 \|�[39m } 2388: �[31m�[1m>�[22m�[39m�[90m 155 \|�[39m console�[33m.�[39merror(messages�[33m.�[39mjoin(�[32m' '�[39m))�[33m;�[39m 2389: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2390: �[90m 156 \|�[39m }�[33m;�[39m 2391: �[90m 157 \|�[39m �[36mvar�[39m warnRemovedProps �[33m=�[39m �[36mfunction�[39m warnRemovedProps(props�[33m,�[39m options) { 2392: �[90m 158 \|�[39m �[36mvar�[39m _options$prefix2�[33m;�[39m�[0m 2393: at error (../utils/dist/cjs/shared.js:155:11) 2394: at src/popper/Popper.js:34:26 ... 2406: at act (../../node_modules/react/cjs/react.development.js:2582:11) 2407: at ../../node_modules/@testing-library/react/dist/act-compat.js:46:25 2408: at renderRoot (../../node_modules/@testing-library/react/dist/pure.js:180:26) 2409: at render (../../node_modules/@testing-library/react/dist/pure.js:266:10) 2410: at Object.<anonymous> (src/popper/__tests__/Popper.test.js:195:11) 2411: PASS src/spinner/__tests__/Spinner.test.js 2412: PASS src/toast/__tests__/Toast.test.js 2413: PASS src/input/__tests__/InputControl.test.js 2414: PASS src/search-input/__tests__/SearchInput.test.js 2415: PASS src/checkbox/__tests__/CheckboxGroup.test.js 2416: PASS __tests__/index.test.js 2417: PASS src/checkbox/__tests__/Checkbox.test.js 2418: PASS src/radio/__tests__/Radio.test.js 2419: PASS src/radio/__tests__/RadioGroup.test.js 2420: ● Console 2421: console.error 2422: Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components ... 2425: at /home/runner/work/tonic-ui/tonic-ui/packages/react/src/visually-hidden/VisuallyHidden.js:7:32 2426: at label 2427: at /home/runner/work/tonic-ui/tonic-ui/node_modules/@emotion/react/dist/emotion-element-f93e57b0.cjs.dev.js:62:23 2428: at /home/runner/work/tonic-ui/tonic-ui/packages/react/src/radio/Radio.js:31:22 2429: at RadioGroup (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/radio/RadioGroup.js:21:22) 2430: at ToastManager (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/toast/ToastManager.js:49:22) 2431: at PortalManager (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/portal/PortalManager.js:21:22) 2432: at ColorStyleProvider (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/color-style/ColorStyleProvider.js:20:22) 2433: at ColorModeProvider (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/color-mode/ColorModeProvider.js:29:22) 2434: at value (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/default-props/DefaultPropsProvider.js:5:3) 2435: at ThemeProvider (/home/runner/work/tonic-ui/tonic-ui/node_modules/@emotion/react/dist/emotion-element-f93e57b0.cjs.dev.js:125:32) 2436: at children (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/theme/ThemeProvider.js:10:3) 2437: at children (/home/runner/work/tonic-ui/tonic-ui/packages/react/src/provider/TonicProvider.js:8:3) 2438: at children (/home/runner/work/tonic-ui/tonic-ui/packages/react/test-utils/render.js:28:22) 2439: at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:86:30) 2440: at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:7) 2441: at updateWrapper (../../node_modules/react-dom/cjs/react-dom.development.js:1813:7) ... 2557: �[0m �[90m 22 \|�[39m )�[33m,�[39m renderOptions)�[33m;�[39m 2558: �[90m 23 \|�[39m 2559: �[31m�[1m>�[22m�[39m�[90m 24 \|�[39m expect(container)�[33m.�[39mtoMatchSnapshot()�[33m;�[39m 2560: �[90m \|�[39m �[31m�[1m^�[22m�[39m 2561: �[90m 25 \|�[39m 2562: �[90m 26 \|�[39m �[36mawait�[39m testA11y(container�[33m,�[39m { 2563: �[90m 27 \|�[39m axeOptions�[33m:�[39m {�[0m 2564: at toMatchSnapshot (src/textarea/__tests__/Textarea.test.js:24:23) 2565: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 2566: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 2567: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 2568: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 2569: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 2570: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 2571: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 2572: › 1 snapshot failed. 2573: PASS src/color-mode/__tests__/ColorModeProvider.test.js ... 3029: src/utils/animate-presence \| 97.05 \| 93.75 \| 100 \| 96.77 \| 3030: AnimatePresence.js \| 100 \| 100 \| 100 \| 100 \| 3031: context.js \| 100 \| 100 \| 100 \| 100 \| 3032: index.js \| 0 \| 0 \| 0 \| 0 \| 3033: useAnimatePresence.js \| 92.3 \| 87.5 \| 100 \| 91.66 \| 10 3034: src/utils/descendant \| 94.33 \| 60 \| 100 \| 94 \| 3035: Descendant.js \| 91.66 \| 60 \| 100 \| 91.17 \| 18,23,56 3036: context.js \| 100 \| 100 \| 100 \| 100 \| 3037: index.js \| 0 \| 0 \| 0 \| 0 \| 3038: useDescendant.js \| 100 \| 60 \| 100 \| 100 \| 32-33,35-36 3039: src/visually-hidden \| 100 \| 100 \| 100 \| 100 \| 3040: VisuallyHidden.js \| 100 \| 100 \| 100 \| 100 \| 3041: index.js \| 0 \| 0 \| 0 \| 0 \| 3042: styles.js \| 100 \| 100 \| 100 \| 100 \| 3043: -----------------------------------------------\|---------\|----------\|---------\|---------\|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 3044: Summary of all failing tests 3045: FAIL src/textarea/__tests__/Textarea.test.js ... 3079: �[90m 23 \|�[39m 3080: �[31m�[1m>�[22m�[39m�[90m 24 \|�[39m expect(container)�[33m.�[39mtoMatchSnapshot()�[33m;�[39m 3081: �[90m \|�[39m �[31m�[1m^�[22m�[39m 3082: �[90m 25 \|�[39m 3083: �[90m 26 \|�[39m �[36mawait�[39m testA11y(container�[33m,�[39m { 3084: �[90m 27 \|�[39m axeOptions�[33m:�[39m {�[0m 3085: at toMatchSnapshot (src/textarea/__tests__/Textarea.test.js:24:23) 3086: at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16) 3087: at Generator.<anonymous> (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17) 3088: at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21) 3089: at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) 3090: at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9) 3091: at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7 3092: at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12) 3093: Snapshot Summary 3094: › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them. 3095: Test Suites: 1 failed, 65 passed, 66 total 3096: Tests: 1 failed, 285 passed, 286 total 3097: Snapshots: 1 failed, 34 passed, 35 total 3098: Time: 49.379 s 3099: Ran all test suites. 3100: lerna ERR! yarn test exited 1 in '@tonic-ui/react' 3101: lerna ERR! yarn test exited 1 in '@tonic-ui/react' 3102: ##[error]Process completed with exit code 1. 3103: Post job cleanup.

codiumai-pr-agent-free · 2025-06-16T09:33:43Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Unrelated Change There appears to be an unrelated change in the textarea styles file that adds a red border color for _focusVisible state. This seems unrelated to the PR's purpose of enhancing drawer/modal interaction controls. _focusVisible: { borderColor: 'red', }, Event Handling The useClickOutside hook is now being called with a specific events array of ['click'] which might be more restrictive than the default ['mousedown', 'touchstart']. This could potentially affect mobile interactions. }, { events: ['click'] });

codiumai-pr-agent-free · 2025-06-16T09:34:08Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	✅ ~~Remove debug styling code~~ Suggestion Impact: The commit removed the _focusVisible style with the red border color exactly as suggested, eliminating what appeared to be debugging code code diff: - }, - _focusVisible: { - borderColor: 'red', Remove the hardcoded `_focusVisible` style with red border color. This appears to be test code or debugging code that was accidentally committed. The red border would override the intended focus styling for textareas. packages/react/src/textarea/styles.js [52-54] -_focusVisible: { - borderColor: 'red', -}, +// Remove the _focusVisible style block entirely `[Suggestion processed]` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the `_focusVisible` style with a hardcoded red border is likely debugging code. This change is unrelated to the rest of the PR and would introduce an incorrect style to the `textarea` component.	Medium
Update

…` props to Drawer and Modal

…side`

…ated props

cheton linked an issue Jun 2, 2025 that may be closed by this pull request

Enable granular closeOnOutsideClick control for drawers and modals #1032

Closed

cheton added the 🏗️ work in progress Work in progress label Jun 9, 2025

cheton force-pushed the tonic-ui-1032 branch from ebceb7e to 78086ad Compare June 14, 2025 01:48

cheton changed the title ~~feat: enable granular closeOnOutsideClick control for drawers and modals~~ feat: enable granular control over outside interactions for drawers and modals Jun 14, 2025

cheton force-pushed the tonic-ui-1032 branch from 2665204 to 1af2348 Compare June 15, 2025 14:13

cheton added 🎉 feature (enhancement) New feature or request and removed 🏗️ work in progress Work in progress labels Jun 16, 2025

cheton marked this pull request as ready for review June 16, 2025 09:33

cheton force-pushed the tonic-ui-1032 branch from 1af2348 to d7a7f1a Compare June 16, 2025 09:33

codiumai-pr-agent-free bot added the Review effort 2/5 label Jun 16, 2025

cheton force-pushed the tonic-ui-1032 branch from 5a57a77 to a53b1e0 Compare June 16, 2025 09:40

cheton self-assigned this Jun 17, 2025

cheton mentioned this pull request Jun 17, 2025

Consolidate Breaking Changes in Tonic UI v3 #892

Open

cheton force-pushed the tonic-ui-1032 branch from 304213c to 60dd022 Compare June 17, 2025 08:25

cheton and others added 7 commits June 29, 2025 21:04

feat: refine the handling of closeOnEsc and closeOnOutsideClick

35a233f

chore: remove unused shouldAllRefsOutside option from comment block

1baf553

feat: add support for closeOnInteractOutside and `onInteractOutside…

f2bbe75

…` props to Drawer and Modal

chore: remove unintended :focus-visible style from textarea

326e02b

chore(changeset): add tonic-ui-1032.md

33d2eb0

feat: deprecate closeOnOutsideClick in favor of `closeOnInteractOut…

50d41ed

…side`

feat: add TODO comment to remove target environment checks for deprec…

6dc3f79

…ated props

docs: update drawer and modal usage example

4a52ac4

cheton force-pushed the tonic-ui-1032 branch from c83a978 to 4a52ac4 Compare June 29, 2025 13:04

cheton merged commit 5afc3c3 into v2 Jun 29, 2025
8 checks passed

cheton deleted the tonic-ui-1032 branch June 29, 2025 13:12

github-actions bot mentioned this pull request Jun 29, 2025

chore(release): version packages #1040

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: enable granular control over outside interactions for drawers and modals #1033

feat: enable granular control over outside interactions for drawers and modals #1033

Uh oh!

cheton commented Jun 2, 2025 •

edited by codiumai-pr-agent-free bot

Loading

Uh oh!

codesandbox bot commented Jun 2, 2025

Uh oh!

codecov bot commented Jun 2, 2025 •

edited

Loading

Assets Changed:

Assets Changed:

Uh oh!

codesandbox-ci bot commented Jun 2, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 2, 2025 •

edited

Loading

Uh oh!

trendmicro-frontend-bot commented Jun 2, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jun 14, 2025 •

edited

Loading

Uh oh!

codiumai-pr-agent-free bot commented Jun 14, 2025 •

edited

Loading

Uh oh!

codiumai-pr-agent-free bot commented Jun 16, 2025

Uh oh!

codiumai-pr-agent-free bot commented Jun 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

feat: enable granular control over outside interactions for drawers and modals #1033

feat: enable granular control over outside interactions for drawers and modals #1033

Uh oh!

Conversation

cheton commented Jun 2, 2025 • edited by codiumai-pr-agent-free bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Changes walkthrough 📝

Uh oh!

codesandbox bot commented Jun 2, 2025

Review or Edit in CodeSandbox

Uh oh!

codecov bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Uh oh!

codesandbox-ci bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

trendmicro-frontend-bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tonic UI Demo

Uh oh!

changeset-bot bot commented Jun 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codiumai-pr-agent-free bot commented Jun 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Feedback 🧐

(Feedback updated until commit a53b1e0)

Uh oh!

codiumai-pr-agent-free bot commented Jun 16, 2025

PR Reviewer Guide 🔍

Uh oh!

codiumai-pr-agent-free bot commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Uh oh!

Uh oh!

Uh oh!

cheton commented Jun 2, 2025 •

edited by codiumai-pr-agent-free bot

Loading

codecov bot commented Jun 2, 2025 •

edited

Loading

codesandbox-ci bot commented Jun 2, 2025 •

edited

Loading

codecov bot commented Jun 2, 2025 •

edited

Loading

trendmicro-frontend-bot commented Jun 2, 2025 •

edited

Loading

changeset-bot bot commented Jun 14, 2025 •

edited

Loading

codiumai-pr-agent-free bot commented Jun 14, 2025 •

edited

Loading

(Feedback updated until commit `a53b1e0`)

codiumai-pr-agent-free bot commented Jun 16, 2025 •

edited

Loading