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

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

@@ -307,6 +307,14 @@ describe('<ColorPicker />', () => {
         expect(errorMessage).toBeInTheDocument();
       });
     });
+    it('should provide an inputRef prop', async () => {
+      const inputRef = vi.fn();
+      render(_jsx(SimpleExample, {
+        inputRef: inputRef
+      }));
+      const input = screen.getByRole('textbox');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
   });
   describe('complex mode', () => {
     it('should display trigger button', async () => {

package/es/ColorPicker/index.js

@@ -438,7 +438,8 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       isRequired = _this$props10.isRequired,
       placeholderText = _this$props10.placeholderText,
       width = _this$props10.width,
-      id = _this$props10.id;
+      id = _this$props10.id,
+      inputRef = _this$props10.inputRef;
     return _jsxs("div", {
       ...omitProps(this.props, ColorPicker.allowedProps),
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.colorPicker,
@@ -461,7 +462,8 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         onChange: (event, value) => this.handleOnChange(event, value),
         onPaste: event => this.handleOnPaste(event),
         onBlur: () => this.handleOnBlur(),
-        messages: this.renderMessages()
+        messages: this.renderMessages(),
+        inputRef: inputRef
       }), !this.isSimple && _jsx("div", {
         css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
         style: {

package/es/ColorPicker/props.js

@@ -79,7 +79,8 @@ const propTypes = {
   value: PropTypes.string,
   width: PropTypes.string,
   withAlpha: PropTypes.bool,
-  margin: PropTypes.string
+  margin: PropTypes.string,
+  inputRef: PropTypes.func
 };
-const allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin'];
+const allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin', 'inputRef'];
 export { propTypes, allowedProps };

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

@@ -308,6 +308,14 @@ describe('<ColorPicker />', () => {
         expect(errorMessage).toBeInTheDocument();
       });
     });
+    it('should provide an inputRef prop', async () => {
+      const inputRef = _vitest.vi.fn();
+      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
+        inputRef: inputRef
+      }));
+      const input = _react.screen.getByRole('textbox');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
   });
   describe('complex mode', () => {
     it('should display trigger button', async () => {

package/lib/ColorPicker/index.js

@@ -449,7 +449,8 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       isRequired = _this$props10.isRequired,
       placeholderText = _this$props10.placeholderText,
       width = _this$props10.width,
-      id = _this$props10.id;
+      id = _this$props10.id,
+      inputRef = _this$props10.inputRef;
     return (0, _jsxRuntime.jsxs)("div", {
       ...(0, _omitProps.omitProps)(this.props, ColorPicker.allowedProps),
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.colorPicker,
@@ -472,7 +473,8 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         onChange: (event, value) => this.handleOnChange(event, value),
         onPaste: event => this.handleOnPaste(event),
         onBlur: () => this.handleOnBlur(),
-        messages: this.renderMessages()
+        messages: this.renderMessages(),
+        inputRef: inputRef
       }), !this.isSimple && (0, _jsxRuntime.jsx)("div", {
         css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
         style: {

package/lib/ColorPicker/props.js

@@ -86,6 +86,7 @@ const propTypes = exports.propTypes = {
   value: _propTypes.default.string,
   width: _propTypes.default.string,
   withAlpha: _propTypes.default.bool,
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  inputRef: _propTypes.default.func
 };
-const allowedProps = exports.allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin'];
+const allowedProps = exports.allowedProps = ['id', 'checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha', 'margin', 'inputRef'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "10.19.2-snapshot-0",
+  "version": "10.19.2-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "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-a11y-content": "10.19.2-snapshot-0",
-    "@instructure/ui-buttons": "10.19.2-snapshot-0",
-    "@instructure/ui-color-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-dom-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-drilldown": "10.19.2-snapshot-0",
-    "@instructure/ui-form-field": "10.19.2-snapshot-0",
-    "@instructure/ui-icons": "10.19.2-snapshot-0",
-    "@instructure/ui-pill": "10.19.2-snapshot-0",
-    "@instructure/ui-popover": "10.19.2-snapshot-0",
-    "@instructure/ui-react-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-testable": "10.19.2-snapshot-0",
-    "@instructure/ui-text": "10.19.2-snapshot-0",
-    "@instructure/ui-text-input": "10.19.2-snapshot-0",
-    "@instructure/ui-themes": "10.19.2-snapshot-0",
-    "@instructure/ui-tooltip": "10.19.2-snapshot-0",
-    "@instructure/ui-utils": "10.19.2-snapshot-0",
-    "@instructure/ui-view": "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-a11y-content": "10.19.2-snapshot-2",
+    "@instructure/ui-buttons": "10.19.2-snapshot-2",
+    "@instructure/ui-color-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-dom-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-drilldown": "10.19.2-snapshot-2",
+    "@instructure/ui-form-field": "10.19.2-snapshot-2",
+    "@instructure/ui-icons": "10.19.2-snapshot-2",
+    "@instructure/ui-pill": "10.19.2-snapshot-2",
+    "@instructure/ui-popover": "10.19.2-snapshot-2",
+    "@instructure/ui-react-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-testable": "10.19.2-snapshot-2",
+    "@instructure/ui-text": "10.19.2-snapshot-2",
+    "@instructure/ui-text-input": "10.19.2-snapshot-2",
+    "@instructure/ui-themes": "10.19.2-snapshot-2",
+    "@instructure/ui-tooltip": "10.19.2-snapshot-2",
+    "@instructure/ui-utils": "10.19.2-snapshot-2",
+    "@instructure/ui-view": "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-scripts": "10.19.2-snapshot-0",
-    "@instructure/ui-test-utils": "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-scripts": "10.19.2-snapshot-2",
+    "@instructure/ui-test-utils": "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/ColorPicker/__new-tests__/ColorPicker.test.tsx

@@ -389,6 +389,14 @@ describe('<ColorPicker />', () => {
         expect(errorMessage).toBeInTheDocument()
       })
     })
+
+    it('should provide an inputRef prop', async () => {
+      const inputRef = vi.fn()
+      render(<SimpleExample inputRef={inputRef} />)
+      const input = screen.getByRole('textbox')
+
+      expect(inputRef).toHaveBeenCalledWith(input)
+    })
   })
 
   describe('complex mode', () => {

package/src/ColorPicker/index.tsx

@@ -608,7 +608,8 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
   )
 
   render() {
-    const { disabled, isRequired, placeholderText, width, id } = this.props
+    const { disabled, isRequired, placeholderText, width, id, inputRef } =
+      this.props
 
     return (
       <div
@@ -633,6 +634,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           onPaste={(event) => this.handleOnPaste(event)}
           onBlur={() => this.handleOnBlur()}
           messages={this.renderMessages()}
+          inputRef={inputRef}
         />
         {!this.isSimple && (
           <div

package/src/ColorPicker/props.ts

@@ -234,6 +234,11 @@ type ColorPickerOwnProps = {
    * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
    */
   margin?: Spacing
+
+  /**
+   * A function that provides a reference to the input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type ColorPickerState = {
@@ -326,7 +331,8 @@ const propTypes: PropValidators<PropKeys> = {
   value: PropTypes.string,
   width: PropTypes.string,
   withAlpha: PropTypes.bool,
-  margin: PropTypes.string
+  margin: PropTypes.string,
+  inputRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -350,7 +356,8 @@ const allowedProps: AllowedPropKeys = [
   'value',
   'width',
   'withAlpha',
-  'margin'
+  'margin',
+  'inputRef'
 ]
 
 export type {