@instructure/ui-date-input 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/es/DateInput/v1/index.js

@@ -1,28 +1,5 @@
-var _dec, _class;
-/*
- * 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 { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, Component } from 'react';
 import { Calendar } from '@instructure/ui-calendar/v11_6';
 import { IconCalendarMonthLine } from '@instructure/ui-icons';
@@ -35,383 +12,312 @@ 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, null), _dec(_class = class DateInput extends Component {
-  static displayName = 'DateInput';
-  static componentId = 'DateInput';
-  static Day = Calendar.Day;
-  static allowedProps = allowedProps;
-  static 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
-  };
-  state = {
-    hasInputRef: false,
-    isShowingCalendar: false,
-    validatedDate: undefined,
-    messages: []
-  };
-  _input = undefined;
-  ref = null;
-  locale() {
-    if (this.props.locale) {
-      return this.props.locale;
-    } else if (this.context && this.context.locale) {
-      return this.context.locale;
+class DateInput extends Component {
+    static{
+        this.displayName = 'DateInput';
     }
-    return Locale.browserLocale();
-  }
-  timezone() {
-    if (this.props.timezone) {
-      return this.props.timezone;
-    } else if (this.context && this.context.timezone) {
-      return this.context.timezone;
+    static{
+        this.componentId = 'DateInput';
     }
-    return DateTime.browserTimeZone();
-  }
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  get selectedDateId() {
-    let selectedDateId;
-    Children.toArray(this.props.children).forEach(day => {
-      const {
-        date,
-        isSelected
-      } = day.props;
-      if (isSelected) {
-        selectedDateId = this.formatDateId(date);
-      }
-    });
-    return selectedDateId;
-  }
-  get interaction() {
-    return getInteraction({
-      props: this.props
-    });
-  }
-  formatDateId = date => {
-    // ISO8601 strings may contain a space. Remove any spaces before using the
-    // date as the id.
-    return date.replace(/\s/g, '');
-  };
-  handleInputRef = el => {
-    // 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
-      });
+    static{
+        this.Day = Calendar.Day;
     }
-    this._input = el;
-    this.props.inputRef?.(el);
-  };
-  handleInputChange = (event, value) => {
-    this.props.onChange?.(event, {
-      value
-    });
-    this.handleShowCalendar(event);
-  };
-  handleShowCalendar = event => {
-    if (!this.props.children) {
-      this.setState({
-        isShowingCalendar: true
-      });
-    } else if (this.interaction === 'enabled' && this.props.children) {
-      this.props.onRequestShowCalendar?.(event);
+    static{
+        this.allowedProps = allowedProps;
     }
-  };
-  validateDate = date => {
-    const {
-      invalidDateErrorMessage
-    } = this.props;
-    const disabledDateErrorMessage = this.props.disabledDateErrorMessage || invalidDateErrorMessage;
-    const messages = [];
-    // check if date is enabled
-    const {
-      disabledDates
-    } = this.props;
-    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
-      });
+    static{
+        this.defaultProps = {
+            value: '',
+            size: 'medium',
+            onBlur: ()=>{},
+            isRequired: false,
+            isInline: false,
+            layout: 'stacked',
+            display: 'inline-block',
+            placement: 'bottom center',
+            isShowingCalendar: false
+        };
     }
-
-    // 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
-      });
+    locale() {
+        if (this.props.locale) {
+            return this.props.locale;
+        } else if (this.context && this.context.locale) {
+            return this.context.locale;
+        }
+        return Locale.browserLocale();
     }
-    return messages;
-  };
-  handleHideCalendar = (event, setectedDate) => {
-    if (!this.props.children) {
-      const dateString = setectedDate || this.props.value;
-      const messages = [];
-      if (this.props.onRequestValidateDate) {
-        const userValidatedDate = this.props.onRequestValidateDate?.(event, dateString || '', this.validateDate(dateString || ''));
-        messages.push(...(userValidatedDate || []));
-      } else {
-        if (dateString) {
-          messages.push(...this.validateDate(dateString));
+    timezone() {
+        if (this.props.timezone) {
+            return this.props.timezone;
+        } else if (this.context && this.context.timezone) {
+            return this.context.timezone;
         }
-      }
-      this.setState({
-        messages,
-        isShowingCalendar: false
-      });
-    } else {
-      this.props.onRequestValidateDate?.(event);
-      this.props.onRequestHideCalendar?.(event);
+        return DateTime.browserTimeZone();
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    get selectedDateId() {
+        let selectedDateId;
+        Children.toArray(this.props.children).forEach((day)=>{
+            const { date, isSelected } = day.props;
+            if (isSelected) {
+                selectedDateId = this.formatDateId(date);
+            }
+        });
+        return selectedDateId;
     }
-  };
-  handleHighlightOption = (event, {
-    direction
-  }) => {
-    const {
-      onRequestSelectNextDay,
-      onRequestSelectPrevDay,
-      onChange,
-      value,
-      currentDate
-    } = this.props;
-    const isValueValid = value && DateTime.parse(value, this.locale(), this.timezone()).isValid();
-    if (direction === -1) {
-      if (onRequestSelectPrevDay) {
-        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')
+    get interaction() {
+        return getInteraction({
+            props: this.props
         });
-        this.setState({
-          messages: []
+    }
+    renderMonthNavigationButton(type = 'prev') {
+        const { renderPrevMonthButton, renderNextMonthButton } = this.props;
+        const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
+        return button && safeCloneElement(callRenderProp(button), {
+            tabIndex: -1
         });
-      }
     }
-    if (direction === 1) {
-      if (onRequestSelectNextDay) {
-        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')
+    renderDays(getOptionProps) {
+        const children = this.props.children;
+        if (!children) return;
+        return Children.map(children, (day)=>{
+            const { date, isOutsideMonth } = day.props;
+            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);
         });
-        this.setState({
-          messages: []
+    }
+    renderCalendar({ getListProps, getOptionProps }) {
+        const { onRequestRenderNextMonth, onRequestRenderPrevMonth, renderNavigationLabel, renderWeekdayLabels, value, onChange, disabledDates, currentDate, selectedLabel } = this.props;
+        const isValidDate = value ? DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
+        const noChildrenProps = this.props.children ? {} : {
+            disabledDates,
+            currentDate,
+            selectedDate: isValidDate ? value : undefined,
+            visibleMonth: isValidDate ? value : undefined,
+            onDateSelected: (dateString, momentDate, e)=>{
+                onChange?.(e, {
+                    value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
+                });
+                this.handleHideCalendar(e, dateString);
+            }
+        };
+        return /*#__PURE__*/ _jsx(Calendar, {
+            ...getListProps({
+                onRequestRenderNextMonth,
+                onRequestRenderPrevMonth,
+                renderNavigationLabel,
+                renderWeekdayLabels,
+                renderNextMonthButton: this.renderMonthNavigationButton('next'),
+                renderPrevMonthButton: this.renderMonthNavigationButton('prev'),
+                selectedLabel
+            }),
+            ...noChildrenProps,
+            children: this.renderDays(getOptionProps)
         });
