@elliemae/ds-controlled-form 2.0.0-next.8 → 2.0.0-rc.11

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

@@ -1,12 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import { DSIconColors } from '@elliemae/ds-icon';
 import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
-import DatePicker from '@elliemae/ds-icons/DatePicker';
+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
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -15,7 +15,8 @@ const CalendarIconTrigger = () => {
     handleToggleCalendar,
     handleSetTriggerRef,
     handlePickerIconKeyDown,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    disabled
   } = useContext(CalendarContext);
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
     "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
@@ -25,10 +26,9 @@ const CalendarIconTrigger = () => {
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
-    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR
-  }, void 0, /*#__PURE__*/_jsx(DatePicker, {
-    color: DSIconColors.PRIMARY
-  })), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs]);
+    "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/CalendarWrapper.js

@@ -1,3 +1,8 @@
+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';

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

@@ -1,8 +1,13 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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 { weekDays } from '../../../utils/constants.js';
+import { defaultMetaInfo, weekDays } from '../../../utils/constants.js';
 import { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
@@ -16,11 +21,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const displayNone = {
   display: 'none'
 };
-const Day = ({
-  metaDay,
-  colIndex,
-  isInvisible
-}) => {
+const Day = _ref => {
+  let {
+    metaDay,
+    colIndex,
+    isInvisible
+  } = _ref;
   const {
     day,
     isCurrMonthDay,
@@ -70,10 +76,11 @@ const Day = ({
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = getDateStringFromDay(day);
-      const metaInfo = {
-        isAutomaticFillTrigger: false,
+
+      const metaInfo = _objectSpread(_objectSpread({}, defaultMetaInfo), {}, {
         newDateString
-      };
+      });
+
       const {
         month,
         day: dayNumber,
@@ -95,6 +102,9 @@ const 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,

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

@@ -1,139 +1,347 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-/* eslint-disable max-lines */
-const focusBorder = "\n  border-style: solid;\n  border-width: 2px;\n  border-radius: 50%;\n";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const diagonalLine = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral[500];
+});
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+const backgroundDateRange = {
+  inRange: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme.colors.brand[200];
+  }, _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme.colors.brand[200];
+  }),
+  startRange: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.colors.brand[200];
+  }, _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.colors.brand[200];
+  }),
+  endRange: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.colors.brand[200];
+  })
+};
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-0"
-})(["color:", ";width:26px;height:26px;"], ({
-  theme
-}) => theme.colors.brand['600']);
+})(["color:", ";width:26px;height:26px;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.brand['600'];
+});
 const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18gg4kd-1"
-})(["", ""], ({
-  isControllerOnly
-}) => isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);');
+})(["", ""], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
+  return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
+});
 const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18gg4kd-2"
-})(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral['000'];
+});
 const StyledHeader = /*#__PURE__*/styled.section.withConfig({
   componentId: "sc-18gg4kd-3"
-})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], ({
-  theme
-}) => theme.space.xxxs, ({
-  theme
-}) => theme.colors.neutral['050']);
+})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.space.xxxs;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.neutral['050'];
+});
 const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-4"
-})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[200]);
+})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.brand[700];
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.brand[200];
+});
 const StyledBody = /*#__PURE__*/styled.section.withConfig({
   componentId: "sc-18gg4kd-5"
-})(["padding:", ";"], ({
-  theme
-}) => theme.space.xxxs);
+})(["padding:", ";"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xxxs;
+});
 const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-6"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;color:", ";font-weight:", ";position:relative;&:hover{color:", ";}&:focus:not(:hover){background-color:", ";color:", ";}&:focus{&:after{border-radius:50%;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);}}"], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.colors.neutral[800], ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.colors.brand[600]);
+})(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.neutral[800];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.brand[700];
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[200];
+}, focusBorder);
 const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-18gg4kd-7"
