@elliemae/ds-controlled-form 1.55.0-next.9 → 1.55.0-rc.3

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.js

@@ -1,30 +1,33 @@
 import React, { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarBody } from './CalendarBody.js';
 import { CalendarHead } from './CalendarHead.js';
 import { CalendarFooter } from './CalendarFooter.js';
 import { CalendarContext } from './CalendarContext.js';
-import { StyledSpacingResetter, StyledCalendarWrapper } from './Styleds.js';
+import { StyledShadowWrapper, StyledCalendarWrapper } from './Styleds.js';
 import './CalendarMonthDays.js';
 import './CalendarDaysList.js';
 import './Day.js';
+import '@babel/runtime/helpers/esm/extends';
 import '../../../utils/dateHelpers.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
+import '../../../utils/constants.js';
 import '../../../utils/stringHelpers.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '../../../utils/numberHelpers.js';
-import '../../../ControlledDateTimePickerDatatestid.js';
 import '../../../ControlledDateTimePickerCTX.js';
 import '../../../ControlledDateTimePickerTypes.js';
 import './CalendarWeekDays.js';
+import '@elliemae/ds-button';
 import '@elliemae/ds-icons/ChevronDoubleLeft';
 import '@elliemae/ds-icons/ChevronLeft';
 import '@elliemae/ds-icons/ChevronRight';
 import '@elliemae/ds-icons/ChevronDoubleRight';
 import 'styled-components';
-import '@elliemae/ds-button';
+import '@elliemae/ds-grid';
 
 /* eslint-disable max-len */
-// <StyledSpacingResetter className={className}>
+// <StyledShadowWrapper className={className}>
 // is required for styled-components, without this we can't styled(CalendarContent)...
 // https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component
 
@@ -33,12 +36,16 @@ var CalendarContent = function CalendarContent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className;
 
   var _useContext = useContext(CalendarContext),
-      isControllerOnly = _useContext.isControllerOnly;
+      isControllerOnly = _useContext.isControllerOnly,
+      daysMatrixByWeekday = _useContext.daysMatrixByWeekday;
 
-  return /*#__PURE__*/React.createElement(StyledSpacingResetter, {
+  return /*#__PURE__*/React.createElement(StyledShadowWrapper, {
     className: className,
-    isControllerOnly: isControllerOnly
-  }, /*#__PURE__*/React.createElement(StyledCalendarWrapper, null, /*#__PURE__*/React.createElement(CalendarHead, null), /*#__PURE__*/React.createElement(CalendarBody, null), /*#__PURE__*/React.createElement(CalendarFooter, null)));
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR
+  }, /*#__PURE__*/React.createElement(StyledCalendarWrapper, null, /*#__PURE__*/React.createElement(CalendarHead, null), /*#__PURE__*/React.createElement(CalendarBody, {
+    weekRowsNum: daysMatrixByWeekday.length
+  }), /*#__PURE__*/React.createElement(CalendarFooter, null)));
 };
 
 export { CalendarContent };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarContent.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.tsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { CalendarBody } from './CalendarBody';\nimport { CalendarHead } from './CalendarHead';\nimport { CalendarFooter } from './CalendarFooter';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledSpacingResetter, StyledCalendarWrapper } from './Styleds';\n\n// ({ className = '' }: { className?: string })\n// <StyledSpacingResetter className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const { isControllerOnly } = useContext(CalendarContext);\n\n  return (\n    <StyledSpacingResetter className={className} isControllerOnly={isControllerOnly}>\n      <StyledCalendarWrapper>\n        <CalendarHead />\n        <CalendarBody />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledSpacingResetter>\n  );\n};\n"],"names":["CalendarContent","className","useContext","CalendarContext","isControllerOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AASA;AACA;AACA;;IACaA,eAAe,GAAG,SAAlBA,eAAkB,OAA6D;AAAA,4BAA1DC,SAA0D;AAAA,MAA1DA,SAA0D,+BAA9C,EAA8C;;AAC1F,oBAA6BC,UAAU,CAACC,eAAD,CAAvC;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AAEA,sBACE,oBAAC,qBAAD;AAAuB,IAAA,SAAS,EAAEH,SAAlC;AAA6C,IAAA,gBAAgB,EAAEG;AAA/D,kBACE,oBAAC,qBAAD,qBACE,oBAAC,YAAD,OADF,eAEE,oBAAC,YAAD,OAFF,eAGE,oBAAC,cAAD,OAHF,CADF,CADF;AASD;;;;"}
