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

package/es/DateInput/index.js

@@ -26,7 +26,8 @@ var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
  * SOFTWARE.
  */
 
-import { Children, Component } from 'react';
+/** @jsx jsx */
+import React, { Children, Component } from 'react';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconCalendarMonthLine } from '@instructure/ui-icons';
 import { Popover } from '@instructure/ui-popover';
@@ -36,10 +37,9 @@ import { createChainedFunction } from '@instructure/ui-utils';
 import { getInteraction, callRenderProp, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { DateTime, Locale } from '@instructure/ui-i18n';
-import { withStyle } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -271,18 +271,14 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
         this.handleHideCalendar(e, dateString);
       }
     };
-    return _jsx(Calendar, {
-      ...getListProps({
-        onRequestRenderNextMonth,
-        onRequestRenderPrevMonth,
-        renderNavigationLabel,
-        renderWeekdayLabels,
-        renderNextMonthButton: this.renderMonthNavigationButton('next'),
-        renderPrevMonthButton: this.renderMonthNavigationButton('prev')
-      }),
-      ...noChildrenProps,
-      children: this.renderDays(getOptionProps)
-    });
+    return jsx(Calendar, Object.assign({}, getListProps({
+      onRequestRenderNextMonth,
+      onRequestRenderPrevMonth,
+      renderNavigationLabel,
+      renderWeekdayLabels,
+      renderNextMonthButton: this.renderMonthNavigationButton('next'),
+      renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+    }), noChildrenProps), this.renderDays(getOptionProps));
   }
   renderInput({
     getInputProps,
@@ -311,27 +307,24 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
       ref = _getTriggerProps.ref,
       triggerProps = _objectWithoutProperties(_getTriggerProps, _excluded2);
     const messages = this.props.messages || this.state.messages;
-    return _jsx(TextInput, {
-      ...triggerProps,
-      ...passthroughProps(rest),
-      ...getInputProps({
-        renderLabel: callRenderProp(renderLabel),
-        value,
-        placeholder,
-        size,
-        layout,
-        width,
-        messages,
-        onChange: this.handleInputChange,
-        onBlur: createChainedFunction(onBlur, this.handleHideCalendar),
-        inputRef: createChainedFunction(ref, this.handleInputRef),
-        interaction,
-        isRequired,
-        display: isInline ? 'inline-block' : 'block',
-        renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = _jsx(IconCalendarMonthLine, {
-          inline: false
-        }))
-      }),
+    return jsx(TextInput, Object.assign({}, triggerProps, passthroughProps(rest), getInputProps({
+      renderLabel: callRenderProp(renderLabel),
+      value,
+      placeholder,
+      size,
+      layout,
+      width,
+      messages,
+      onChange: this.handleInputChange,
+      onBlur: createChainedFunction(onBlur, this.handleHideCalendar),
+      inputRef: createChainedFunction(ref, this.handleInputRef),
+      interaction,
+      isRequired,
+      display: isInline ? 'inline-block' : 'block',
+      renderAfterInput: _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, {
+        inline: false
+      }))
+    }), {
       onKeyDown: e => {
         var _triggerProps$onKeyDo;
         if (!this.props.children) {
@@ -342,7 +335,7 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
         }
         (_triggerProps$onKeyDo = triggerProps.onKeyDown) === null || _triggerProps$onKeyDo === void 0 ? void 0 : _triggerProps$onKeyDo.call(triggerProps, e);
       }
-    });
+    }));
   }
   render() {
     const _this$props13 = this.props,
@@ -350,46 +343,40 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
       assistiveText = _this$props13.assistiveText,
       styles = _this$props13.styles;
     const isShowingCalendar = this.shouldShowCalendar();
-    return _jsx(Selectable, {
+    return jsx(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
-      }) => _jsxs("span", {
-        ...getRootProps({
-          css: styles === null || styles === void 0 ? void 0 : styles.dateInput
-        }),
-        ref: el => this.ref = el,
-        children: [this.renderInput({
-          getInputProps,
-          getTriggerProps
-        }), _jsx("span", {
-          ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
-          children: assistiveText
-        }), _jsx(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
+    }) => jsx("span", Object.assign({}, getRootProps({
+      css: styles === null || styles === void 0 ? void 0 : styles.dateInput
+    }), {
+      ref: el => this.ref = el
+    }), this.renderInput({
+      getInputProps,
+      getTriggerProps
+    }), jsx("span", Object.assign({}, getDescriptionProps(), {
+      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+    }), assistiveText), jsx(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.Day, _DateInput.propTypes = propTypes, _DateInput.allowedProps = allowedProps, _DateInput.defaultProps = {
   value: '',

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

@@ -23,21 +23,20 @@ var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _
  * 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 } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { IconHeartLine } from '@instructure/ui-icons';
 import { DateInput2 } from '../index';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const LABEL_TEXT = 'Choose a date';
 const DateInputExample = () => {
   const _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
-  return _jsx(DateInput2, {
+  return /*#__PURE__*/React.createElement(DateInput2, {
     renderLabel: LABEL_TEXT,
     screenReaderLabels: {
       calendarIcon: 'Calendar',
@@ -63,14 +62,14 @@ describe('<DateInput2 />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input', async () => {
-    const _render = render(_DateInputExample || (_DateInputExample = _jsx(DateInputExample, {}))),
+    const _render = render(_DateInputExample || (_DateInputExample = /*#__PURE__*/React.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 = render(_DateInputExample2 || (_DateInputExample2 = _jsx(DateInputExample, {}))),
+    const _render2 = render(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/React.createElement(DateInputExample, null))),
       container = _render2.container;
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
@@ -78,7 +77,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';
-    render(_jsx(DateInput2, {
+    render(/*#__PURE__*/React.createElement(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -93,7 +92,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render a calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render3 = render(_jsx(DateInput2, {
+    const _render3 = render(/*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -110,7 +109,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render a custom calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render4 = render(_jsx(DateInput2, {
+    const _render4 = render(/*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -118,7 +117,7 @@ describe('<DateInput2 />', () => {
           prevMonthButton: 'Previous month'
         },
         value: "",
-        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = _jsx(IconHeartLine, {}))
+        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/React.createElement(IconHeartLine, null))
       })),
       container = _render4.container;
     const calendarIcon = container.querySelector('svg[name="IconHeart"]');
@@ -127,12 +126,12 @@ describe('<DateInput2 />', () => {
     expect(calendarLabel).toBeInTheDocument();
   });
   it('should not show calendar table by default', async () => {
-    render(_DateInputExample3 || (_DateInputExample3 = _jsx(DateInputExample, {})));
+    render(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/React.createElement(DateInputExample, null)));
     const calendarTable = screen.queryByRole('table');
     expect(calendarTable).not.toBeInTheDocument();
   });
   it('should show calendar table when calendar button is clicked', async () => {
-    render(_DateInputExample4 || (_DateInputExample4 = _jsx(DateInputExample, {})));
+    render(_DateInputExample4 || (_DateInputExample4 = /*#__PURE__*/React.createElement(DateInputExample, null)));
     const calendarButton = screen.getByRole('button');
     expect(calendarButton).toBeInTheDocument();
     await userEvent.click(calendarButton);
@@ -144,7 +143,7 @@ describe('<DateInput2 />', () => {
   it('should render navigation arrow buttons with screen reader labels', async () => {
     const nextMonthLabel = 'Next month';
     const prevMonthLabel = 'Previous month';
-    render(_jsx(DateInput2, {
+    render(/*#__PURE__*/React.createElement(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -176,7 +175,7 @@ describe('<DateInput2 />', () => {
   });
   it('should programmatically set and render the initial value', async () => {
     const value = '26/03/2024';
-    render(_jsx(DateInput2, {
+    render(/*#__PURE__*/React.createElement(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -193,7 +192,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to disabled', async () => {
     const interactionDisabled = 'disabled';
-    const _render5 = render(_jsx(DateInput2, {
+    const _render5 = render(/*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -209,7 +208,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to readonly', async () => {
     const interactionReadOnly = 'readonly';
-    const _render6 = render(_jsx(DateInput2, {
+    const _render6 = render(/*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -231,7 +230,7 @@ describe('<DateInput2 />', () => {
     });
   });
   it('should set required', async () => {
-    const _render7 = render(_jsx(DateInput2, {
+    const _render7 = render(/*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -247,7 +246,7 @@ describe('<DateInput2 />', () => {
   });
   it('should call onBlur', async () => {
     const onBlur = vi.fn();
-    render(_jsx(DateInput2, {
+    render(/*#__PURE__*/React.createElement(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -270,7 +269,7 @@ describe('<DateInput2 />', () => {
         _useState4 = _slicedToArray(_useState3, 2),
         inputValue = _useState4[0],
         setInputValue = _useState4[1];
-      return _jsx(DateInput2, {
+      return /*#__PURE__*/React.createElement(DateInput2, {
         renderLabel: LABEL_TEXT,
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -284,7 +283,7 @@ describe('<DateInput2 />', () => {
         invalidDateErrorMessage: errorMsg
       });
     };
-    render(_jsx(Example, {}));
+    render(/*#__PURE__*/React.createElement(Example, null));
     expect(screen.queryByText(errorMsg)).not.toBeInTheDocument();
     const dateInput = screen.getByLabelText(LABEL_TEXT);
     await userEvent.click(dateInput);
@@ -310,7 +309,7 @@ describe('<DateInput2 />', () => {
       type: 'screenreader-only',
       text: 'Screenreader'
     }];
-    render(_jsx(DateInput2, {
+    render(/*#__PURE__*/React.createElement(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',

package/es/DateInput2/index.js

@@ -24,6 +24,7 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import { useState, useEffect, useContext } from 'react';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconButton } from '@instructure/ui-buttons';
@@ -32,8 +33,8 @@ import { Popover } from '@instructure/ui-popover';
 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 { jsx as _jsx } from "@emotion/react/jsx-runtime";
 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
@@ -248,8 +249,7 @@ const DateInput2 = ({
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
   const selectedDate = parseDate(value)[1];
-  return _jsx(TextInput, {
-    ...passthroughProps(rest),
+  return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
     inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
@@ -262,51 +262,49 @@ const DateInput2 = ({
     messages: inputMessages,
     interaction: interaction,
     margin: margin,
-    renderAfterInput: _jsx(Popover, {
-      renderTrigger: _jsx(IconButton, {
+    renderAfterInput: jsx(Popover, {
+      renderTrigger: jsx(IconButton, {
         withBackground: false,
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        interaction: interaction,
-        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = _jsx(IconCalendarMonthLine, {}))
-      }),
+        interaction: interaction
+      }, renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
       onHideContent: () => setShowPopover(false),
       on: "click",
       shouldContainFocus: true,
       shouldReturnFocus: true,
-      shouldCloseOnDocumentClick: true,
-      children: _jsx(Calendar, {
-        withYearPicker: withYearPicker,
-        onDateSelected: handleDateSelected,
-        selectedDate: selectedDate,
-        disabledDates: disabledDates,
-        visibleMonth: selectedDate,
-        locale: getLocale(),
-        timezone: getTimezone(),
-        renderNextMonthButton: _jsx(IconButton, {
-          size: "small",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {
-            color: "primary"
-          })),
-          screenReaderLabel: screenReaderLabels.nextMonthButton
-        }),
-        renderPrevMonthButton: _jsx(IconButton, {
-          size: "small",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = _jsx(IconArrowOpenStartSolid, {
-            color: "primary"
-          })),
-          screenReaderLabel: screenReaderLabels.prevMonthButton
-        })
+      shouldCloseOnDocumentClick: true
+    }, jsx(Calendar, {
+      withYearPicker: withYearPicker,
+      onDateSelected: handleDateSelected,
+      selectedDate: selectedDate,
+      disabledDates: disabledDates,
+      visibleMonth: selectedDate,
+      locale: getLocale(),
+      timezone: getTimezone(),
+      renderNextMonthButton: jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.nextMonthButton
+      }),
+      renderPrevMonthButton: jsx(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = jsx(IconArrowOpenStartSolid, {
+          color: "primary"
+        })),
+        screenReaderLabel: screenReaderLabels.prevMonthButton
       })
-    })
-  });
+    }))
+  }));
 };
 DateInput2.propTypes = propTypes;
 export default DateInput2;