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

package/es/DateInput/index.js

@@ -26,8 +26,7 @@ var _dec, _dec2, _class, _DateInput, _IconCalendarMonthLin;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Children, Component } from 'react';
+import { Children, Component } from 'react';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconCalendarMonthLine } from '@instructure/ui-icons';
 import { Popover } from '@instructure/ui-popover';
@@ -37,9 +36,10 @@ 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, jsx } from '@instructure/emotion';
+import { withStyle } 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,14 +271,18 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
         this.handleHideCalendar(e, dateString);
       }
     };
-    return jsx(Calendar, Object.assign({}, getListProps({
-      onRequestRenderNextMonth,
-      onRequestRenderPrevMonth,
-      renderNavigationLabel,
-      renderWeekdayLabels,
-      renderNextMonthButton: this.renderMonthNavigationButton('next'),
-      renderPrevMonthButton: this.renderMonthNavigationButton('prev')
-    }), noChildrenProps), this.renderDays(getOptionProps));
+    return _jsx(Calendar, {
+      ...getListProps({
+        onRequestRenderNextMonth,
+        onRequestRenderPrevMonth,
+        renderNavigationLabel,
+        renderWeekdayLabels,
+        renderNextMonthButton: this.renderMonthNavigationButton('next'),
+        renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+      }),
+      ...noChildrenProps,
+      children: this.renderDays(getOptionProps)
+    });
   }
   renderInput({
     getInputProps,
@@ -307,24 +311,27 @@ 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, 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
-      }))
-    }), {
+    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
+        }))
+      }),
       onKeyDown: e => {
         var _triggerProps$onKeyDo;
         if (!this.props.children) {
@@ -335,7 +342,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,
@@ -343,40 +350,46 @@ 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
-    }, ({
-      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
-    }))));
+      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
+          })
+        })]
+      })
+    });
   }
 }, _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,20 +23,21 @@ var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { useState } from 'react';