+{"version":3,"file":"CalendarContent.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.tsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarBody } from './CalendarBody';\nimport { CalendarHead } from './CalendarHead';\nimport { CalendarFooter } from './CalendarFooter';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledShadowWrapper, StyledCalendarWrapper } from './Styleds';\n\n// ({ className = '' }: { className?: string })\n// <StyledShadowWrapper className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const { isControllerOnly, daysMatrixByWeekday } = useContext(CalendarContext);\n\n  return (\n    <StyledShadowWrapper\n      className={className}\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR}\n    >\n      <StyledCalendarWrapper>\n        <CalendarHead />\n        <CalendarBody weekRowsNum={daysMatrixByWeekday.length} />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledShadowWrapper>\n  );\n};\n"],"names":["CalendarContent","className","useContext","CalendarContext","isControllerOnly","daysMatrixByWeekday","ControlledDateTimePickerDatatestid","CONTROLLER_COMPONENT","CALENDAR","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAUA;AACA;AACA;;IACaA,eAAe,GAAG,SAAlBA,eAAkB,OAA6D;AAAA,4BAA1DC,SAA0D;AAAA,MAA1DA,SAA0D,+BAA9C,EAA8C;;AAC1F,oBAAkDC,UAAU,CAACC,eAAD,CAA5D;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;AAAA,MAA0BC,mBAA1B,eAA0BA,mBAA1B;;AAEA,sBACE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAEJ,SADb;AAEE,IAAA,gBAAgB,EAAEG,gBAFpB;AAGE,mBAAaE,kCAAkC,CAACC,oBAAnC,CAAwDC;AAHvE,kBAKE,oBAAC,qBAAD,qBACE,oBAAC,YAAD,OADF,eAEE,oBAAC,YAAD;AAAc,IAAA,WAAW,EAAEH,mBAAmB,CAACI;AAA/C,IAFF,eAGE,oBAAC,cAAD,OAHF,CALF,CADF;AAaD;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.js

@@ -4,6 +4,7 @@ import { createRef, createContext } from 'react';
 var noop = function noop() {};
 
 var defaultCalendarContext = {
+  ariaCurrentValueForInputs: '',
   showCalendar: false,
   setShowCalendar: noop,
   closeCalendar: noop,
@@ -21,6 +22,9 @@ var defaultCalendarContext = {
   currentMonth: undefined,
   currentYear: undefined,
   daysArray: [],
+  invisibleFirstDay: undefined,
+  daysMatrixByWeekday: [],
+  invisibleLastDay: undefined,
   focusedDay: undefined,
   tryToFocusCurrentlyDataIsFocusedDay: noop,
   resetFocusedDayToStartDate: noop,

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarContext.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.tsx"],"sourcesContent":["import React, { createContext, createRef } from 'react';\nimport type { DateMonth, fiveBySevenCurrentMonthDaysT, onFocusFuncT } from '../../../index.d';\n\nexport type handleDayOnKeyDownT = (e: React.KeyboardEvent, day: fiveBySevenCurrentMonthDaysT) => void;\nexport interface KeyboardHandlersT {\n  handleDayOnKeyDown: handleDayOnKeyDownT;\n  handlePrevYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePrevMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport interface FocusLogicT {\n  focusedDay?: fiveBySevenCurrentMonthDaysT;\n  tryToFocusCurrentlyDataIsFocusedDay: () => void;\n  resetFocusedDayToStartDate: () => void;\n  handleFocusMetaDay: (metaDayToFocus: fiveBySevenCurrentMonthDaysT) => void;\n  handleFocusMetaDayByDay: (day: Date) => void;\n}\nexport interface HeaderButtonsRefsT {\n  prevYearBtnRef: React.RefObject<HTMLButtonElement>;\n  prevMonthBtnRef: React.RefObject<HTMLButtonElement>;\n  nextMonthBtnRef: React.RefObject<HTMLButtonElement>;\n  nextYearBtnRef: React.RefObject<HTMLButtonElement>;\n  calendarDaysWrapperRef: React.RefObject<HTMLDivElement>;\n}\nexport interface PopperTriggerLogicT {\n  closeCalendar: () => void;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  usePopperHelpers?: {\n    attributes: Record<string, unknown>;\n    styles: Record<string, React.CSSProperties>;\n  };\n  handleToggleCalendar: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e?: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport interface useCurrentDisplayedMonthYearLogicT {\n  currentMonth?: DateMonth;\n  currentYear?: number;\n  daysArray: fiveBySevenCurrentMonthDaysT[];\n  handlePrevMonth: () => void;\n  handlePrevYear: () => void;\n  handleNextMonth: () => void;\n  handleNextYear: () => void;\n}\nexport interface CalendarContextT\n  extends KeyboardHandlersT,\n    HeaderButtonsRefsT,\n    FocusLogicT,\n    PopperTriggerLogicT,\n    useCurrentDisplayedMonthYearLogicT {\n  showCalendar: boolean;\n  setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>;\n  isControllerOnly: boolean;\n  isWithTimeWheelToo: boolean;\n  autoFocusPrevMonthArrow: boolean;\n  onPrevYearFocus: onFocusFuncT;\n  onPrevMonthFocus: onFocusFuncT;\n  onNextMonthFocus: onFocusFuncT;\n  onNextYearFocus: onFocusFuncT;\n}\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nexport const defaultCalendarContext: CalendarContextT = {\n  showCalendar: false,\n  setShowCalendar: noop,\n  closeCalendar: noop,\n  setPopperElement: noop,\n  setArrowElement: noop,\n  usePopperHelpers: undefined,\n  handleToggleCalendar: noop,\n  handleSetTriggerRef: noop,\n  handleMenuWrapperKeyDown: noop,\n  prevYearBtnRef: createRef<HTMLButtonElement>(),\n  prevMonthBtnRef: createRef<HTMLButtonElement>(),\n  nextMonthBtnRef: createRef<HTMLButtonElement>(),\n  nextYearBtnRef: createRef<HTMLButtonElement>(),\n  calendarDaysWrapperRef: createRef<HTMLDivElement>(),\n  currentMonth: undefined,\n  currentYear: undefined,\n  daysArray: [],\n  focusedDay: undefined,\n  tryToFocusCurrentlyDataIsFocusedDay: noop,\n  resetFocusedDayToStartDate: noop,\n  handleFocusMetaDay: noop,\n  handleFocusMetaDayByDay: noop,\n  handlePrevMonth: noop,\n  handlePrevYear: noop,\n  handleNextMonth: noop,\n  handleNextYear: noop,\n  handleDayOnKeyDown: noop,\n  handlePrevYearKeyDown: noop,\n  handlePrevMonthKeyDown: noop,\n  handleNextMonthKeyDown: noop,\n  handleNextYearKeyDown: noop,\n  handlePickerIconKeyDown: noop,\n  isControllerOnly: false,\n  isWithTimeWheelToo: true,\n  autoFocusPrevMonthArrow: false,\n  onPrevYearFocus: noop,\n  onPrevMonthFocus: noop,\n  onNextMonthFocus: noop,\n  onNextYearFocus: noop,\n};\n/** Context for cross component communication */\nexport const CalendarContext = createContext(defaultCalendarContext);\n\nexport default CalendarContext;\n"],"names":["noop","defaultCalendarContext","showCalendar","setShowCalendar","closeCalendar","setPopperElement","setArrowElement","usePopperHelpers","undefined","handleToggleCalendar","handleSetTriggerRef","handleMenuWrapperKeyDown","prevYearBtnRef","createRef","prevMonthBtnRef","nextMonthBtnRef","nextYearBtnRef","calendarDaysWrapperRef","currentMonth","currentYear","daysArray","focusedDay","tryToFocusCurrentlyDataIsFocusedDay","resetFocusedDayToStartDate","handleFocusMetaDay","handleFocusMetaDayByDay","handlePrevMonth","handlePrevYear","handleNextMonth","handleNextYear","handleDayOnKeyDown","handlePrevYearKeyDown","handlePrevMonthKeyDown","handleNextMonthKeyDown","handleNextYearKeyDown","handlePickerIconKeyDown","isControllerOnly","isWithTimeWheelToo","autoFocusPrevMonthArrow","onPrevYearFocus","onPrevMonthFocus","onNextMonthFocus","onNextYearFocus","CalendarContext","createContext"],"mappings":";;AA+DA;AACA,IAAMA,IAAI,GAAG,SAAPA,IAAO,GAAY,EAAzB;;IACaC,sBAAwC,GAAG;AACtDC,EAAAA,YAAY,EAAE,KADwC;AAEtDC,EAAAA,eAAe,EAAEH,IAFqC;AAGtDI,EAAAA,aAAa,EAAEJ,IAHuC;AAItDK,EAAAA,gBAAgB,EAAEL,IAJoC;AAKtDM,EAAAA,eAAe,EAAEN,IALqC;AAMtDO,EAAAA,gBAAgB,EAAEC,SANoC;AAOtDC,EAAAA,oBAAoB,EAAET,IAPgC;AAQtDU,EAAAA,mBAAmB,EAAEV,IARiC;AAStDW,EAAAA,wBAAwB,EAAEX,IAT4B;AAUtDY,EAAAA,cAAc,eAAEC,SAAS,EAV6B;AAWtDC,EAAAA,eAAe,eAAED,SAAS,EAX4B;AAYtDE,EAAAA,eAAe,eAAEF,SAAS,EAZ4B;AAatDG,EAAAA,cAAc,eAAEH,SAAS,EAb6B;AActDI,EAAAA,sBAAsB,eAAEJ,SAAS,EAdqB;AAetDK,EAAAA,YAAY,EAAEV,SAfwC;AAgBtDW,EAAAA,WAAW,EAAEX,SAhByC;AAiBtDY,EAAAA,SAAS,EAAE,EAjB2C;AAkBtDC,EAAAA,UAAU,EAAEb,SAlB0C;AAmBtDc,EAAAA,mCAAmC,EAAEtB,IAnBiB;AAoBtDuB,EAAAA,0BAA0B,EAAEvB,IApB0B;AAqBtDwB,EAAAA,kBAAkB,EAAExB,IArBkC;AAsBtDyB,EAAAA,uBAAuB,EAAEzB,IAtB6B;AAuBtD0B,EAAAA,eAAe,EAAE1B,IAvBqC;AAwBtD2B,EAAAA,cAAc,EAAE3B,IAxBsC;AAyBtD4B,EAAAA,eAAe,EAAE5B,IAzBqC;AA0BtD6B,EAAAA,cAAc,EAAE7B,IA1BsC;AA2BtD8B,EAAAA,kBAAkB,EAAE9B,IA3BkC;AA4BtD+B,EAAAA,qBAAqB,EAAE/B,IA5B+B;AA6BtDgC,EAAAA,sBAAsB,EAAEhC,IA7B8B;AA8BtDiC,EAAAA,sBAAsB,EAAEjC,IA9B8B;AA+BtDkC,EAAAA,qBAAqB,EAAElC,IA/B+B;AAgCtDmC,EAAAA,uBAAuB,EAAEnC,IAhC6B;AAiCtDoC,EAAAA,gBAAgB,EAAE,KAjCoC;AAkCtDC,EAAAA,kBAAkB,EAAE,IAlCkC;AAmCtDC,EAAAA,uBAAuB,EAAE,KAnC6B;AAoCtDC,EAAAA,eAAe,EAAEvC,IApCqC;AAqCtDwC,EAAAA,gBAAgB,EAAExC,IArCoC;AAsCtDyC,EAAAA,gBAAgB,EAAEzC,IAtCoC;AAuCtD0C,EAAAA,eAAe,EAAE1C;AAvCqC;AAyCxD;;IACa2C,eAAe,gBAAGC,aAAa,CAAC3C,sBAAD;;;;"}
+{"version":3,"file":"CalendarContext.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.tsx"],"sourcesContent":["import React, { createContext, createRef } from 'react';\nimport type { DateMonth, metaMonthDayT, onFocusFuncT } from '../../../index.d';\n\nexport type handleDayOnKeyDownT = (e: React.KeyboardEvent, day: metaMonthDayT) => void;\nexport interface KeyboardHandlersT {\n  handleDayOnKeyDown: handleDayOnKeyDownT;\n  handlePrevYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePrevMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport interface FocusLogicT {\n  focusedDay?: metaMonthDayT;\n  tryToFocusCurrentlyDataIsFocusedDay: () => void;\n  resetFocusedDayToStartDate: () => void;\n  handleFocusMetaDay: (metaDayToFocus: metaMonthDayT) => void;\n  handleFocusMetaDayByDay: (day: Date) => void;\n}\nexport interface HeaderButtonsRefsT {\n  prevYearBtnRef: React.RefObject<HTMLButtonElement>;\n  prevMonthBtnRef: React.RefObject<HTMLButtonElement>;\n  nextMonthBtnRef: React.RefObject<HTMLButtonElement>;\n  nextYearBtnRef: React.RefObject<HTMLButtonElement>;\n  calendarDaysWrapperRef: React.RefObject<HTMLDivElement>;\n}\nexport interface PopperTriggerLogicT {\n  closeCalendar: () => void;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  usePopperHelpers?: {\n    attributes: Record<string, unknown>;\n    styles: Record<string, React.CSSProperties>;\n  };\n  handleToggleCalendar: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e?: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport interface useCurrentDisplayedMonthYearLogicT {\n  currentMonth?: DateMonth;\n  currentYear?: number;\n  daysArray: metaMonthDayT[];\n  invisibleFirstDay?: metaMonthDayT;\n  daysMatrixByWeekday: metaMonthDayT[][];\n  invisibleLastDay?: metaMonthDayT;\n  handlePrevMonth: () => void;\n  handlePrevYear: () => void;\n  handleNextMonth: () => void;\n  handleNextYear: () => void;\n}\nexport interface CalendarContextT\n  extends KeyboardHandlersT,\n    HeaderButtonsRefsT,\n    FocusLogicT,\n    PopperTriggerLogicT,\n    useCurrentDisplayedMonthYearLogicT {\n  ariaCurrentValueForInputs: string;\n  showCalendar: boolean;\n  setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>;\n  isControllerOnly: boolean;\n  isWithTimeWheelToo: boolean;\n  autoFocusPrevMonthArrow: boolean;\n  onPrevYearFocus: onFocusFuncT;\n  onPrevMonthFocus: onFocusFuncT;\n  onNextMonthFocus: onFocusFuncT;\n  onNextYearFocus: onFocusFuncT;\n}\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nexport const defaultCalendarContext: CalendarContextT = {\n  ariaCurrentValueForInputs: '',\n  showCalendar: false,\n  setShowCalendar: noop,\n  closeCalendar: noop,\n  setPopperElement: noop,\n  setArrowElement: noop,\n  usePopperHelpers: undefined,\n  handleToggleCalendar: noop,\n  handleSetTriggerRef: noop,\n  handleMenuWrapperKeyDown: noop,\n  prevYearBtnRef: createRef<HTMLButtonElement>(),\n  prevMonthBtnRef: createRef<HTMLButtonElement>(),\n  nextMonthBtnRef: createRef<HTMLButtonElement>(),\n  nextYearBtnRef: createRef<HTMLButtonElement>(),\n  calendarDaysWrapperRef: createRef<HTMLDivElement>(),\n  currentMonth: undefined,\n  currentYear: undefined,\n  daysArray: [],\n  invisibleFirstDay: undefined,\n  daysMatrixByWeekday: [],\n  invisibleLastDay: undefined,\n  focusedDay: undefined,\n  tryToFocusCurrentlyDataIsFocusedDay: noop,\n  resetFocusedDayToStartDate: noop,\n  handleFocusMetaDay: noop,\n  handleFocusMetaDayByDay: noop,\n  handlePrevMonth: noop,\n  handlePrevYear: noop,\n  handleNextMonth: noop,\n  handleNextYear: noop,\n  handleDayOnKeyDown: noop,\n  handlePrevYearKeyDown: noop,\n  handlePrevMonthKeyDown: noop,\n  handleNextMonthKeyDown: noop,\n  handleNextYearKeyDown: noop,\n  handlePickerIconKeyDown: noop,\n  isControllerOnly: false,\n  isWithTimeWheelToo: true,\n  autoFocusPrevMonthArrow: false,\n  onPrevYearFocus: noop,\n  onPrevMonthFocus: noop,\n  onNextMonthFocus: noop,\n  onNextYearFocus: noop,\n};\n/** Context for cross component communication */\nexport const CalendarContext = createContext(defaultCalendarContext);\n\nexport default CalendarContext;\n"],"names":["noop","defaultCalendarContext","ariaCurrentValueForInputs","showCalendar","setShowCalendar","closeCalendar","setPopperElement","setArrowElement","usePopperHelpers","undefined","handleToggleCalendar","handleSetTriggerRef","handleMenuWrapperKeyDown","prevYearBtnRef","createRef","prevMonthBtnRef","nextMonthBtnRef","nextYearBtnRef","calendarDaysWrapperRef","currentMonth","currentYear","daysArray","invisibleFirstDay","daysMatrixByWeekday","invisibleLastDay","focusedDay","tryToFocusCurrentlyDataIsFocusedDay","resetFocusedDayToStartDate","handleFocusMetaDay","handleFocusMetaDayByDay","handlePrevMonth","handlePrevYear","handleNextMonth","handleNextYear","handleDayOnKeyDown","handlePrevYearKeyDown","handlePrevMonthKeyDown","handleNextMonthKeyDown","handleNextYearKeyDown","handlePickerIconKeyDown","isControllerOnly","isWithTimeWheelToo","autoFocusPrevMonthArrow","onPrevYearFocus","onPrevMonthFocus","onNextMonthFocus","onNextYearFocus","CalendarContext","createContext"],"mappings":";;AAmEA;AACA,IAAMA,IAAI,GAAG,SAAPA,IAAO,GAAY,EAAzB;;IACaC,sBAAwC,GAAG;AACtDC,EAAAA,yBAAyB,EAAE,EAD2B;AAEtDC,EAAAA,YAAY,EAAE,KAFwC;AAGtDC,EAAAA,eAAe,EAAEJ,IAHqC;AAItDK,EAAAA,aAAa,EAAEL,IAJuC;AAKtDM,EAAAA,gBAAgB,EAAEN,IALoC;AAMtDO,EAAAA,eAAe,EAAEP,IANqC;AAOtDQ,EAAAA,gBAAgB,EAAEC,SAPoC;AAQtDC,EAAAA,oBAAoB,EAAEV,IARgC;AAStDW,EAAAA,mBAAmB,EAAEX,IATiC;AAUtDY,EAAAA,wBAAwB,EAAEZ,IAV4B;AAWtDa,EAAAA,cAAc,eAAEC,SAAS,EAX6B;AAYtDC,EAAAA,eAAe,eAAED,SAAS,EAZ4B;AAatDE,EAAAA,eAAe,eAAEF,SAAS,EAb4B;AActDG,EAAAA,cAAc,eAAEH,SAAS,EAd6B;AAetDI,EAAAA,sBAAsB,eAAEJ,SAAS,EAfqB;AAgBtDK,EAAAA,YAAY,EAAEV,SAhBwC;AAiBtDW,EAAAA,WAAW,EAAEX,SAjByC;AAkBtDY,EAAAA,SAAS,EAAE,EAlB2C;AAmBtDC,EAAAA,iBAAiB,EAAEb,SAnBmC;AAoBtDc,EAAAA,mBAAmB,EAAE,EApBiC;AAqBtDC,EAAAA,gBAAgB,EAAEf,SArBoC;AAsBtDgB,EAAAA,UAAU,EAAEhB,SAtB0C;AAuBtDiB,EAAAA,mCAAmC,EAAE1B,IAvBiB;AAwBtD2B,EAAAA,0BAA0B,EAAE3B,IAxB0B;AAyBtD4B,EAAAA,kBAAkB,EAAE5B,IAzBkC;AA0BtD6B,EAAAA,uBAAuB,EAAE7B,IA1B6B;AA2BtD8B,EAAAA,eAAe,EAAE9B,IA3BqC;AA4BtD+B,EAAAA,cAAc,EAAE/B,IA5BsC;AA6BtDgC,EAAAA,eAAe,EAAEhC,IA7BqC;AA8BtDiC,EAAAA,cAAc,EAAEjC,IA9BsC;AA+BtDkC,EAAAA,kBAAkB,EAAElC,IA/BkC;AAgCtDmC,EAAAA,qBAAqB,EAAEnC,IAhC+B;AAiCtDoC,EAAAA,sBAAsB,EAAEpC,IAjC8B;AAkCtDqC,EAAAA,sBAAsB,EAAErC,IAlC8B;AAmCtDsC,EAAAA,qBAAqB,EAAEtC,IAnC+B;AAoCtDuC,EAAAA,uBAAuB,EAAEvC,IApC6B;AAqCtDwC,EAAAA,gBAAgB,EAAE,KArCoC;AAsCtDC,EAAAA,kBAAkB,EAAE,IAtCkC;AAuCtDC,EAAAA,uBAAuB,EAAE,KAvC6B;AAwCtDC,EAAAA,eAAe,EAAE3C,IAxCqC;AAyCtD4C,EAAAA,gBAAgB,EAAE5C,IAzCoC;AA0CtD6C,EAAAA,gBAAgB,EAAE7C,IA1CoC;AA2CtD8C,EAAAA,eAAe,EAAE9C;AA3CqC;AA6CxD;;IACa+C,eAAe,gBAAGC,aAAa,CAAC/C,sBAAD;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Day } from './Day.js';
-import { StyledMonthDaysUList } from './Styleds.js';
+import { StyledWeekDaysListWrapper } from './Styleds.js';
+import '@babel/runtime/helpers/esm/extends';
 import '../../../utils/dateHelpers.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
+import '../../../utils/constants.js';
 import '../../../utils/stringHelpers.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '../../../utils/numberHelpers.js';
@@ -11,19 +13,44 @@ import '../../../ControlledDateTimePickerCTX.js';
 import '../../../ControlledDateTimePickerTypes.js';
 import './CalendarContext.js';
 import 'styled-components';
+import '@elliemae/ds-grid';
 import '@elliemae/ds-button';
 
 var CalendarDaysList = /*#__PURE__*/React.memo(function (_ref) {
-  var daysArray = _ref.daysArray,
+  var invisibleFirstDay = _ref.invisibleFirstDay,
+      daysMatrixByWeekday = _ref.daysMatrixByWeekday,
+      invisibleLastDay = _ref.invisibleLastDay,
       innerRef = _ref.innerRef;
   return /*#__PURE__*/React.createElement("div", {
-    ref: innerRef
-  }, /*#__PURE__*/React.createElement(StyledMonthDaysUList, null, daysArray.map(function (metaDay) {
-    return /*#__PURE__*/React.createElement(Day, {
-      key: "ds-calendar-".concat(metaDay.day.toString()),
-      metaDay: metaDay
-    });
-  })));
+    ref: innerRef,
+    role: "rowgroup"
+  }, /*#__PURE__*/React.createElement(Day, {
+    key: "ds-calendar-".concat(invisibleFirstDay.day.toString()),
+    metaDay: invisibleFirstDay,
+    isInvisible: true
+  }), daysMatrixByWeekday.map(function (week, i) {
+    return /*#__PURE__*/React.createElement(StyledWeekDaysListWrapper, {
+      key: "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()),
+      role: "row",
+      "aria-rowindex": i + 1,
+      cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+      rows: ['28px'],
+      py: "xxxs",
+      px: "2px",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, week.map(function (metaDay, z) {
+      return /*#__PURE__*/React.createElement(Day, {
+        key: "ds-calendar-".concat(metaDay.day.toString()),
+        metaDay: metaDay,
+        colIndex: z + 1
+      });
+    }));
+  }), /*#__PURE__*/React.createElement(Day, {
+    key: "ds-calendar-".concat(invisibleLastDay.day.toString()),
+    metaDay: invisibleLastDay,
+    isInvisible: true
+  }));
 });
 
 export { CalendarDaysList };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDaysList.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.tsx"],"sourcesContent":["import React from 'react';\nimport { Day } from './Day';\nimport { StyledMonthDaysUList } from './Styleds';\nimport type { fiveBySevenCurrentMonthDaysT } from '../../../index.d';\nexport const CalendarDaysList = React.memo(\n  ({ daysArray, innerRef }: CalendarDaysListPropsT): JSX.Element => (\n    <div ref={innerRef}>\n      <StyledMonthDaysUList>\n        {daysArray.map((metaDay) => (\n          <Day key={`ds-calendar-${metaDay.day.toString()}`} metaDay={metaDay} />\n        ))}\n      </StyledMonthDaysUList>\n    </div>\n  ),\n);\nexport interface CalendarDaysListPropsT {\n  daysArray: fiveBySevenCurrentMonthDaysT[];\n  innerRef: React.RefObject<HTMLDivElement>;\n}\n"],"names":["CalendarDaysList","React","memo","daysArray","innerRef","map","metaDay","day","toString"],"mappings":";;;;;;;;;;;;;;;IAIaA,gBAAgB,gBAAGC,KAAK,CAACC,IAAN,CAC9B;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,MAAcC,QAAd,QAAcA,QAAd;AAAA,sBACE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,oBAAC,oBAAD,QACGD,SAAS,CAACE,GAAV,CAAc,UAACC,OAAD;AAAA,wBACb,oBAAC,GAAD;AAAK,MAAA,GAAG,wBAAiBA,OAAO,CAACC,GAAR,CAAYC,QAAZ,EAAjB,CAAR;AAAmD,MAAA,OAAO,EAAEF;AAA5D,MADa;AAAA,GAAd,CADH,CADF,CADF;AAAA,CAD8B;;;;"}
+{"version":3,"file":"CalendarDaysList.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.tsx"],"sourcesContent":["import React from 'react';\nimport { Day } from './Day';\nimport { StyledWeekDaysListWrapper } from './Styleds';\nimport type { metaMonthDayT } from '../../../index.d';\n\nexport const CalendarDaysList = React.memo(\n  ({ invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, innerRef }: CalendarDaysListPropsT): JSX.Element => (\n    <div ref={innerRef} role=\"rowgroup\">\n      <Day key={`ds-calendar-${invisibleFirstDay.day.toString()}`} metaDay={invisibleFirstDay} isInvisible />\n      {daysMatrixByWeekday.map((week, i) => (\n        <StyledWeekDaysListWrapper\n          key={`ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`}\n          role=\"row\"\n          aria-rowindex={i + 1}\n          cols={['32px', '32px', '32px', '32px', '32px', '32px', '32px']}\n          rows={['28px']}\n          py=\"xxxs\"\n          px=\"2px\"\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n        >\n          {week.map((metaDay, z) => (\n            <Day key={`ds-calendar-${metaDay.day.toString()}`} metaDay={metaDay} colIndex={z + 1} />\n          ))}\n        </StyledWeekDaysListWrapper>\n      ))}\n      <Day key={`ds-calendar-${invisibleLastDay.day.toString()}`} metaDay={invisibleLastDay} isInvisible />\n    </div>\n  ),\n);\nexport interface CalendarDaysListPropsT {\n  invisibleFirstDay: metaMonthDayT;\n  daysMatrixByWeekday: metaMonthDayT[][];\n  invisibleLastDay: metaMonthDayT;\n  innerRef: React.RefObject<HTMLDivElement>;\n}\n"],"names":["CalendarDaysList","React","memo","invisibleFirstDay","daysMatrixByWeekday","invisibleLastDay","innerRef","day","toString","map","week","i","metaDay","z"],"mappings":";;;;;;;;;;;;;;;;;;IAKaA,gBAAgB,gBAAGC,KAAK,CAACC,IAAN,CAC9B;AAAA,MAAGC,iBAAH,QAAGA,iBAAH;AAAA,MAAsBC,mBAAtB,QAAsBA,mBAAtB;AAAA,MAA2CC,gBAA3C,QAA2CA,gBAA3C;AAAA,MAA6DC,QAA7D,QAA6DA,QAA7D;AAAA,sBACE;AAAK,IAAA,GAAG,EAAEA,QAAV;AAAoB,IAAA,IAAI,EAAC;AAAzB,kBACE,oBAAC,GAAD;AAAK,IAAA,GAAG,wBAAiBH,iBAAiB,CAACI,GAAlB,CAAsBC,QAAtB,EAAjB,CAAR;AAA6D,IAAA,OAAO,EAAEL,iBAAtE;AAAyF,IAAA,WAAW;AAApG,IADF,EAEGC,mBAAmB,CAACK,GAApB,CAAwB,UAACC,IAAD,EAAOC,CAAP;AAAA,wBACvB,oBAAC,yBAAD;AACE,MAAA,GAAG,6BAAsBD,IAAI,CAAC,CAAD,CAAJ,CAAQH,GAAR,CAAYC,QAAZ,EAAtB,cAAgDE,IAAI,CAAC,CAAD,CAAJ,CAAQH,GAAR,CAAYC,QAAZ,EAAhD,CADL;AAEE,MAAA,IAAI,EAAC,KAFP;AAGE,uBAAeG,CAAC,GAAG,CAHrB;AAIE,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,EAAyB,MAAzB,EAAiC,MAAjC,EAAyC,MAAzC,EAAiD,MAAjD,CAJR;AAKE,MAAA,IAAI,EAAE,CAAC,MAAD,CALR;AAME,MAAA,EAAE,EAAC,MANL;AAOE,MAAA,EAAE,EAAC,KAPL;AAQE,MAAA,cAAc,EAAC,eARjB;AASE,MAAA,UAAU,EAAC;AATb,OAWGD,IAAI,CAACD,GAAL,CAAS,UAACG,OAAD,EAAUC,CAAV;AAAA,0BACR,oBAAC,GAAD;AAAK,QAAA,GAAG,wBAAiBD,OAAO,CAACL,GAAR,CAAYC,QAAZ,EAAjB,CAAR;AAAmD,QAAA,OAAO,EAAEI,OAA5D;AAAqE,QAAA,QAAQ,EAAEC,CAAC,GAAG;AAAnF,QADQ;AAAA,KAAT,CAXH,CADuB;AAAA,GAAxB,CAFH,eAmBE,oBAAC,GAAD;AAAK,IAAA,GAAG,wBAAiBR,gBAAgB,CAACE,GAAjB,CAAqBC,QAArB,EAAjB,CAAR;AAA4D,IAAA,OAAO,EAAEH,gBAArE;AAAuF,IAAA,WAAW;AAAlG,IAnBF,CADF;AAAA,CAD8B;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.js

@@ -3,6 +3,7 @@ import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePick
 import { CalendarFooterMessage } from './Styleds.js';
 import '../../../ControlledDateTimePickerTypes.js';
 import 'styled-components';
+import '@elliemae/ds-grid';
 import '@elliemae/ds-button';
 
 var CalendarFooter = function CalendarFooter() {

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarFooter.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarFooterMessage } from './Styleds';\n\nexport const CalendarFooter = (): JSX.Element => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return <CalendarFooterMessage role=\"alert\">{pickerFooterMsg}</CalendarFooterMessage>;\n  return null;\n};\n"],"names":["CalendarFooter","useContext","ControlledDateTimePickerContext","props","pickerFooterMsg","hasError","isWithTimeWheelToo","undefined"],"mappings":";;;;;;;IAIaA,cAAc,GAAG,SAAjBA,cAAiB,GAAmB;AAC/C,oBAGIC,UAAU,CAACC,+BAAD,CAHd;AAAA,sCACEC,KADF;AAAA,MACWC,eADX,qBACWA,eADX;AAAA,MAC4BC,QAD5B,qBAC4BA,QAD5B;AAAA,MAEEC,kBAFF,eAEEA,kBAFF;;AAIA,MAAIF,eAAe,KAAKG,SAApB,IAAiC,CAACD,kBAAlC,IAAwDD,QAA5D,EACE,oBAAO,oBAAC,qBAAD;AAAuB,IAAA,IAAI,EAAC;AAA5B,KAAqCD,eAArC,CAAP;AACF,SAAO,IAAP;AACD;;;;"}
+{"version":3,"file":"CalendarFooter.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarFooterMessage } from './Styleds';\n\nexport const CalendarFooter = (): JSX.Element => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return <CalendarFooterMessage role=\"alert\">{pickerFooterMsg}</CalendarFooterMessage>;\n  return null;\n};\n"],"names":["CalendarFooter","useContext","ControlledDateTimePickerContext","props","pickerFooterMsg","hasError","isWithTimeWheelToo","undefined"],"mappings":";;;;;;;;IAIaA,cAAc,GAAG,SAAjBA,cAAiB,GAAmB;AAC/C,oBAGIC,UAAU,CAACC,+BAAD,CAHd;AAAA,sCACEC,KADF;AAAA,MACWC,eADX,qBACWA,eADX;AAAA,MAC4BC,QAD5B,qBAC4BA,QAD5B;AAAA,MAEEC,kBAFF,eAEEA,kBAFF;;AAIA,MAAIF,eAAe,KAAKG,SAApB,IAAiC,CAACD,kBAAlC,IAAwDD,QAA5D,EACE,oBAAO,oBAAC,qBAAD;AAAuB,IAAA,IAAI,EAAC;AAA5B,KAAqCD,eAArC,CAAP;AACF,SAAO,IAAP;AACD;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -1,17 +1,20 @@
 import React, { useMemo, useContext } from 'react';
+import { BUTTON_SIZES } from '@elliemae/ds-button';
 import ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';
 import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
 import ChevronRight from '@elliemae/ds-icons/ChevronRight';
 import ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';
 import { StyledHeader, StyledHeaderButton } from './Styleds.js';
 import { CalendarContext } from './CalendarContext.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
+import '../../../utils/constants.js';
 import '../../../utils/stringHelpers.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '../../../utils/numberHelpers.js';
 import 'styled-components';
-import '@elliemae/ds-button';
+import '@elliemae/ds-grid';
 
 /* eslint-disable complexity */
 
@@ -51,56 +54,56 @@ var CalendarHead = function CalendarHead() {
 
   return /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledHeaderButton, {
     "aria-label": "previous year",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React.createElement(ChevronDoubleLeft, {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    }),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handlePrevYear,
     innerRef: prevYearBtnRef,
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
-    tabIndex: isControllerOnly ? -1 : 1
-  }), /*#__PURE__*/React.createElement(StyledHeaderButton, {
+    tabIndex: isControllerOnly ? -1 : 1,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+  }, /*#__PURE__*/React.createElement(ChevronDoubleLeft, {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  })), /*#__PURE__*/React.createElement(StyledHeaderButton, {
     autoFocus: autoFocusPrevMonthArrow,
     "aria-label": "previous month",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React.createElement(ChevronLeft, {
-      fill: "#25292f"
-    }),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handlePrevMonth,
     innerRef: prevMonthBtnRef,
     onKeyDown: handlePrevMonthKeyDown,
-    onFocus: onPrevMonthFocus // this is a tabstop for when the calendar is open
+    onFocus: onPrevMonthFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
 
-  }), /*#__PURE__*/React.createElement("h3", null, currentFormatedDate), /*#__PURE__*/React.createElement(StyledHeaderButton, {
+  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+    fill: "#25292f"
+  })), /*#__PURE__*/React.createElement("h3", null, currentFormatedDate), /*#__PURE__*/React.createElement(StyledHeaderButton, {
     "aria-label": "next month",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React.createElement(ChevronRight, {
-      fill: "#25292f"
-    }),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handleNextMonth,
     innerRef: nextMonthBtnRef,
     onKeyDown: handleNextMonthKeyDown,
-    onFocus: onNextMonthFocus
-  }), /*#__PURE__*/React.createElement(StyledHeaderButton, {
+    onFocus: onNextMonthFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+  }, /*#__PURE__*/React.createElement(ChevronRight, {
+    fill: "#25292f"
+  })), /*#__PURE__*/React.createElement(StyledHeaderButton, {
     "aria-label": "next year",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React.createElement(ChevronDoubleRight, {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    }),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handleNextYear,
     innerRef: nextYearBtnRef,
     onKeyDown: handleNextYearKeyDown,
-    onFocus: onNextYearFocus
-  }));
+    onFocus: onNextYearFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+  }, /*#__PURE__*/React.createElement(ChevronDoubleRight, {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  })));
 };
 
 export { CalendarHead };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHead.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';\nimport ChevronLeft from '@elliemae/ds-icons/ChevronLeft';\nimport ChevronRight from '@elliemae/ds-icons/ChevronRight';\nimport ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { StyledHeader, StyledHeaderButton } 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};\n\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\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    isControllerOnly,\n    autoFocusPrevMonthArrow,\n  } = useContext(CalendarContext);\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"text\"\n        leftIcon={<ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />}\n        size=\"m\"\n        onClick={handlePrevYear}\n        innerRef={prevYearBtnRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n      />\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"text\"\n        leftIcon={<ChevronLeft fill=\"#25292f\" />}\n        size=\"m\"\n        onClick={handlePrevMonth}\n        innerRef={prevMonthBtnRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        // this is a tabstop for when the calendar is open\n      />\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"text\"\n        leftIcon={<ChevronRight fill=\"#25292f\" />}\n        size=\"m\"\n        onClick={handleNextMonth}\n        innerRef={nextMonthBtnRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n      />\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"text\"\n        leftIcon={<ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />}\n        size=\"m\"\n        onClick={handleNextYear}\n        innerRef={nextYearBtnRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n      />\n    </StyledHeader>\n  );\n};\n"],"names":["useGetFormattedCurrentDate","useContext","CalendarContext","currentMonth","currentYear","monthString","getMonthNameByMonthNumber","useMemo","CalendarHead","currentFormatedDate","prevYearBtnRef","prevMonthBtnRef","nextMonthBtnRef","nextYearBtnRef","handlePrevYear","handlePrevMonth","handleNextMonth","handleNextYear","handlePrevYearKeyDown","handlePrevMonthKeyDown","handleNextMonthKeyDown","handleNextYearKeyDown","onPrevYearFocus","onPrevMonthFocus","onNextMonthFocus","onNextYearFocus","isControllerOnly","autoFocusPrevMonthArrow"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAUA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAM;AACvC,oBAAsCC,UAAU,CAACC,eAAD,CAAhD;AAAA,MAAQC,YAAR,eAAQA,YAAR;AAAA,MAAsBC,WAAtB,eAAsBA,WAAtB;;AAEA,MAAMC,WAAW,GAAGF,YAAY,IAAI,CAAhB,IAAqBA,YAAY,IAAI,EAArC,aAA6CG,yBAAyB,CAACH,YAAD,CAAtE,SAA0F,EAA9G;AAEA,SAAOI,OAAO,CAAC;AAAA,qBAASF,WAAT,SAAuBD,WAAvB;AAAA,GAAD,EAAuC,CAACC,WAAD,EAAcD,WAAd,CAAvC,CAAd;AACD,CAND;;IAQaI,YAAY,GAAG,SAAfA,YAAe,GAAmB;AAC7C,MAAMC,mBAAmB,GAAGT,0BAA0B,EAAtD;;AACA,qBAmBIC,UAAU,CAACC,eAAD,CAnBd;AAAA,MACEQ,cADF,gBACEA,cADF;AAAA,MAEEC,eAFF,gBAEEA,eAFF;AAAA,MAGEC,eAHF,gBAGEA,eAHF;AAAA,MAIEC,cAJF,gBAIEA,cAJF;AAAA,MAKEC,cALF,gBAKEA,cALF;AAAA,MAMEC,eANF,gBAMEA,eANF;AAAA,MAOEC,eAPF,gBAOEA,eAPF;AAAA,MAQEC,cARF,gBAQEA,cARF;AAAA,MASEC,qBATF,gBASEA,qBATF;AAAA,MAUEC,sBAVF,gBAUEA,sBAVF;AAAA,MAWEC,sBAXF,gBAWEA,sBAXF;AAAA,MAYEC,qBAZF,gBAYEA,qBAZF;AAAA,MAaEC,eAbF,gBAaEA,eAbF;AAAA,MAcEC,gBAdF,gBAcEA,gBAdF;AAAA,MAeEC,gBAfF,gBAeEA,gBAfF;AAAA,MAgBEC,eAhBF,gBAgBEA,eAhBF;AAAA,MAiBEC,gBAjBF,gBAiBEA,gBAjBF;AAAA,MAkBEC,uBAlBF,gBAkBEA,uBAlBF;;AAoBA,sBACE,oBAAC,YAAD,qBACE,oBAAC,kBAAD;AACE,kBAAW,eADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,QAAQ,eAAE,oBAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE,EAA3B;AAA+B,MAAA,KAAK,EAAE,EAAtC;AAA0C,MAAA,IAAI,EAAC;AAA/C,MAHZ;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,OAAO,EAAEb,cALX;AAME,IAAA,QAAQ,EAAEJ,cANZ;AAOE,IAAA,SAAS,EAAEQ,qBAPb;AAQE,IAAA,OAAO,EAAEI,eARX;AASE,IAAA,QAAQ,EAAEI,gBAAgB,GAAG,CAAC,CAAJ,GAAQ;AATpC,IADF,eAYE,oBAAC,kBAAD;AACE,IAAA,SAAS,EAAEC,uBADb;AAEE,kBAAW,gBAFb;AAGE,IAAA,UAAU,EAAC,MAHb;AAIE,IAAA,QAAQ,eAAE,oBAAC,WAAD;AAAa,MAAA,IAAI,EAAC;AAAlB,MAJZ;AAKE,IAAA,IAAI,EAAC,GALP;AAME,IAAA,OAAO,EAAEZ,eANX;AAOE,IAAA,QAAQ,EAAEJ,eAPZ;AAQE,IAAA,SAAS,EAAEQ,sBARb;AASE,IAAA,OAAO,EAAEI,gBATX;;AAAA,IAZF,eAwBE,gCAAKd,mBAAL,CAxBF,eAyBE,oBAAC,kBAAD;AACE,kBAAW,YADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,QAAQ,eAAE,oBAAC,YAAD;AAAc,MAAA,IAAI,EAAC;AAAnB,MAHZ;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,OAAO,EAAEO,eALX;AAME,IAAA,QAAQ,EAAEJ,eANZ;AAOE,IAAA,SAAS,EAAEQ,sBAPb;AAQE,IAAA,OAAO,EAAEI;AARX,IAzBF,eAmCE,oBAAC,kBAAD;AACE,kBAAW,WADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,QAAQ,eAAE,oBAAC,kBAAD;AAAoB,MAAA,MAAM,EAAE,EAA5B;AAAgC,MAAA,KAAK,EAAE,EAAvC;AAA2C,MAAA,IAAI,EAAC;AAAhD,MAHZ;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,OAAO,EAAEP,cALX;AAME,IAAA,QAAQ,EAAEJ,cANZ;AAOE,IAAA,SAAS,EAAEQ,qBAPb;AAQE,IAAA,OAAO,EAAEI;AARX,IAnCF,CADF;AAgDD;;;;"}
