@instructure/ui-checkbox 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-checkbox
+
+### Features
+
+* **many:** add missing inputRef prop to input components ([e1158fb](https://github.com/instructure/instructure-ui/commit/e1158fb7af5426e6ce13efe197c2148e1c5f15f0))
 
 
 

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

@@ -91,6 +91,14 @@ describe('<Checkbox />', () => {
     expect(inputElem).toBeInTheDocument();
     expect(inputElem).toHaveAttribute('aria-checked', 'mixed');
   });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn();
+    renderCheckbox({
+      inputRef
+    });
+    const input = screen.getByRole('checkbox');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
   describe('events', () => {
     it('when clicked, fires onClick and onChange events', async () => {
       const onClick = vi.fn();

package/es/Checkbox/index.js

@@ -54,6 +54,12 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     this.handleRef = el => {
       this.ref = el;
     };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
     this.handleChange = e => {
       const _this$props = this.props,
         onChange = _this$props.onChange,
@@ -237,9 +243,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
           id: this.id,
           value: value,
           type: "checkbox",
-          ref: c => {
-            this._input = c;
-          },
+          ref: this.handleInputRef,
           required: isRequired,
           disabled: disabled || readOnly,
           "aria-checked": indeterminate ? 'mixed' : void 0,

package/es/Checkbox/props.js

@@ -45,7 +45,8 @@ const propTypes = {
   variant: PropTypes.oneOf(['simple', 'toggle']),
   inline: PropTypes.bool,
   labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  isRequired: PropTypes.bool
+  isRequired: PropTypes.bool,
+  inputRef: PropTypes.func
 };
-const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired'];
+const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];
 export { propTypes, allowedProps };

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

@@ -94,6 +94,14 @@ describe('<Checkbox />', () => {
     expect(inputElem).toBeInTheDocument();
     expect(inputElem).toHaveAttribute('aria-checked', 'mixed');
   });
+  it('should provide an inputRef prop', async () => {
+    const inputRef = _vitest.vi.fn();
+    renderCheckbox({
+      inputRef
+    });
+    const input = _react2.screen.getByRole('checkbox');
+    expect(inputRef).toHaveBeenCalledWith(input);
+  });
   describe('events', () => {
     it('when clicked, fires onClick and onChange events', async () => {
       const onClick = _vitest.vi.fn();

package/lib/Checkbox/index.js

@@ -74,6 +74,12 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
     this.handleRef = el => {
       this.ref = el;
     };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
     this.handleChange = e => {
       const _this$props = this.props,
         onChange = _this$props.onChange,
@@ -257,9 +263,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
           id: this.id,
           value: value,
           type: "checkbox",
-          ref: c => {
-            this._input = c;
-          },
+          ref: this.handleInputRef,
           required: isRequired,
           disabled: disabled || readOnly,
           "aria-checked": indeterminate ? 'mixed' : void 0,

package/lib/Checkbox/props.js

@@ -52,6 +52,7 @@ const propTypes = exports.propTypes = {
   variant: _propTypes.default.oneOf(['simple', 'toggle']),
   inline: _propTypes.default.bool,
   labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end']),
-  isRequired: _propTypes.default.bool
+  isRequired: _propTypes.default.bool,
+  inputRef: _propTypes.default.func
 };
-const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired'];
+const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "10.19.2-snapshot-0",
+  "version": "10.19.2-snapshot-2",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.19.2-snapshot-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-icons": "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-svg-images": "10.19.2-snapshot-0",
-    "@instructure/ui-testable": "10.19.2-snapshot-0",
-    "@instructure/ui-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-view": "10.19.2-snapshot-0",
-    "@instructure/uid": "10.19.2-snapshot-0",
+    "@instructure/console": "10.19.2-snapshot-2",
+    "@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-icons": "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-svg-images": "10.19.2-snapshot-2",
+    "@instructure/ui-testable": "10.19.2-snapshot-2",
+    "@instructure/ui-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-view": "10.19.2-snapshot-2",
+    "@instructure/uid": "10.19.2-snapshot-2",
     "keycode": "^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/Checkbox/__new-tests__/Checkbox.test.tsx

@@ -105,6 +105,14 @@ describe('<Checkbox />', () => {
     expect(inputElem).toHaveAttribute('aria-checked', 'mixed')
   })
 
+  it('should provide an inputRef prop', async () => {
+    const inputRef = vi.fn()
+    renderCheckbox({ inputRef })
+    const input = screen.getByRole('checkbox')
+
+    expect(inputRef).toHaveBeenCalledWith(input)
+  })
+
   describe('events', () => {
     it('when clicked, fires onClick and onChange events', async () => {
       const onClick = vi.fn()

package/src/Checkbox/index.tsx

@@ -102,6 +102,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     this.ref = el
   }
 
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
   componentDidMount() {
     if (this._input) {
       this._input.indeterminate = this.props.indeterminate!
@@ -323,9 +330,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             id={this.id}
             value={value}
             type="checkbox"
-            ref={(c) => {
-              this._input = c
-            }}
+            ref={this.handleInputRef}
             required={isRequired}
             disabled={disabled || readOnly}
             aria-checked={indeterminate ? 'mixed' : undefined}

package/src/Checkbox/props.ts

@@ -80,6 +80,10 @@ type CheckboxOwnProps = {
   inline?: boolean
   labelPlacement?: 'top' | 'start' | 'end'
   isRequired?: boolean
+  /**
+   * A function that provides a reference to the actual underlying input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof CheckboxOwnProps
@@ -121,7 +125,8 @@ const propTypes: PropValidators<PropKeys> = {
   variant: PropTypes.oneOf(['simple', 'toggle']),
   inline: PropTypes.bool,
   labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  isRequired: PropTypes.bool
+  isRequired: PropTypes.bool,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -144,7 +149,8 @@ const allowedProps: AllowedPropKeys = [
   'variant',
   'inline',
   'labelPlacement',
-  'isRequired'
+  'isRequired',
+  'inputRef'
 ]
 
 type CheckboxState = {