@elliemae/ds-form-date-time-picker 3.2.1-rc.3 → 3.3.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -92,7 +92,7 @@ const CalendarHead = () => {
92
92
  innerRef: handlePrevYearRef,
93
93
  onKeyDown: handlePrevYearKeyDown,
94
94
  onFocus: onPrevYearFocus,
95
- tabIndex: isControllerOnly ? -1 : 1,
95
+ tabIndex: isControllerOnly ? -1 : 0,
96
96
  "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
97
97
  type: "button"
98
98
  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDoubleLeft, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n const { currentMonth, currentYear } = useContext(CalendarContext);\n\n const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n const currentFormatedDate = useGetFormattedCurrentDate();\n const {\n handlePrevYear,\n handlePrevMonth,\n handleNextMonth,\n handleNextYear,\n handlePrevYearKeyDown,\n handlePrevMonthKeyDown,\n handleNextMonthKeyDown,\n handleNextYearKeyDown,\n onPrevYearFocus,\n onPrevMonthFocus,\n onNextMonthFocus,\n onNextYearFocus,\n } = useContext(CalendarContext);\n\n const {\n isControllerOnly,\n autoFocusPrevMonthArrow,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n\n const handlePrevYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n );\n const handlePrevMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n );\n const handleNextMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n );\n const handleNextYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n );\n\n return (\n <StyledHeader>\n <StyledHeaderButton\n aria-label=\"previous year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevYear}\n innerRef={handlePrevYearRef}\n onKeyDown={handlePrevYearKeyDown}\n onFocus={onPrevYearFocus}\n tabIndex={isControllerOnly ? -1 : 1}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n type=\"button\"\n >\n <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n autoFocus={autoFocusPrevMonthArrow}\n aria-label=\"previous month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevMonth}\n innerRef={handlePrevMonthRef}\n onKeyDown={handlePrevMonthKeyDown}\n onFocus={onPrevMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n type=\"button\"\n // this is a tabstop for when the calendar is open\n >\n <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderLabel data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}>\n {currentFormatedDate}\n </StyledHeaderLabel>\n <StyledHeaderButton\n aria-label=\"next month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextMonth}\n innerRef={handleNextMonthRef}\n onKeyDown={handleNextMonthKeyDown}\n onFocus={onNextMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n type=\"button\"\n >\n <ChevronRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n aria-label=\"next year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextYear}\n innerRef={handleNextYearRef}\n onKeyDown={handleNextYearKeyDown}\n onFocus={onNextYearFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n type=\"button\"\n >\n <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n </StyledHeader>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n const { currentMonth, currentYear } = useContext(CalendarContext);\n\n const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n const currentFormatedDate = useGetFormattedCurrentDate();\n const {\n handlePrevYear,\n handlePrevMonth,\n handleNextMonth,\n handleNextYear,\n handlePrevYearKeyDown,\n handlePrevMonthKeyDown,\n handleNextMonthKeyDown,\n handleNextYearKeyDown,\n onPrevYearFocus,\n onPrevMonthFocus,\n onNextMonthFocus,\n onNextYearFocus,\n } = useContext(CalendarContext);\n\n const {\n isControllerOnly,\n autoFocusPrevMonthArrow,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n\n const handlePrevYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n );\n const handlePrevMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n );\n const handleNextMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n );\n const handleNextYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n );\n\n return (\n <StyledHeader>\n <StyledHeaderButton\n aria-label=\"previous year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevYear}\n innerRef={handlePrevYearRef}\n onKeyDown={handlePrevYearKeyDown}\n onFocus={onPrevYearFocus}\n tabIndex={isControllerOnly ? -1 : 0}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n type=\"button\"\n >\n <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n autoFocus={autoFocusPrevMonthArrow}\n aria-label=\"previous month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevMonth}\n innerRef={handlePrevMonthRef}\n onKeyDown={handlePrevMonthKeyDown}\n onFocus={onPrevMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n type=\"button\"\n // this is a tabstop for when the calendar is open\n >\n <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderLabel data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}>\n {currentFormatedDate}\n </StyledHeaderLabel>\n <StyledHeaderButton\n aria-label=\"next month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextMonth}\n innerRef={handleNextMonthRef}\n onKeyDown={handleNextMonthKeyDown}\n onFocus={onNextMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n type=\"button\"\n >\n <ChevronRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n aria-label=\"next year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextYear}\n innerRef={handleNextYearRef}\n onKeyDown={handleNextYearKeyDown}\n onFocus={onNextYearFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n type=\"button\"\n >\n <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n </StyledHeader>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -67,7 +67,7 @@ const CalendarHead = () => {
67
67
  innerRef: handlePrevYearRef,
68
68
  onKeyDown: handlePrevYearKeyDown,
69
69
  onFocus: onPrevYearFocus,
70
- tabIndex: isControllerOnly ? -1 : 1,
70
+ tabIndex: isControllerOnly ? -1 : 0,
71
71
  "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
72
72
  type: "button"
73
73
  }, /* @__PURE__ */ React2.createElement(ChevronDoubleLeft, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n const { currentMonth, currentYear } = useContext(CalendarContext);\n\n const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n const currentFormatedDate = useGetFormattedCurrentDate();\n const {\n handlePrevYear,\n handlePrevMonth,\n handleNextMonth,\n handleNextYear,\n handlePrevYearKeyDown,\n handlePrevMonthKeyDown,\n handleNextMonthKeyDown,\n handleNextYearKeyDown,\n onPrevYearFocus,\n onPrevMonthFocus,\n onNextMonthFocus,\n onNextYearFocus,\n } = useContext(CalendarContext);\n\n const {\n isControllerOnly,\n autoFocusPrevMonthArrow,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n\n const handlePrevYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n );\n const handlePrevMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n );\n const handleNextMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n );\n const handleNextYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n );\n\n return (\n <StyledHeader>\n <StyledHeaderButton\n aria-label=\"previous year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevYear}\n innerRef={handlePrevYearRef}\n onKeyDown={handlePrevYearKeyDown}\n onFocus={onPrevYearFocus}\n tabIndex={isControllerOnly ? -1 : 1}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n type=\"button\"\n >\n <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n autoFocus={autoFocusPrevMonthArrow}\n aria-label=\"previous month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevMonth}\n innerRef={handlePrevMonthRef}\n onKeyDown={handlePrevMonthKeyDown}\n onFocus={onPrevMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n type=\"button\"\n // this is a tabstop for when the calendar is open\n >\n <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderLabel data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}>\n {currentFormatedDate}\n </StyledHeaderLabel>\n <StyledHeaderButton\n aria-label=\"next month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextMonth}\n innerRef={handleNextMonthRef}\n onKeyDown={handleNextMonthKeyDown}\n onFocus={onNextMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n type=\"button\"\n >\n <ChevronRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n aria-label=\"next year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextYear}\n innerRef={handleNextYearRef}\n onKeyDown={handleNextYearKeyDown}\n onFocus={onNextYearFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n type=\"button\"\n >\n <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n </StyledHeader>\n );\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n const { currentMonth, currentYear } = useContext(CalendarContext);\n\n const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n const currentFormatedDate = useGetFormattedCurrentDate();\n const {\n handlePrevYear,\n handlePrevMonth,\n handleNextMonth,\n handleNextYear,\n handlePrevYearKeyDown,\n handlePrevMonthKeyDown,\n handleNextMonthKeyDown,\n handleNextYearKeyDown,\n onPrevYearFocus,\n onPrevMonthFocus,\n onNextMonthFocus,\n onNextYearFocus,\n } = useContext(CalendarContext);\n\n const {\n isControllerOnly,\n autoFocusPrevMonthArrow,\n prevYearBtnRef,\n prevMonthBtnRef,\n nextMonthBtnRef,\n nextYearBtnRef,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n\n const handlePrevYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n );\n const handlePrevMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n prevMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n );\n const handleNextMonthRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextMonthBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n );\n const handleNextYearRef = useCallback(\n (ButtonDomNode: HTMLButtonElement) => {\n nextYearBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n ButtonDomNode?.focus?.();\n },\n [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n );\n\n return (\n <StyledHeader>\n <StyledHeaderButton\n aria-label=\"previous year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevYear}\n innerRef={handlePrevYearRef}\n onKeyDown={handlePrevYearKeyDown}\n onFocus={onPrevYearFocus}\n tabIndex={isControllerOnly ? -1 : 0}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n type=\"button\"\n >\n <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n autoFocus={autoFocusPrevMonthArrow}\n aria-label=\"previous month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handlePrevMonth}\n innerRef={handlePrevMonthRef}\n onKeyDown={handlePrevMonthKeyDown}\n onFocus={onPrevMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n type=\"button\"\n // this is a tabstop for when the calendar is open\n >\n <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderLabel data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}>\n {currentFormatedDate}\n </StyledHeaderLabel>\n <StyledHeaderButton\n aria-label=\"next month\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextMonth}\n innerRef={handleNextMonthRef}\n onKeyDown={handleNextMonthKeyDown}\n onFocus={onNextMonthFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n type=\"button\"\n >\n <ChevronRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n <StyledHeaderButton\n aria-label=\"next year\"\n buttonType=\"raw\"\n size={BUTTON_SIZES.M}\n onClick={handleNextYear}\n innerRef={handleNextYearRef}\n onKeyDown={handleNextYearKeyDown}\n onFocus={onNextYearFocus}\n data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n type=\"button\"\n >\n <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n </StyledHeaderButton>\n </StyledHeader>\n );\n};\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-date-time-picker",
3
- "version": "3.2.1-rc.3",
3
+ "version": "3.3.0-next.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
6
6
  "files": [
@@ -35,13 +35,13 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-button": "3.2.1-rc.3",
39
- "@elliemae/ds-grid": "3.2.1-rc.3",
40
- "@elliemae/ds-icon": "3.2.1-rc.3",
41
- "@elliemae/ds-icons": "3.2.1-rc.3",
42
- "@elliemae/ds-popperjs": "3.2.1-rc.3",
43
- "@elliemae/ds-system": "3.2.1-rc.3",
44
- "@elliemae/ds-utilities": "3.2.1-rc.3"
38
+ "@elliemae/ds-button": "3.3.0-next.1",
39
+ "@elliemae/ds-grid": "3.3.0-next.1",
40
+ "@elliemae/ds-icon": "3.3.0-next.1",
41
+ "@elliemae/ds-icons": "3.3.0-next.1",
42
+ "@elliemae/ds-popperjs": "3.3.0-next.1",
43
+ "@elliemae/ds-system": "3.3.0-next.1",
44
+ "@elliemae/ds-utilities": "3.3.0-next.1"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@elliemae/pui-theme": "~2.6.0",