-})(["font-size:", ";text-align:center;", ";", ";.dayWrapper{position:relative;width:36px;button:focus{&:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;border-radius:50%;border:2px solid ", ";pointer-events:none;}&:after{position:absolute;content:'';top:-2px;left:-2px;", " border-color:", ";width:calc(100% + 4px);height:calc(100% + 4px);}}&.disabledDay,&.outOfRangeDay{button:focus{&:after{border-color:", ";}}}}.dayWrapper.startRangeDay{border-radius:50% 0 0 50%;background-color:", ";}.dayWrapper.inRangeDay{border-radius:0;background-color:", ";}.dayWrapper.endRangeDay{border-radius:0 50% 50% 0;background-color:", ";}.dayWrapper.startRangeDay.endRangeDay{background:unset;}.dayWrapper.startRangeDay,.dayWrapper.endRangeDay,.dayWrapper.selectedDay{button{color:", ";background-color:", ";font-weight:", ";}}.dayWrapper.notCurrentMonth{button{font-weight:", ";&:not(:hover){color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay{button{color:", ";}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{button{color:", ";font-weight:", ";cursor:not-allowed;&:focus{", " border-color:", ";}&:hover{background:", ";}}&:after{cursor:not-allowed;position:absolute;content:'';top:47%;left:3px;width:calc(100% - 5px);height:1px;background-color:", ";transform:rotate(45deg);pointer-events:none;}&.focusedDay{button{color:", ";font-weight:", ";}&:after{background-color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay,&.inRangeDay{button{color:", ";background-color:", ";}&:after{background-color:", ";}}}"], ({
-  theme
-}) => theme.fontSizes.label[400], ({
-  isHeader,
-  theme
-}) => isHeader ? "background: ".concat(theme.colors.neutral['050']) : '', ({
-  isHeader
-}) => isHeader ? 'text-transform: capitalize' : '', ({
-  theme
-}) => theme.colors.neutral['000'], focusBorder, ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.colors.brand[200], ({
-  theme
-}) => theme.colors.brand[200], ({
-  theme
-}) => theme.colors.brand[200], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.fontWeights.semibold, ({
-  theme
-}) => theme.fontWeights.light, ({
-  theme
-}) => theme.colors.neutral[500], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.colors.neutral[500], ({
-  theme
-}) => theme.fontWeights.light, focusBorder, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.colors.neutral[500], ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontSizes.label[400];
+}, _ref19 => {
+  let {
+    isHeader,
+    theme
+  } = _ref19;
+  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+}, _ref20 => {
+  let {
+    isHeader
+  } = _ref20;
+  return isHeader ? 'text-transform: capitalize' : '';
+}, StyledDayBtn, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.neutral['000'];
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.fontWeights.semibold;
+}, StyledDayBtn, _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.colors.brand[700];
+}, StyledDayBtn, _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.colors.neutral['000'];
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.colors.danger[900];
+}, _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.neutral['000'];
+}, _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.colors.neutral['000'];
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.colors.neutral[500];
+}, diagonalLine, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.colors.neutral[500];
+}, StyledDayBtn, _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.colors.danger[900];
+}, StyledDayBtn, focusBorder, _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.colors.brand[600];
+}, _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.colors.brand[700];
+}, StyledDayBtn, _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.colors.danger[900];
+}, _ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.colors.danger[900];
+}, StyledDayBtn, _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.colors.neutral[500];
+}, StyledDayBtn, _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.colors.brand[600];
+}, StyledDayBtn, _ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.colors.danger[900];
+}, StyledDayBtn, _ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.inRange, StyledDayBtn, _ref43 => {
+  let {
+    theme
+  } = _ref43;
+  return theme.colors.neutral['000'];
+}, _ref44 => {
+  let {
+    theme
+  } = _ref44;
+  return theme.colors.danger[900];
+}, _ref45 => {
+  let {
+    theme
+  } = _ref45;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref46 => {
+  let {
+    theme
+  } = _ref46;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.startRange, StyledDayBtn, _ref47 => {
+  let {
+    theme
+  } = _ref47;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref48 => {
+  let {
+    theme
+  } = _ref48;
+  return theme.colors.neutral['000'];
+}, _ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.colors.neutral['000'];
+}, backgroundDateRange.endRange, StyledDayBtn, _ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.colors.neutral['000'];
+}, StyledDayBtn, _ref51 => {
+  let {
+    theme
+  } = _ref51;
+  return theme.colors.neutral['000'];
+}, _ref52 => {
+  let {
+    theme
+  } = _ref52;
+  return theme.colors.neutral['000'];
+});
 const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18gg4kd-8"
