@instructure/ui-date-input 11.6.0 → 11.6.1-snapshot-129

package/es/DateInput/v2/index.js

@@ -0,0 +1,407 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
+  _excluded2 = ["ref"];
+var _dec, _class, _DateInput, _CalendarInstUIIcon;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component } from 'react';
+import { Calendar } from '@instructure/ui-calendar/latest';
+import { CalendarInstUIIcon } from '@instructure/ui-icons';
+import { Popover } from '@instructure/ui-popover/latest';
+import { Selectable } from '@instructure/ui-selectable';
+import { TextInput } from '@instructure/ui-text-input/latest';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { getInteraction, callRenderProp, safeCloneElement, passthroughProps } from '@instructure/ui-react-utils';
+import { DateTime, Locale } from '@instructure/ui-i18n';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let DateInput = (_dec = withStyle(generateStyle), _dec(_class = (_DateInput = class DateInput extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      hasInputRef: false,
+      isShowingCalendar: false,
+      validatedDate: void 0,
+      messages: []
+    };
+    this._input = void 0;
+    this.ref = null;
+    this.formatDateId = date => {
+      // ISO8601 strings may contain a space. Remove any spaces before using the
+      // date as the id.
+      return date.replace(/\s/g, '');
+    };
+    this.handleInputRef = el => {
+      var _this$props$inputRef, _this$props;
+      // Ensures that we position the Calendar with respect to the input correctly
+      // if the Calendar is open on mount
+      if (!this.state.hasInputRef) {
+        this.setState({
+          hasInputRef: true
+        });
+      }
+      this._input = el;
+      (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
+    };
+    this.handleInputChange = (event, value) => {
+      var _this$props$onChange, _this$props2;
+      (_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
+        value
+      });
+      this.handleShowCalendar(event);
+    };
+    this.handleShowCalendar = event => {
+      if (!this.props.children) {
+        this.setState({
+          isShowingCalendar: true
+        });
+      } else if (this.interaction === 'enabled' && this.props.children) {
+        var _this$props$onRequest, _this$props3;
+        (_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
+      }
+    };
+    this.validateDate = date => {
+      const invalidDateErrorMessage = this.props.invalidDateErrorMessage;
+      const disabledDateErrorMessage = this.props.disabledDateErrorMessage || invalidDateErrorMessage;
+      const messages = [];
+      // check if date is enabled
+      const disabledDates = this.props.disabledDates;
+      if (typeof disabledDates === 'function' && disabledDates(date) || Array.isArray(disabledDates) && disabledDates.find(dateString => DateTime.parse(dateString, this.locale(), this.timezone()).isSame(DateTime.parse(date, this.locale(), this.timezone()), 'day'))) {
+        messages.push(typeof disabledDateErrorMessage === 'function' ? disabledDateErrorMessage(date) : {
+          type: 'error',
+          text: disabledDateErrorMessage
+        });
+      }
+
+      // check if date is valid
+      if (!DateTime.parse(date, this.locale(), this.timezone(), [DateTime.momentISOFormat, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], true).isValid()) {
+        messages.push(typeof invalidDateErrorMessage === 'function' ? invalidDateErrorMessage(date) : {
+          type: 'error',
+          text: invalidDateErrorMessage
+        });
+      }
+      return messages;
+    };
+    this.handleHideCalendar = (event, setectedDate) => {
+      if (!this.props.children) {
+        const dateString = setectedDate || this.props.value;
+        const messages = [];
+        if (this.props.onRequestValidateDate) {
+          var _this$props$onRequest2, _this$props4;
+          const userValidatedDate = (_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event, dateString || '', this.validateDate(dateString || ''));
+          messages.push(...(userValidatedDate || []));
+        } else {
+          if (dateString) {
+            messages.push(...this.validateDate(dateString));
+          }
+        }
+        this.setState({
+          messages,
+          isShowingCalendar: false
+        });
+      } else {
+        var _this$props$onRequest3, _this$props5, _this$props$onRequest4, _this$props6;
+        (_this$props$onRequest3 = (_this$props5 = this.props).onRequestValidateDate) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
+        (_this$props$onRequest4 = (_this$props6 = this.props).onRequestHideCalendar) === null || _this$props$onRequest4 === void 0 ? void 0 : _this$props$onRequest4.call(_this$props6, event);
+      }
+    };
+    this.handleHighlightOption = (event, {
+      direction
+    }) => {
+      const _this$props7 = this.props,
+        onRequestSelectNextDay = _this$props7.onRequestSelectNextDay,
+        onRequestSelectPrevDay = _this$props7.onRequestSelectPrevDay,
+        onChange = _this$props7.onChange,
+        value = _this$props7.value,
+        currentDate = _this$props7.currentDate;
+      const isValueValid = value && DateTime.parse(value, this.locale(), this.timezone()).isValid();
+      if (direction === -1) {
+        if (onRequestSelectPrevDay) {
+          onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
+        } else {
+          // @ts-expect-error TODO
+          onChange(event, {
+            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).subtract(1, 'day').format('MMMM D, YYYY')
+          });
+          this.setState({
+            messages: []
+          });
+        }
+      }
+      if (direction === 1) {
+        if (onRequestSelectNextDay) {
+          onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
+        } else {
+          // @ts-expect-error TODO
+          onChange(event, {
+            value: DateTime.parse(isValueValid ? value : currentDate, this.locale(), this.timezone()).add(1, 'day').format('MMMM D, YYYY')
+          });
+          this.setState({
+            messages: []
+          });
+        }
+      }
+    };
+    this.shouldShowCalendar = () => this.props.children ? this.props.isShowingCalendar : this.state.isShowingCalendar;
+  }
+  locale() {
+    if (this.props.locale) {
+      return this.props.locale;
+    } else if (this.context && this.context.locale) {
+      return this.context.locale;
+    }
+    return Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return DateTime.browserTimeZone();
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props8;
+    (_this$props$makeStyle = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props8);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props9;
+    (_this$props$makeStyle2 = (_this$props9 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props9);
+  }
+  get selectedDateId() {
+    let selectedDateId;
+    Children.toArray(this.props.children).forEach(day => {
+      const _props = day.props,
+        date = _props.date,
+        isSelected = _props.isSelected;
+      if (isSelected) {
+        selectedDateId = this.formatDateId(date);
+      }
+    });
+    return selectedDateId;
+  }
+  get interaction() {
+    return getInteraction({
+      props: this.props
+    });
+  }
+  renderMonthNavigationButton(type = 'prev') {
+    const _this$props0 = this.props,
+      renderPrevMonthButton = _this$props0.renderPrevMonthButton,
+      renderNextMonthButton = _this$props0.renderNextMonthButton;
+    const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
+    return button && safeCloneElement(callRenderProp(button), {
+      tabIndex: -1
+    });
+  }
+  renderDays(getOptionProps) {
+    const children = this.props.children;
+    if (!children) return;
+    return Children.map(children, day => {
+      const _day$props = day.props,
+        date = _day$props.date,
+        isOutsideMonth = _day$props.isOutsideMonth;
+      const props = {
+        tabIndex: -1,
+        id: this.formatDateId(date)
+      };
+      const optionProps = getOptionProps(props);
+      const propsAdded = isOutsideMonth ? {
+        ...props,
+        onClick: optionProps.onClick,
+        role: 'presentation'
+      } : optionProps;
+      return safeCloneElement(day, propsAdded);
+    });
+  }
+  renderCalendar({
+    getListProps,
+    getOptionProps
+  }) {
+    const _this$props1 = this.props,
+      onRequestRenderNextMonth = _this$props1.onRequestRenderNextMonth,
+      onRequestRenderPrevMonth = _this$props1.onRequestRenderPrevMonth,
+      renderNavigationLabel = _this$props1.renderNavigationLabel,
+      renderWeekdayLabels = _this$props1.renderWeekdayLabels,
+      value = _this$props1.value,
+      onChange = _this$props1.onChange,
+      disabledDates = _this$props1.disabledDates,
+      currentDate = _this$props1.currentDate;
+    const isValidDate = value ? DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
+    const noChildrenProps = this.props.children ? {} : {
+      disabledDates,
+      currentDate,
+      selectedDate: isValidDate ? value : void 0,
+      visibleMonth: isValidDate ? value : void 0,
+      onDateSelected: (dateString, momentDate, e) => {
+        // @ts-expect-error TODO
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+          value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
+        });
+        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)
+    });
+  }
+  renderInput({
+    getInputProps,
+    getTriggerProps
+  }) {
+    const _this$props10 = this.props,
+      renderLabel = _this$props10.renderLabel,
+      value = _this$props10.value,
+      placeholder = _this$props10.placeholder,
+      onBlur = _this$props10.onBlur,
+      isRequired = _this$props10.isRequired,
+      size = _this$props10.size,
+      isInline = _this$props10.isInline,
+      layout = _this$props10.layout,
+      width = _this$props10.width,
+      onRequestValidateDate = _this$props10.onRequestValidateDate,
+      onRequestShowCalendar = _this$props10.onRequestShowCalendar,
+      onRequestHideCalendar = _this$props10.onRequestHideCalendar,
+      onRequestSelectNextDay = _this$props10.onRequestSelectNextDay,
+      onRequestSelectPrevDay = _this$props10.onRequestSelectPrevDay,
+      onRequestRenderNextMonth = _this$props10.onRequestRenderNextMonth,
+      onRequestRenderPrevMonth = _this$props10.onRequestRenderPrevMonth,
+      rest = _objectWithoutProperties(_this$props10, _excluded);
+    const interaction = this.interaction;
+    const _getTriggerProps = getTriggerProps(),
+      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: _CalendarInstUIIcon || (_CalendarInstUIIcon = _jsx(CalendarInstUIIcon, {}))
+      }),
+      onKeyDown: e => {
+        var _triggerProps$onKeyDo;
+        if (!this.props.children) {
+          if (e.key === 'Enter') {
+            // @ts-expect-error TODO
+            this.handleHideCalendar(e);
+          }
+        }
+        (_triggerProps$onKeyDo = triggerProps.onKeyDown) === null || _triggerProps$onKeyDo === void 0 ? void 0 : _triggerProps$onKeyDo.call(triggerProps, e);
+      }
+    });
+  }
+  render() {
+    const _this$props11 = this.props,
+      placement = _this$props11.placement,
+      assistiveText = _this$props11.assistiveText,
+      styles = _this$props11.styles;
+    const isShowingCalendar = this.shouldShowCalendar();
+    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;
+        },
+        "data-cid": "DateInput",
+        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.allowedProps = allowedProps, _DateInput.defaultProps = {
+  value: '',
+  size: 'medium',
+  onBlur: () => {},
+  // must have a default so createChainedFunction works
+  isRequired: false,
+  isInline: false,
+  layout: 'stacked',
+  display: 'inline-block',
+  placement: 'bottom center',
+  isShowingCalendar: false
+}, _DateInput)) || _class);
+export default DateInput;
+export { DateInput };

