@instructure/ui-date-input 10.16.1-pr-snapshot-1744893671793 → 10.16.1-snapshot-0

package/lib/DateInput/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DateInput = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
 var _Popover = require("@instructure/ui-popover/lib/Popover");
@@ -23,7 +24,6 @@ var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props2 = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
   _excluded2 = ["ref"];
 var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
@@ -50,6 +50,7 @@ var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 /**
 ---
 category: components
@@ -281,18 +282,14 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         this.handleHideCalendar(e, dateString);
       }
     };
-    return (0, _jsxRuntime.jsx)(_Calendar.Calendar, {
-      ...getListProps({
-        onRequestRenderNextMonth,
-        onRequestRenderPrevMonth,
-        renderNavigationLabel,
-        renderWeekdayLabels,
-        renderNextMonthButton: this.renderMonthNavigationButton('next'),
-        renderPrevMonthButton: this.renderMonthNavigationButton('prev')
-      }),
-      ...noChildrenProps,
-      children: this.renderDays(getOptionProps)
-    });
+    return (0, _emotion.jsx)(_Calendar.Calendar, Object.assign({}, getListProps({
+      onRequestRenderNextMonth,
+      onRequestRenderPrevMonth,
+      renderNavigationLabel,
+      renderWeekdayLabels,
+      renderNextMonthButton: this.renderMonthNavigationButton('next'),
+      renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+    }), noChildrenProps), this.renderDays(getOptionProps));
   }
   renderInput({
     getInputProps,
@@ -321,27 +318,24 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       ref = _getTriggerProps.ref,
       triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
     const messages = this.props.messages || this.state.messages;
-    return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
-      ...triggerProps,
-      ...(0, _passthroughProps.passthroughProps)(rest),
-      ...getInputProps({
-        renderLabel: (0, _callRenderProp.callRenderProp)(renderLabel),
-        value,
-        placeholder,
-        size,
-        layout,
-        width,
-        messages,
-        onChange: this.handleInputChange,
-        onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleHideCalendar),
-        inputRef: (0, _createChainedFunction.createChainedFunction)(ref, this.handleInputRef),
-        interaction,
-        isRequired,
-        display: isInline ? 'inline-block' : 'block',
-        renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _jsxRuntime.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
-          inline: false
-        }))
-      }),
+    return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, (0, _passthroughProps.passthroughProps)(rest), getInputProps({
+      renderLabel: (0, _callRenderProp.callRenderProp)(renderLabel),
+      value,
+      placeholder,
+      size,
+      layout,
+      width,
+      messages,
+      onChange: this.handleInputChange,
+      onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleHideCalendar),
+      inputRef: (0, _createChainedFunction.createChainedFunction)(ref, this.handleInputRef),
+      interaction,
+      isRequired,
+      display: isInline ? 'inline-block' : 'block',
+      renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {
+        inline: false
+      }))
+    }), {
       onKeyDown: e => {
         var _triggerProps$onKeyDo;
         if (!this.props.children) {
@@ -352,7 +346,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         }
         (_triggerProps$onKeyDo = triggerProps.onKeyDown) === null || _triggerProps$onKeyDo === void 0 ? void 0 : _triggerProps$onKeyDo.call(triggerProps, e);
       }
-    });
+    }));
   }
   render() {
     const _this$props13 = this.props,
@@ -360,46 +354,40 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       assistiveText = _this$props13.assistiveText,
       styles = _this$props13.styles;
     const isShowingCalendar = this.shouldShowCalendar();
-    return (0, _jsxRuntime.jsx)(_Selectable.Selectable, {
+    return (0, _emotion.jsx)(_Selectable.Selectable, {
       isShowingOptions: isShowingCalendar,
       onRequestShowOptions: this.handleShowCalendar,
       onRequestHideOptions: this.handleHideCalendar,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: e => this.handleHideCalendar(e),
       selectedOptionId: this.selectedDateId,
-      highlightedOptionId: this.selectedDateId,
-      children: ({
-        getRootProps,
-        getInputProps,
-        getTriggerProps,
-        getListProps,
-        getOptionProps,
-        getDescriptionProps
-      }) => (0, _jsxRuntime.jsxs)("span", {
-        ...getRootProps({
-          css: styles === null || styles === void 0 ? void 0 : styles.dateInput
-        }),
-        ref: el => this.ref = el,
-        children: [this.renderInput({
-          getInputProps,
-          getTriggerProps
-        }), (0, _jsxRuntime.jsx)("span", {
-          ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
-          children: assistiveText
-        }), (0, _jsxRuntime.jsx)(_Popover.Popover, {
-          placement: placement,
-          isShowingContent: isShowingCalendar,
-          positionTarget: this._input,
-          shouldReturnFocus: false,
-          shouldFocusContentOnTriggerBlur: true,
-          children: this.renderCalendar({
-            getListProps,
-            getOptionProps
-          })
-        })]
-      })
-    });
+      highlightedOptionId: this.selectedDateId
+    }, ({
+      getRootProps,
+      getInputProps,
+      getTriggerProps,
+      getListProps,
+      getOptionProps,
+      getDescriptionProps
+    }) => (0, _emotion.jsx)("span", Object.assign({}, getRootProps({
+      css: styles === null || styles === void 0 ? void 0 : styles.dateInput
+    }), {
+      ref: el => this.ref = el
+    }), this.renderInput({
+      getInputProps,
+      getTriggerProps
+    }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
+      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+    }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
+      placement: placement,
+      isShowingContent: isShowingCalendar,
+      positionTarget: this._input,
+      shouldReturnFocus: false,
+      shouldFocusContentOnTriggerBlur: true
+    }, this.renderCalendar({
+      getListProps,
+      getOptionProps
+    }))));
   }
 }, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day = _Calendar.Calendar.Day, _DateInput.propTypes = _props2.propTypes, _DateInput.allowedProps = _props2.allowedProps, _DateInput.defaultProps = {
   value: '',

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

@@ -1,15 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _IconHeartLine2 = require("@instructure/ui-icons/lib/IconHeartLine.js");
 var _index = require("../index");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _DateInputExample4;
 /*
  * The MIT License (MIT)
@@ -40,7 +40,7 @@ const DateInputExample = () => {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
-  return (0, _jsxRuntime.jsx)(_index.DateInput2, {
+  return /*#__PURE__*/_react.default.createElement(_index.DateInput2, {
     renderLabel: LABEL_TEXT,
     screenReaderLabels: {
       calendarIcon: 'Calendar',
@@ -66,14 +66,14 @@ describe('<DateInput2 />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input', async () => {
-    const _render = (0, _react2.render)(_DateInputExample || (_DateInputExample = (0, _jsxRuntime.jsx)(DateInputExample, {}))),
+    const _render = (0, _react2.render)(_DateInputExample || (_DateInputExample = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
       container = _render.container;
     const dateInput = container.querySelector('input');
     expect(dateInput).toBeInTheDocument();
     expect(dateInput).toHaveAttribute('type', 'text');
   });
   it('should render an input label', async () => {
-    const _render2 = (0, _react2.render)(_DateInputExample2 || (_DateInputExample2 = (0, _jsxRuntime.jsx)(DateInputExample, {}))),
+    const _render2 = (0, _react2.render)(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
       container = _render2.container;
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
@@ -81,7 +81,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -96,7 +96,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render a calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render3 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -113,7 +113,7 @@ describe('<DateInput2 />', () => {
   });
   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 _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -121,7 +121,7 @@ describe('<DateInput2 />', () => {
           prevMonthButton: 'Previous month'
         },
         value: "",
-        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = (0, _jsxRuntime.jsx)(_IconHeartLine2.IconHeartLine, {}))
+        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/_react.default.createElement(_IconHeartLine2.IconHeartLine, null))
       })),
       container = _render4.container;
     const calendarIcon = container.querySelector('svg[name="IconHeart"]');
@@ -130,12 +130,12 @@ describe('<DateInput2 />', () => {
     expect(calendarLabel).toBeInTheDocument();
   });
   it('should not show calendar table by default', async () => {
-    (0, _react2.render)(_DateInputExample3 || (_DateInputExample3 = (0, _jsxRuntime.jsx)(DateInputExample, {})));
+    (0, _react2.render)(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/_react.default.createElement(DateInputExample, null)));
     const calendarTable = _react2.screen.queryByRole('table');
     expect(calendarTable).not.toBeInTheDocument();
   });
   it('should show calendar table when calendar button is clicked', async () => {
-    (0, _react2.render)(_DateInputExample4 || (_DateInputExample4 = (0, _jsxRuntime.jsx)(DateInputExample, {})));
+    (0, _react2.render)(_DateInputExample4 || (_DateInputExample4 = /*#__PURE__*/_react.default.createElement(DateInputExample, null)));
     const calendarButton = _react2.screen.getByRole('button');
     expect(calendarButton).toBeInTheDocument();
     await _userEvent.default.click(calendarButton);
@@ -147,7 +147,7 @@ describe('<DateInput2 />', () => {
   it('should render navigation arrow buttons with screen reader labels', async () => {
     const nextMonthLabel = 'Next month';
     const prevMonthLabel = 'Previous month';
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -179,7 +179,7 @@ describe('<DateInput2 />', () => {
   });
   it('should programmatically set and render the initial value', async () => {
     const value = '26/03/2024';
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -196,7 +196,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 _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -212,7 +212,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to readonly', async () => {
     const interactionReadOnly = 'readonly';
-    const _render6 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -234,7 +234,7 @@ describe('<DateInput2 />', () => {
     });
   });
   it('should set required', async () => {
-    const _render7 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -250,7 +250,7 @@ describe('<DateInput2 />', () => {
   });
   it('should call onBlur', async () => {
     const onBlur = _vitest.vi.fn();
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -273,7 +273,7 @@ describe('<DateInput2 />', () => {
         _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
         inputValue = _useState4[0],
         setInputValue = _useState4[1];
-      return (0, _jsxRuntime.jsx)(_index.DateInput2, {
+      return /*#__PURE__*/_react.default.createElement(_index.DateInput2, {
         renderLabel: LABEL_TEXT,
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -287,7 +287,7 @@ describe('<DateInput2 />', () => {
         invalidDateErrorMessage: errorMsg
       });
     };
-    (0, _react2.render)((0, _jsxRuntime.jsx)(Example, {}));
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(Example, null));
     expect(_react2.screen.queryByText(errorMsg)).not.toBeInTheDocument();
     const dateInput = _react2.screen.getByLabelText(LABEL_TEXT);
     await _userEvent.default.click(dateInput);
@@ -313,7 +313,7 @@ describe('<DateInput2 />', () => {
       type: 'screenreader-only',
       text: 'Screenreader'
     }];
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.DateInput2, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',

package/lib/DateInput2/index.js

@@ -18,8 +18,8 @@ var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
 var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _emotion = require("@instructure/emotion");
 var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
 /*
  * The MIT License (MIT)
@@ -44,6 +44,7 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 function parseLocaleDate(dateString = '', locale, timeZone) {
   // This function may seem complicated but it basically does one thing:
   //   Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
@@ -258,8 +259,7 @@ const DateInput2 = ({
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
   const selectedDate = parseDate(value)[1];
-  return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
-    ...(0, _passthroughProps.passthroughProps)(rest),
+  return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
     inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
@@ -272,51 +272,49 @@ const DateInput2 = ({
     messages: inputMessages,
     interaction: interaction,
     margin: margin,
-    renderAfterInput: (0, _jsxRuntime.jsx)(_Popover.Popover, {
-      renderTrigger: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+    renderAfterInput: (0, _emotion.jsx)(_Popover.Popover, {
+      renderTrigger: (0, _emotion.jsx)(_IconButton.IconButton, {
         withBackground: false,
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        interaction: interaction,
-        children: renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _jsxRuntime.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {}))
-      }),
+        interaction: interaction
+      }, renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
       onHideContent: () => setShowPopover(false),
       on: "click",
       shouldContainFocus: true,
       shouldReturnFocus: true,
-      shouldCloseOnDocumentClick: true,
-      children: (0, _jsxRuntime.jsx)(_Calendar.Calendar, {
-        withYearPicker: withYearPicker,
-        onDateSelected: handleDateSelected,
-        selectedDate: selectedDate,
-        disabledDates: disabledDates,
-        visibleMonth: selectedDate,
-        locale: getLocale(),
-        timezone: getTimezone(),
-        renderNextMonthButton: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
-          size: "small",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
-            color: "primary"
-          })),
-          screenReaderLabel: screenReaderLabels.nextMonthButton
-        }),
-        renderPrevMonthButton: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
-          size: "small",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
-            color: "primary"
-          })),
-          screenReaderLabel: screenReaderLabels.prevMonthButton
-        })
+      shouldCloseOnDocumentClick: true
+    }, (0, _emotion.jsx)(_Calendar.Calendar, {
+      withYearPicker: withYearPicker,
+      onDateSelected: handleDateSelected,
+      selectedDate: selectedDate,
+      disabledDates: disabledDates,
+      visibleMonth: selectedDate,
+      locale: getLocale(),
+      timezone: getTimezone(),
+      renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.nextMonthButton
+      }),
+      renderPrevMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.prevMonthButton
       })
-    })
-  });
+    }))
+  }));
 };
 exports.DateInput2 = DateInput2;
 DateInput2.propTypes = _props.propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.16.1-pr-snapshot-1744893671793",
+  "version": "10.16.1-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,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-babel-preset": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-buttons": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-scripts": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-test-utils": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
+    "@instructure/ui-buttons": "10.16.1-snapshot-0",
+    "@instructure/ui-scripts": "10.16.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
     "@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-pr-snapshot-1744893671793",
-    "@instructure/shared-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-calendar": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-form-field": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-i18n": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-icons": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-popover": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-position": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-prop-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-react-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-selectable": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-testable": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-text-input": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-utils": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/emotion": "10.16.1-snapshot-0",
+    "@instructure/shared-types": "10.16.1-snapshot-0",
+    "@instructure/ui-calendar": "10.16.1-snapshot-0",
+    "@instructure/ui-form-field": "10.16.1-snapshot-0",
+    "@instructure/ui-i18n": "10.16.1-snapshot-0",
+    "@instructure/ui-icons": "10.16.1-snapshot-0",
+    "@instructure/ui-popover": "10.16.1-snapshot-0",
+    "@instructure/ui-position": "10.16.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-selectable": "10.16.1-snapshot-0",
+    "@instructure/ui-testable": "10.16.1-snapshot-0",
+    "@instructure/ui-text-input": "10.16.1-snapshot-0",
+    "@instructure/ui-utils": "10.16.1-snapshot-0",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

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

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/DateInput/index.tsx

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { Children, Component, ReactElement } from 'react'
+/** @jsx jsx */
+import React, { Children, Component, ReactElement } from 'react'
 
 import { Calendar } from '@instructure/ui-calendar'
 import type { CalendarProps, CalendarDayProps } from '@instructure/ui-calendar'
@@ -46,7 +47,7 @@ import { testable } from '@instructure/ui-testable'
 
 import { DateTime, ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 

package/src/DateInput/props.ts

@@ -40,7 +40,7 @@ import type {
   PropValidators
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import { InputHTMLAttributes, ReactElement, SyntheticEvent } from 'react'
+import React, { InputHTMLAttributes, ReactElement, SyntheticEvent } from 'react'
 
 type DateInputOwnProps = {
   /**

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

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi, MockInstance } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/DateInput2/index.tsx

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { useState, useEffect, useContext } from 'react'
 import type { SyntheticEvent } from 'react'
 import { Calendar } from '@instructure/ui-calendar'
@@ -36,6 +37,7 @@ import { TextInput } from '@instructure/ui-text-input'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
+import { jsx } from '@instructure/emotion'
 
 import { propTypes } from './props'
 import type { DateInput2Props } from './props'