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

package/lib/DateInput/v2/index.js

@@ -0,0 +1,416 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 _latest = require("@instructure/ui-calendar/latest");
+var _uiIcons = require("@instructure/ui-icons");
+var _latest2 = require("@instructure/ui-popover/latest");
+var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
+var _latest3 = require("@instructure/ui-text-input/latest");
+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");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+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, _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.
+ */
+/**
+---
+category: components
+---
+**/
+let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_DateInput = class DateInput extends _react.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.DateTime.parse(dateString, this.locale(), this.timezone()).isSame(_DateTime.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.DateTime.parse(date, this.locale(), this.timezone(), [_DateTime.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.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.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.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.Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return _DateTime.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;
+    _react.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 (0, _getInteraction.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 && (0, _safeCloneElement.safeCloneElement)((0, _callRenderProp.callRenderProp)(button), {
+      tabIndex: -1
+    });
+  }
+  renderDays(getOptionProps) {
+    const children = this.props.children;
+    if (!children) return;
+    return _react.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 (0, _safeCloneElement.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.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 (0, _jsxRuntime.jsx)(_latest.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 = (0, _objectWithoutProperties2.default)(_this$props10, _excluded);
+    const interaction = this.interaction;
+    const _getTriggerProps = getTriggerProps(),
+      ref = _getTriggerProps.ref,
+      triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded2);
+    const messages = this.props.messages || this.state.messages;
+    return (0, _jsxRuntime.jsx)(_latest3.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: _CalendarInstUIIcon || (_CalendarInstUIIcon = (0, _jsxRuntime.jsx)(_uiIcons.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 (0, _jsxRuntime.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;
+        },
+        "data-cid": "DateInput",
+        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)(_latest2.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 = _latest.Calendar.Day, _DateInput.allowedProps = _props2.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);
+var _default = exports.default = DateInput;

package/lib/DateInput/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.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'];

package/lib/DateInput/v2/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -7,19 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateInput2 = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
-var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
-var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
-var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
-var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
-var _Popover = require("@instructure/ui-popover/lib/Popover");
-var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
+var _v11_ = require("@instructure/ui-calendar/v11_6");
+var _v11_2 = require("@instructure/ui-buttons/v11_6");
+var _uiIcons = require("@instructure/ui-icons");
+var _v11_3 = require("@instructure/ui-popover/v11_6");
+var _v11_4 = require("@instructure/ui-text-input/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _getLocale = require("@instructure/ui-i18n/lib/getLocale.js");
 var _getTimezone = require("@instructure/ui-i18n/lib/getTimezone.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
+var _CalendarInstUIIcon, _ChevronRightInstUIIc, _ChevronLeftInstUIIco;
 /*
  * The MIT License (MIT)
  *
@@ -236,7 +234,7 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
   const selectedDate = parseDate(value)[1];
-  return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
+  return (0, _jsxRuntime.jsx)(_v11_4.TextInput, {
     ...(0, _passthroughProps.passthroughProps)(rest),
     ref: ref,
     inputRef: inputRef,
@@ -251,13 +249,15 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
     messages: inputMessages,
     interaction: interaction,
     margin: margin,
-    renderAfterInput: (0, _jsxRuntime.jsx)(_Popover.Popover, {
-      renderTrigger: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+    renderAfterInput: (0, _jsxRuntime.jsx)(_v11_3.Popover, {
+      renderTrigger: (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
         withBackground: false,
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         interaction: interaction,
-        children: renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _jsxRuntime.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, {}))
+        children: renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _CalendarInstUIIcon || (_CalendarInstUIIcon = (0, _jsxRuntime.jsx)(_uiIcons.CalendarInstUIIcon, {
+          color: "baseColor"
+        }))
       }),
       isShowingContent: showPopover,
       onShowContent: () => setShowPopover(true),
@@ -267,7 +267,7 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
       shouldReturnFocus: true,
       shouldCloseOnDocumentClick: true,
       screenReaderLabel: screenReaderLabels.datePickerDialog,
-      children: (0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+      children: (0, _jsxRuntime.jsx)(_v11_.Calendar, {
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,
         selectedDate: selectedDate,
@@ -275,21 +275,21 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
         visibleMonth: selectedDate,
         locale: userLocale,
         timezone: userTimezone,
-        renderNextMonthButton: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+        renderNextMonthButton: (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
-            color: "primary"
+          renderIcon: _ChevronRightInstUIIc || (_ChevronRightInstUIIc = (0, _jsxRuntime.jsx)(_uiIcons.ChevronRightInstUIIcon, {
+            color: "baseColor"
           })),
           screenReaderLabel: screenReaderLabels.nextMonthButton
         }),
-        renderPrevMonthButton: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+        renderPrevMonthButton: (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
-            color: "primary"
+          renderIcon: _ChevronLeftInstUIIco || (_ChevronLeftInstUIIco = (0, _jsxRuntime.jsx)(_uiIcons.ChevronLeftInstUIIcon, {
+            color: "baseColor"
           })),
           screenReaderLabel: screenReaderLabels.prevMonthButton
         })

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DateInput", {
   enumerable: true,
   get: function () {
-    return _DateInput.DateInput;
+    return _v.DateInput;
   }
 });
 Object.defineProperty(exports, "DateInput2", {
   enumerable: true,
   get: function () {
-    return _DateInput2.DateInput2;
+    return _v2.DateInput2;
   }
 });
-var _DateInput = require("./DateInput");
-var _DateInput2 = require("./DateInput2");
+var _v = require("../DateInput/v1");
+var _v2 = require("../DateInput2/v1");

package/lib/exports/b.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateInput", {
+  enumerable: true,
+  get: function () {
+    return _v.DateInput;
+  }
+});
+Object.defineProperty(exports, "DateInput2", {
+  enumerable: true,
+  get: function () {
+    return _v2.DateInput2;
+  }
+});
+var _v = require("../DateInput/v2");
+var _v2 = require("../DateInput2/v1");