@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -1,9 +1,10 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
-import DatePicker from '@elliemae/ds-icons/DatePicker';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { DatePicker } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContext } from './CalendarContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
 
 var _DatePicker;
 // this is particularly usefull due to how usePopper needs to check the references
@@ -13,19 +14,21 @@ const CalendarIconTrigger = () => {
   const {
     handleToggleCalendar,
     handleSetTriggerRef,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
   } = useContext(CalendarContext);
-  return useMemo(() => /*#__PURE__*/_jsx(DSButton, {
-    "aria-label": "date picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
-    size: "m",
+  return useMemo(() => /*#__PURE__*/_jsx(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]);
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 
 export { CalendarIconTrigger };

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

@@ -5,11 +5,15 @@ import { CalendarContext } from './CalendarContext.js';
 
 const CalendarMonthDays = () => {
   const {
-    daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     calendarDaysWrapperRef
   } = useContext(CalendarContext);
   return /*#__PURE__*/_jsx(CalendarDaysList, {
-    daysArray: daysArray,
+    invisibleFirstDay: invisibleFirstDay,
+    daysMatrixByWeekday: daysMatrixByWeekday,
+    invisibleLastDay: invisibleLastDay,
     innerRef: calendarDaysWrapperRef
   });
 };

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

@@ -1,8 +1,40 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
-import { StyledWeekDaysUList } from './Styleds.js';
+import { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';
 
-var _StyledWeekDaysUList;
-const CalendarWeekDays = /*#__PURE__*/React.memo(() => _StyledWeekDaysUList || (_StyledWeekDaysUList = /*#__PURE__*/_jsx(StyledWeekDaysUList, {}, void 0, /*#__PURE__*/_jsx("li", {}, void 0, "sun"), /*#__PURE__*/_jsx("li", {}, void 0, "mon"), /*#__PURE__*/_jsx("li", {}, void 0, "tue"), /*#__PURE__*/_jsx("li", {}, void 0, "wed"), /*#__PURE__*/_jsx("li", {}, void 0, "thu"), /*#__PURE__*/_jsx("li", {}, void 0, "fri"), /*#__PURE__*/_jsx("li", {}, void 0, "sat"))));
+var _StyledWeekDaysHeader, _StyledWeekDaysHeader2, _StyledWeekDaysHeader3, _StyledWeekDaysHeader4, _StyledWeekDaysHeader5, _StyledWeekDaysHeader6, _StyledWeekDaysHeader7;
+const CalendarWeekDays = /*#__PURE__*/React.memo(() => /*#__PURE__*/_jsx("span", {
+  role: "rowgroup"
+}, void 0, /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+  role: "row",
+  cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+  rows: ['22px'],
+  py: "xxxs",
+  px: "6px",
+  justifyContent: "space-between",
+  alignItems: "center",
+  isHeader: true
+}, void 0, _StyledWeekDaysHeader || (_StyledWeekDaysHeader = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 1
+}, void 0, "sun")), _StyledWeekDaysHeader2 || (_StyledWeekDaysHeader2 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 2
+}, void 0, "mon")), _StyledWeekDaysHeader3 || (_StyledWeekDaysHeader3 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 3
+}, void 0, "tue")), _StyledWeekDaysHeader4 || (_StyledWeekDaysHeader4 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 4
+}, void 0, "wed")), _StyledWeekDaysHeader5 || (_StyledWeekDaysHeader5 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 5
+}, void 0, "thu")), _StyledWeekDaysHeader6 || (_StyledWeekDaysHeader6 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 6
+}, void 0, "fri")), _StyledWeekDaysHeader7 || (_StyledWeekDaysHeader7 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 7
+}, void 0, "sat")))));
 
 export { CalendarWeekDays };

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