+{"version":3,"file":"CalendarHead.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';\nimport ChevronLeft from '@elliemae/ds-icons/ChevronLeft';\nimport ChevronRight from '@elliemae/ds-icons/ChevronRight';\nimport ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { StyledHeader, StyledHeaderButton } 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    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\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    isControllerOnly,\n    autoFocusPrevMonthArrow,\n  } = useContext(CalendarContext);\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={prevYearBtnRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\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={prevMonthBtnRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={nextMonthBtnRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n      >\n        <ChevronRight fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={nextYearBtnRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],"names":["useGetFormattedCurrentDate","useContext","CalendarContext","currentMonth","currentYear","monthString","getMonthNameByMonthNumber","useMemo","CalendarHead","currentFormatedDate","prevYearBtnRef","prevMonthBtnRef","nextMonthBtnRef","nextYearBtnRef","handlePrevYear","handlePrevMonth","handleNextMonth","handleNextYear","handlePrevYearKeyDown","handlePrevMonthKeyDown","handleNextMonthKeyDown","handleNextYearKeyDown","onPrevYearFocus","onPrevMonthFocus","onNextMonthFocus","onNextYearFocus","isControllerOnly","autoFocusPrevMonthArrow","BUTTON_SIZES","M","ControlledDateTimePickerDatatestid","CALENDAR","PREV_YEAR","PREV_MONTH","NEXT_MONTH","NEXT_YEAR"],"mappings":"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"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -1,8 +1,12 @@
 import React, { useContext, useMemo } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import DatePicker from '@elliemae/ds-icons/DatePicker';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContext } from './CalendarContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
