@instructure/ui-date-input 10.16.1 → 10.16.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
+
+
+### Bug Fixes
+
+* **ui-date-input,ui-avatar:** add ref support to functional components ([6a6ba49](https://github.com/instructure/instructure-ui/commit/6a6ba493634a22a515d59b5acbecbc2d93084e0f))
+
+
+
+
+
+## [10.16.2](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.2) (2025-04-22)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
 ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-date-input

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

@@ -108,9 +108,31 @@ describe('<DateInput2 />', () => {
     expect(calendarIcon).toBeInTheDocument();
     expect(calendarLabel).toBeInTheDocument();
   });
+  it('refs should return the underlying component', async () => {
+    const inputRef = vi.fn();
+    const ref = {
+      current: null
+    };
+    const _render4 = render(_jsx(DateInput2, {
+        id: "dateInput2",
+        inputRef: inputRef,
+        ref: ref,
+        renderLabel: LABEL_TEXT,
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }
+      })),
+      container = _render4.container;
+    const dateInput = container.querySelector('input');
+    expect(inputRef).toHaveBeenCalledWith(dateInput);
+    expect(ref.current.props.id).toBe('dateInput2');
+    expect(dateInput).toBeInTheDocument();
+  });
   it('should render a custom calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render4 = render(_jsx(DateInput2, {
+    const _render5 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -120,7 +142,7 @@ describe('<DateInput2 />', () => {
         value: "",
         renderCalendarIcon: _IconHeartLine || (_IconHeartLine = _jsx(IconHeartLine, {}))
       })),
-      container = _render4.container;
+      container = _render5.container;
     const calendarIcon = container.querySelector('svg[name="IconHeart"]');
     const calendarLabel = screen.getByText(iconLabel);
     expect(calendarIcon).toBeInTheDocument();
@@ -193,7 +215,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to disabled', async () => {
     const interactionDisabled = 'disabled';
-    const _render5 = render(_jsx(DateInput2, {
+    const _render6 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -203,13 +225,13 @@ describe('<DateInput2 />', () => {
         value: "",
         interaction: interactionDisabled
       })),
-      container = _render5.container;
+      container = _render6.container;
     const dateInput = container.querySelector('input');
     expect(dateInput).toHaveAttribute(interactionDisabled);
   });
   it('should set interaction type to readonly', async () => {
     const interactionReadOnly = 'readonly';
-    const _render6 = render(_jsx(DateInput2, {
+    const _render7 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -219,7 +241,7 @@ describe('<DateInput2 />', () => {
         value: "",
         interaction: interactionReadOnly
       })),
-      container = _render6.container;
+      container = _render7.container;
     const dateInput = container.querySelector('input');
     const calendarButton = screen.getByRole('button');
     expect(dateInput).toHaveAttribute(interactionReadOnly);
@@ -231,7 +253,7 @@ describe('<DateInput2 />', () => {
     });
   });
   it('should set required', async () => {
-    const _render7 = render(_jsx(DateInput2, {
+    const _render8 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -241,7 +263,7 @@ describe('<DateInput2 />', () => {
         value: "",
         isRequired: true
       })),
-      container = _render7.container;
+      container = _render8.container;
     const dateInput = container.querySelector('input');
     expect(dateInput).toHaveAttribute('required');
   });

package/es/DateInput2/index.js

@@ -24,7 +24,7 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, forwardRef } from 'react';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
@@ -110,7 +110,8 @@ function parseLocaleDate(dateString = '', locale, timeZone) {
 category: components
 ---
 **/
-const DateInput2 = ({
+// eslint-disable-next-line react/display-name
+const DateInput2 = /*#__PURE__*/forwardRef(({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
@@ -133,7 +134,7 @@ const DateInput2 = ({
   margin,
   inputRef,
   ...rest
-}) => {
+}, ref) => {
   const localeContext = useContext(ApplyLocaleContext);
   const getLocale = () => {
     if (locale) {
@@ -250,6 +251,7 @@ const DateInput2 = ({
   const selectedDate = parseDate(value)[1];
   return _jsx(TextInput, {
     ...passthroughProps(rest),
+    ref: ref,
     inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
@@ -307,7 +309,7 @@ const DateInput2 = ({
       })
     })
   });
-};
+});
 DateInput2.propTypes = propTypes;
 export default DateInput2;
 export { DateInput2 };

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

@@ -111,9 +111,31 @@ describe('<DateInput2 />', () => {
     expect(calendarIcon).toBeInTheDocument();
     expect(calendarLabel).toBeInTheDocument();
   });
+  it('refs should return the underlying component', async () => {
+    const inputRef = _vitest.vi.fn();
+    const ref = {
+      current: null
+    };
+    const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+        id: "dateInput2",
+        inputRef: inputRef,
+        ref: ref,
+        renderLabel: LABEL_TEXT,
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }
+      })),
+      container = _render4.container;
+    const dateInput = container.querySelector('input');
+    expect(inputRef).toHaveBeenCalledWith(dateInput);
+    expect(ref.current.props.id).toBe('dateInput2');
+    expect(dateInput).toBeInTheDocument();
+  });
   it('should render a custom calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -123,7 +145,7 @@ describe('<DateInput2 />', () => {
         value: "",
         renderCalendarIcon: _IconHeartLine || (_IconHeartLine = (0, _jsxRuntime.jsx)(_IconHeartLine2.IconHeartLine, {}))
       })),
-      container = _render4.container;
+      container = _render5.container;
     const calendarIcon = container.querySelector('svg[name="IconHeart"]');
     const calendarLabel = _react2.screen.getByText(iconLabel);
     expect(calendarIcon).toBeInTheDocument();
@@ -196,7 +218,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to disabled', async () => {
     const interactionDisabled = 'disabled';
-    const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render6 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -206,13 +228,13 @@ describe('<DateInput2 />', () => {
         value: "",
         interaction: interactionDisabled
       })),
-      container = _render5.container;
+      container = _render6.container;
     const dateInput = container.querySelector('input');
     expect(dateInput).toHaveAttribute(interactionDisabled);
   });
   it('should set interaction type to readonly', async () => {
     const interactionReadOnly = 'readonly';
-    const _render6 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render7 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -222,7 +244,7 @@ describe('<DateInput2 />', () => {
         value: "",
         interaction: interactionReadOnly
       })),
-      container = _render6.container;
+      container = _render7.container;
     const dateInput = container.querySelector('input');
     const calendarButton = _react2.screen.getByRole('button');
     expect(dateInput).toHaveAttribute(interactionReadOnly);
@@ -234,7 +256,7 @@ describe('<DateInput2 />', () => {
     });
   });
   it('should set required', async () => {
-    const _render7 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render8 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -244,7 +266,7 @@ describe('<DateInput2 />', () => {
         value: "",
         isRequired: true
       })),
-      container = _render7.container;
+      container = _render8.container;
     const dateInput = container.querySelector('input');
     expect(dateInput).toHaveAttribute('required');
   });