-      }
     }
-  };
-  renderMonthNavigationButton(type = 'prev') {
-    const {
-      renderPrevMonthButton,
-      renderNextMonthButton
-    } = this.props;
-    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 {
-        date,
-        isOutsideMonth
-      } = day.props;
-      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 {
-      onRequestRenderNextMonth,
-      onRequestRenderPrevMonth,
-      renderNavigationLabel,
-      renderWeekdayLabels,
-      value,
-      onChange,
-      disabledDates,
-      currentDate,
-      selectedLabel
-    } = this.props;
-    const isValidDate = value ? DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
-    const noChildrenProps = this.props.children ? {} : {
-      disabledDates,
-      currentDate,
-      selectedDate: isValidDate ? value : undefined,
-      visibleMonth: isValidDate ? value : undefined,
-      onDateSelected: (dateString, momentDate, e) => {
-        // @ts-expect-error TODO
-        onChange?.(e, {
-          value: `${momentDate.format('MMMM')} ${momentDate.format('D')}, ${momentDate.format('YYYY')}`
+    renderInput({ getInputProps, getTriggerProps }) {
+        const { renderLabel, value, placeholder, onBlur, isRequired, size, isInline, layout, width, onRequestValidateDate, onRequestShowCalendar, onRequestHideCalendar, onRequestSelectNextDay, onRequestSelectPrevDay, onRequestRenderNextMonth, onRequestRenderPrevMonth, ...rest } = this.props;
+        const { interaction } = this;
+        const { ref, ...triggerProps } = getTriggerProps();
+        const messages = this.props.messages || this.state.messages;
+        return /*#__PURE__*/ _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: /*#__PURE__*/ _jsx(IconCalendarMonthLine, {
+                    inline: false
+                })
+            }),
+            onKeyDown: (e)=>{
+                if (!this.props.children) {
+                    if (e.key === 'Enter') {
+                        this.handleHideCalendar(e);
+                    }
+                }
+                triggerProps.onKeyDown?.(e);
+            }
         });
-        this.handleHideCalendar(e, dateString);
-      }
-    };
-    return _jsx(Calendar, {
-      ...getListProps({
-        onRequestRenderNextMonth,
-        onRequestRenderPrevMonth,
-        renderNavigationLabel,
-        renderWeekdayLabels,
-        renderNextMonthButton: this.renderMonthNavigationButton('next'),
-        renderPrevMonthButton: this.renderMonthNavigationButton('prev'),
-        selectedLabel
-      }),
-      ...noChildrenProps,
-      children: this.renderDays(getOptionProps)
-    });
-  }
-  renderInput({
-    getInputProps,
-    getTriggerProps
-  }) {
-    const {
-      renderLabel,
-      value,
-      placeholder,
-      onBlur,
-      isRequired,
-      size,
-      isInline,
-      layout,
-      width,
-      onRequestValidateDate,
-      onRequestShowCalendar,
-      onRequestHideCalendar,
-      onRequestSelectNextDay,
-      onRequestSelectPrevDay,
-      onRequestRenderNextMonth,
-      onRequestRenderPrevMonth,
-      ...rest
-    } = this.props;
-    const {
-      interaction
-    } = this;
-    const {
-      ref,
-      // Apply this to the actual inputRef
-      ...triggerProps
-    } = getTriggerProps();
-    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: _jsx(IconCalendarMonthLine, {
-          inline: false
-        })
-      }),
-      onKeyDown: e => {
-        if (!this.props.children) {
-          if (e.key === 'Enter') {
-            // @ts-expect-error TODO
-            this.handleHideCalendar(e);
-          }
-        }
-        triggerProps.onKeyDown?.(e);
-      }
-    });
-  }
-  shouldShowCalendar = () => this.props.children ? this.props.isShowingCalendar : this.state.isShowingCalendar;
-  render() {
-    const {
-      placement,
-      assistiveText,
-      styles
-    } = this.props;
-    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?.dateInput
-        }),
-        ref: el => {
-          this.ref = el;
-        },
-        "data-cid": "DateInput",
-        children: [this.renderInput({
-          getInputProps,
-          getTriggerProps
-        }), _jsx("span", {
-          ...getDescriptionProps(),
-          css: styles?.assistiveText,
-          children: assistiveText
-        }), _jsx(Popover, {
-          placement: placement,
-          isShowingContent: isShowingCalendar,
-          positionTarget: this._input,
-          shouldReturnFocus: false,
-          shouldFocusContentOnTriggerBlur: true,
-          children: this.renderCalendar({
-            getListProps,
-            getOptionProps
-          })
-        })]
-      })
-    });
-  }
-}) || _class);
+    }
+    render() {
+        const { placement, assistiveText, styles } = this.props;
+        const isShowingCalendar = this.shouldShowCalendar();
+        return /*#__PURE__*/ _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 })=>/*#__PURE__*/ _jsxs("span", {
+                    ...getRootProps({
+                        css: styles?.dateInput
+                    }),
+                    ref: (el)=>{
+                        this.ref = el;
+                    },
+                    "data-cid": "DateInput",
+                    children: [
+                        this.renderInput({
+                            getInputProps,
+                            getTriggerProps
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            ...getDescriptionProps(),
+                            css: styles?.assistiveText,
+                            children: assistiveText
+                        }),
+                        /*#__PURE__*/ _jsx(Popover, {
+                            placement: placement,
+                            isShowingContent: isShowingCalendar,
+                            positionTarget: this._input,
+                            shouldReturnFocus: false,
+                            shouldFocusContentOnTriggerBlur: true,
+                            children: this.renderCalendar({
+                                getListProps,
+                                getOptionProps
+                            })
+                        })
+                    ]
+                })
+        });
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            hasInputRef: false,
+            isShowingCalendar: false,
+            validatedDate: undefined,
+            messages: []
+        }, this._input = undefined, this.ref = null, this.formatDateId = (date)=>{
+            return date.replace(/\s/g, '');
+        }, this.handleInputRef = (el)=>{
+            if (!this.state.hasInputRef) {
+                this.setState({
+                    hasInputRef: true
+                });
+            }
+            this._input = el;
+            this.props.inputRef?.(el);
+        }, this.handleInputChange = (event, value)=>{
+            this.props.onChange?.(event, {
+                value
+            });
+            this.handleShowCalendar(event);
+        }, this.handleShowCalendar = (event)=>{
+            if (!this.props.children) {
+                this.setState({
+                    isShowingCalendar: true
+                });
+            } else if (this.interaction === 'enabled' && this.props.children) {
+                this.props.onRequestShowCalendar?.(event);
+            }
+        }, this.validateDate = (date)=>{
+            const { invalidDateErrorMessage } = this.props;
+            const disabledDateErrorMessage = this.props.disabledDateErrorMessage || invalidDateErrorMessage;
+            const messages = [];
+            const { disabledDates } = this.props;
+            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
+                });
+            }
+            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) {
+                    const userValidatedDate = this.props.onRequestValidateDate?.(event, dateString || '', this.validateDate(dateString || ''));
+                    messages.push(...userValidatedDate || []);
+                } else {
+                    if (dateString) {
+                        messages.push(...this.validateDate(dateString));
+                    }
+                }
+                this.setState({
+                    messages,
+                    isShowingCalendar: false
+                });
+            } else {
+                this.props.onRequestValidateDate?.(event);
+                this.props.onRequestHideCalendar?.(event);
+            }
+        }, this.handleHighlightOption = (event, { direction })=>{
+            const { onRequestSelectNextDay, onRequestSelectPrevDay, onChange, value, currentDate } = this.props;
+            const isValueValid = value && DateTime.parse(value, this.locale(), this.timezone()).isValid();
+            if (direction === -1) {
+                if (onRequestSelectPrevDay) {
+                    onRequestSelectPrevDay?.(event);
+                } else {
+                    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?.(event);
+                } else {
+                    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;
+    }
+}
+DateInput = _ts_decorate([
+    withStyle(generateStyle, null)
+], DateInput);
 export default DateInput;
-export { DateInput };
+export { DateInput };