@elliemae/ds-form-date-time-picker 3.4.3-rc.1 → 3.4.3

package/dist/esm/parts/ClearButton/ClearButton.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { CloseMedium } from "@elliemae/ds-icons";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { BUTTON_SIZES } from "@elliemae/ds-button";
@@ -13,7 +14,7 @@ const ClearButton = () => {
     shouldDisplay: withClearBtn
   };
   const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);
-  return /* @__PURE__ */ React2.createElement(StyledClearButton, {
+  return /* @__PURE__ */ jsx(StyledClearButton, {
     "aria-label": "clear selected date",
     buttonType: "icon",
     size: BUTTON_SIZES.M,
@@ -26,10 +27,11 @@ const ClearButton = () => {
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown,
     type: "button",
-    ...styledsAttrs
-  }, /* @__PURE__ */ React2.createElement(CloseMedium, {
-    color: DSIconColors.PRIMARY
-  }));
+    ...styledsAttrs,
+    children: /* @__PURE__ */ jsx(CloseMedium, {
+      color: DSIconColors.PRIMARY
+    })
+  });
 };
 export {
   ClearButton

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/ClearButton/ClearButton.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,iBAAiB,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,uBAAuB,WAAW,+BAA+B;AAElG,SACE,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,eAAa,mCAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAK;AAAA,IACJ,GAAG;AAAA,KAEJ,qCAAC;AAAA,IAAY,OAAO,aAAa;AAAA,GAAS,CAC5C;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,aAAa,IAAI,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,mBAAmB,IAAI,WAAW,+BAA+B;AAElG,SACE,oBAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,eAAa,mCAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,8BAAC;AAAA,MAAY,OAAO,aAAa;AAAA,KAAS;AAAA,GAC5C;AAEJ;",
   "names": []
 }

package/dist/esm/parts/ClearButton/useClearButton.js

@@ -15,10 +15,13 @@ const useClearButton = () => {
     trackFocusYearInput,
     trackFocusPicker
   } = useContext(ControlledDateTimePickerContext);
-  const onClearClick = useCallback((e) => {
-    handleClearAll(e);
-    trackFocusFirstSegment();
-  }, [handleClearAll, trackFocusFirstSegment]);
+  const onClearClick = useCallback(
+    (e) => {
+      handleClearAll(e);
+      trackFocusFirstSegment();
+    },
+    [handleClearAll, trackFocusFirstSegment]
+  );
   const onHomeKeyDown = useCallback(() => {
     trackFocusFirstSegment();
   }, [trackFocusFirstSegment]);
@@ -26,34 +29,40 @@ const useClearButton = () => {
     if (withAnyPicker)
       trackFocusPicker();
   }, [withAnyPicker, trackFocusPicker]);