+import 'styled-components';
+import '@elliemae/ds-grid';
 
 // this is particularly usefull due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
@@ -11,21 +15,23 @@ var CalendarIconTrigger = function CalendarIconTrigger() {
   var _useContext = useContext(CalendarContext),
       handleToggleCalendar = _useContext.handleToggleCalendar,
       handleSetTriggerRef = _useContext.handleSetTriggerRef,
-      handlePickerIconKeyDown = _useContext.handlePickerIconKeyDown;
+      handlePickerIconKeyDown = _useContext.handlePickerIconKeyDown,
+      ariaCurrentValueForInputs = _useContext.ariaCurrentValueForInputs;
 
   return useMemo(function () {
-    return /*#__PURE__*/React.createElement(DSButton, {
-      "aria-label": "date picker context menu trigger",
-      buttonType: "text",
-      leftIcon: /*#__PURE__*/React.createElement(DatePicker, null),
-      size: "m",
+    return /*#__PURE__*/React.createElement(StyledIconTriggerButton, {
+      "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+      buttonType: "icon",
+      size: BUTTON_SIZES.M,
       variant: BUTTON_VARIANT.DEFAULT,
       innerRef: handleSetTriggerRef,
       onClick: handleToggleCalendar,
       onKeyDown: handlePickerIconKeyDown,
       "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR
-    });
-  }, [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar]);
+    }, /*#__PURE__*/React.createElement(DatePicker, {
+      color: DSIconColors.PRIMARY
+    }));
+  }, [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs]);
 };
 
 export { CalendarIconTrigger };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarIconTrigger.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';\nimport DatePicker from '@elliemae/ds-icons/DatePicker';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarContext } from './CalendarContext';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  return useMemo(\n    () => (\n      <DSButton\n        aria-label=\"date picker context menu trigger\"\n        buttonType=\"text\"\n        leftIcon={<DatePicker />}\n        size=\"m\"\n        variant={BUTTON_VARIANT.DEFAULT}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n      />\n    ),\n    [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar],\n  );\n};\n"],"names":["CalendarIconTrigger","useContext","CalendarContext","handleToggleCalendar","handleSetTriggerRef","handlePickerIconKeyDown","useMemo","BUTTON_VARIANT","DEFAULT","ControlledDateTimePickerDatatestid","PICKER_ICONS","CALENDAR"],"mappings":";;;;;;AAOA;AACA;;IACaA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAmB;AACpD,oBAA+EC,UAAU,CAACC,eAAD,CAAzF;AAAA,MAAQC,oBAAR,eAAQA,oBAAR;AAAA,MAA8BC,mBAA9B,eAA8BA,mBAA9B;AAAA,MAAmDC,uBAAnD,eAAmDA,uBAAnD;;AACA,SAAOC,OAAO,CACZ;AAAA,wBACE,oBAAC,QAAD;AACE,oBAAW,kCADb;AAEE,MAAA,UAAU,EAAC,MAFb;AAGE,MAAA,QAAQ,eAAE,oBAAC,UAAD,OAHZ;AAIE,MAAA,IAAI,EAAC,GAJP;AAKE,MAAA,OAAO,EAAEC,cAAc,CAACC,OAL1B;AAME,MAAA,QAAQ,EAAEJ,mBANZ;AAOE,MAAA,OAAO,EAAED,oBAPX;AAQE,MAAA,SAAS,EAAEE,uBARb;AASE,qBAAaI,kCAAkC,CAACC,YAAnC,CAAgDC;AAT/D,MADF;AAAA,GADY,EAcZ,CAACN,uBAAD,EAA0BD,mBAA1B,EAA+CD,oBAA/C,CAdY,CAAd;AAgBD;;;;"}
