@instructure/ui-radio-input 10.19.2-snapshot-0 → 10.19.2-snapshot-2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.19.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-0) (2025-06-06)
+## [10.19.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-2) (2025-06-11)
 
-**Note:** Version bump only for package @instructure/ui-radio-input
+
+### Features
+
+* **many:** add missing inputRef prop to input components ([e1158fb](https://github.com/instructure/instructure-ui/commit/e1158fb7af5426e6ce13efe197c2148e1c5f15f0))
 
 
 

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

@@ -53,16 +53,28 @@ describe('<RadioInput />', () => {
     expect(input).toBeInTheDocument();
     expect(input).toHaveAttribute('type', 'radio');
   });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn();
+    const _render2 = render(_jsx(RadioInput, {
+        label: "fake label",
+        value: "someValue",
+        name: "someName",
+        inputRef: inputRef
+      })),
+      container = _render2.container;
+    const input = container.querySelector('input');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
   describe('events', () => {
     it('responds to onClick event', async () => {
       const onClick = vi.fn();
-      const _render2 = render(_jsx(RadioInput, {
+      const _render3 = render(_jsx(RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render2.container;
+        container = _render3.container;
       const input = container.querySelector('input');
       userEvent.click(input);
       await waitFor(() => {
@@ -71,14 +83,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onClick event when disabled', async () => {
       const onClick = vi.fn();
-      const _render3 = render(_jsx(RadioInput, {
+      const _render4 = render(_jsx(RadioInput, {
           disabled: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render3.container;
+        container = _render4.container;
       const input = container.querySelector('input');
       fireEvent.click(input);
       await waitFor(() => {
@@ -88,14 +100,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onClick event when readOnly', async () => {
       const onClick = vi.fn();
-      const _render4 = render(_jsx(RadioInput, {
+      const _render5 = render(_jsx(RadioInput, {
           readOnly: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render4.container;
+        container = _render5.container;
       const input = container.querySelector('input');
       fireEvent.click(input);
       await waitFor(() => {
@@ -105,13 +117,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onChange event', async () => {
       const onChange = vi.fn();
-      const _render5 = render(_jsx(RadioInput, {
+      const _render6 = render(_jsx(RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render5.container;
+        container = _render6.container;
       const input = container.querySelector('input');
       userEvent.click(input);
       await waitFor(() => {
@@ -120,14 +132,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onChange event when disabled', async () => {
       const onChange = vi.fn();
-      const _render6 = render(_jsx(RadioInput, {
+      const _render7 = render(_jsx(RadioInput, {
           disabled: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render6.container;
+        container = _render7.container;
       const input = container.querySelector('input');
       fireEvent.click(input);
       await waitFor(() => {
@@ -136,14 +148,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onChange event when readOnly', async () => {
       const onChange = vi.fn();
-      const _render7 = render(_jsx(RadioInput, {
+      const _render8 = render(_jsx(RadioInput, {
           readOnly: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render7.container;
+        container = _render8.container;
       const input = container.querySelector('input');
       fireEvent.click(input);
       await waitFor(() => {
@@ -152,13 +164,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onBlur event', async () => {
       const onBlur = vi.fn();
-      const _render8 = render(_jsx(RadioInput, {
+      const _render9 = render(_jsx(RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onBlur: onBlur
         })),
-        container = _render8.container;
+        container = _render9.container;
       const input = container.querySelector('input');
       fireEvent.focusOut(input);
       await waitFor(() => {
@@ -167,13 +179,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onFocus event', async () => {
       const onFocus = vi.fn();
-      const _render9 = render(_jsx(RadioInput, {
+      const _render10 = render(_jsx(RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onFocus: onFocus
         })),
-        container = _render9.container;
+        container = _render10.container;
       const input = container.querySelector('input');
       fireEvent.focus(input);
       await waitFor(() => {
@@ -181,19 +193,19 @@ describe('<RadioInput />', () => {
       });
     });
     it('sets input to checked when selected', async () => {
-      const _render10 = render(_RadioInput2 || (_RadioInput2 = _jsx(RadioInput, {
+      const _render11 = render(_RadioInput2 || (_RadioInput2 = _jsx(RadioInput, {
           checked: true,
           label: "fake label",
           value: "someValue",
           name: "someName"
         }))),
-        container = _render10.container;
+        container = _render11.container;
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('checked');
     });
     it('focuses with the focus helper', async () => {
       let ref;
-      const _render11 = render(_jsx(RadioInput, {
+      const _render12 = render(_jsx(RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName"
@@ -201,7 +213,7 @@ describe('<RadioInput />', () => {
           ,
           ref: el => ref = el
         })),
-        container = _render11.container;
+        container = _render12.container;
       const input = container.querySelector('input');
       ref.focus();
       await waitFor(() => {
@@ -211,13 +223,13 @@ describe('<RadioInput />', () => {
   });
   describe('for a11y', () => {
     it('simple variant should meet a11y standards', async () => {
-      const _render12 = render(_RadioInput3 || (_RadioInput3 = _jsx(RadioInput, {
+      const _render13 = render(_RadioInput3 || (_RadioInput3 = _jsx(RadioInput, {
           variant: "simple",
           label: "fake label",
           value: "someValue",
           name: "someName"
         }))),
-        container = _render12.container;
+        container = _render13.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/RadioInput/index.js

@@ -44,6 +44,12 @@ let RadioInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this.ref = null;
     this._defaultId = void 0;
     this._input = null;
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
     this.handleClick = e => {
       if (this.props.disabled || this.props.readOnly) {
         e.preventDefault();
@@ -114,9 +120,7 @@ let RadioInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         children: [_jsx("input", {
           ...props,
           id: this.id,
-          ref: c => {
-            this._input = c;
-          },
+          ref: this.handleInputRef,
           value: value,
           name: name,
           checked: this.checked,

package/es/RadioInput/props.js

@@ -36,7 +36,8 @@ const propTypes = {
   context: PropTypes.oneOf(['success', 'warning', 'danger', 'off']),
   inline: PropTypes.bool,
   onClick: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  inputRef: PropTypes.func
 };
-const allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange'];
+const allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange', 'inputRef'];
 export { propTypes, allowedProps };

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

@@ -55,16 +55,28 @@ describe('<RadioInput />', () => {
     expect(input).toBeInTheDocument();
     expect(input).toHaveAttribute('type', 'radio');
   });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = _vitest.vi.fn();
+    const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+        label: "fake label",
+        value: "someValue",
+        name: "someName",
+        inputRef: inputRef
+      })),
+      container = _render2.container;
+    const input = container.querySelector('input');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
   describe('events', () => {
     it('responds to onClick event', async () => {
       const onClick = _vitest.vi.fn();
-      const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render2.container;
+        container = _render3.container;
       const input = container.querySelector('input');
       _userEvent.default.click(input);
       await (0, _react.waitFor)(() => {
@@ -73,14 +85,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onClick event when disabled', async () => {
       const onClick = _vitest.vi.fn();
-      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           disabled: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render3.container;
+        container = _render4.container;
       const input = container.querySelector('input');
       _react.fireEvent.click(input);
       await (0, _react.waitFor)(() => {
@@ -90,14 +102,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onClick event when readOnly', async () => {
       const onClick = _vitest.vi.fn();
-      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           readOnly: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onClick: onClick
         })),
-        container = _render4.container;
+        container = _render5.container;
       const input = container.querySelector('input');
       _react.fireEvent.click(input);
       await (0, _react.waitFor)(() => {
@@ -107,13 +119,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onChange event', async () => {
       const onChange = _vitest.vi.fn();
-      const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render5.container;
+        container = _render6.container;
       const input = container.querySelector('input');
       _userEvent.default.click(input);
       await (0, _react.waitFor)(() => {
@@ -122,14 +134,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onChange event when disabled', async () => {
       const onChange = _vitest.vi.fn();
-      const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render7 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           disabled: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render6.container;
+        container = _render7.container;
       const input = container.querySelector('input');
       _react.fireEvent.click(input);
       await (0, _react.waitFor)(() => {
@@ -138,14 +150,14 @@ describe('<RadioInput />', () => {
     });
     it('does not respond to onChange event when readOnly', async () => {
       const onChange = _vitest.vi.fn();
-      const _render7 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render8 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           readOnly: true,
           label: "fake label",
           value: "someValue",
           name: "someName",
           onChange: onChange
         })),
-        container = _render7.container;
+        container = _render8.container;
       const input = container.querySelector('input');
       _react.fireEvent.click(input);
       await (0, _react.waitFor)(() => {
@@ -154,13 +166,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onBlur event', async () => {
       const onBlur = _vitest.vi.fn();
-      const _render8 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onBlur: onBlur
         })),
-        container = _render8.container;
+        container = _render9.container;
       const input = container.querySelector('input');
       _react.fireEvent.focusOut(input);
       await (0, _react.waitFor)(() => {
@@ -169,13 +181,13 @@ describe('<RadioInput />', () => {
     });
     it('responds to onFocus event', async () => {
       const onFocus = _vitest.vi.fn();
-      const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render10 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName",
           onFocus: onFocus
         })),
-        container = _render9.container;
+        container = _render10.container;
       const input = container.querySelector('input');
       _react.fireEvent.focus(input);
       await (0, _react.waitFor)(() => {
@@ -183,19 +195,19 @@ describe('<RadioInput />', () => {
       });
     });
     it('sets input to checked when selected', async () => {
-      const _render10 = (0, _react.render)(_RadioInput2 || (_RadioInput2 = (0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render11 = (0, _react.render)(_RadioInput2 || (_RadioInput2 = (0, _jsxRuntime.jsx)(_index.RadioInput, {
           checked: true,
           label: "fake label",
           value: "someValue",
           name: "someName"
         }))),
-        container = _render10.container;
+        container = _render11.container;
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('checked');
     });
     it('focuses with the focus helper', async () => {
       let ref;
-      const _render11 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render12 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RadioInput, {
           label: "fake label",
           value: "someValue",
           name: "someName"
@@ -203,7 +215,7 @@ describe('<RadioInput />', () => {
           ,
           ref: el => ref = el
         })),
-        container = _render11.container;
+        container = _render12.container;
       const input = container.querySelector('input');
       ref.focus();
       await (0, _react.waitFor)(() => {
@@ -213,13 +225,13 @@ describe('<RadioInput />', () => {
   });
   describe('for a11y', () => {
     it('simple variant should meet a11y standards', async () => {
-      const _render12 = (0, _react.render)(_RadioInput3 || (_RadioInput3 = (0, _jsxRuntime.jsx)(_index.RadioInput, {
+      const _render13 = (0, _react.render)(_RadioInput3 || (_RadioInput3 = (0, _jsxRuntime.jsx)(_index.RadioInput, {
           variant: "simple",
           label: "fake label",
           value: "someValue",
           name: "someName"
         }))),
-        container = _render12.container;
+        container = _render13.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });

package/lib/RadioInput/index.js

@@ -50,6 +50,12 @@ let RadioInput = exports.RadioInput = (_dec = (0, _withDeterministicId.withDeter
     this.ref = null;
     this._defaultId = void 0;
     this._input = null;
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
     this.handleClick = e => {
       if (this.props.disabled || this.props.readOnly) {
         e.preventDefault();
@@ -120,9 +126,7 @@ let RadioInput = exports.RadioInput = (_dec = (0, _withDeterministicId.withDeter
         children: [(0, _jsxRuntime.jsx)("input", {
           ...props,
           id: this.id,
-          ref: c => {
-            this._input = c;
-          },
+          ref: this.handleInputRef,
           value: value,
           name: name,
           checked: this.checked,

package/lib/RadioInput/props.js

@@ -43,6 +43,7 @@ const propTypes = exports.propTypes = {
   context: _propTypes.default.oneOf(['success', 'warning', 'danger', 'off']),
   inline: _propTypes.default.bool,
   onClick: _propTypes.default.func,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  inputRef: _propTypes.default.func
 };
-const allowedProps = exports.allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange'];
+const allowedProps = exports.allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange', 'inputRef'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "10.19.2-snapshot-0",
+  "version": "10.19.2-snapshot-2",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.19.2-snapshot-0",
-    "@instructure/shared-types": "10.19.2-snapshot-0",
-    "@instructure/ui-dom-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-form-field": "10.19.2-snapshot-0",
-    "@instructure/ui-prop-types": "10.19.2-snapshot-0",
-    "@instructure/ui-react-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-testable": "10.19.2-snapshot-0",
+    "@instructure/emotion": "10.19.2-snapshot-2",
+    "@instructure/shared-types": "10.19.2-snapshot-2",
+    "@instructure/ui-dom-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-form-field": "10.19.2-snapshot-2",
+    "@instructure/ui-prop-types": "10.19.2-snapshot-2",
+    "@instructure/ui-react-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-testable": "10.19.2-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.19.2-snapshot-0",
-    "@instructure/ui-babel-preset": "10.19.2-snapshot-0",
-    "@instructure/ui-color-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-test-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-themes": "10.19.2-snapshot-0",
+    "@instructure/ui-axe-check": "10.19.2-snapshot-2",
+    "@instructure/ui-babel-preset": "10.19.2-snapshot-2",
+    "@instructure/ui-color-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-test-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-themes": "10.19.2-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/RadioInput/__new-tests__/RadioInput.test.tsx

@@ -61,6 +61,21 @@ describe('<RadioInput />', () => {
     expect(input).toHaveAttribute('type', 'radio')
   })
 
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn()
+    const { container } = render(
+      <RadioInput
+        label="fake label"
+        value="someValue"
+        name="someName"
+        inputRef={inputRef}
+      />
+    )
+    const input = container.querySelector('input')
+
+    expect(inputRef).toHaveBeenCalledWith(input)
+  })
+
   describe('events', () => {
     it('responds to onClick event', async () => {
       const onClick = vi.fn()

package/src/RadioInput/index.tsx

@@ -84,6 +84,13 @@ class RadioInput extends Component<RadioInputProps, RadioInputState> {
     this.props.makeStyles?.()
   }
 
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
   handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (this.props.disabled || this.props.readOnly) {
       e.preventDefault()
@@ -144,9 +151,7 @@ class RadioInput extends Component<RadioInputProps, RadioInputState> {
           <input
             {...props}
             id={this.id}
-            ref={(c: HTMLInputElement | null) => {
-              this._input = c
-            }}
+            ref={this.handleInputRef}
             value={value}
             name={name}
             checked={this.checked}

package/src/RadioInput/props.ts

@@ -72,6 +72,10 @@ type RadioInputOwnProps = {
    * event.target.value will contain the new value. It will always be a string.
    */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof RadioInputOwnProps
@@ -107,7 +111,8 @@ const propTypes: PropValidators<PropKeys> = {
   context: PropTypes.oneOf(['success', 'warning', 'danger', 'off']),
   inline: PropTypes.bool,
   onClick: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -123,7 +128,8 @@ const allowedProps: AllowedPropKeys = [
   'context',
   'inline',
   'onClick',
-  'onChange'
+  'onChange',
+  'inputRef'
 ]
 
 export type { RadioInputProps, RadioInputState, RadioInputStyle }