-  const onClearButtonKeyDown = useCallback((e) => {
-    const { key } = e;
-    const preventDefaultKeys = ["Home", "End"];
-    const stopPropagationKeys = ["Home", "End"];
-    if (preventDefaultKeys.includes(key))
-      e.preventDefault();
-    if (stopPropagationKeys.includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDown();
-    if (key === "End")
-      onEndKeyDown();
-    if (key === "Backspace" && withAnyInputs) {
-      if (isWithTimeInputs)
-        trackFocusMeridiemInput();
-      else if (isWithDateInputs)
-        trackFocusYearInput();
-    }
-  }, [
-    isWithDateInputs,
-    isWithTimeInputs,
-    onEndKeyDown,
-    onHomeKeyDown,
-    trackFocusMeridiemInput,
-    trackFocusYearInput,
-    withAnyInputs
-  ]);
-  return useMemo(() => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
+  const onClearButtonKeyDown = useCallback(
+    (e) => {
+      const { key } = e;
+      const preventDefaultKeys = ["Home", "End"];
+      const stopPropagationKeys = ["Home", "End"];
+      if (preventDefaultKeys.includes(key))
+        e.preventDefault();
+      if (stopPropagationKeys.includes(key))
+        e.stopPropagation();
+      if (key === "Home")
+        onHomeKeyDown();
+      if (key === "End")
+        onEndKeyDown();
+      if (key === "Backspace" && withAnyInputs) {
+        if (isWithTimeInputs)
+          trackFocusMeridiemInput();
+        else if (isWithDateInputs)
+          trackFocusYearInput();
+      }
+    },
+    [
+      isWithDateInputs,
+      isWithTimeInputs,
+      onEndKeyDown,
+      onHomeKeyDown,
+      trackFocusMeridiemInput,
+      trackFocusYearInput,
+      withAnyInputs
+    ]
+  );
+  return useMemo(
+    () => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }),
+    [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]
+  );
 };
 export {
   useClearButton

package/dist/esm/parts/ClearButton/useClearButton.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/ClearButton/useClearButton.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\ninterface UseOnClearClickR {\n  onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick;\n  onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement>;\n  clearButtonRef: React.MutableRefObject<HTMLButtonElement | null>;\n  withAnyPicker: boolean;\n  withClearBtn: boolean;\n}\nexport const useClearButton = (): UseOnClearClickR => {\n  const {\n    handleClearAll,\n    clearButtonRef,\n    withAnyPicker,\n    withClearBtn,\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick = useCallback(\n    (e) => {\n      handleClearAll(e);\n      trackFocusFirstSegment();\n    },\n    [handleClearAll, trackFocusFirstSegment],\n  );\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const onEndKeyDown = useCallback(() => {\n    if (withAnyPicker) trackFocusPicker();\n  }, [withAnyPicker, trackFocusPicker]);\n\n  const onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      const preventDefaultKeys = ['Home', 'End'];\n      const stopPropagationKeys = ['Home', 'End'];\n      if (preventDefaultKeys.includes(key)) e.preventDefault();\n      if (stopPropagationKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onEndKeyDown,\n      onHomeKeyDown,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  return useMemo(\n    () => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }),\n    [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn],\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AAUO,MAAM,iBAAiB,MAAwB;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAE9C,QAAM,eAAkE,YACtE,CAAC,MAAM;AACL,mBAAe,CAAC;AAChB,2BAAuB;AAAA,EACzB,GACA,CAAC,gBAAgB,sBAAsB,CACzC;AACA,QAAM,gBAAgB,YAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI;AAAe,uBAAiB;AAAA,EACtC,GAAG,CAAC,eAAe,gBAAgB,CAAC;AAEpC,QAAM,uBAA0F,YAC9F,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,UAAM,qBAAqB,CAAC,QAAQ,KAAK;AACzC,UAAM,sBAAsB,CAAC,QAAQ,KAAK;AAC1C,QAAI,mBAAmB,SAAS,GAAG;AAAG,QAAE,eAAe;AACvD,QAAI,oBAAoB,SAAS,GAAG;AAAG,QAAE,gBAAgB;AACzD,QAAI,QAAQ;AAAQ,oBAAc;AAClC,QAAI,QAAQ;AAAO,mBAAa;AAChC,QAAI,QAAQ,eAAe,eAAe;AACxC,UAAI;AAAkB,gCAAwB;AAAA,eACrC;AAAkB,4BAAoB;AAAA,IACjD;AAAA,EACF,GACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO,QACL,MAAO,GAAE,cAAc,sBAAsB,gBAAgB,eAAe,aAAa,IACzF,CAAC,cAAc,sBAAsB,gBAAgB,eAAe,YAAY,CAClF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,SAAS,kBAAkB;AACjD,SAAS,uCAAuC;AAUzC,MAAM,iBAAiB,MAAwB;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,eAAkE;AAAA,IACtE,CAAC,MAAM;AACL,qBAAe,CAAC;AAChB,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,gBAAgB,sBAAsB;AAAA,EACzC;AACA,QAAM,gBAAgB,YAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI;AAAe,uBAAiB;AAAA,EACtC,GAAG,CAAC,eAAe,gBAAgB,CAAC;AAEpC,QAAM,uBAA0F;AAAA,IAC9F,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,qBAAqB,CAAC,QAAQ,KAAK;AACzC,YAAM,sBAAsB,CAAC,QAAQ,KAAK;AAC1C,UAAI,mBAAmB,SAAS,GAAG;AAAG,UAAE,eAAe;AACvD,UAAI,oBAAoB,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzD,UAAI,QAAQ;AAAQ,sBAAc;AAClC,UAAI,QAAQ;AAAO,qBAAa;AAChC,UAAI,QAAQ,eAAe,eAAe;AACxC,YAAI;AAAkB,kCAAwB;AAAA,iBACrC;AAAkB,8BAAoB;AAAA,MACjD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,cAAc,sBAAsB,gBAAgB,eAAe,aAAa;AAAA,IACzF,CAAC,cAAc,sBAAsB,gBAAgB,eAAe,YAAY;AAAA,EAClF;AACF;",
   "names": []
 }

package/dist/esm/parts/ControlledDateTimePickerContent.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { ControlledDateTimePickerContext } from "../ControlledDateTimePickerCTX";
 import { StyledInputsWrapperGrid } from "./Styleds";
@@ -43,20 +44,31 @@ const ControlledDateTimePickerContent = () => {
     rightControlCols.push("28px");
   if (withAnyPicker)
     rightControlCols.push("auto");
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledInputsWrapperGrid, {
-    cols: mainCols,
-    gutter: "xxs",
-    pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? "2px" : void 0,
-    onKeyDown: onGlobalKeyDown,
-    disabled,
-    onBlur: trackFocusResetter,
-    "data-testid": ControlledDateTimePickerDatatestid.CONTAINER,
-    ...styledsAttrs,
-    ...globalAttrs,
-    ...xstyledAttrs
-  }, hideDate ? null : /* @__PURE__ */ React2.createElement(DateInputs, null), hideTime ? null : /* @__PURE__ */ React2.createElement(TimeInputs, null), withAnyRightController ? /* @__PURE__ */ React2.createElement(Grid, {
-    cols: rightControlCols
-  }, shouldPreserveClearableSpace ? /* @__PURE__ */ React2.createElement(ClearButton, null) : null, withAnyPicker ? /* @__PURE__ */ React2.createElement(PickersIcons, null) : null) : null));
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(StyledInputsWrapperGrid, {
+      cols: mainCols,
+      gutter: "xxs",
+      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? "2px" : void 0,
+      onKeyDown: onGlobalKeyDown,
+      disabled,
+      onBlur: trackFocusResetter,
+      "data-testid": ControlledDateTimePickerDatatestid.CONTAINER,
+      ...styledsAttrs,
+      ...globalAttrs,
+      ...xstyledAttrs,
+      children: [
+        hideDate ? null : /* @__PURE__ */ jsx(DateInputs, {}),
+        hideTime ? null : /* @__PURE__ */ jsx(TimeInputs, {}),
+        withAnyRightController ? /* @__PURE__ */ jsxs(Grid, {
+          cols: rightControlCols,
+          children: [
+            shouldPreserveClearableSpace ? /* @__PURE__ */ jsx(ClearButton, {}) : null,
+            withAnyPicker ? /* @__PURE__ */ jsx(PickersIcons, {}) : null
+          ]
+        }) : null
+      ]
+    })
+  });
 };
 export {
   ControlledDateTimePickerContent

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateTimePickerContent.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled },\n    hideDate,\n    hideDatePicker,\n    hideTime,\n    hideTimePicker,\n    hideDateTimePicker,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    globalAttrs,\n    xstyledAttrs,\n    onGlobalKeyDown,\n    trackFocusResetter,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const styledsAttrs = {\n    justPicker: hideDate && hideTime,\n    withAnyPicker,\n    hasError,\n    isControllerOnly,\n  };\n\n  const mainCols = [];\n  if (!hideDate) mainCols.push('auto');\n  if (!hideTime) mainCols.push('auto');\n  if (withAnyRightController) mainCols.push('auto');\n\n  const rightControlCols = [];\n  if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n  if (withAnyPicker) rightControlCols.push('auto');\n\n  return (\n    <>\n      {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n      {/* eslint-disable-next-line max-len */}\n      {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <StyledInputsWrapperGrid\n        cols={mainCols}\n        gutter=\"xxs\"\n        pr={hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined}\n        onKeyDown={onGlobalKeyDown}\n        disabled={disabled}\n        onBlur={trackFocusResetter}\n        data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n        {...styledsAttrs}\n        {...globalAttrs}\n        {...xstyledAttrs}\n      >\n        {hideDate ? null : <DateInputs />}\n        {hideTime ? null : <TimeInputs />}\n        {withAnyRightController ? (\n          <Grid cols={rightControlCols}>\n            {shouldPreserveClearableSpace ? <ClearButton /> : null}\n            {withAnyPicker ? <PickersIcons /> : null}\n          </Grid>\n        ) : null}\n      </StyledInputsWrapperGrid>\n    </>\n  );\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE,4DAKE,qCAAC;AAAA,IACC,MAAM;AAAA,IACN,QAAO;AAAA,IACP,IAAI,kBAAkB,kBAAkB,qBAAqB,QAAQ;AAAA,IACrE,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR,eAAa,mCAAmC;AAAA,IAC/C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,WAAW,OAAO,qCAAC,gBAAW,GAC9B,WAAW,OAAO,qCAAC,gBAAW,GAC9B,yBACC,qCAAC;AAAA,IAAK,MAAM;AAAA,KACT,+BAA+B,qCAAC,iBAAY,IAAK,MACjD,gBAAgB,qCAAC,kBAAa,IAAK,IACtC,IACE,IACN,CACF;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0CAA0C;AAE5C,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,SACE;AAAA,IAKE,+BAAC;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,kBAAkB,kBAAkB,qBAAqB,QAAQ;AAAA,MACrE,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,mCAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,WAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,yBACC,qBAAC;AAAA,UAAK,MAAM;AAAA,UACT;AAAA,2CAA+B,oBAAC,eAAY,IAAK;AAAA,YACjD,gBAAgB,oBAAC,gBAAa,IAAK;AAAA;AAAA,SACtC,IACE;AAAA;AAAA,KACN;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DateInputs/DDInput.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
 import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
 import { Styled2DigitsInput } from "../Styleds";
@@ -9,43 +10,48 @@ const isInvalidDay = (day) => {
   const numberOnly = regExpNumbers.test(day);
   return day.length > 2 || day === "00" || !numberOnly || Number.parseInt(day, 10) > 31;
 };
-const DDInput = React2.memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  disabled,
-  contextRef,
-  placeholder,
-  ariaCurrentValueForInputs,
-  isFocused
-}) => {
-  const validateOnChange = useCallback((e) => {
-    if (isInvalidDay(e?.target?.value)) {
-      e.preventDefault();
-      return;
-    }
-    onChange(e);
-  }, [onChange]);
-  return /* @__PURE__ */ React2.createElement(Styled2DigitsInput, {
-    onChange: validateOnChange,
+const DDInput = React2.memo(
+  ({
+    onChange,
     onBlur,
     onFocus,
     onKeyDown,
     value,
-    ref: (DomElem) => {
-      contextRef.current = DomElem;
-      if (isFocused)
-        DomElem?.focus?.();
-    },
-    placeholder,
-    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
-    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
     disabled,
-    "aria-disabled": disabled
-  });
-});
+    contextRef,
+    placeholder,
+    ariaCurrentValueForInputs,
+    isFocused
+  }) => {
+    const validateOnChange = useCallback(
+      (e) => {
+        if (isInvalidDay(e?.target?.value)) {
+          e.preventDefault();
+          return;
+        }
+        onChange(e);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsx(Styled2DigitsInput, {
+      onChange: validateOnChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      value,
+      ref: (DomElem) => {
+        contextRef.current = DomElem;
+        if (isFocused)
+          DomElem?.focus?.();
+      },
+      placeholder,
+      "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
+      "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+      disabled,
+      "aria-disabled": disabled
+    });
+  }
+);
 export {
   DDInput
 };

package/dist/esm/parts/DateInputs/DDInput.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DDInput.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { Styled2DigitsInput } from '../Styleds';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n  if (day === '') return false;\n  const numberOnly = regExpNumbers.test(day);\n  return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  isFocused: boolean;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    contextRef,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAcO,MAAM,UAAU,OAAM,KAC3B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiC;AACjC,QAAM,mBAAmB,YACvB,CAAC,MAA2C;AAC1C,QAAI,aAAa,GAAG,QAAQ,KAAK,GAAG;AAClC,QAAE,eAAe;AACjB;AAAA,IACF;AACA,aAAS,CAAC;AAAA,EACZ,GACA,CAAC,QAAQ,CACX;AACA,SACE,qCAAC;AAAA,IACC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,CAAC,YAA8B;AAClC,MAAC,WAAwD,UAAU;AACnE,UAAI;AAAW,iBAAS,QAAQ;AAAA,IAClC;AAAA,IACA;AAAA,IACA,cAAY,oBAAoB;AAAA,IAChC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA,GACjB;AAEJ,CACF;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,0BAA0B;AAGnC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAcO,MAAM,UAAUA,OAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,aAAa,GAAG,QAAQ,KAAK,GAAG;AAClC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE,oBAAC;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,CAAC,YAA8B;AAClC,QAAC,WAAwD,UAAU;AACnE,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA;AAAA,MACA,cAAY,oBAAoB;AAAA,MAChC,eAAa,mCAAmC,YAAY;AAAA,MAC5D;AAAA,MACA,iBAAe;AAAA,KACjB;AAAA,EAEJ;AACF;",
+  "names": ["React"]
 }

package/dist/esm/parts/DateInputs/DateInputs.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
 import { MMInput } from "./MMInput";
@@ -14,6 +15,7 @@ const DateInputs = () => {
     day,
     year,
     autoFocusMonthInput,
+    innerRefMonthInput,
     onMonthChange,
     onDayChange,
     onYearChange,
@@ -36,53 +38,69 @@ const DateInputs = () => {
     latestInteractionRegion,
     currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
-  return /* @__PURE__ */ React2.createElement(Grid, {
+  return /* @__PURE__ */ jsxs(Grid, {
     cols: [
       fixedValues.smallInputWidth,
       fixedValues.separatorWidth,
       fixedValues.smallInputWidth,
       fixedValues.separatorWidth,
       fixedValues.largeInputWidth
+    ],
+    children: [
+      /* @__PURE__ */ jsx(StyledFocusWithIn, {
+        children: /* @__PURE__ */ jsx(MMInput, {
+          onChange: onMonthChange,
+          onBlur: onMonthBlur,
+          onFocus: onMonthFocus,
+          onKeyDown: onMonthKeyDown,
+          value: month,
+          contextRef: monthInputRef,
+          innerRef: innerRefMonthInput,
+          autoFocusMonthInput,
+          placeholder: "MM",
+          ariaCurrentValueForInputs,
+          disabled,
+          isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input"
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledSeparator, {
+        alignItems: "center",
+        children: "/"
+      }),
+      /* @__PURE__ */ jsx(StyledFocusWithIn, {
+        children: /* @__PURE__ */ jsx(DDInput, {
+          onChange: onDayChange,
+          onBlur: onDayBlur,
+          onFocus: onDayFocus,
+          onKeyDown: onDayKeyDown,
+          value: day,
+          contextRef: dayInputRef,
+          placeholder: "DD",
+          ariaCurrentValueForInputs,
+          disabled,
+          isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input"
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledSeparator, {
+        alignItems: "center",
+        children: "/"
+      }),
+      /* @__PURE__ */ jsx(StyledFocusWithIn, {
+        children: /* @__PURE__ */ jsx(YYYYInput, {
+          onChange: onYearChange,
+          onBlur: onYearBlur,
+          onFocus: onYearFocus,
+          onKeyDown: onYearKeyDown,
+          value: year,
+          contextRef: yearInputRef,
+          placeholder: "YYYY",
+          ariaCurrentValueForInputs,
+          disabled,
+          isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "year-input"
+        })
+      })
     ]
-  }, /* @__PURE__ */ React2.createElement(StyledFocusWithIn, null, /* @__PURE__ */ React2.createElement(MMInput, {
-    onChange: onMonthChange,
-    onBlur: onMonthBlur,
-    onFocus: onMonthFocus,
-    onKeyDown: onMonthKeyDown,
-    value: month,
-    contextRef: monthInputRef,
-    autoFocusMonthInput,
-    placeholder: "MM",
-    ariaCurrentValueForInputs,
-    disabled,
-    isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input"
-  })), /* @__PURE__ */ React2.createElement(StyledSeparator, {
-    alignItems: "center"
-  }, "/"), /* @__PURE__ */ React2.createElement(StyledFocusWithIn, null, /* @__PURE__ */ React2.createElement(DDInput, {
-    onChange: onDayChange,
-    onBlur: onDayBlur,
-    onFocus: onDayFocus,
-    onKeyDown: onDayKeyDown,
-    value: day,
-    contextRef: dayInputRef,
-    placeholder: "DD",
-    ariaCurrentValueForInputs,
-    disabled,
-    isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input"
-  })), /* @__PURE__ */ React2.createElement(StyledSeparator, {
-    alignItems: "center"
-  }, "/"), /* @__PURE__ */ React2.createElement(StyledFocusWithIn, null, /* @__PURE__ */ React2.createElement(YYYYInput, {
-    onChange: onYearChange,
-    onBlur: onYearBlur,
-    onFocus: onYearFocus,
-    onKeyDown: onYearKeyDown,
-    value: year,
-    contextRef: yearInputRef,
-    placeholder: "YYYY",
-    ariaCurrentValueForInputs,
-    disabled,
-    isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "year-input"
-  })));
+  });
 };
 export {
   DateInputs

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DateInputs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { MMInput } from './MMInput';\nimport { DDInput } from './DDInput';\nimport { YYYYInput } from './YYYYInput';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds';\nimport { useDateInputs } from './useDateInputs';\nimport { fixedValues } from '../config';\n\nexport const DateInputs = (): JSX.Element => {\n  const {\n    month,\n    day,\n    year,\n    autoFocusMonthInput,\n    onMonthChange,\n    onDayChange,\n    onYearChange,\n    onMonthBlur,\n    onDayBlur,\n    onYearBlur,\n    onMonthFocus,\n    onDayFocus,\n    onYearFocus,\n    onMonthKeyDown,\n    onDayKeyDown,\n    onYearKeyDown,\n    disabled,\n  } = useDateInputs();\n  // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n  const {\n    monthInputRef,\n    dayInputRef,\n    yearInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.largeInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <MMInput\n          onChange={onMonthChange}\n          onBlur={onMonthBlur}\n          onFocus={onMonthFocus}\n          onKeyDown={onMonthKeyDown}\n          value={month}\n          contextRef={monthInputRef}\n          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <DDInput\n          onChange={onDayChange}\n          onBlur={onDayBlur}\n          onFocus={onDayFocus}\n          onKeyDown={onDayKeyDown}\n          value={day}\n          contextRef={dayInputRef}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <YYYYInput\n          onChange={onYearChange}\n          onBlur={onYearBlur}\n          onFocus={onYearFocus}\n          onKeyDown={onYearKeyDown}\n          value={year}\n          contextRef={yearInputRef}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,cAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAE9C,SACE,qCAAC;AAAA,IACC,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,KAEA,qCAAC,yBACC,qCAAC;AAAA,IACC,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,GACjF,CACF,GACA,qCAAC;AAAA,IAAgB,YAAW;AAAA,KAAS,GAAC,GACtC,qCAAC,yBACC,qCAAC;AAAA,IACC,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,GACjF,CACF,GACA,qCAAC;AAAA,IAAgB,YAAW;AAAA,KAAS,GAAC,GACtC,qCAAC,yBACC,qCAAC;AAAA,IACC,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,GACjF,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { MMInput } from './MMInput';\nimport { DDInput } from './DDInput';\nimport { YYYYInput } from './YYYYInput';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds';\nimport { useDateInputs } from './useDateInputs';\nimport { fixedValues } from '../config';\n\nexport const DateInputs = (): JSX.Element => {\n  const {\n    month,\n    day,\n    year,\n    autoFocusMonthInput,\n    innerRefMonthInput,\n    onMonthChange,\n    onDayChange,\n    onYearChange,\n    onMonthBlur,\n    onDayBlur,\n    onYearBlur,\n    onMonthFocus,\n    onDayFocus,\n    onYearFocus,\n    onMonthKeyDown,\n    onDayKeyDown,\n    onYearKeyDown,\n    disabled,\n  } = useDateInputs();\n  // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n  const {\n    monthInputRef,\n    dayInputRef,\n    yearInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.largeInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <MMInput\n          onChange={onMonthChange}\n          onBlur={onMonthBlur}\n          onFocus={onMonthFocus}\n          onKeyDown={onMonthKeyDown}\n          value={month}\n          contextRef={monthInputRef}\n          innerRef={innerRefMonthInput}\n          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <DDInput\n          onChange={onDayChange}\n          onBlur={onDayBlur}\n          onFocus={onDayFocus}\n          onKeyDown={onDayKeyDown}\n          value={day}\n          contextRef={dayInputRef}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <YYYYInput\n          onChange={onYearChange}\n          onBlur={onYearBlur}\n          onFocus={onYearFocus}\n          onKeyDown={onYearKeyDown}\n          value={year}\n          contextRef={yearInputRef}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AAErB,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAErB,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,SACE,qBAAC;AAAA,IACC,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IAEA;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UACC,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,UAAU;AAAA,UACV;AAAA,UACA,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QAAgB,YAAW;AAAA,QAAS;AAAA,OAAC;AAAA,MACtC,oBAAC;AAAA,QACC,8BAAC;AAAA,UACC,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QAAgB,YAAW;AAAA,QAAS;AAAA,OAAC;AAAA,MACtC,oBAAC;AAAA,QACC,8BAAC;AAAA,UACC,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DateInputs/MMInput.js

@@ -1,5 +1,7 @@
 import * as React from "react";
-import React2, { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useCallback, useMemo } from "react";
+import { setMultipleRefs } from "@elliemae/ds-utilities";
 import { Styled2DigitsInput } from "../Styleds";
 import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
 const regExpNumbers = /^[0-9]+$/;
@@ -9,45 +11,61 @@ const isInvalidMonth = (month) => {
   const numberOnly = regExpNumbers.test(month);
   return month.length > 2 || month === "00" || !numberOnly || Number.parseInt(month, 10) > 12;
 };
-const MMInput = React2.memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  disabled,
-  placeholder,
-  contextRef,
-  autoFocusMonthInput,
-  ariaCurrentValueForInputs,
-  isFocused
-}) => {
-  const validateOnChange = useCallback((e) => {
-    if (isInvalidMonth(e?.target?.value)) {
-      e.preventDefault();
-      return;
-    }
-    onChange(e);
-  }, [onChange]);
-  return /* @__PURE__ */ React2.createElement(Styled2DigitsInput, {
-    autoFocus: autoFocusMonthInput,
-    onChange: validateOnChange,
+const MMInput = React2.memo(
+  ({
+    onChange,
     onBlur,
     onFocus,
     onKeyDown,
     value,
-    ref: (DomElem) => {
-      contextRef.current = DomElem;
-      if (isFocused)
-        DomElem?.focus?.();
-    },
-    placeholder,
-    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
-    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
     disabled,
-    "aria-disabled": disabled
-  });
-});
+    placeholder,
+    contextRef,
+    innerRef,
+    autoFocusMonthInput,
+    ariaCurrentValueForInputs,
+    isFocused
+  }) => {
+    const validateOnChange = useCallback(
+      (e) => {
+        if (isInvalidMonth(e?.target?.value)) {
+          e.preventDefault();
+          return;
+        }
+        onChange(e);
+      },
+      [onChange]
+    );
+    const handleRef = useCallback(
+      (DomElem) => {
+        contextRef.current = DomElem;
+        if (isFocused)
+          DomElem?.focus?.();
+      },
+      [contextRef, isFocused]
+    );
+    const currentRef = useMemo(() => {
+      if (innerRef) {
+        return setMultipleRefs([handleRef, innerRef]);
+      }
+      return handleRef;
+    }, [handleRef, innerRef]);
+    return /* @__PURE__ */ jsx(Styled2DigitsInput, {
+      autoFocus: autoFocusMonthInput,
+      onChange: validateOnChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      value,
+      ref: currentRef,
+      placeholder,
+      "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
+      "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+      disabled,
+      "aria-disabled": disabled
+    });
+  }
+);
 export {
   MMInput
 };

package/dist/esm/parts/DateInputs/MMInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/MMInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n  if (month === '') return false;\n  const numberOnly = regExpNumbers.test(month);\n  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAcO,MAAM,UAAU,OAAM,KAC3B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiC;AACjC,QAAM,mBAAmB,YACvB,CAAC,MAA2C;AAC1C,QAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,QAAE,eAAe;AACjB;AAAA,IACF;AACA,aAAS,CAAC;AAAA,EACZ,GACA,CAAC,QAAQ,CACX;AACA,SACE,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,CAAC,YAA8B;AAClC,MAAC,WAAwD,UAAU;AACnE,UAAI;AAAW,iBAAS,QAAQ;AAAA,IAClC;AAAA,IACA;AAAA,IACA,cAAY,sBAAsB;AAAA,IAClC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA,GACjB;AAEJ,CACF;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { setMultipleRefs } from '@elliemae/ds-utilities';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n  if (month === '') return false;\n  const numberOnly = regExpNumbers.test(month);\n  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  innerRef: React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    innerRef,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const handleRef = useCallback(\n      (DomElem: HTMLInputElement) => {\n        (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n        if (isFocused) DomElem?.focus?.();\n      },\n      [contextRef, isFocused],\n    );\n\n    const currentRef = useMemo(() => {\n      if (innerRef) {\n        return setMultipleRefs([handleRef, innerRef]);\n      }\n      return handleRef;\n    }, [handleRef, innerRef]);\n\n    return (\n      <Styled2DigitsInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={currentRef}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;AAGnD,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAeO,MAAM,UAAUA,OAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,YAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,aAAa,QAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,gBAAgB,CAAC,WAAW,QAAQ,CAAC;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,WACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,cAAY,sBAAsB;AAAA,MAClC,eAAa,mCAAmC,YAAY;AAAA,MAC5D;AAAA,MACA,iBAAe;AAAA,KACjB;AAAA,EAEJ;AACF;",
+  "names": ["React"]
 }