+{"version":3,"file":"CalendarIconTrigger.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport DatePicker from '@elliemae/ds-icons/DatePicker';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledIconTriggerButton } from './Styleds';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown, ariaCurrentValueForInputs } =\n    useContext(CalendarContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        variant={BUTTON_VARIANT.DEFAULT}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n      >\n        <DatePicker color={DSIconColors.PRIMARY} />\n      </StyledIconTriggerButton>\n    ),\n    [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs],\n  );\n};\n"],"names":["CalendarIconTrigger","useContext","CalendarContext","handleToggleCalendar","handleSetTriggerRef","handlePickerIconKeyDown","ariaCurrentValueForInputs","useMemo","BUTTON_SIZES","M","BUTTON_VARIANT","DEFAULT","ControlledDateTimePickerDatatestid","PICKER_ICONS","CALENDAR","DSIconColors","PRIMARY"],"mappings":";;;;;;;;;;AAQA;AACA;;IACaA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAmB;AACpD,oBACEC,UAAU,CAACC,eAAD,CADZ;AAAA,MAAQC,oBAAR,eAAQA,oBAAR;AAAA,MAA8BC,mBAA9B,eAA8BA,mBAA9B;AAAA,MAAmDC,uBAAnD,eAAmDA,uBAAnD;AAAA,MAA4EC,yBAA5E,eAA4EA,yBAA5E;;AAEA,SAAOC,OAAO,CACZ;AAAA,wBACE,oBAAC,uBAAD;AACE,gEAAiDD,yBAAjD,CADF;AAEE,MAAA,UAAU,EAAC,MAFb;AAGE,MAAA,IAAI,EAAEE,YAAY,CAACC,CAHrB;AAIE,MAAA,OAAO,EAAEC,cAAc,CAACC,OAJ1B;AAKE,MAAA,QAAQ,EAAEP,mBALZ;AAME,MAAA,OAAO,EAAED,oBANX;AAOE,MAAA,SAAS,EAAEE,uBAPb;AAQE,qBAAaO,kCAAkC,CAACC,YAAnC,CAAgDC;AAR/D,oBAUE,oBAAC,UAAD;AAAY,MAAA,KAAK,EAAEC,YAAY,CAACC;AAAhC,MAVF,CADF;AAAA,GADY,EAeZ,CAACX,uBAAD,EAA0BD,mBAA1B,EAA+CD,oBAA/C,EAAqEG,yBAArE,CAfY,CAAd;AAiBD;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import { CalendarDaysList } from './CalendarDaysList.js';
 import { CalendarContext } from './CalendarContext.js';
 import './Day.js';
