@elliemae/ds-form-date-range-picker 3.60.0-next.57 → 3.60.0-next.58

package/dist/cjs/config/useControlledDateRangePicker.js

@@ -41,7 +41,7 @@ var import_useRangePickerLogic = require("./useRangePickerLogic.js");
 var import_ControlledDateRangePickerTypes = require("../ControlledDateRangePickerTypes.js");
 const useControlledDateRangePicker = (props) => {
   (0, import_useValidateProps.useValidateProps)(props);
-  const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
+  const instanceUID = (0, import_react.useMemo)(() => `ds-date-range-picker-uid-${(0, import_uid.uid)(6)}`, []);
   const propsWithDefaults = (0, import_useGetPropsWithDefault.useGetDateRangePickerWithDefaultsProps)(props);
   const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefaults, { ...props });
   const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);

package/dist/cjs/config/useControlledDateRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useControlledDateRangePicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useRangePickerLogic } from './useRangePickerLogic.js';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\ninterface RangePickerLogicT {\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handleToDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n\n  handlePickerDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handlePickerMonthDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerDayDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerYearDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\n\nexport interface ControlledDateRangePickerContextT {\n  props: DSControlledDateRangePickerT.InternalProps;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const useControlledDateRangePicker = (\n  props: DSControlledDateRangePickerT.Props,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwB;AACxB,iBAAoB;AACpB,8BAA0E;AAC1E,oCAAuD;AACvD,8BAAiC;AACjC,iCAAoC;AACpC,4CAAmD;AAmC5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,gDAAiB,KAAK;AACtB,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,wBAAoB,sEAAuC,KAAK;AAEtE,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,kBAAc,gDAAuB,iBAAiB;AAE5D,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,WACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,mBAAmB,SAAS,yEAAmC;AACrE,QAAM,eAAe,SAAS,yEAAmC;AAEjE,QAAM,uBAAmB,gDAAoB,iBAAiB;AAE9D,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,kBAAkB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useRangePickerLogic } from './useRangePickerLogic.js';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\ninterface RangePickerLogicT {\n  calendarChangeIsFrom: boolean;\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handleToDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n\n  handlePickerDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handlePickerMonthDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerDayDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerYearDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\n\nexport interface ControlledDateRangePickerContextT {\n  props: DSControlledDateRangePickerT.InternalProps;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const useControlledDateRangePicker = (\n  props: DSControlledDateRangePickerT.Props,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => `ds-date-range-picker-uid-${uid(6)}`, []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwB;AACxB,iBAAoB;AACpB,8BAA0E;AAC1E,oCAAuD;AACvD,8BAAiC;AACjC,iCAAoC;AACpC,4CAAmD;AAoC5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,gDAAiB,KAAK;AACtB,QAAM,kBAAc,sBAAQ,MAAM,gCAA4B,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,wBAAoB,sEAAuC,KAAK;AAEtE,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,kBAAc,gDAAuB,iBAAiB;AAE5D,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,WACJ,SAAS,yEAAmC,QAAQ,SAAS,yEAAmC;AAClG,QAAM,mBAAmB,SAAS,yEAAmC;AACrE,QAAM,eAAe,SAAS,yEAAmC;AAEjE,QAAM,uBAAmB,gDAAoB,iBAAiB;AAE9D,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,kBAAkB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/config/useRangePickerLogic.js

@@ -161,6 +161,7 @@ const useRangePickerLogic = ({
   );
   return (0, import_react.useMemo)(
     () => ({
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,
@@ -175,6 +176,7 @@ const useRangePickerLogic = ({
       getIsEndRangeDay
     }),
     [
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,

package/dist/cjs/config/useRangePickerLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useRangePickerLogic.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport { getDayFromDateString } from '@elliemae/ds-form-date-time-picker';\nimport type { ControlledDateRangePickerContextT } from './useControlledDateRangePicker.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\nexport const useRangePickerLogic = ({\n  fromDate,\n  onFromDateChange,\n  onMonthFromChange,\n  onDayFromChange,\n  onYearFromChange,\n  toDate,\n  onMonthToChange,\n  onDayToChange,\n  onYearToChange,\n  onToDateChange,\n}: DSControlledDateRangePickerT.InternalProps): ControlledDateRangePickerContextT['rangePickerLogic'] => {\n  // the implementation is based on controlled-date-time-picker that is not meant to \"understand\"\n  // the \"from\" - \"to\" logic on click, we are \"overloading\" the \"from\" - \"to\" logic here\n  // we track wheter we are going to set the \"from\" OR \"to\" controlled date based on this toggle\n  const [calendarChangeIsFrom, setCalendarChangeIsFrom] = useState(true);\n  const [latestChangedDate, setLatestChangedDate] = useState(fromDate);\n  useEffect(() => {\n    setLatestChangedDate(fromDate);\n  }, [fromDate]);\n  useEffect(() => {\n    setLatestChangedDate(toDate);\n  }, [toDate]);\n\n  const getChangedDayStringValues = useCallback(\n    (changedDay: string) => {\n      // based on wheter we are handling a \"from\"/\"to\" change, we calculate some values\n      const dateFromString = calendarChangeIsFrom ? changedDay : fromDate;\n      const dateFrom = getDayFromDateString(dateFromString);\n      const dateToString = calendarChangeIsFrom ? toDate : changedDay;\n      const dateTo = getDayFromDateString(dateToString);\n      // we force the \"from\" to ALWAYS be before the \"to\" date\n      const isToBeforeFrom = !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n      const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;\n      const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;\n      const newDateToString = isToBeforeFrom ? dateFromString : dateToString;\n      const forcingToDatePick = isToBeforeFrom ? calendarChangeIsFrom : false;\n\n      // next change should be based on\n      //   the force pick next interactions\n      //   toggle between from/to  if we didn't force any pick\n      let nextToggleStateIsFrom = !calendarChangeIsFrom;\n      if (forcingFromDatePick) nextToggleStateIsFrom = false;\n      if (forcingToDatePick) nextToggleStateIsFrom = true;\n\n      return {\n        newDateFromString,\n        forcingFromDatePick,\n        newDateToString,\n        forcingToDatePick,\n        isToBeforeFrom,\n        nextToggleStateIsFrom,\n        currentClickCountAsFrom: !nextToggleStateIsFrom,\n      };\n    },\n    [fromDate, calendarChangeIsFrom, toDate],\n  );\n  const handlePickerMonthDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerMonthDateChange'] =\n    useCallback(\n      (newMonth, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onMonthFromChange(newMonth, e, metaInfo);\n        else onMonthToChange(newMonth, e, metaInfo);\n      },\n      [getChangedDayStringValues, onMonthFromChange, onMonthToChange],\n    );\n  const handlePickerDayDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDayDateChange'] =\n    useCallback(\n      (newDay, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onDayFromChange(newDay, e, metaInfo);\n        else onDayToChange(newDay, e, metaInfo);\n      },\n      [getChangedDayStringValues, onDayFromChange, onDayToChange],\n    );\n  const handlePickerYearDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerYearDateChange'] =\n    useCallback(\n      (newYear, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onYearFromChange(newYear, e, metaInfo);\n        else onYearToChange(newYear, e, metaInfo);\n      },\n      [getChangedDayStringValues, onYearFromChange, onYearToChange],\n    );\n\n  // every time the calendar opens/closes, we assume first click is \"from\"\n  const onCalendarOpen: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarOpen'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const onCalendarClose: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarClose'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const handlePickerDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDateChange'] =\n    useCallback(\n      (changedDay, metaInfo) => {\n        const { newDateFromString, newDateToString, nextToggleStateIsFrom, isToBeforeFrom } =\n          getChangedDayStringValues(changedDay);\n\n        // every \"change\" on the picker range we calculate it as a new \"onChange\" for both values\n        // and we pass over the correct \"new\" from/to value\n        onFromDateChange(newDateFromString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n        onToDateChange(newDateToString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n\n        // and we notify what the next change type should be\n        setCalendarChangeIsFrom(nextToggleStateIsFrom);\n      },\n      [getChangedDayStringValues, onFromDateChange, onToDateChange],\n    );\n\n  const getIsStartRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsStartRangeDay'] = useCallback(\n    (dayString) => dayString === fromDate,\n    [fromDate],\n  );\n  const getIsDayInRange: ControlledDateRangePickerContextT['rangePickerLogic']['getIsDayInRange'] = useCallback(\n    (dayString) => {\n      const dayFrom = getDayFromDateString(fromDate);\n      const dayTo = getDayFromDateString(toDate);\n      if (!dayFrom || !dayTo || !dayString) return false;\n      const newDayTime = getDayFromDateString(dayString)?.getTime();\n      return !!newDayTime && newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();\n    },\n    [fromDate, toDate],\n  );\n  const getIsEndRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsEndRangeDay'] = useCallback(\n    (dayString) => dayString === toDate,\n    [toDate],\n  );\n\n  const getIsToBeforeFrom = useCallback((fromString: string, toString: string) => {\n    const dateFrom = getDayFromDateString(fromString);\n    const dateTo = getDayFromDateString(toString);\n    return !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n  }, []);\n  const handleFromDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleFromDateChange'] =\n    useCallback(\n      (newVal, metaInfo) => {\n        const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);\n        onFromDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'from', isIncorrectOrder });\n      },\n      [getIsToBeforeFrom, onFromDateChange, toDate],\n    );\n  const handleToDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleToDateChange'] = useCallback(\n    (newVal, metaInfo) => {\n      const isIncorrectOrder = getIsToBeforeFrom(fromDate, newVal);\n      onToDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'to', isIncorrectOrder });\n    },\n    [fromDate, getIsToBeforeFrom, onToDateChange],\n  );\n\n  return useMemo(\n    () => ({\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    }),\n    [\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport { getDayFromDateString } from '@elliemae/ds-form-date-time-picker';\nimport type { ControlledDateRangePickerContextT } from './useControlledDateRangePicker.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\nexport const useRangePickerLogic = ({\n  fromDate,\n  onFromDateChange,\n  onMonthFromChange,\n  onDayFromChange,\n  onYearFromChange,\n  toDate,\n  onMonthToChange,\n  onDayToChange,\n  onYearToChange,\n  onToDateChange,\n}: DSControlledDateRangePickerT.InternalProps): ControlledDateRangePickerContextT['rangePickerLogic'] => {\n  // the implementation is based on controlled-date-time-picker that is not meant to \"understand\"\n  // the \"from\" - \"to\" logic on click, we are \"overloading\" the \"from\" - \"to\" logic here\n  // we track wheter we are going to set the \"from\" OR \"to\" controlled date based on this toggle\n  const [calendarChangeIsFrom, setCalendarChangeIsFrom] = useState(true);\n  const [latestChangedDate, setLatestChangedDate] = useState(fromDate);\n  useEffect(() => {\n    setLatestChangedDate(fromDate);\n  }, [fromDate]);\n  useEffect(() => {\n    setLatestChangedDate(toDate);\n  }, [toDate]);\n\n  const getChangedDayStringValues = useCallback(\n    (changedDay: string) => {\n      // based on wheter we are handling a \"from\"/\"to\" change, we calculate some values\n      const dateFromString = calendarChangeIsFrom ? changedDay : fromDate;\n      const dateFrom = getDayFromDateString(dateFromString);\n      const dateToString = calendarChangeIsFrom ? toDate : changedDay;\n      const dateTo = getDayFromDateString(dateToString);\n      // we force the \"from\" to ALWAYS be before the \"to\" date\n      const isToBeforeFrom = !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n      const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;\n      const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;\n      const newDateToString = isToBeforeFrom ? dateFromString : dateToString;\n      const forcingToDatePick = isToBeforeFrom ? calendarChangeIsFrom : false;\n\n      // next change should be based on\n      //   the force pick next interactions\n      //   toggle between from/to  if we didn't force any pick\n      let nextToggleStateIsFrom = !calendarChangeIsFrom;\n      if (forcingFromDatePick) nextToggleStateIsFrom = false;\n      if (forcingToDatePick) nextToggleStateIsFrom = true;\n\n      return {\n        newDateFromString,\n        forcingFromDatePick,\n        newDateToString,\n        forcingToDatePick,\n        isToBeforeFrom,\n        nextToggleStateIsFrom,\n        currentClickCountAsFrom: !nextToggleStateIsFrom,\n      };\n    },\n    [fromDate, calendarChangeIsFrom, toDate],\n  );\n  const handlePickerMonthDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerMonthDateChange'] =\n    useCallback(\n      (newMonth, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onMonthFromChange(newMonth, e, metaInfo);\n        else onMonthToChange(newMonth, e, metaInfo);\n      },\n      [getChangedDayStringValues, onMonthFromChange, onMonthToChange],\n    );\n  const handlePickerDayDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDayDateChange'] =\n    useCallback(\n      (newDay, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onDayFromChange(newDay, e, metaInfo);\n        else onDayToChange(newDay, e, metaInfo);\n      },\n      [getChangedDayStringValues, onDayFromChange, onDayToChange],\n    );\n  const handlePickerYearDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerYearDateChange'] =\n    useCallback(\n      (newYear, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onYearFromChange(newYear, e, metaInfo);\n        else onYearToChange(newYear, e, metaInfo);\n      },\n      [getChangedDayStringValues, onYearFromChange, onYearToChange],\n    );\n\n  // every time the calendar opens/closes, we assume first click is \"from\"\n  const onCalendarOpen: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarOpen'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const onCalendarClose: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarClose'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const handlePickerDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDateChange'] =\n    useCallback(\n      (changedDay, metaInfo) => {\n        const { newDateFromString, newDateToString, nextToggleStateIsFrom, isToBeforeFrom } =\n          getChangedDayStringValues(changedDay);\n\n        // every \"change\" on the picker range we calculate it as a new \"onChange\" for both values\n        // and we pass over the correct \"new\" from/to value\n        onFromDateChange(newDateFromString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n        onToDateChange(newDateToString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n\n        // and we notify what the next change type should be\n        setCalendarChangeIsFrom(nextToggleStateIsFrom);\n      },\n      [getChangedDayStringValues, onFromDateChange, onToDateChange],\n    );\n\n  const getIsStartRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsStartRangeDay'] = useCallback(\n    (dayString) => dayString === fromDate,\n    [fromDate],\n  );\n  const getIsDayInRange: ControlledDateRangePickerContextT['rangePickerLogic']['getIsDayInRange'] = useCallback(\n    (dayString) => {\n      const dayFrom = getDayFromDateString(fromDate);\n      const dayTo = getDayFromDateString(toDate);\n      if (!dayFrom || !dayTo || !dayString) return false;\n      const newDayTime = getDayFromDateString(dayString)?.getTime();\n      return !!newDayTime && newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();\n    },\n    [fromDate, toDate],\n  );\n  const getIsEndRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsEndRangeDay'] = useCallback(\n    (dayString) => dayString === toDate,\n    [toDate],\n  );\n\n  const getIsToBeforeFrom = useCallback((fromString: string, toString: string) => {\n    const dateFrom = getDayFromDateString(fromString);\n    const dateTo = getDayFromDateString(toString);\n    return !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n  }, []);\n  const handleFromDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleFromDateChange'] =\n    useCallback(\n      (newVal, metaInfo) => {\n        const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);\n        onFromDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'from', isIncorrectOrder });\n      },\n      [getIsToBeforeFrom, onFromDateChange, toDate],\n    );\n  const handleToDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleToDateChange'] = useCallback(\n    (newVal, metaInfo) => {\n      const isIncorrectOrder = getIsToBeforeFrom(fromDate, newVal);\n      onToDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'to', isIncorrectOrder });\n    },\n    [fromDate, getIsToBeforeFrom, onToDateChange],\n  );\n\n  return useMemo(\n    () => ({\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    }),\n    [\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/ControlledDateRangeCalendar.js

@@ -33,11 +33,12 @@ __export(ControlledDateRangeCalendar_exports, {
 module.exports = __toCommonJS(ControlledDateRangeCalendar_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_form_date_time_picker = require("@elliemae/ds-form-date-time-picker");
 var import_ControlledDateRangePickerCTX = require("../ControlledDateRangePickerCTX.js");
 const ControlledDateRangeCalendar = () => {
   const {
+    instanceUID,
     props: {
       emptyPickerStartingMonth,
       onCalendarOpenFocusedDay,
@@ -55,6 +56,7 @@ const ControlledDateRangeCalendar = () => {
       lastElementRef
     },
     rangePickerLogic: {
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,
@@ -68,36 +70,75 @@ const ControlledDateRangeCalendar = () => {
     },
     isControllerOnly
   } = (0, import_react.useContext)(import_ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_form_date_time_picker.DSControlledDateTimePicker,
-    {
-      type: isControllerOnly ? import_ds_form_date_time_picker.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY : import_ds_form_date_time_picker.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER,
-      date: latestChangedDate,
-      onDateChange: handlePickerDateChange,
-      onMonthChange: handlePickerMonthDateChange,
-      onDayChange: handlePickerDayDateChange,
-      onYearChange: handlePickerYearDateChange,
-      getIsStartRangeDay,
-      getIsDayInRange,
-      getIsEndRangeDay,
-      onPickerOpen: onCalendarOpen,
-      onPickerClose: onCalendarClose,
-      isClearable,
-      getIsDisabledDay,
-      getIsOutOfRangeDay,
-      emptyPickerStartingMonth,
-      onCalendarOpenFocusedDay,
-      preventCloseOnSelection: true,
-      hasError,
-      pickerFooterMsg,
-      autoFocus,
-      fromDate,
-      toDate,
-      disabled,
-      readOnly,
-      applyAriaDisabled,
-      lastElementRef
-    }
+  const nextInteractionDescriptionId = `${instanceUID}-next-interaction-explanation`;
+  const nextInteractionDescription = calendarChangeIsFrom ? "Select a start date. If later than the current end date, the dates will swap automatically." : "Select an end date. If earlier than the current start date, the dates will swap automatically.";
+  const handleCalendarDayA11ySlotsArgs = import_react.default.useCallback(
+    ({
+      isDayInRangeImproper,
+      isDisabled,
+      isOutOfRange,
+      metaDay
+    }) => {
+      const rangeProps = isDayInRangeImproper ? {
+        "aria-pressed": true,
+        "aria-label": `${(0, import_ds_form_date_time_picker.getAriaDayFromDateString)(metaDay.dayAsString)}, range from ${(0, import_ds_form_date_time_picker.getAriaDayFromDateString)(fromDate)} to ${(0, import_ds_form_date_time_picker.getAriaDayFromDateString)(toDate)} selected.`
+      } : {};
+      const isActivatable = !isDisabled && !isOutOfRange;
+      return { ...rangeProps, ...isActivatable && { "aria-describedby": nextInteractionDescriptionId } };
+    },
+    [fromDate, toDate, nextInteractionDescriptionId]
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        id: nextInteractionDescriptionId,
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          borderWidth: 0
+        },
+        children: nextInteractionDescription
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_form_date_time_picker.DSControlledDateTimePicker,
+      {
+        dsControlleddatetimepickerCalendarDay: handleCalendarDayA11ySlotsArgs,
+        type: isControllerOnly ? import_ds_form_date_time_picker.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY : import_ds_form_date_time_picker.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER,
+        date: latestChangedDate,
+        onDateChange: handlePickerDateChange,
+        onMonthChange: handlePickerMonthDateChange,
+        onDayChange: handlePickerDayDateChange,
+        onYearChange: handlePickerYearDateChange,
+        getIsStartRangeDay,
+        getIsDayInRange,
+        getIsEndRangeDay,
+        onPickerOpen: onCalendarOpen,
+        onPickerClose: onCalendarClose,
+        isClearable,
+        getIsDisabledDay,
+        getIsOutOfRangeDay,
+        emptyPickerStartingMonth,
+        onCalendarOpenFocusedDay,
+        preventCloseOnSelection: true,
+        hasError,
+        pickerFooterMsg,
+        autoFocus,
+        fromDate,
+        toDate,
+        disabled,
+        readOnly,
+        applyAriaDisabled,
+        lastElementRef
+      }
+    )
+  ] });
 };
 //# sourceMappingURL=ControlledDateRangeCalendar.js.map

package/dist/cjs/parts/ControlledDateRangeCalendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledDateRangeCalendar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES, DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';\n\nexport const ControlledDateRangeCalendar = (): JSX.Element => {\n  const {\n    props: {\n      emptyPickerStartingMonth,\n      onCalendarOpenFocusedDay,\n      isClearable,\n      getIsDisabledDay,\n      getIsOutOfRangeDay,\n      hasError,\n      autoFocus,\n      pickerFooterMsg,\n      fromDate,\n      toDate,\n      disabled,\n      readOnly,\n      applyAriaDisabled,\n      lastElementRef,\n    },\n    rangePickerLogic: {\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    },\n    isControllerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <DSControlledDateTimePicker\n      type={\n        isControllerOnly\n          ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY\n          : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER\n      }\n      date={latestChangedDate}\n      onDateChange={handlePickerDateChange}\n      onMonthChange={handlePickerMonthDateChange}\n      onDayChange={handlePickerDayDateChange}\n      onYearChange={handlePickerYearDateChange}\n      getIsStartRangeDay={getIsStartRangeDay}\n      getIsDayInRange={getIsDayInRange}\n      getIsEndRangeDay={getIsEndRangeDay}\n      onPickerOpen={onCalendarOpen}\n      onPickerClose={onCalendarClose}\n      isClearable={isClearable}\n      getIsDisabledDay={getIsDisabledDay}\n      getIsOutOfRangeDay={getIsOutOfRangeDay}\n      emptyPickerStartingMonth={emptyPickerStartingMonth}\n      onCalendarOpenFocusedDay={onCalendarOpenFocusedDay}\n      preventCloseOnSelection\n      hasError={hasError}\n      pickerFooterMsg={pickerFooterMsg}\n      autoFocus={autoFocus}\n      fromDate={fromDate}\n      toDate={toDate}\n      disabled={disabled}\n      readOnly={readOnly}\n      applyAriaDisabled={applyAriaDisabled}\n      lastElementRef={lastElementRef}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCnB;AAtCJ,mBAAkC;AAClC,sCAA8E;AAC9E,0CAAiD;AAE1C,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,oEAAgC;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,mBACI,kEAAkC,KAAK,kBACvC,kEAAkC,KAAK;AAAA,MAE7C,MAAM;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,MACf,aAAa;AAAA,MACb,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,yBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport {\n  CONTROLLED_DATE_TIME_PICKER_TYPES,\n  DSControlledDateTimePicker,\n  type DSControlledDateTimePickerT,\n  getAriaDayFromDateString,\n} from '@elliemae/ds-form-date-time-picker';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';\n\nexport const ControlledDateRangeCalendar = (): JSX.Element => {\n  const {\n    instanceUID,\n    props: {\n      emptyPickerStartingMonth,\n      onCalendarOpenFocusedDay,\n      isClearable,\n      getIsDisabledDay,\n      getIsOutOfRangeDay,\n      hasError,\n      autoFocus,\n      pickerFooterMsg,\n      fromDate,\n      toDate,\n      disabled,\n      readOnly,\n      applyAriaDisabled,\n      lastElementRef,\n    },\n    rangePickerLogic: {\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    },\n    isControllerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  const nextInteractionDescriptionId = `${instanceUID}-next-interaction-explanation`;\n  const nextInteractionDescription = calendarChangeIsFrom\n    ? 'Select a start date. If later than the current end date, the dates will swap automatically.'\n    : 'Select an end date. If earlier than the current start date, the dates will swap automatically.';\n\n  const handleCalendarDayA11ySlotsArgs = React.useCallback(\n    ({\n      isDayInRangeImproper,\n      isDisabled,\n      isOutOfRange,\n      metaDay,\n    }: DSControlledDateTimePickerT.CalendarDaySlotArguments) => {\n      const rangeProps = isDayInRangeImproper\n        ? {\n            'aria-pressed': true as const,\n            'aria-label': `${getAriaDayFromDateString(metaDay.dayAsString)}, range from ${getAriaDayFromDateString(fromDate)} to ${getAriaDayFromDateString(toDate)} selected.`,\n          }\n        : {};\n      const isActivatable = !isDisabled && !isOutOfRange;\n      return { ...rangeProps, ...(isActivatable && { 'aria-describedby': nextInteractionDescriptionId }) };\n    },\n    [fromDate, toDate, nextInteractionDescriptionId],\n  );\n\n  return (\n    <>\n      <span\n        id={nextInteractionDescriptionId}\n        style={{\n          position: 'absolute',\n          width: 1,\n          height: 1,\n          padding: 0,\n          margin: -1,\n          overflow: 'hidden',\n          clip: 'rect(0,0,0,0)',\n          whiteSpace: 'nowrap',\n          borderWidth: 0,\n        }}\n      >\n        {nextInteractionDescription}\n      </span>\n      <DSControlledDateTimePicker\n        dsControlleddatetimepickerCalendarDay={handleCalendarDayA11ySlotsArgs}\n        type={\n          isControllerOnly\n            ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY\n            : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER\n        }\n        date={latestChangedDate}\n        onDateChange={handlePickerDateChange}\n        onMonthChange={handlePickerMonthDateChange}\n        onDayChange={handlePickerDayDateChange}\n        onYearChange={handlePickerYearDateChange}\n        getIsStartRangeDay={getIsStartRangeDay}\n        getIsDayInRange={getIsDayInRange}\n        getIsEndRangeDay={getIsEndRangeDay}\n        onPickerOpen={onCalendarOpen}\n        onPickerClose={onCalendarClose}\n        isClearable={isClearable}\n        getIsDisabledDay={getIsDisabledDay}\n        getIsOutOfRangeDay={getIsOutOfRangeDay}\n        emptyPickerStartingMonth={emptyPickerStartingMonth}\n        onCalendarOpenFocusedDay={onCalendarOpenFocusedDay}\n        preventCloseOnSelection\n        hasError={hasError}\n        pickerFooterMsg={pickerFooterMsg}\n        autoFocus={autoFocus}\n        fromDate={fromDate}\n        toDate={toDate}\n        disabled={disabled}\n        readOnly={readOnly}\n        applyAriaDisabled={applyAriaDisabled}\n        lastElementRef={lastElementRef}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEnB;AArEJ,mBAAkC;AAClC,sCAKO;AACP,0CAAiD;AAE1C,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,oEAAgC;AAE/C,QAAM,+BAA+B,GAAG,WAAW;AACnD,QAAM,6BAA6B,uBAC/B,gGACA;AAEJ,QAAM,iCAAiC,aAAAA,QAAM;AAAA,IAC3C,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAA4D;AAC1D,YAAM,aAAa,uBACf;AAAA,QACE,gBAAgB;AAAA,QAChB,cAAc,OAAG,0DAAyB,QAAQ,WAAW,CAAC,oBAAgB,0DAAyB,QAAQ,CAAC,WAAO,0DAAyB,MAAM,CAAC;AAAA,MACzJ,IACA,CAAC;AACL,YAAM,gBAAgB,CAAC,cAAc,CAAC;AACtC,aAAO,EAAE,GAAG,YAAY,GAAI,iBAAiB,EAAE,oBAAoB,6BAA6B,EAAG;AAAA,IACrG;AAAA,IACA,CAAC,UAAU,QAAQ,4BAA4B;AAAA,EACjD;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,MAAM;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,uCAAuC;AAAA,QACvC,MACE,mBACI,kEAAkC,KAAK,kBACvC,kEAAkC,KAAK;AAAA,QAE7C,MAAM;AAAA,QACN,cAAc;AAAA,QACd,eAAe;AAAA,QACf,aAAa;AAAA,QACb,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,yBAAuB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/config/useControlledDateRangePicker.js

@@ -8,7 +8,7 @@ import { useRangePickerLogic } from "./useRangePickerLogic.js";
 import { CONTROLLED_DATE_RANGE_PICKER_TYPES } from "../ControlledDateRangePickerTypes.js";
 const useControlledDateRangePicker = (props) => {
   useValidateProps(props);
-  const instanceUID = useMemo(() => uid(6), []);
+  const instanceUID = useMemo(() => `ds-date-range-picker-uid-${uid(6)}`, []);
   const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);
   const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });
   const xstyledAttrs = useGetXstyledProps(propsWithDefaults);

package/dist/esm/config/useControlledDateRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useControlledDateRangePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useRangePickerLogic } from './useRangePickerLogic.js';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\ninterface RangePickerLogicT {\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handleToDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n\n  handlePickerDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handlePickerMonthDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerDayDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerYearDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\n\nexport interface ControlledDateRangePickerContextT {\n  props: DSControlledDateRangePickerT.InternalProps;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const useControlledDateRangePicker = (\n  props: DSControlledDateRangePickerT.Props,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => uid(6), []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,WAAW;AACpB,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,8CAA8C;AACvD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,0CAA0C;AAmC5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,mBAAiB,KAAK;AACtB,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,QAAM,oBAAoB,uCAAuC,KAAK;AAEtE,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,cAAc,uBAAuB,iBAAiB;AAE5D,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,WACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,mBAAmB,SAAS,mCAAmC;AACrE,QAAM,eAAe,SAAS,mCAAmC;AAEjE,QAAM,mBAAmB,oBAAoB,iBAAiB;AAE9D,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,kBAAkB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useRangePickerLogic } from './useRangePickerLogic.js';\nimport { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\ninterface RangePickerLogicT {\n  calendarChangeIsFrom: boolean;\n  latestChangedDate: string;\n\n  onCalendarOpen: () => void;\n  onCalendarClose: () => void;\n\n  handleFromDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handleToDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n\n  handlePickerDateChange: DSControlledDateRangePickerT.RangeOnDateChange;\n  handlePickerMonthDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerDayDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n  handlePickerYearDateChange: DSControlledDateRangePickerT.AppOnInputChange;\n\n  getIsStartRangeDay: (day: string) => boolean;\n  getIsDayInRange: (day: string) => boolean;\n  getIsEndRangeDay: (day: string) => boolean;\n}\n\nexport interface ControlledDateRangePickerContextT {\n  props: DSControlledDateRangePickerT.InternalProps;\n  instanceUID: string;\n  rangePickerLogic: RangePickerLogicT;\n  withInputs: boolean;\n  withIcon: boolean;\n  isControllerOnly: boolean;\n  isPickerOnly: boolean;\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const useControlledDateRangePicker = (\n  props: DSControlledDateRangePickerT.Props,\n): ControlledDateRangePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n  const instanceUID = useMemo(() => `ds-date-range-picker-uid-${uid(6)}`, []);\n  const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);\n\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { type } = propsWithDefaults;\n\n  const withInputs =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;\n  const withIcon =\n    type === CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n  const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;\n  const isPickerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;\n\n  const rangePickerLogic = useRangePickerLogic(propsWithDefaults);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    }),\n    [\n      propsWithDefaults,\n      xstyledAttrs,\n      globalAttrs,\n      instanceUID,\n      rangePickerLogic,\n      withInputs,\n      withIcon,\n      isControllerOnly,\n      isPickerOnly,\n      ownerPropsConfig,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,WAAW;AACpB,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,8CAA8C;AACvD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,0CAA0C;AAoC5C,MAAM,+BAA+B,CAC1C,UACsC;AAEtC,mBAAiB,KAAK;AACtB,QAAM,cAAc,QAAQ,MAAM,4BAA4B,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,oBAAoB,uCAAuC,KAAK;AAEtE,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,cAAc,uBAAuB,iBAAiB;AAE5D,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,WACJ,SAAS,mCAAmC,QAAQ,SAAS,mCAAmC;AAClG,QAAM,mBAAmB,SAAS,mCAAmC;AACrE,QAAM,eAAe,SAAS,mCAAmC;AAEjE,QAAM,mBAAmB,oBAAoB,iBAAiB;AAE9D,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,kBAAkB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/config/useRangePickerLogic.js

@@ -128,6 +128,7 @@ const useRangePickerLogic = ({
   );
   return useMemo(
     () => ({
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,
@@ -142,6 +143,7 @@ const useRangePickerLogic = ({
       getIsEndRangeDay
     }),
     [
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,

package/dist/esm/config/useRangePickerLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useRangePickerLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport { getDayFromDateString } from '@elliemae/ds-form-date-time-picker';\nimport type { ControlledDateRangePickerContextT } from './useControlledDateRangePicker.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\nexport const useRangePickerLogic = ({\n  fromDate,\n  onFromDateChange,\n  onMonthFromChange,\n  onDayFromChange,\n  onYearFromChange,\n  toDate,\n  onMonthToChange,\n  onDayToChange,\n  onYearToChange,\n  onToDateChange,\n}: DSControlledDateRangePickerT.InternalProps): ControlledDateRangePickerContextT['rangePickerLogic'] => {\n  // the implementation is based on controlled-date-time-picker that is not meant to \"understand\"\n  // the \"from\" - \"to\" logic on click, we are \"overloading\" the \"from\" - \"to\" logic here\n  // we track wheter we are going to set the \"from\" OR \"to\" controlled date based on this toggle\n  const [calendarChangeIsFrom, setCalendarChangeIsFrom] = useState(true);\n  const [latestChangedDate, setLatestChangedDate] = useState(fromDate);\n  useEffect(() => {\n    setLatestChangedDate(fromDate);\n  }, [fromDate]);\n  useEffect(() => {\n    setLatestChangedDate(toDate);\n  }, [toDate]);\n\n  const getChangedDayStringValues = useCallback(\n    (changedDay: string) => {\n      // based on wheter we are handling a \"from\"/\"to\" change, we calculate some values\n      const dateFromString = calendarChangeIsFrom ? changedDay : fromDate;\n      const dateFrom = getDayFromDateString(dateFromString);\n      const dateToString = calendarChangeIsFrom ? toDate : changedDay;\n      const dateTo = getDayFromDateString(dateToString);\n      // we force the \"from\" to ALWAYS be before the \"to\" date\n      const isToBeforeFrom = !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n      const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;\n      const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;\n      const newDateToString = isToBeforeFrom ? dateFromString : dateToString;\n      const forcingToDatePick = isToBeforeFrom ? calendarChangeIsFrom : false;\n\n      // next change should be based on\n      //   the force pick next interactions\n      //   toggle between from/to  if we didn't force any pick\n      let nextToggleStateIsFrom = !calendarChangeIsFrom;\n      if (forcingFromDatePick) nextToggleStateIsFrom = false;\n      if (forcingToDatePick) nextToggleStateIsFrom = true;\n\n      return {\n        newDateFromString,\n        forcingFromDatePick,\n        newDateToString,\n        forcingToDatePick,\n        isToBeforeFrom,\n        nextToggleStateIsFrom,\n        currentClickCountAsFrom: !nextToggleStateIsFrom,\n      };\n    },\n    [fromDate, calendarChangeIsFrom, toDate],\n  );\n  const handlePickerMonthDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerMonthDateChange'] =\n    useCallback(\n      (newMonth, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onMonthFromChange(newMonth, e, metaInfo);\n        else onMonthToChange(newMonth, e, metaInfo);\n      },\n      [getChangedDayStringValues, onMonthFromChange, onMonthToChange],\n    );\n  const handlePickerDayDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDayDateChange'] =\n    useCallback(\n      (newDay, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onDayFromChange(newDay, e, metaInfo);\n        else onDayToChange(newDay, e, metaInfo);\n      },\n      [getChangedDayStringValues, onDayFromChange, onDayToChange],\n    );\n  const handlePickerYearDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerYearDateChange'] =\n    useCallback(\n      (newYear, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onYearFromChange(newYear, e, metaInfo);\n        else onYearToChange(newYear, e, metaInfo);\n      },\n      [getChangedDayStringValues, onYearFromChange, onYearToChange],\n    );\n\n  // every time the calendar opens/closes, we assume first click is \"from\"\n  const onCalendarOpen: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarOpen'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const onCalendarClose: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarClose'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const handlePickerDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDateChange'] =\n    useCallback(\n      (changedDay, metaInfo) => {\n        const { newDateFromString, newDateToString, nextToggleStateIsFrom, isToBeforeFrom } =\n          getChangedDayStringValues(changedDay);\n\n        // every \"change\" on the picker range we calculate it as a new \"onChange\" for both values\n        // and we pass over the correct \"new\" from/to value\n        onFromDateChange(newDateFromString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n        onToDateChange(newDateToString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n\n        // and we notify what the next change type should be\n        setCalendarChangeIsFrom(nextToggleStateIsFrom);\n      },\n      [getChangedDayStringValues, onFromDateChange, onToDateChange],\n    );\n\n  const getIsStartRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsStartRangeDay'] = useCallback(\n    (dayString) => dayString === fromDate,\n    [fromDate],\n  );\n  const getIsDayInRange: ControlledDateRangePickerContextT['rangePickerLogic']['getIsDayInRange'] = useCallback(\n    (dayString) => {\n      const dayFrom = getDayFromDateString(fromDate);\n      const dayTo = getDayFromDateString(toDate);\n      if (!dayFrom || !dayTo || !dayString) return false;\n      const newDayTime = getDayFromDateString(dayString)?.getTime();\n      return !!newDayTime && newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();\n    },\n    [fromDate, toDate],\n  );\n  const getIsEndRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsEndRangeDay'] = useCallback(\n    (dayString) => dayString === toDate,\n    [toDate],\n  );\n\n  const getIsToBeforeFrom = useCallback((fromString: string, toString: string) => {\n    const dateFrom = getDayFromDateString(fromString);\n    const dateTo = getDayFromDateString(toString);\n    return !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n  }, []);\n  const handleFromDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleFromDateChange'] =\n    useCallback(\n      (newVal, metaInfo) => {\n        const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);\n        onFromDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'from', isIncorrectOrder });\n      },\n      [getIsToBeforeFrom, onFromDateChange, toDate],\n    );\n  const handleToDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleToDateChange'] = useCallback(\n    (newVal, metaInfo) => {\n      const isIncorrectOrder = getIsToBeforeFrom(fromDate, newVal);\n      onToDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'to', isIncorrectOrder });\n    },\n    [fromDate, getIsToBeforeFrom, onToDateChange],\n  );\n\n  return useMemo(\n    () => ({\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    }),\n    [\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    ],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport { getDayFromDateString } from '@elliemae/ds-form-date-time-picker';\nimport type { ControlledDateRangePickerContextT } from './useControlledDateRangePicker.js';\nimport type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';\n\nexport const useRangePickerLogic = ({\n  fromDate,\n  onFromDateChange,\n  onMonthFromChange,\n  onDayFromChange,\n  onYearFromChange,\n  toDate,\n  onMonthToChange,\n  onDayToChange,\n  onYearToChange,\n  onToDateChange,\n}: DSControlledDateRangePickerT.InternalProps): ControlledDateRangePickerContextT['rangePickerLogic'] => {\n  // the implementation is based on controlled-date-time-picker that is not meant to \"understand\"\n  // the \"from\" - \"to\" logic on click, we are \"overloading\" the \"from\" - \"to\" logic here\n  // we track wheter we are going to set the \"from\" OR \"to\" controlled date based on this toggle\n  const [calendarChangeIsFrom, setCalendarChangeIsFrom] = useState(true);\n  const [latestChangedDate, setLatestChangedDate] = useState(fromDate);\n  useEffect(() => {\n    setLatestChangedDate(fromDate);\n  }, [fromDate]);\n  useEffect(() => {\n    setLatestChangedDate(toDate);\n  }, [toDate]);\n\n  const getChangedDayStringValues = useCallback(\n    (changedDay: string) => {\n      // based on wheter we are handling a \"from\"/\"to\" change, we calculate some values\n      const dateFromString = calendarChangeIsFrom ? changedDay : fromDate;\n      const dateFrom = getDayFromDateString(dateFromString);\n      const dateToString = calendarChangeIsFrom ? toDate : changedDay;\n      const dateTo = getDayFromDateString(dateToString);\n      // we force the \"from\" to ALWAYS be before the \"to\" date\n      const isToBeforeFrom = !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n      const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;\n      const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;\n      const newDateToString = isToBeforeFrom ? dateFromString : dateToString;\n      const forcingToDatePick = isToBeforeFrom ? calendarChangeIsFrom : false;\n\n      // next change should be based on\n      //   the force pick next interactions\n      //   toggle between from/to  if we didn't force any pick\n      let nextToggleStateIsFrom = !calendarChangeIsFrom;\n      if (forcingFromDatePick) nextToggleStateIsFrom = false;\n      if (forcingToDatePick) nextToggleStateIsFrom = true;\n\n      return {\n        newDateFromString,\n        forcingFromDatePick,\n        newDateToString,\n        forcingToDatePick,\n        isToBeforeFrom,\n        nextToggleStateIsFrom,\n        currentClickCountAsFrom: !nextToggleStateIsFrom,\n      };\n    },\n    [fromDate, calendarChangeIsFrom, toDate],\n  );\n  const handlePickerMonthDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerMonthDateChange'] =\n    useCallback(\n      (newMonth, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onMonthFromChange(newMonth, e, metaInfo);\n        else onMonthToChange(newMonth, e, metaInfo);\n      },\n      [getChangedDayStringValues, onMonthFromChange, onMonthToChange],\n    );\n  const handlePickerDayDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDayDateChange'] =\n    useCallback(\n      (newDay, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onDayFromChange(newDay, e, metaInfo);\n        else onDayToChange(newDay, e, metaInfo);\n      },\n      [getChangedDayStringValues, onDayFromChange, onDayToChange],\n    );\n  const handlePickerYearDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerYearDateChange'] =\n    useCallback(\n      (newYear, e, metaInfo) => {\n        const { newDateString = '' } = metaInfo;\n        const { currentClickCountAsFrom } = getChangedDayStringValues(newDateString);\n        if (currentClickCountAsFrom) onYearFromChange(newYear, e, metaInfo);\n        else onYearToChange(newYear, e, metaInfo);\n      },\n      [getChangedDayStringValues, onYearFromChange, onYearToChange],\n    );\n\n  // every time the calendar opens/closes, we assume first click is \"from\"\n  const onCalendarOpen: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarOpen'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const onCalendarClose: ControlledDateRangePickerContextT['rangePickerLogic']['onCalendarClose'] = useCallback(() => {\n    setCalendarChangeIsFrom(true);\n  }, []);\n  const handlePickerDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handlePickerDateChange'] =\n    useCallback(\n      (changedDay, metaInfo) => {\n        const { newDateFromString, newDateToString, nextToggleStateIsFrom, isToBeforeFrom } =\n          getChangedDayStringValues(changedDay);\n\n        // every \"change\" on the picker range we calculate it as a new \"onChange\" for both values\n        // and we pass over the correct \"new\" from/to value\n        onFromDateChange(newDateFromString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n        onToDateChange(newDateToString, { ...metaInfo, automaticSwitchedDates: isToBeforeFrom });\n\n        // and we notify what the next change type should be\n        setCalendarChangeIsFrom(nextToggleStateIsFrom);\n      },\n      [getChangedDayStringValues, onFromDateChange, onToDateChange],\n    );\n\n  const getIsStartRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsStartRangeDay'] = useCallback(\n    (dayString) => dayString === fromDate,\n    [fromDate],\n  );\n  const getIsDayInRange: ControlledDateRangePickerContextT['rangePickerLogic']['getIsDayInRange'] = useCallback(\n    (dayString) => {\n      const dayFrom = getDayFromDateString(fromDate);\n      const dayTo = getDayFromDateString(toDate);\n      if (!dayFrom || !dayTo || !dayString) return false;\n      const newDayTime = getDayFromDateString(dayString)?.getTime();\n      return !!newDayTime && newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();\n    },\n    [fromDate, toDate],\n  );\n  const getIsEndRangeDay: ControlledDateRangePickerContextT['rangePickerLogic']['getIsEndRangeDay'] = useCallback(\n    (dayString) => dayString === toDate,\n    [toDate],\n  );\n\n  const getIsToBeforeFrom = useCallback((fromString: string, toString: string) => {\n    const dateFrom = getDayFromDateString(fromString);\n    const dateTo = getDayFromDateString(toString);\n    return !!dateTo && !!dateFrom && dateTo?.getTime() < dateFrom?.getTime();\n  }, []);\n  const handleFromDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleFromDateChange'] =\n    useCallback(\n      (newVal, metaInfo) => {\n        const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);\n        onFromDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'from', isIncorrectOrder });\n      },\n      [getIsToBeforeFrom, onFromDateChange, toDate],\n    );\n  const handleToDateChange: ControlledDateRangePickerContextT['rangePickerLogic']['handleToDateChange'] = useCallback(\n    (newVal, metaInfo) => {\n      const isIncorrectOrder = getIsToBeforeFrom(fromDate, newVal);\n      onToDateChange(newVal, { ...metaInfo, rangeDateChangeType: 'to', isIncorrectOrder });\n    },\n    [fromDate, getIsToBeforeFrom, onToDateChange],\n  );\n\n  return useMemo(\n    () => ({\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    }),\n    [\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handleFromDateChange,\n      handleToDateChange,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    ],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/ControlledDateRangeCalendar.js

@@ -1,10 +1,15 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { CONTROLLED_DATE_TIME_PICKER_TYPES, DSControlledDateTimePicker } from "@elliemae/ds-form-date-time-picker";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useContext } from "react";
+import {
+  CONTROLLED_DATE_TIME_PICKER_TYPES,
+  DSControlledDateTimePicker,
+  getAriaDayFromDateString
+} from "@elliemae/ds-form-date-time-picker";
 import { ControlledDateRangePickerContext } from "../ControlledDateRangePickerCTX.js";
 const ControlledDateRangeCalendar = () => {
   const {
+    instanceUID,
     props: {
       emptyPickerStartingMonth,
       onCalendarOpenFocusedDay,
@@ -22,6 +27,7 @@ const ControlledDateRangeCalendar = () => {
       lastElementRef
     },
     rangePickerLogic: {
+      calendarChangeIsFrom,
       latestChangedDate,
       onCalendarOpen,
       onCalendarClose,
@@ -35,37 +41,76 @@ const ControlledDateRangeCalendar = () => {
     },
     isControllerOnly
   } = useContext(ControlledDateRangePickerContext);
-  return /* @__PURE__ */ jsx(
-    DSControlledDateTimePicker,
-    {
-      type: isControllerOnly ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER,
-      date: latestChangedDate,
-      onDateChange: handlePickerDateChange,
-      onMonthChange: handlePickerMonthDateChange,
-      onDayChange: handlePickerDayDateChange,
-      onYearChange: handlePickerYearDateChange,
-      getIsStartRangeDay,
-      getIsDayInRange,
-      getIsEndRangeDay,
-      onPickerOpen: onCalendarOpen,
-      onPickerClose: onCalendarClose,
-      isClearable,
-      getIsDisabledDay,
-      getIsOutOfRangeDay,
-      emptyPickerStartingMonth,
-      onCalendarOpenFocusedDay,
-      preventCloseOnSelection: true,
-      hasError,
-      pickerFooterMsg,
-      autoFocus,
-      fromDate,
-      toDate,
-      disabled,
-      readOnly,
-      applyAriaDisabled,
-      lastElementRef
-    }
+  const nextInteractionDescriptionId = `${instanceUID}-next-interaction-explanation`;
+  const nextInteractionDescription = calendarChangeIsFrom ? "Select a start date. If later than the current end date, the dates will swap automatically." : "Select an end date. If earlier than the current start date, the dates will swap automatically.";
+  const handleCalendarDayA11ySlotsArgs = React2.useCallback(
+    ({
+      isDayInRangeImproper,
+      isDisabled,
+      isOutOfRange,
+      metaDay
+    }) => {
+      const rangeProps = isDayInRangeImproper ? {
+        "aria-pressed": true,
+        "aria-label": `${getAriaDayFromDateString(metaDay.dayAsString)}, range from ${getAriaDayFromDateString(fromDate)} to ${getAriaDayFromDateString(toDate)} selected.`
+      } : {};
+      const isActivatable = !isDisabled && !isOutOfRange;
+      return { ...rangeProps, ...isActivatable && { "aria-describedby": nextInteractionDescriptionId } };
+    },
+    [fromDate, toDate, nextInteractionDescriptionId]
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: nextInteractionDescriptionId,
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          borderWidth: 0
+        },
+        children: nextInteractionDescription
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DSControlledDateTimePicker,
+      {
+        dsControlleddatetimepickerCalendarDay: handleCalendarDayA11ySlotsArgs,
+        type: isControllerOnly ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER,
+        date: latestChangedDate,
+        onDateChange: handlePickerDateChange,
+        onMonthChange: handlePickerMonthDateChange,
+        onDayChange: handlePickerDayDateChange,
+        onYearChange: handlePickerYearDateChange,
+        getIsStartRangeDay,
+        getIsDayInRange,
+        getIsEndRangeDay,
+        onPickerOpen: onCalendarOpen,
+        onPickerClose: onCalendarClose,
+        isClearable,
+        getIsDisabledDay,
+        getIsOutOfRangeDay,
+        emptyPickerStartingMonth,
+        onCalendarOpenFocusedDay,
+        preventCloseOnSelection: true,
+        hasError,
+        pickerFooterMsg,
+        autoFocus,
+        fromDate,
+        toDate,
+        disabled,
+        readOnly,
+        applyAriaDisabled,
+        lastElementRef
+      }
+    )
+  ] });
 };
 export {
   ControlledDateRangeCalendar

package/dist/esm/parts/ControlledDateRangeCalendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateRangeCalendar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES, DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';\n\nexport const ControlledDateRangeCalendar = (): JSX.Element => {\n  const {\n    props: {\n      emptyPickerStartingMonth,\n      onCalendarOpenFocusedDay,\n      isClearable,\n      getIsDisabledDay,\n      getIsOutOfRangeDay,\n      hasError,\n      autoFocus,\n      pickerFooterMsg,\n      fromDate,\n      toDate,\n      disabled,\n      readOnly,\n      applyAriaDisabled,\n      lastElementRef,\n    },\n    rangePickerLogic: {\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    },\n    isControllerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  return (\n    <DSControlledDateTimePicker\n      type={\n        isControllerOnly\n          ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY\n          : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER\n      }\n      date={latestChangedDate}\n      onDateChange={handlePickerDateChange}\n      onMonthChange={handlePickerMonthDateChange}\n      onDayChange={handlePickerDayDateChange}\n      onYearChange={handlePickerYearDateChange}\n      getIsStartRangeDay={getIsStartRangeDay}\n      getIsDayInRange={getIsDayInRange}\n      getIsEndRangeDay={getIsEndRangeDay}\n      onPickerOpen={onCalendarOpen}\n      onPickerClose={onCalendarClose}\n      isClearable={isClearable}\n      getIsDisabledDay={getIsDisabledDay}\n      getIsOutOfRangeDay={getIsOutOfRangeDay}\n      emptyPickerStartingMonth={emptyPickerStartingMonth}\n      onCalendarOpenFocusedDay={onCalendarOpenFocusedDay}\n      preventCloseOnSelection\n      hasError={hasError}\n      pickerFooterMsg={pickerFooterMsg}\n      autoFocus={autoFocus}\n      fromDate={fromDate}\n      toDate={toDate}\n      disabled={disabled}\n      readOnly={readOnly}\n      applyAriaDisabled={applyAriaDisabled}\n      lastElementRef={lastElementRef}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCnB;AAtCJ,SAAgB,kBAAkB;AAClC,SAAS,mCAAmC,kCAAkC;AAC9E,SAAS,wCAAwC;AAE1C,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gCAAgC;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,mBACI,kCAAkC,KAAK,kBACvC,kCAAkC,KAAK;AAAA,MAE7C,MAAM;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,MACf,aAAa;AAAA,MACb,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,yBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport {\n  CONTROLLED_DATE_TIME_PICKER_TYPES,\n  DSControlledDateTimePicker,\n  type DSControlledDateTimePickerT,\n  getAriaDayFromDateString,\n} from '@elliemae/ds-form-date-time-picker';\nimport { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';\n\nexport const ControlledDateRangeCalendar = (): JSX.Element => {\n  const {\n    instanceUID,\n    props: {\n      emptyPickerStartingMonth,\n      onCalendarOpenFocusedDay,\n      isClearable,\n      getIsDisabledDay,\n      getIsOutOfRangeDay,\n      hasError,\n      autoFocus,\n      pickerFooterMsg,\n      fromDate,\n      toDate,\n      disabled,\n      readOnly,\n      applyAriaDisabled,\n      lastElementRef,\n    },\n    rangePickerLogic: {\n      calendarChangeIsFrom,\n      latestChangedDate,\n      onCalendarOpen,\n      onCalendarClose,\n      handlePickerDateChange,\n      handlePickerMonthDateChange,\n      handlePickerDayDateChange,\n      handlePickerYearDateChange,\n      getIsStartRangeDay,\n      getIsDayInRange,\n      getIsEndRangeDay,\n    },\n    isControllerOnly,\n  } = useContext(ControlledDateRangePickerContext);\n\n  const nextInteractionDescriptionId = `${instanceUID}-next-interaction-explanation`;\n  const nextInteractionDescription = calendarChangeIsFrom\n    ? 'Select a start date. If later than the current end date, the dates will swap automatically.'\n    : 'Select an end date. If earlier than the current start date, the dates will swap automatically.';\n\n  const handleCalendarDayA11ySlotsArgs = React.useCallback(\n    ({\n      isDayInRangeImproper,\n      isDisabled,\n      isOutOfRange,\n      metaDay,\n    }: DSControlledDateTimePickerT.CalendarDaySlotArguments) => {\n      const rangeProps = isDayInRangeImproper\n        ? {\n            'aria-pressed': true as const,\n            'aria-label': `${getAriaDayFromDateString(metaDay.dayAsString)}, range from ${getAriaDayFromDateString(fromDate)} to ${getAriaDayFromDateString(toDate)} selected.`,\n          }\n        : {};\n      const isActivatable = !isDisabled && !isOutOfRange;\n      return { ...rangeProps, ...(isActivatable && { 'aria-describedby': nextInteractionDescriptionId }) };\n    },\n    [fromDate, toDate, nextInteractionDescriptionId],\n  );\n\n  return (\n    <>\n      <span\n        id={nextInteractionDescriptionId}\n        style={{\n          position: 'absolute',\n          width: 1,\n          height: 1,\n          padding: 0,\n          margin: -1,\n          overflow: 'hidden',\n          clip: 'rect(0,0,0,0)',\n          whiteSpace: 'nowrap',\n          borderWidth: 0,\n        }}\n      >\n        {nextInteractionDescription}\n      </span>\n      <DSControlledDateTimePicker\n        dsControlleddatetimepickerCalendarDay={handleCalendarDayA11ySlotsArgs}\n        type={\n          isControllerOnly\n            ? CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY\n            : CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER\n        }\n        date={latestChangedDate}\n        onDateChange={handlePickerDateChange}\n        onMonthChange={handlePickerMonthDateChange}\n        onDayChange={handlePickerDayDateChange}\n        onYearChange={handlePickerYearDateChange}\n        getIsStartRangeDay={getIsStartRangeDay}\n        getIsDayInRange={getIsDayInRange}\n        getIsEndRangeDay={getIsEndRangeDay}\n        onPickerOpen={onCalendarOpen}\n        onPickerClose={onCalendarClose}\n        isClearable={isClearable}\n        getIsDisabledDay={getIsDisabledDay}\n        getIsOutOfRangeDay={getIsOutOfRangeDay}\n        emptyPickerStartingMonth={emptyPickerStartingMonth}\n        onCalendarOpenFocusedDay={onCalendarOpenFocusedDay}\n        preventCloseOnSelection\n        hasError={hasError}\n        pickerFooterMsg={pickerFooterMsg}\n        autoFocus={autoFocus}\n        fromDate={fromDate}\n        toDate={toDate}\n        disabled={disabled}\n        readOnly={readOnly}\n        applyAriaDisabled={applyAriaDisabled}\n        lastElementRef={lastElementRef}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqEnB,mBACE,KADF;AArEJ,OAAOA,UAAS,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,wCAAwC;AAE1C,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gCAAgC;AAE/C,QAAM,+BAA+B,GAAG,WAAW;AACnD,QAAM,6BAA6B,uBAC/B,gGACA;AAEJ,QAAM,iCAAiCA,OAAM;AAAA,IAC3C,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAA4D;AAC1D,YAAM,aAAa,uBACf;AAAA,QACE,gBAAgB;AAAA,QAChB,cAAc,GAAG,yBAAyB,QAAQ,WAAW,CAAC,gBAAgB,yBAAyB,QAAQ,CAAC,OAAO,yBAAyB,MAAM,CAAC;AAAA,MACzJ,IACA,CAAC;AACL,YAAM,gBAAgB,CAAC,cAAc,CAAC;AACtC,aAAO,EAAE,GAAG,YAAY,GAAI,iBAAiB,EAAE,oBAAoB,6BAA6B,EAAG;AAAA,IACrG;AAAA,IACA,CAAC,UAAU,QAAQ,4BAA4B;AAAA,EACjD;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,MAAM;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,uCAAuC;AAAA,QACvC,MACE,mBACI,kCAAkC,KAAK,kBACvC,kCAAkC,KAAK;AAAA,QAE7C,MAAM;AAAA,QACN,cAAc;AAAA,QACd,eAAe;AAAA,QACf,aAAa;AAAA,QACb,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,yBAAuB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/types/config/useControlledDateRangePicker.d.ts

@@ -1,5 +1,6 @@
 import type { DSControlledDateRangePickerT } from '../react-desc-prop-types.js';
 interface RangePickerLogicT {
+    calendarChangeIsFrom: boolean;
     latestChangedDate: string;
     onCalendarOpen: () => void;
     onCalendarClose: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-date-range-picker",
-  "version": "3.60.0-next.57",
+  "version": "3.60.0-next.58",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Date Range Picker",
   "files": [
@@ -38,18 +38,18 @@
   "dependencies": {
     "styled-components": "~5.3.9",
     "uid": "^2.0.2",
-    "@elliemae/ds-form-date-time-picker": "3.60.0-next.57",
-    "@elliemae/ds-typescript-helpers": "3.60.0-next.57",
-    "@elliemae/ds-props-helpers": "3.60.0-next.57",
-    "@elliemae/ds-system": "3.60.0-next.57"
+    "@elliemae/ds-form-date-time-picker": "3.60.0-next.58",
+    "@elliemae/ds-system": "3.60.0-next.58",
+    "@elliemae/ds-props-helpers": "3.60.0-next.58",
+    "@elliemae/ds-typescript-helpers": "3.60.0-next.58"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-test-utils": "3.60.0-next.57",
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.57"
+    "@elliemae/ds-monorepo-devops": "3.60.0-next.58",
+    "@elliemae/ds-test-utils": "3.60.0-next.58"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",