package/es/DateInput/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone'];
+export { allowedProps };

package/es/DateInput/v2/styles.js

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  _componentTheme The theme variable object.
+ * @param  props the props of the component, the style is applied to
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (_componentTheme, props) => {
+  return {
+    dateInput: {
+      label: 'dateInput',
+      display: props.display
+    },
+    assistiveText: {
+      label: 'dateInput__assistiveText',
+      display: 'none'
+    }
+  };
+};
+export default generateStyle;

package/es/DateInput2/{index.js → v1/index.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
+var _CalendarInstUIIcon, _ChevronRightInstUIIc, _ChevronLeftInstUIIco;
 /*
  * The MIT License (MIT)
  *
@@ -25,11 +25,11 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  */
 
 import { useState, useEffect, forwardRef } from 'react';
-import { Calendar } from '@instructure/ui-calendar';
-import { IconButton } from '@instructure/ui-buttons';
-import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
-import { Popover } from '@instructure/ui-popover';
-import { TextInput } from '@instructure/ui-text-input';
+import { Calendar } from '@instructure/ui-calendar/v11_6';
+import { IconButton } from '@instructure/ui-buttons/v11_6';
+import { CalendarInstUIIcon, ChevronLeftInstUIIcon, ChevronRightInstUIIcon } from '@instructure/ui-icons';
+import { Popover } from '@instructure/ui-popover/v11_6';
+import { TextInput } from '@instructure/ui-text-input/v11_6';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
 import { getLocale, getTimezone } from '@instructure/ui-i18n';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
@@ -247,7 +247,9 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         interaction: interaction,
-        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = _jsx(IconCalendarMonthLine, {}))
+        children: renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _CalendarInstUIIcon || (_CalendarInstUIIcon = _jsx(CalendarInstUIIcon, {
+          color: "baseColor"
+        }))
       }),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