+import '@babel/runtime/helpers/esm/extends';
 import '../../../utils/dateHelpers.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
+import '../../../utils/constants.js';
 import '../../../utils/stringHelpers.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '../../../utils/numberHelpers.js';
@@ -12,15 +14,20 @@ import '../../../ControlledDateTimePickerCTX.js';
 import '../../../ControlledDateTimePickerTypes.js';
 import './Styleds.js';
 import 'styled-components';
+import '@elliemae/ds-grid';
 import '@elliemae/ds-button';
 
 var CalendarMonthDays = function CalendarMonthDays() {
   var _useContext = useContext(CalendarContext),
-      daysArray = _useContext.daysArray,
+      invisibleFirstDay = _useContext.invisibleFirstDay,
+      daysMatrixByWeekday = _useContext.daysMatrixByWeekday,
+      invisibleLastDay = _useContext.invisibleLastDay,
       calendarDaysWrapperRef = _useContext.calendarDaysWrapperRef;
 
   return /*#__PURE__*/React.createElement(CalendarDaysList, {
-    daysArray: daysArray,
+    invisibleFirstDay: invisibleFirstDay,
+    daysMatrixByWeekday: daysMatrixByWeekday,
+    invisibleLastDay: invisibleLastDay,
     innerRef: calendarDaysWrapperRef
   });
 };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonthDays.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { CalendarDaysList } from './CalendarDaysList';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarMonthDays = (): JSX.Element => {\n  const { daysArray, calendarDaysWrapperRef } = useContext(CalendarContext);\n\n  return <CalendarDaysList daysArray={daysArray} innerRef={calendarDaysWrapperRef} />;\n};\n"],"names":["CalendarMonthDays","useContext","CalendarContext","daysArray","calendarDaysWrapperRef"],"mappings":";;;;;;;;;;;;;;;;IAKaA,iBAAiB,GAAG,SAApBA,iBAAoB,GAAmB;AAClD,oBAA8CC,UAAU,CAACC,eAAD,CAAxD;AAAA,MAAQC,SAAR,eAAQA,SAAR;AAAA,MAAmBC,sBAAnB,eAAmBA,sBAAnB;;AAEA,sBAAO,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAED,SAA7B;AAAwC,IAAA,QAAQ,EAAEC;AAAlD,IAAP;AACD;;;;"}
