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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,27 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "moment-timezone": "^0.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-calendar": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-popover": "11.6.0",
-    "@instructure/ui-selectable": "11.6.0",
-    "@instructure/ui-text-input": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-position": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-calendar": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-form-field": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-popover": "11.6.1-snapshot-129",
+    "@instructure/ui-selectable": "11.6.1-snapshot-129",
+    "@instructure/ui-position": "11.6.1-snapshot-129",
+    "@instructure/ui-text-input": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-scripts": "11.6.0"
+    "@instructure/ui-scripts": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -46,17 +46,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/DateInput/{index.tsx → v1/index.tsx}

@@ -24,17 +24,20 @@
 
 import { Children, Component, ReactElement } from 'react'
 
-import { Calendar } from '@instructure/ui-calendar'
-import type { CalendarProps, CalendarDayProps } from '@instructure/ui-calendar'
+import { Calendar } from '@instructure/ui-calendar/v11_6'
+import type {
+  CalendarProps,
+  CalendarDayProps
+} from '@instructure/ui-calendar/v11_6'
 import { IconCalendarMonthLine } from '@instructure/ui-icons'
-import { Popover } from '@instructure/ui-popover'
+import { Popover } from '@instructure/ui-popover/v11_6'
 import { Selectable } from '@instructure/ui-selectable'
 import type {
   SelectableProps,
   SelectableRender
 } from '@instructure/ui-selectable'