@@ -1,6 +1,12 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContent } from './CalendarContent.js';
 import { CalendarContext } from './CalendarContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -28,6 +34,7 @@ const CalendarWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
     children: [_CalendarContent2 || (_CalendarContent2 = /*#__PURE__*/_jsx(CalendarContent, {})), /*#__PURE__*/jsx("div", {
       ref: setArrowElement,
       style: styles.arrow

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

@@ -1,22 +1,38 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useContext, useMemo, useCallback } from 'react';
 import { compareTwoDatesDayEquality, getDayFromDateString, isSameDateMoment, getDateStringFromDay, getDateValuesFromDate } from '../../../utils/dateHelpers.js';
+import { defaultMetaInfo, weekDays } from '../../../utils/constants.js';
+import { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarContext } from './CalendarContext.js';
 import { StyledDayBtn } from './Styleds.js';
+import { jsx } from 'react/jsx-runtime';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const displayNone = {
   display: 'none'
 };
-const Day = ({
-  metaDay
-}) => {
+const Day = _ref => {
+  let {
+    metaDay,
+    colIndex,
+    isInvisible
+  } = _ref;
   const {
     day,
     isCurrMonthDay,
     isHidden,
-    dayBtnRef
+    dayBtnRef,
+    dayAsString
   } = metaDay;
   const {
     handleChangeComposedDateString,
@@ -60,18 +76,19 @@ const Day = ({
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = getDateStringFromDay(day);
-      const metaInfo = {
-        isAutomaticFillTrigger: false,
+
+      const metaInfo = _objectSpread(_objectSpread({}, defaultMetaInfo), {}, {
         newDateString
-      };
+      });
+
       const {
         month,
         day: dayNumber,
         year
       } = getDateValuesFromDate(day);
-      onMonthChange(`${month + 1}`, e, metaInfo);
-      onDayChange(`${dayNumber}`, e, metaInfo);
-      onYearChange(`${year}`, e, metaInfo);
+      onMonthChange("".concat(month + 1), e, metaInfo);
+      onDayChange("".concat(dayNumber), e, metaInfo);
+      onYearChange("".concat(year), e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
       setLatestInteractionRegion('calendar-days');
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
@@ -80,25 +97,38 @@ const Day = ({
   const handleOnDayFocus = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);
-  const dayClassModifiers = useMemo(() => `${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${isOutOfRange ? 'outOfRangeDay ' : ''}${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${isCurrMonthDay ? '' : 'notCurrentMonth'}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
-  return /*#__PURE__*/_jsx("li", {
+  const dayClassModifiers = useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+  let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
+  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
+  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
+  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;
+  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;
+  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     className: dayClassModifiers,
-    style: isHidden ? displayNone : undefined
-  }, void 0, /*#__PURE__*/_jsx(StyledDayBtn, {
-    "aria-label": "Date picker",
-    buttonType: "text",
-    labelText: `${day.getDate()}`,
-    size: "m",
-    onClick: handleOnDayClick // DSButton triggers this with "spacebar" and "enter" too...
-    ,
-    onFocus: handleOnDayFocus,
-    onKeyDown: e => {
-      handleDayOnKeyDown(e, metaDay);
-    },
-    innerRef: dayBtnRef,
-    tabIndex: isSelected ? 0 : -1,
-    "data-isfocused": isFocused,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR[isFocused ? 'FOCUSED_DAY' : 'DAY']
+    style: isHidden ? displayNone : undefined,
+    role: !isInvisible ? 'gridcell' : undefined
+  }, Number.isInteger(colIndex) && {
+    'aria-colindex': colIndex
+  }), {}, {
+    children: /*#__PURE__*/_jsx(StyledDayBtn, {
+      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(weekDays[metaDay.day.getDay()]),
+      "aria-disabled": isOutOfRange || isDisabled,
+      "aria-hidden": !!isInvisible,
+      buttonType: "raw",
+      size: "m",
+      onClick: handleOnDayClick // DSButton triggers this with "spacebar" and "enter" too...
+      ,
+      onFocus: handleOnDayFocus,
+      onKeyDown: e => {
+        handleDayOnKeyDown(e, metaDay);
+      },
+      innerRef: dayBtnRef,
+      tabIndex: isSelected ? 0 : -1,
+      "data-isfocused": isFocused,
+      "data-testid": dataTestid
+    }, void 0, "".concat(day.getDate()))
   }));
 };