package/lib/DateInput2/index.js

@@ -120,7 +120,8 @@ function parseLocaleDate(dateString = '', locale, timeZone) {
 category: components
 ---
 **/
-const DateInput2 = ({
+// eslint-disable-next-line react/display-name
+const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
@@ -143,7 +144,7 @@ const DateInput2 = ({
   margin,
   inputRef,
   ...rest
-}) => {
+}, ref) => {
   const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
   const getLocale = () => {
     if (locale) {
@@ -260,6 +261,7 @@ const DateInput2 = ({
   const selectedDate = parseDate(value)[1];
   return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
     ...(0, _passthroughProps.passthroughProps)(rest),
+    ref: ref,
     inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
@@ -317,7 +319,6 @@ const DateInput2 = ({
       })
     })
   });
-};
-exports.DateInput2 = DateInput2;
+});
 DateInput2.propTypes = _props.propTypes;
 var _default = exports.default = DateInput2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.16.1",
+  "version": "10.16.3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1",
-    "@instructure/ui-babel-preset": "10.16.1",
-    "@instructure/ui-buttons": "10.16.1",
-    "@instructure/ui-scripts": "10.16.1",
-    "@instructure/ui-test-utils": "10.16.1",
+    "@instructure/ui-axe-check": "10.16.3",
+    "@instructure/ui-babel-preset": "10.16.3",
+    "@instructure/ui-buttons": "10.16.3",
+    "@instructure/ui-scripts": "10.16.3",
+    "@instructure/ui-test-utils": "10.16.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.16.1",
-    "@instructure/shared-types": "10.16.1",
-    "@instructure/ui-calendar": "10.16.1",
-    "@instructure/ui-form-field": "10.16.1",
-    "@instructure/ui-i18n": "10.16.1",
-    "@instructure/ui-icons": "10.16.1",
-    "@instructure/ui-popover": "10.16.1",
-    "@instructure/ui-position": "10.16.1",
-    "@instructure/ui-prop-types": "10.16.1",
-    "@instructure/ui-react-utils": "10.16.1",
-    "@instructure/ui-selectable": "10.16.1",
-    "@instructure/ui-testable": "10.16.1",
-    "@instructure/ui-text-input": "10.16.1",
-    "@instructure/ui-utils": "10.16.1",
+    "@instructure/emotion": "10.16.3",
+    "@instructure/shared-types": "10.16.3",
+    "@instructure/ui-calendar": "10.16.3",
+    "@instructure/ui-form-field": "10.16.3",
+    "@instructure/ui-i18n": "10.16.3",
+    "@instructure/ui-icons": "10.16.3",
+    "@instructure/ui-popover": "10.16.3",
+    "@instructure/ui-position": "10.16.3",
+    "@instructure/ui-prop-types": "10.16.3",
+    "@instructure/ui-react-utils": "10.16.3",
+    "@instructure/ui-selectable": "10.16.3",
+    "@instructure/ui-testable": "10.16.3",
+    "@instructure/ui-text-input": "10.16.3",
+    "@instructure/ui-utils": "10.16.3",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

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

@@ -29,6 +29,7 @@ import '@testing-library/jest-dom'
 import { IconHeartLine } from '@instructure/ui-icons'
 
 import { DateInput2 } from '../index'
+import { TextInput } from '@instructure/ui-text-input'
 
 const LABEL_TEXT = 'Choose a date'
 
@@ -124,6 +125,28 @@ describe('<DateInput2 />', () => {
     expect(calendarLabel).toBeInTheDocument()
   })
 
+  it('refs should return the underlying component', async () => {
+    const inputRef = vi.fn()
+    const ref: React.Ref<TextInput> = { current: null }
+    const { container } = render(
+      <DateInput2
+        id="dateInput2"
+        inputRef={inputRef}
+        ref={ref}
+        renderLabel={LABEL_TEXT}
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+      />
+    )
+    const dateInput = container.querySelector('input')
+    expect(inputRef).toHaveBeenCalledWith(dateInput)
+    expect(ref.current!.props.id).toBe('dateInput2')
+    expect(dateInput).toBeInTheDocument()
+  })
+
   it('should render a custom calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label'
     const { container } = render(