@@ -269,8 +271,8 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {
-            color: "primary"
+          renderIcon: _ChevronRightInstUIIc || (_ChevronRightInstUIIc = _jsx(ChevronRightInstUIIcon, {
+            color: "baseColor"
           })),
           screenReaderLabel: screenReaderLabels.nextMonthButton
         }),
@@ -278,8 +280,8 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = _jsx(IconArrowOpenStartSolid, {
-            color: "primary"
+          renderIcon: _ChevronLeftInstUIIco || (_ChevronLeftInstUIIco = _jsx(ChevronLeftInstUIIcon, {
+            color: "baseColor"
           })),
           screenReaderLabel: screenReaderLabels.prevMonthButton
         })

package/es/{index.js → exports/a.js}

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { DateInput } from "./DateInput/index.js";
-export { DateInput2 } from "./DateInput2/index.js";
+export { DateInput } from "../DateInput/v1/index.js";
+export { DateInput2 } from "../DateInput2/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,8 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { DateInput } from './DateInput'
-export { DateInput2 } from './DateInput2'
-export type { DateInputProps } from './DateInput/props'
-export type { DateInput2Props } from './DateInput2/props'
+export { DateInput } from "../DateInput/v2/index.js";
+export { DateInput2 } from "../DateInput2/v1/index.js";