+{"version":3,"file":"CalendarMonthDays.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { CalendarDaysList } from './CalendarDaysList';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarMonthDays = (): JSX.Element => {\n  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, calendarDaysWrapperRef } =\n    useContext(CalendarContext);\n\n  return (\n    <CalendarDaysList\n      invisibleFirstDay={invisibleFirstDay}\n      daysMatrixByWeekday={daysMatrixByWeekday}\n      invisibleLastDay={invisibleLastDay}\n      innerRef={calendarDaysWrapperRef}\n    />\n  );\n};\n"],"names":["CalendarMonthDays","useContext","CalendarContext","invisibleFirstDay","daysMatrixByWeekday","invisibleLastDay","calendarDaysWrapperRef"],"mappings":";;;;;;;;;;;;;;;;;;;IAKaA,iBAAiB,GAAG,SAApBA,iBAAoB,GAAmB;AAClD,oBACEC,UAAU,CAACC,eAAD,CADZ;AAAA,MAAQC,iBAAR,eAAQA,iBAAR;AAAA,MAA2BC,mBAA3B,eAA2BA,mBAA3B;AAAA,MAAgDC,gBAAhD,eAAgDA,gBAAhD;AAAA,MAAkEC,sBAAlE,eAAkEA,sBAAlE;;AAGA,sBACE,oBAAC,gBAAD;AACE,IAAA,iBAAiB,EAAEH,iBADrB;AAEE,IAAA,mBAAmB,EAAEC,mBAFvB;AAGE,IAAA,gBAAgB,EAAEC,gBAHpB;AAIE,IAAA,QAAQ,EAAEC;AAJZ,IADF;AAQD;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.js

@@ -1,10 +1,43 @@
 import React from 'react';
