@instructure/ui-source-code-editor 10.16.3-snapshot--1 → 10.16.4-snapshot-0

package/CHANGELOG.md

@@ -3,7 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.3-snapshot--1](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3-snapshot--1) (2025-04-24)
+## [10.16.4-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4-snapshot-0) (2025-05-05)
+
+**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+
+
+
+
+## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
 
 **Note:** Version bump only for package @instructure/ui-source-code-editor
 

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

@@ -1,4 +1,4 @@
-var _SourceCodeEditor, _SourceCodeEditor2;
+var _SourceCodeEditor, _SourceCodeEditor2, _SourceCodeEditor3, _SourceCodeEditor4, _SourceCodeEditor5, _SourceCodeEditor6, _SourceCodeEditor7, _SourceCodeEditor8, _SourceCodeEditor9, _SourceCodeEditor10, _SourceCodeEditor11, _SourceCodeEditor12, _SourceCodeEditor13, _SourceCodeEditor14;
 /*
  * The MIT License (MIT)
  *
@@ -22,10 +22,11 @@ var _SourceCodeEditor, _SourceCodeEditor2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import { render } from '@testing-library/react';
-import SourceCodeEditor from '../index';
+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 SourceCodeEditor from '../index';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<SourceCodeEditor />', () => {
   describe('syntax highlight', () => {
@@ -61,4 +62,240 @@ describe('<SourceCodeEditor />', () => {
       expect(editorElement).toHaveAttribute('aria-labelledby', labelId);
     });
   });
+  describe('defaultValue', () => {
+    let consoleWarningMock;
+    let consoleErrorMock;
+    beforeEach(() => {
+      // Mocking console to prevent test output pollution
+      consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+    });
+    afterEach(() => {
+      consoleWarningMock.mockRestore();
+      consoleErrorMock.mockRestore();
+    });
+    it('should be applied on load', async () => {
+      render(_SourceCodeEditor3 || (_SourceCodeEditor3 = _jsx(SourceCodeEditor, {
+        label: "foo",
+        defaultValue: "hello"
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveTextContent('hello');
+    });
+  });
+  describe('spellcheck', () => {
+    it('should set `spellcheck="true"` on the input', async () => {
+      render(_SourceCodeEditor4 || (_SourceCodeEditor4 = _jsx(SourceCodeEditor, {
+        label: "foo",
+        spellcheck: true
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('spellcheck', 'true');
+    });
+  });
+  describe('readOnly', () => {
+    it('should still update value when value prop changes', async () => {
+      const onChange = vi.fn();
+      const _render3 = render(_jsx(SourceCodeEditor, {
+          label: "foo",
+          readOnly: true,
+          value: "hello",
+          onChange: onChange
+        })),
+        rerender = _render3.rerender;
+      const input = screen.getByRole('textbox');
+      expect(input).not.toHaveTextContent('hello world');
+      rerender(_jsx(SourceCodeEditor, {
+        label: "foo",
+        readOnly: true,
+        value: "hello world",
+        onChange: onChange
+      }));
+      const inputUpdated = screen.getByRole('textbox');
+      expect(inputUpdated).toHaveTextContent('hello world');
+    });
+    it('should still be focusable', async () => {
+      let elementRef = null;
+      render(_jsx(SourceCodeEditor, {
+        label: "foo",
+        readOnly: true,
+        ref: component => {
+          elementRef = component;
+        }
+      }));
+      const input = screen.getByRole('textbox');
+      elementRef.focus();
+      await waitFor(() => {
+        expect(input).toHaveFocus();
+        expect(document.activeElement).toBe(input);
+      });
+    });
+  });
+  describe('editable turned off', () => {
+    it('should set `contenteditable` to false', async () => {
+      render(_SourceCodeEditor5 || (_SourceCodeEditor5 = _jsx(SourceCodeEditor, {
+        label: "foo",
+        editable: false
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('contenteditable', 'false');
+    });
+    it('should not be focusable', async () => {
+      let elementRef = null;
+      render(_jsx(SourceCodeEditor, {
+        label: "foo",
+        editable: false,
+        elementRef: component => {
+          elementRef = component;
+        }
+      }));
+      const input = screen.getByRole('textbox');
+      elementRef.focus();
+      await waitFor(() => {
+        expect(elementRef).not.toHaveFocus();
+        expect(document.activeElement).not.toBe(input);
+      });
+    });
+  });
+  describe('lineNumbers', () => {
+    it('should display line numbers', async () => {
+      const _render4 = render(_SourceCodeEditor6 || (_SourceCodeEditor6 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `
+            line1
+            line2
+            line3
+          `,
+          lineNumbers: true
+        }))),
+        container = _render4.container;
+      const lineNumbers = container.querySelector('[class$="-lineNumbers"]');
+      expect(lineNumbers).toBeInTheDocument();
+      expect(lineNumbers).toBeVisible();
+      expect(lineNumbers).toHaveTextContent('123');
+    });
+  });
+  describe('foldGutter', () => {
+    it('should display fold icons', async () => {
+      render(_SourceCodeEditor7 || (_SourceCodeEditor7 = _jsx(SourceCodeEditor, {
+        label: "foo",
+        defaultValue: `const func = () => {
+              console.log('foo')
+            }`,
+        foldGutter: true
+      })));
+      const gutterIcon = screen.getByTitle('Fold line');
+      expect(gutterIcon).toBeInTheDocument();
+      expect(gutterIcon).toBeVisible();
+    });
+    it('should fold lines on click', async () => {
+      const _render5 = render(_SourceCodeEditor8 || (_SourceCodeEditor8 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `const func = () => {
+  console.log('foo')
+}`,
+          foldGutter: true
+        }))),
+        container = _render5.container;
+      const editor = container.querySelector('[class$="-codeEditor"]');
+      const gutterIcon = screen.getByTitle('Fold line');
+      expect(gutterIcon).toBeInTheDocument();
+      await userEvent.click(gutterIcon);
+      const unfoldIcons = screen.getAllByTitle('Unfold line');
+      expect(editor).not.toHaveTextContent("console.log('foo')");
+      expect(unfoldIcons[1]).toBeVisible();
+    });
+  });
+  describe('highlightActiveLine', () => {
+    it('should not highlight line by default', async () => {
+      const _render6 = render(_SourceCodeEditor9 || (_SourceCodeEditor9 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`
+        }))),
+        container = _render6.container;
+      const allLines = container.querySelectorAll('[class="cm-line"]');
+      expect(allLines[0]).not.toHaveClass('cm-activeLine');
+    });
+    it('should highlight line when true', async () => {
+      const _render7 = render(_SourceCodeEditor10 || (_SourceCodeEditor10 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          highlightActiveLine: true
+        }))),
+        container = _render7.container;
+      const allLines = container.querySelectorAll('[class$="cm-line"]');
+      expect(allLines[0]).toHaveClass('cm-activeLine');
+    });
+  });
+  describe('highlightActiveLineGutter', () => {
+    it('should not highlight gutter element by default', async () => {
+      const _render8 = render(_SourceCodeEditor11 || (_SourceCodeEditor11 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          lineNumbers: true
+        }))),
+        container = _render8.container;
+      const allGutterElements = container.querySelectorAll('[class$="cm-gutterElement"]');
+      expect(allGutterElements[0]).not.toHaveClass('cm-activeLineGutter');
+    });
+    it('should highlight gutter element when true', async () => {
+      const _render9 = render(_SourceCodeEditor12 || (_SourceCodeEditor12 = _jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          lineNumbers: true,
+          highlightActiveLineGutter: true
+        }))),
+        container = _render9.container;
+      const allGutterElements = container.querySelectorAll('[class^="cm-gutterElement"]');
+      expect(allGutterElements[1]).toHaveClass('cm-activeLineGutter');
+    });
+  });
+  describe('direction', () => {
+    it('rtl should apply', async () => {
+      render(_SourceCodeEditor13 || (_SourceCodeEditor13 = _jsx(SourceCodeEditor, {
+        label: "foo",
+        defaultValue: "hello",
+        direction: 'rtl'
+      })));
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('dir', 'rtl');
+    });
+  });
+  describe('label', () => {
+    it('should be inserted in the ScreenReaderContent', async () => {
+      const _render10 = render(_SourceCodeEditor14 || (_SourceCodeEditor14 = _jsx(SourceCodeEditor, {
+          label: "this is a label for the SR",
+          defaultValue: "hello"
+        }))),
+        container = _render10.container;
+      const label = container.querySelector('[class$="-screenReaderContent"]');
+      expect(label).toHaveTextContent('this is a label for the SR');
+    });
+  });
+  describe('elementRef', () => {
+    it('should return with the root element', async () => {
+      const elementRef = vi.fn();
+      const _render11 = render(_jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: "hello",
+          elementRef: elementRef
+        })),
+        container = _render11.container;
+      const editor = container.querySelector('[class$="-codeEditor"]');
+      expect(elementRef).toHaveBeenCalledWith(editor);
+    });
+  });
+  describe('containerRef', () => {
+    it('should return with the root element', async () => {
+      const containerRef = vi.fn();
+      const _render12 = render(_jsx(SourceCodeEditor, {
+          label: "foo",
+          defaultValue: "hello",
+          containerRef: containerRef
+        })),
+        container = _render12.container;
+      const editorContainer = container.querySelector('[class$="-codeEditorContainer"]');
+      expect(containerRef).toHaveBeenCalledWith(editorContainer);
+    });
+  });
 });

package/lib/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.js

@@ -2,10 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = require("@testing-library/react");
-var _index = _interopRequireDefault(require("../index"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
+var _index = _interopRequireDefault(require("../index"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _SourceCodeEditor, _SourceCodeEditor2;
+var _SourceCodeEditor, _SourceCodeEditor2, _SourceCodeEditor3, _SourceCodeEditor4, _SourceCodeEditor5, _SourceCodeEditor6, _SourceCodeEditor7, _SourceCodeEditor8, _SourceCodeEditor9, _SourceCodeEditor10, _SourceCodeEditor11, _SourceCodeEditor12, _SourceCodeEditor13, _SourceCodeEditor14;
 /*
  * The MIT License (MIT)
  *
@@ -63,4 +65,240 @@ describe('<SourceCodeEditor />', () => {
       expect(editorElement).toHaveAttribute('aria-labelledby', labelId);
     });
   });
+  describe('defaultValue', () => {
+    let consoleWarningMock;
+    let consoleErrorMock;
+    beforeEach(() => {
+      // Mocking console to prevent test output pollution
+      consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+      consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+    });
+    afterEach(() => {
+      consoleWarningMock.mockRestore();
+      consoleErrorMock.mockRestore();
+    });
+    it('should be applied on load', async () => {
+      (0, _react.render)(_SourceCodeEditor3 || (_SourceCodeEditor3 = (0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        defaultValue: "hello"
+      })));
+      const input = _react.screen.getByRole('textbox');
+      expect(input).toHaveTextContent('hello');
+    });
+  });
+  describe('spellcheck', () => {
+    it('should set `spellcheck="true"` on the input', async () => {
+      (0, _react.render)(_SourceCodeEditor4 || (_SourceCodeEditor4 = (0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        spellcheck: true
+      })));
+      const input = _react.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('spellcheck', 'true');
+    });
+  });
+  describe('readOnly', () => {
+    it('should still update value when value prop changes', async () => {
+      const onChange = _vitest.vi.fn();
+      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          readOnly: true,
+          value: "hello",
+          onChange: onChange
+        })),
+        rerender = _render3.rerender;
+      const input = _react.screen.getByRole('textbox');
+      expect(input).not.toHaveTextContent('hello world');
+      rerender((0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        readOnly: true,
+        value: "hello world",
+        onChange: onChange
+      }));
+      const inputUpdated = _react.screen.getByRole('textbox');
+      expect(inputUpdated).toHaveTextContent('hello world');
+    });
+    it('should still be focusable', async () => {
+      let elementRef = null;
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        readOnly: true,
+        ref: component => {
+          elementRef = component;
+        }
+      }));
+      const input = _react.screen.getByRole('textbox');
+      elementRef.focus();
+      await (0, _react.waitFor)(() => {
+        expect(input).toHaveFocus();
+        expect(document.activeElement).toBe(input);
+      });
+    });
+  });
+  describe('editable turned off', () => {
+    it('should set `contenteditable` to false', async () => {
+      (0, _react.render)(_SourceCodeEditor5 || (_SourceCodeEditor5 = (0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        editable: false
+      })));
+      const input = _react.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('contenteditable', 'false');
+    });
+    it('should not be focusable', async () => {
+      let elementRef = null;
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        editable: false,
+        elementRef: component => {
+          elementRef = component;
+        }
+      }));
+      const input = _react.screen.getByRole('textbox');
+      elementRef.focus();
+      await (0, _react.waitFor)(() => {
+        expect(elementRef).not.toHaveFocus();
+        expect(document.activeElement).not.toBe(input);
+      });
+    });
+  });
+  describe('lineNumbers', () => {
+    it('should display line numbers', async () => {
+      const _render4 = (0, _react.render)(_SourceCodeEditor6 || (_SourceCodeEditor6 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `
+            line1
+            line2
+            line3
+          `,
+          lineNumbers: true
+        }))),
+        container = _render4.container;
+      const lineNumbers = container.querySelector('[class$="-lineNumbers"]');
+      expect(lineNumbers).toBeInTheDocument();
+      expect(lineNumbers).toBeVisible();
+      expect(lineNumbers).toHaveTextContent('123');
+    });
+  });
+  describe('foldGutter', () => {
+    it('should display fold icons', async () => {
+      (0, _react.render)(_SourceCodeEditor7 || (_SourceCodeEditor7 = (0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        defaultValue: `const func = () => {
+              console.log('foo')
+            }`,
+        foldGutter: true
+      })));
+      const gutterIcon = _react.screen.getByTitle('Fold line');
+      expect(gutterIcon).toBeInTheDocument();
+      expect(gutterIcon).toBeVisible();
+    });
+    it('should fold lines on click', async () => {
+      const _render5 = (0, _react.render)(_SourceCodeEditor8 || (_SourceCodeEditor8 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `const func = () => {
+  console.log('foo')
+}`,
+          foldGutter: true
+        }))),
+        container = _render5.container;
+      const editor = container.querySelector('[class$="-codeEditor"]');
+      const gutterIcon = _react.screen.getByTitle('Fold line');
+      expect(gutterIcon).toBeInTheDocument();
+      await _userEvent.default.click(gutterIcon);
+      const unfoldIcons = _react.screen.getAllByTitle('Unfold line');
+      expect(editor).not.toHaveTextContent("console.log('foo')");
+      expect(unfoldIcons[1]).toBeVisible();
+    });
+  });
+  describe('highlightActiveLine', () => {
+    it('should not highlight line by default', async () => {
+      const _render6 = (0, _react.render)(_SourceCodeEditor9 || (_SourceCodeEditor9 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`
+        }))),
+        container = _render6.container;
+      const allLines = container.querySelectorAll('[class="cm-line"]');
+      expect(allLines[0]).not.toHaveClass('cm-activeLine');
+    });
+    it('should highlight line when true', async () => {
+      const _render7 = (0, _react.render)(_SourceCodeEditor10 || (_SourceCodeEditor10 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          highlightActiveLine: true
+        }))),
+        container = _render7.container;
+      const allLines = container.querySelectorAll('[class$="cm-line"]');
+      expect(allLines[0]).toHaveClass('cm-activeLine');
+    });
+  });
+  describe('highlightActiveLineGutter', () => {
+    it('should not highlight gutter element by default', async () => {
+      const _render8 = (0, _react.render)(_SourceCodeEditor11 || (_SourceCodeEditor11 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          lineNumbers: true
+        }))),
+        container = _render8.container;
+      const allGutterElements = container.querySelectorAll('[class$="cm-gutterElement"]');
+      expect(allGutterElements[0]).not.toHaveClass('cm-activeLineGutter');
+    });
+    it('should highlight gutter element when true', async () => {
+      const _render9 = (0, _react.render)(_SourceCodeEditor12 || (_SourceCodeEditor12 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: `const myNumber = 8`,
+          lineNumbers: true,
+          highlightActiveLineGutter: true
+        }))),
+        container = _render9.container;
+      const allGutterElements = container.querySelectorAll('[class^="cm-gutterElement"]');
+      expect(allGutterElements[1]).toHaveClass('cm-activeLineGutter');
+    });
+  });
+  describe('direction', () => {
+    it('rtl should apply', async () => {
+      (0, _react.render)(_SourceCodeEditor13 || (_SourceCodeEditor13 = (0, _jsxRuntime.jsx)(_index.default, {
+        label: "foo",
+        defaultValue: "hello",
+        direction: 'rtl'
+      })));
+      const input = _react.screen.getByRole('textbox');
+      expect(input).toHaveAttribute('dir', 'rtl');
+    });
+  });
+  describe('label', () => {
+    it('should be inserted in the ScreenReaderContent', async () => {
+      const _render10 = (0, _react.render)(_SourceCodeEditor14 || (_SourceCodeEditor14 = (0, _jsxRuntime.jsx)(_index.default, {
+          label: "this is a label for the SR",
+          defaultValue: "hello"
+        }))),
+        container = _render10.container;
+      const label = container.querySelector('[class$="-screenReaderContent"]');
+      expect(label).toHaveTextContent('this is a label for the SR');
+    });
+  });
+  describe('elementRef', () => {
+    it('should return with the root element', async () => {
+      const elementRef = _vitest.vi.fn();
+      const _render11 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: "hello",
+          elementRef: elementRef
+        })),
+        container = _render11.container;
+      const editor = container.querySelector('[class$="-codeEditor"]');
+      expect(elementRef).toHaveBeenCalledWith(editor);
+    });
+  });
+  describe('containerRef', () => {
+    it('should return with the root element', async () => {
+      const containerRef = _vitest.vi.fn();
+      const _render12 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+          label: "foo",
+          defaultValue: "hello",
+          containerRef: containerRef
+        })),
+        container = _render12.container;
+      const editorContainer = container.querySelector('[class$="-codeEditorContainer"]');
+      expect(containerRef).toHaveBeenCalledWith(editorContainer);
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "10.16.3-snapshot--1",
+  "version": "10.16.4-snapshot-0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.16.3-snapshot--1",
-    "@instructure/ui-test-queries": "10.16.3-snapshot--1",
-    "@instructure/ui-test-utils": "10.16.3-snapshot--1",
+    "@instructure/ui-babel-preset": "10.16.4-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "vitest": "^2.1.8"
   },
   "dependencies": {
@@ -45,20 +44,19 @@
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@instructure/emotion": "10.16.3-snapshot--1",
-    "@instructure/shared-types": "10.16.3-snapshot--1",
-    "@instructure/ui-a11y-content": "10.16.3-snapshot--1",
-    "@instructure/ui-buttons": "10.16.3-snapshot--1",
-    "@instructure/ui-dom-utils": "10.16.3-snapshot--1",
-    "@instructure/ui-i18n": "10.16.3-snapshot--1",
-    "@instructure/ui-icons": "10.16.3-snapshot--1",
-    "@instructure/ui-prop-types": "10.16.3-snapshot--1",
-    "@instructure/ui-react-utils": "10.16.3-snapshot--1",
-    "@instructure/ui-test-locator": "10.16.3-snapshot--1",
-    "@instructure/ui-testable": "10.16.3-snapshot--1",
-    "@instructure/ui-text-input": "10.16.3-snapshot--1",
-    "@instructure/ui-themes": "10.16.3-snapshot--1",
-    "@instructure/ui-utils": "10.16.3-snapshot--1",
+    "@instructure/emotion": "10.16.4-snapshot-0",
+    "@instructure/shared-types": "10.16.4-snapshot-0",
+    "@instructure/ui-a11y-content": "10.16.4-snapshot-0",
+    "@instructure/ui-buttons": "10.16.4-snapshot-0",
+    "@instructure/ui-dom-utils": "10.16.4-snapshot-0",
+    "@instructure/ui-i18n": "10.16.4-snapshot-0",
+    "@instructure/ui-icons": "10.16.4-snapshot-0",
+    "@instructure/ui-prop-types": "10.16.4-snapshot-0",
+    "@instructure/ui-react-utils": "10.16.4-snapshot-0",
+    "@instructure/ui-testable": "10.16.4-snapshot-0",
+    "@instructure/ui-text-input": "10.16.4-snapshot-0",
+    "@instructure/ui-themes": "10.16.4-snapshot-0",
+    "@instructure/ui-utils": "10.16.4-snapshot-0",
     "@lezer/highlight": "1.2.1",
     "prop-types": "^15.8.1"
   },