+import { 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 /*#__PURE__*/React.createElement(DateInput2, {
+  return _jsx(DateInput2, {
     renderLabel: LABEL_TEXT,
     screenReaderLabels: {
       calendarIcon: 'Calendar',
@@ -62,14 +63,14 @@ describe('<DateInput2 />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input', async () => {
-    const _render = render(_DateInputExample || (_DateInputExample = /*#__PURE__*/React.createElement(DateInputExample, null))),
+    const _render = render(_DateInputExample || (_DateInputExample = _jsx(DateInputExample, {}))),
       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 = /*#__PURE__*/React.createElement(DateInputExample, null))),
+    const _render2 = render(_DateInputExample2 || (_DateInputExample2 = _jsx(DateInputExample, {}))),
       container = _render2.container;
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
@@ -77,7 +78,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';
-    render(/*#__PURE__*/React.createElement(DateInput2, {
+    render(_jsx(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -92,7 +93,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render a calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render3 = render(/*#__PURE__*/React.createElement(DateInput2, {
+    const _render3 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -109,7 +110,7 @@ describe('<DateInput2 />', () => {
   });
   it('should render a custom calendar icon with screen reader label', async () => {
     const iconLabel = 'Calendar icon Label';
-    const _render4 = render(/*#__PURE__*/React.createElement(DateInput2, {
+    const _render4 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: iconLabel,
@@ -117,7 +118,7 @@ describe('<DateInput2 />', () => {
           prevMonthButton: 'Previous month'
         },
         value: "",
-        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/React.createElement(IconHeartLine, null))
+        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = _jsx(IconHeartLine, {}))
       })),
       container = _render4.container;
     const calendarIcon = container.querySelector('svg[name="IconHeart"]');
@@ -126,12 +127,12 @@ describe('<DateInput2 />', () => {
     expect(calendarLabel).toBeInTheDocument();
   });
   it('should not show calendar table by default', async () => {
-    render(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/React.createElement(DateInputExample, null)));
+    render(_DateInputExample3 || (_DateInputExample3 = _jsx(DateInputExample, {})));
     const calendarTable = screen.queryByRole('table');
     expect(calendarTable).not.toBeInTheDocument();
   });
   it('should show calendar table when calendar button is clicked', async () => {
-    render(_DateInputExample4 || (_DateInputExample4 = /*#__PURE__*/React.createElement(DateInputExample, null)));
+    render(_DateInputExample4 || (_DateInputExample4 = _jsx(DateInputExample, {})));
     const calendarButton = screen.getByRole('button');
     expect(calendarButton).toBeInTheDocument();
     await userEvent.click(calendarButton);
@@ -143,7 +144,7 @@ describe('<DateInput2 />', () => {
   it('should render navigation arrow buttons with screen reader labels', async () => {
     const nextMonthLabel = 'Next month';
     const prevMonthLabel = 'Previous month';
-    render(/*#__PURE__*/React.createElement(DateInput2, {
+    render(_jsx(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -175,7 +176,7 @@ describe('<DateInput2 />', () => {
   });
   it('should programmatically set and render the initial value', async () => {
     const value = '26/03/2024';
-    render(/*#__PURE__*/React.createElement(DateInput2, {
+    render(_jsx(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -192,7 +193,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to disabled', async () => {
     const interactionDisabled = 'disabled';
-    const _render5 = render(/*#__PURE__*/React.createElement(DateInput2, {
+    const _render5 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -208,7 +209,7 @@ describe('<DateInput2 />', () => {
   });
   it('should set interaction type to readonly', async () => {
     const interactionReadOnly = 'readonly';
-    const _render6 = render(/*#__PURE__*/React.createElement(DateInput2, {
+    const _render6 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -230,7 +231,7 @@ describe('<DateInput2 />', () => {
     });
   });
   it('should set required', async () => {
-    const _render7 = render(/*#__PURE__*/React.createElement(DateInput2, {
+    const _render7 = render(_jsx(DateInput2, {
         renderLabel: "Choose a date",
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -246,7 +247,7 @@ describe('<DateInput2 />', () => {
   });
   it('should call onBlur', async () => {
     const onBlur = vi.fn();
-    render(/*#__PURE__*/React.createElement(DateInput2, {
+    render(_jsx(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',
@@ -269,7 +270,7 @@ describe('<DateInput2 />', () => {
         _useState4 = _slicedToArray(_useState3, 2),
         inputValue = _useState4[0],
         setInputValue = _useState4[1];
-      return /*#__PURE__*/React.createElement(DateInput2, {
+      return _jsx(DateInput2, {
         renderLabel: LABEL_TEXT,
         screenReaderLabels: {
           calendarIcon: 'Calendar',
@@ -283,7 +284,7 @@ describe('<DateInput2 />', () => {
         invalidDateErrorMessage: errorMsg
       });
     };
-    render(/*#__PURE__*/React.createElement(Example, null));
+    render(_jsx(Example, {}));
     expect(screen.queryByText(errorMsg)).not.toBeInTheDocument();
     const dateInput = screen.getByLabelText(LABEL_TEXT);
     await userEvent.click(dateInput);
@@ -309,7 +310,7 @@ describe('<DateInput2 />', () => {
       type: 'screenreader-only',
       text: 'Screenreader'
     }];
-    render(/*#__PURE__*/React.createElement(DateInput2, {
+    render(_jsx(DateInput2, {
       renderLabel: "Choose a date",
       screenReaderLabels: {
         calendarIcon: 'Calendar',

package/es/DateInput2/index.js

@@ -24,7 +24,6 @@ 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';
@@ -33,8 +32,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
@@ -249,7 +248,8 @@ const DateInput2 = ({
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
   const selectedDate = parseDate(value)[1];
-  return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
+  return _jsx(TextInput, {
+    ...passthroughProps(rest),
     inputRef: inputRef,
     renderLabel: renderLabel,
     onChange: handleInputChange,
@@ -262,49 +262,51 @@ 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
-      }, renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
+        interaction: interaction,
+        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = _jsx(IconCalendarMonthLine, {}))
+      }),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
       onHideContent: () => setShowPopover(false),
       on: "click",
       shouldContainFocus: true,
       shouldReturnFocus: true,
-      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
+      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
+        })
       })
-    }))
-  }));
+    })
+  });
 };
 DateInput2.propTypes = propTypes;
 export default DateInput2;