-import { StyledWeekDaysUList } from './Styleds.js';
+import { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';
 import 'styled-components';
+import '@elliemae/ds-grid';
 import '@elliemae/ds-button';
 
 var CalendarWeekDays = /*#__PURE__*/React.memo(function () {
-  return /*#__PURE__*/React.createElement(StyledWeekDaysUList, null, /*#__PURE__*/React.createElement("li", null, "sun"), /*#__PURE__*/React.createElement("li", null, "mon"), /*#__PURE__*/React.createElement("li", null, "tue"), /*#__PURE__*/React.createElement("li", null, "wed"), /*#__PURE__*/React.createElement("li", null, "thu"), /*#__PURE__*/React.createElement("li", null, "fri"), /*#__PURE__*/React.createElement("li", null, "sat"));
+  return /*#__PURE__*/React.createElement("span", {
+    role: "rowgroup"
+  }, /*#__PURE__*/React.createElement(StyledWeekDaysListWrapper, {
+    role: "row",
+    cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+    rows: ['22px'],
+    py: "xxxs",
+    px: "6px",
+    justifyContent: "space-between",
+    alignItems: "center",
+    isHeader: true
+  }, /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 1
+  }, "sun"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 2
+  }, "mon"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 3
+  }, "tue"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 4
+  }, "wed"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 5
+  }, "thu"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 6
+  }, "fri"), /*#__PURE__*/React.createElement(StyledWeekDaysHeaderItem, {
+    role: "columnheader",
+    "aria-colindex": 7
+  }, "sat")));
 });
 
 export { CalendarWeekDays };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarWeekDays.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledWeekDaysUList } from './Styleds';\n\nexport const CalendarWeekDays = React.memo(() => (\n  <StyledWeekDaysUList>\n    <li>sun</li>\n    <li>mon</li>\n    <li>tue</li>\n    <li>wed</li>\n    <li>thu</li>\n    <li>fri</li>\n    <li>sat</li>\n  </StyledWeekDaysUList>\n));\n"],"names":["CalendarWeekDays","React","memo"],"mappings":";;;;;IAGaA,gBAAgB,gBAAGC,KAAK,CAACC,IAAN,CAAW;AAAA,sBACzC,oBAAC,mBAAD,qBACE,sCADF,eAEE,sCAFF,eAGE,sCAHF,eAIE,sCAJF,eAKE,sCALF,eAME,sCANF,eAOE,sCAPF,CADyC;AAAA,CAAX;;;;"}
+{"version":3,"file":"CalendarWeekDays.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds';\n\nexport const CalendarWeekDays = React.memo(() => (\n  <span role=\"rowgroup\">\n    <StyledWeekDaysListWrapper\n      role=\"row\"\n      cols={['32px', '32px', '32px', '32px', '32px', '32px', '32px']}\n      rows={['22px']}\n      py=\"xxxs\"\n      px=\"6px\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      isHeader\n    >\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={1}>\n        sun\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={2}>\n        mon\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={3}>\n        tue\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={4}>\n        wed\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={5}>\n        thu\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={6}>\n        fri\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={7}>\n        sat\n      </StyledWeekDaysHeaderItem>\n    </StyledWeekDaysListWrapper>\n  </span>\n));\n"],"names":["CalendarWeekDays","React","memo"],"mappings":";;;;;;IAGaA,gBAAgB,gBAAGC,KAAK,CAACC,IAAN,CAAW;AAAA,sBACzC;AAAM,IAAA,IAAI,EAAC;AAAX,kBACE,oBAAC,yBAAD;AACE,IAAA,IAAI,EAAC,KADP;AAEE,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,EAAyB,MAAzB,EAAiC,MAAjC,EAAyC,MAAzC,EAAiD,MAAjD,CAFR;AAGE,IAAA,IAAI,EAAE,CAAC,MAAD,CAHR;AAIE,IAAA,EAAE,EAAC,MAJL;AAKE,IAAA,EAAE,EAAC,KALL;AAME,IAAA,cAAc,EAAC,eANjB;AAOE,IAAA,UAAU,EAAC,QAPb;AAQE,IAAA,QAAQ;AARV,kBAUE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAVF,eAaE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAbF,eAgBE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAhBF,eAmBE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAnBF,eAsBE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAtBF,eAyBE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WAzBF,eA4BE,oBAAC,wBAAD;AAA0B,IAAA,IAAI,EAAC,cAA/B;AAA8C,qBAAe;AAA7D,WA5BF,CADF,CADyC;AAAA,CAAX;;;;"}

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js

@@ -1,6 +1,7 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContent } from './CalendarContent.js';
 import { CalendarContext } from './CalendarContext.js';
 import './CalendarBody.js';
@@ -9,14 +10,15 @@ import './CalendarDaysList.js';
 import './Day.js';
 import '../../../utils/dateHelpers.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
+import '../../../utils/constants.js';
 import '../../../utils/stringHelpers.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '../../../utils/numberHelpers.js';
-import '../../../ControlledDateTimePickerDatatestid.js';
 import '../../../ControlledDateTimePickerCTX.js';
 import '../../../ControlledDateTimePickerTypes.js';
 import './Styleds.js';
 import 'styled-components';
+import '@elliemae/ds-grid';
 import '@elliemae/ds-button';
 import './CalendarWeekDays.js';
 import './CalendarHead.js';
@@ -45,7 +47,9 @@ var CalendarWrapper = function CalendarWrapper() {
       background: 'white',
       zIndex: 110
     })
-  }, attributes.popper), /*#__PURE__*/React.createElement(CalendarContent, null), /*#__PURE__*/React.createElement("div", {
+  }, attributes.popper, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR
+  }), /*#__PURE__*/React.createElement(CalendarContent, null), /*#__PURE__*/React.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
   }));

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarWrapper.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n    isControllerOnly,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\n  return (\n    <div ref={setPopperElement} style={{ ...styles.popper, background: 'white', zIndex: 110 }} {...attributes.popper}>\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n"],"names":["CalendarWrapper","useContext","CalendarContext","setPopperElement","usePopperHelpers","styles","attributes","setArrowElement","isControllerOnly","popper","background","zIndex","arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIaA,eAAe,GAAG,SAAlBA,eAAkB,GAAmB;AAChD,oBAKIC,UAAU,CAACC,eAAD,CALd;AAAA,MACEC,gBADF,eACEA,gBADF;AAAA,0CAEEC,gBAFF;AAAA,MAEsBC,MAFtB,yBAEsBA,MAFtB;AAAA,MAE8BC,UAF9B,yBAE8BA,UAF9B;AAAA,MAGEC,eAHF,eAGEA,eAHF;AAAA,MAIEC,gBAJF,eAIEA,gBAJF;;AAMA,MAAIA,gBAAJ,EAAsB,oBAAO,oBAAC,eAAD,OAAP;AACtB,sBACE;AAAK,IAAA,GAAG,EAAEL,gBAAV;AAA4B,IAAA,KAAK,kCAAOE,MAAM,CAACI,MAAd;AAAsBC,MAAAA,UAAU,EAAE,OAAlC;AAA2CC,MAAAA,MAAM,EAAE;AAAnD;AAAjC,KAA+FL,UAAU,CAACG,MAA1G,gBACE,oBAAC,eAAD,OADF,eAEE;AAAK,IAAA,GAAG,EAAEF,eAAV;AAA2B,IAAA,KAAK,EAAEF,MAAM,CAACO;AAAzC,IAFF,CADF;AAMD;;;;"}
+{"version":3,"file":"CalendarWrapper.js","sources":["../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n    isControllerOnly,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\n  return (\n    <div\n      ref={setPopperElement}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n    >\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n"],"names":["CalendarWrapper","useContext","CalendarContext","setPopperElement","usePopperHelpers","styles","attributes","setArrowElement","isControllerOnly","popper","background","zIndex","ControlledDateTimePickerDatatestid","CONTEXTUAL_MENU","CALENDAR","arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKaA,eAAe,GAAG,SAAlBA,eAAkB,GAAmB;AAChD,oBAKIC,UAAU,CAACC,eAAD,CALd;AAAA,MACEC,gBADF,eACEA,gBADF;AAAA,0CAEEC,gBAFF;AAAA,MAEsBC,MAFtB,yBAEsBA,MAFtB;AAAA,MAE8BC,UAF9B,yBAE8BA,UAF9B;AAAA,MAGEC,eAHF,eAGEA,eAHF;AAAA,MAIEC,gBAJF,eAIEA,gBAJF;;AAMA,MAAIA,gBAAJ,EAAsB,oBAAO,oBAAC,eAAD,OAAP;AACtB,sBACE;AACE,IAAA,GAAG,EAAEL,gBADP;AAEE,IAAA,KAAK,kCAAOE,MAAM,CAACI,MAAd;AAAsBC,MAAAA,UAAU,EAAE,OAAlC;AAA2CC,MAAAA,MAAM,EAAE;AAAnD;AAFP,KAGML,UAAU,CAACG,MAHjB;AAIE,mBAAaG,kCAAkC,CAACC,eAAnC,CAAmDC;AAJlE,mBAME,oBAAC,eAAD,OANF,eAOE;AAAK,IAAA,GAAG,EAAEP,eAAV;AAA2B,IAAA,KAAK,EAAEF,MAAM,CAACU;AAAzC,IAPF,CADF;AAWD;;;;"}