-import { TextInput } from '@instructure/ui-text-input'
-import type { TextInputProps } from '@instructure/ui-text-input'
+import { TextInput } from '@instructure/ui-text-input/v11_6'
+import type { TextInputProps } from '@instructure/ui-text-input/v11_6'
 import { createChainedFunction } from '@instructure/ui-utils'
 import {
   getInteraction,
@@ -45,13 +48,13 @@ import {
 
 import { DateTime, ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
 import { allowedProps } from './props'
 import type { DateInputProps, DateInputState } from './props'
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { FormMessage } from '@instructure/ui-form-field/v11_6'
 
 /**
 ---

package/src/DateInput/{props.ts → v1/props.ts}

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { CalendarDayProps } from '@instructure/ui-calendar'
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { CalendarDayProps } from '@instructure/ui-calendar/v11_6'
+import type { FormMessage } from '@instructure/ui-form-field/v11_6'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'

package/src/DateInput/v2/README.md

@@ -0,0 +1,315 @@
+---
+describes: DateInput
+---
+
+> _Note:_ we recommend to update to the new [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. `DateInput` will be deprecated in the future.
+
+The `DateInput` component provides a visual interface for inputting date data.
+
+### Composing a DateInput in your Application
+
+`DateInput` uses `Calendar` internally. See [Calendar](Calendar) for more detailed
+documentation and guided examples. `DateInput` shares many of the same `Calendar`
+props and it is created the same way with some additional attributes and callback
+methods for the input. The following example is configured similar to the `Calendar`
+examples using [Moment.js](https://momentjs.com/docs/#/parsing/).
+
+```javascript
+---
+type: example
+---
+
+class Example extends React.Component {
+  state = {
+    value: '',
+    isShowingCalendar: false,
+    todayDate: parseDate('2019-08-28').toISOString(),
+    selectedDate: null,
+    renderedDate: parseDate('2019-08-01').toISOString(),
+    disabledDates: [
+      parseDate('2019-08-14').toISOString(),
+      parseDate('2019-08-19').toISOString(),
+      parseDate('2019-08-29').toISOString()
+    ],
+    messages: []
+  }
+
+  generateMonth = (renderedDate = this.state.renderedDate) => {
+    const date = parseDate(renderedDate)
+      .startOf('month')
+      .startOf('week')
+
+    return Array.apply(null, Array(Calendar.DAY_COUNT)).map(() => {
+      const currentDate = date.clone()
+      date.add({days: 1})
+
+      // This workaround is needed because moment's `.add({days: 1})` function has a bug that happens when the date added lands perfectly onto the DST cutoff,
+      // in these cases adding 1 day results in 23 hours added instead,
+      // so `moment.tz('2024-09-07T00:00:00', 'America/Santiago').add({days: 1})` results
+      // in "Sat Sep 07 2024 23:00:00 GMT-0400" instead of "Sun Sep 08 2024 00:00:00 GMT-0400".
+      // which would cause duplicate dates in the calendar.
+      // More info on the bug: https://github.com/moment/moment/issues/4743
+      // Please note that this causes one hour of time difference in the affected timezones/dates and to
+      // fully solve this bug we need to change to something like luxon which handles this properly
+      if (currentDate.clone().format('HH') === '23') {
+        return currentDate.clone().add({hours: 1})
+      }
+
+      return currentDate.clone()
+    })
+  }
+
+  formatDate = (dateInput) => {
+    const date = parseDate(dateInput)
+    return `${date.format('MMMM')} ${date.format('D')}, ${date.format('YYYY')}`
+  }
+
+  handleChange = (event, { value }) => {
+    const newDateStr = parseDate(value).toISOString()
+
+    this.setState(({ renderedDate }) => ({
+      value,
+      selectedDate: newDateStr,
+      renderedDate: newDateStr || renderedDate,
+      messages: []
+    }))
+  }
+
+  handleShowCalendar = (event) => {
+    this.setState({ isShowingCalendar: true })
+  }
+
+  handleHideCalendar = (event) => {
+    this.setState(({ selectedDate, disabledDates, value }) => ({
+      isShowingCalendar: false,
+      value: selectedDate ? this.formatDate(selectedDate) : value
+    }))
+  }
+
+  handleValidateDate = (event) => {
+    this.setState(({ selectedDate, value }) => {
+      // We don't have a selectedDate but we have a value. That means that the value
+      // could not be parsed and so the date is invalid
+      if (!selectedDate && value) {
+        return {
+          messages: [{ type: 'error', text: 'This date is invalid' }],
+        }
+      }
+      // Display a message if the user has typed in a value that corresponds to a
+      // disabledDate
+      if (this.isDisabledDate(parseDate(selectedDate))) {
+        return {
+          messages: [{ type: 'error', text: 'This date is disabled' }],
+        }
+      }
+    })
+  }
+
+  handleDayClick = (event, { date }) => {
+    this.setState({
+      selectedDate: date,
+      renderedDate: date,
+      messages: []
+    })
+  }
+
+  handleSelectNextDay = (event) => {
+    this.modifySelectedDate('day', 1)
+  }
+
+  handleSelectPrevDay = (event) => {
+    this.modifySelectedDate('day', -1)
+  }
+
+  handleRenderNextMonth = (event) => {
+    this.modifyRenderedDate('month', 1)
+  }
+
+  handleRenderPrevMonth = (event) => {
+    this.modifyRenderedDate('month', -1)
+  }
+
+  modifyRenderedDate = (type, step) => {
+    this.setState(({ renderedDate }) => {
+      return { renderedDate: this.modifyDate(renderedDate, type, step) }
+    })
+  }
+
+  modifySelectedDate = (type, step) => {
+    this.setState(({ selectedDate, renderedDate }) => {
+      // We are either going to increase or decrease our selectedDate by 1 day.
+      // If we do not have a selectedDate yet, we'll just select the first day of
+      // the currently rendered month instead.
+      const newDate = selectedDate
+        ? this.modifyDate(selectedDate, type, step)
+        : parseDate(renderedDate).startOf('month').toISOString()
+
+      return {
+        selectedDate: newDate,
+        renderedDate: newDate,
+        value: this.formatDate(newDate),
+        messages: []
+      }
+    })
+  }
+
+  modifyDate = (dateStr, type, step) => {
+    const date = parseDate(dateStr)
+    date.add(step, type)
+    return date.toISOString()
+  }
+
+  isDisabledDate = (date, disabledDates = this.state.disabledDates) => {
+    return disabledDates.reduce((result, disabledDate) => {
+      return result || date.isSame(disabledDate, 'day')
+    }, false)
+  }
+
+  renderWeekdayLabels = () => {
+    const date = parseDate(this.state.renderedDate).startOf('week')
+
+    return Array.apply(null, Array(7)).map(() => {
+      const currentDate = date.clone()
+      date.add(1, 'day')
+
+      return (
+        <AccessibleContent alt={currentDate.format('dddd')}>
+          {currentDate.format('dd')}
+        </AccessibleContent>
+      )
+    })
+  }
+
+  renderDays () {
+    const {
+      renderedDate,
+      selectedDate,
+      todayDate,
+    } = this.state
+
+    return this.generateMonth().map((date) => {
+      const dateStr = date.toISOString()
+
+      return (
+        <DateInput.Day
+          key={dateStr}
+          date={dateStr}
+          interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
+          isSelected={date.isSame(selectedDate, 'day')}
+          isToday={date.isSame(todayDate, 'day')}
+          isOutsideMonth={!date.isSame(renderedDate, 'month')}
+          label={`${date.format('D')} ${date.format('MMMM')} ${date.format('YYYY')}`}
+          onClick={this.handleDayClick}
+        >
+          {date.format('D')}
+        </DateInput.Day>
+      )
+    })
+  }
+
+  render () {
+    const {
+      value,
+      isShowingCalendar,
+      renderedDate,
+      messages
+    } = this.state
+
+    const date = parseDate(this.state.renderedDate)
+
+    const buttonProps = (type = 'prev') => ({
+      size: 'small',
+      withBackground: false,
+      withBorder: false,
+      renderIcon: type === 'prev'
+        ? <ChevronLeftInstUIIcon color="baseColor" />
+        : <ChevronRightInstUIIcon color="baseColor" />,
+      screenReaderLabel: type === 'prev' ? 'Previous month' : 'Next month'
+    })
+
+    return (
+      <DateInput
+        renderLabel="Choose a date"
+        assistiveText="Type a date or use arrow keys to navigate date picker."
+        value={value}
+        onChange={this.handleChange}
+        width="20rem"
+        isInline
+        messages={messages}
+        isShowingCalendar = {this.state.isShowingCalendar}
+        onRequestValidateDate={this.handleValidateDate}
+        onRequestShowCalendar={this.handleShowCalendar}
+        onRequestHideCalendar={this.handleHideCalendar}
+        onRequestSelectNextDay={this.handleSelectNextDay}
+        onRequestSelectPrevDay={this.handleSelectPrevDay}
+        onRequestRenderNextMonth={this.handleRenderNextMonth}
+        onRequestRenderPrevMonth={this.handleRenderPrevMonth}
+        renderNavigationLabel={
+          <span>
+            <div>{date.format('MMMM')}</div>
+            <div>{date.format('YYYY')}</div>
+          </span>
+        }
+        renderPrevMonthButton={<IconButton {...buttonProps('prev')} />}
+        renderNextMonthButton={<IconButton {...buttonProps('next')} />}
+        renderWeekdayLabels={this.renderWeekdayLabels()}
+      >
+        {this.renderDays()}
+      </DateInput>
+    )
+  }
+}
+
+const locale = 'en-us'
+const timezone = 'America/Denver'
+
+const parseDate = (dateStr) => {
+  return moment.tz(dateStr, [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, timezone)
+}
+
+render(<Example />)
+```
+
+#### Some dates to keep track of
+
+- `todayDate` - the date that represents today
+- `selectedDate` - the user's selected date
+- `renderedDate` - the date that the user is viewing as they navigate the `Calendar`
+- `disabledDates` - any dates that are disabled
+
+#### Rendering `DateInput.Day` children
+
+`DateInput` accepts children of type `DateInput.Day`. Both `DateInput.Day` and
+`Calendar.Day` are exporting the same `Day` component. The documentation for
+`Day` can be found in [Calendar](Calendar).
+
+#### Handling onChange
+
+When the `DateInput` fires an `onChange` event:
+
+- The value should be updated and any messages should be cleared
+- Verify if the value can be parsed as a date
+- If it can be parsed, update the `selectedDate` and `renderedDate` with that date
+- If it cannot be parsed, the `selectedDate` is set to null and the `renderedDate`
+  stays the same
+
+#### Handling onRequestHideCalendar
+
+When the `DateInput` fires `onRequestHideCalendar`:
+
+- The calendar should be hidden
+- The value should be updated with a formatted version of the `selectedDate` if
+  it exists. See "Formatting user input" below
+
+#### Formatting user input
+
+Date formats can vary widely (ex. '8-9-19' vs '8/9/19'). When the `Calendar` is
+hidden, the input value should be converted to a consistent, standardized format.
+The formatted result of the raw input '8/9/19'
+could be "August 9, 2019".
+
+#### Handling onRequestValidateDate
+
+When the `DateInput` fires `onRequestValidateDate`, the provided user input
+should be validated. If the value cannot be parsed as a valid date, or if the
+`selectedDate` is disabled, the user should be notified via the `messages` prop.