package/lib/DateInput/{index.js → v1/index.js}

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateInput = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = 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");
+var _v11_ = require("@instructure/ui-calendar/v11_6");
+var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/generated/IconCalendarMonthLine.js");
+var _v11_2 = require("@instructure/ui-popover/v11_6");
 var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
-var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
+var _v11_3 = require("@instructure/ui-text-input/v11_6");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -54,7 +54,7 @@ var _dec, _class, _DateInput, _IconCalendarMonthLin;
 category: components
 ---
 **/
-let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_DateInput = class DateInput extends _react.Component {
+let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_DateInput = class DateInput extends _react.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -280,7 +280,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         this.handleHideCalendar(e, dateString);
       }
     };
-    return (0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+    return (0, _jsxRuntime.jsx)(_v11_.Calendar, {
       ...getListProps({
         onRequestRenderNextMonth,
         onRequestRenderPrevMonth,
@@ -320,7 +320,7 @@ 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, {
+    return (0, _jsxRuntime.jsx)(_v11_3.TextInput, {
       ...triggerProps,
       ...(0, _passthroughProps.passthroughProps)(rest),
       ...getInputProps({
@@ -389,7 +389,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
           ...getDescriptionProps(),
           css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
           children: assistiveText
-        }), (0, _jsxRuntime.jsx)(_Popover.Popover, {
+        }), (0, _jsxRuntime.jsx)(_v11_2.Popover, {
           placement: placement,
           isShowingContent: isShowingCalendar,
           positionTarget: this._input,
@@ -403,7 +403,7 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       })
     });
   }
-}, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day = _Calendar.Calendar.Day, _DateInput.allowedProps = _props2.allowedProps, _DateInput.defaultProps = {
+}, _DateInput.displayName = "DateInput", _DateInput.componentId = 'DateInput', _DateInput.Day = _v11_.Calendar.Day, _DateInput.allowedProps = _props2.allowedProps, _DateInput.defaultProps = {
   value: '',
   size: 'medium',
   onBlur: () => {},