-})(["width:", ";min-width:", ";"], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s);
+})(["width:", ";min-width:", ";"], _ref53 => {
+  let {
+    theme
+  } = _ref53;
+  return theme.space.s;
+}, _ref54 => {
+  let {
+    theme
+  } = _ref54;
+  return theme.space.s;
+});
 const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   componentId: "sc-18gg4kd-9"
-})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], ({
-  theme
-}) => theme.colors.neutral[300], ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.thin, ({
-  theme
-}) => theme.fontSizes.microText[200]);
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref55 => {
+  let {
+    theme
+  } = _ref55;
+  return theme.colors.neutral[300];
+}, _ref56 => {
+  let {
+    theme
+  } = _ref56;
+  return theme.space.xxs2;
+}, _ref57 => {
+  let {
+    theme
+  } = _ref57;
+  return theme.space.xxs2;
+}, _ref58 => {
+  let {
+    theme
+  } = _ref58;
+  return theme.colors.danger[900];
+}, _ref59 => {
+  let {
+    theme
+  } = _ref59;
+  return theme.fontWeights.thin;
+}, _ref60 => {
+  let {
+    theme
+  } = _ref60;
+  return theme.fontSizes.microText[200];
+});
 
 export { CalendarFooterMessage, StyledBody, StyledCalendarWrapper, StyledDayBtn, StyledHeader, StyledHeaderButton, StyledIconTriggerButton, StyledShadowWrapper, StyledWeekDaysHeaderItem, StyledWeekDaysListWrapper };

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

@@ -20,23 +20,14 @@ function sliceIntoChunks(arr, chunkSize) {
 
 const useConfigCalendarCTX = () => {
   const {
-    pickerButtonRef,
     props: {
-      onPickerOpen,
-      onPickerClose,
-      preventCloseOnSelection
+      disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
     nextYearBtnRef,
     calendarDaysWrapperRef,
-    currMeridiemBtnRef,
-    currHourBtnRef,
     isControllerOnly,
     isWithTimeWheelToo,
     setLatestInteractionRegion,
@@ -89,14 +80,8 @@ const useConfigCalendarCTX = () => {
     resetFocusedDayToStartDate
   } = useFocusLogic({
     daysArray,
-    calendarDaysWrapperRef,
     showCalendar
-  }); // onOpen we try to focus the day we should focus, if we should focus one
-
-  const handleOnPickerOpen = useCallback(() => {
-    onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  });
   const {
     closeCalendar,
     handleSetTriggerRef,
@@ -106,12 +91,9 @@ const useConfigCalendarCTX = () => {
     handleToggleCalendar,
     handleMenuWrapperKeyDown
   } = usePopperTriggerLogic({
-    focusedDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
     resetFocusedDayToStartDate,
-    prevMonthBtnRef,
-    pickerButtonRef,
-    onPickerOpen: handleOnPickerOpen,
-    onPickerClose,
+    focusedDay,
     showCalendar,
     setShowCalendar
   });
@@ -127,27 +109,9 @@ const useConfigCalendarCTX = () => {
     daysArray,
     handlePrevMonth,
     handleNextMonth,
-    pickerButtonRef,
-    currMeridiemBtnRef,
-    currHourBtnRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    isWithTimeWheelToo,
-    isControllerOnly,
-    setShowCalendar,
-    onPickerOpen,
-    onPickerClose,
-    setLatestInteractionRegion,
     handleFocusMetaDay,
     handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
-    preventCloseOnSelection
+    tryToFocusCurrentlyDataIsFocusedDay
   });
   return useMemo(() => ({
     showCalendar,
@@ -192,8 +156,9 @@ const useConfigCalendarCTX = () => {
     onNextYearFocus,
     isWithTimeWheelToo,
     autoFocusPrevMonthArrow,
-    ariaCurrentValueForInputs
-  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs]);
+    ariaCurrentValueForInputs,
+    disabled
+  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs, disabled]);
 };
 
 export { useConfigCalendarCTX };