@elliemae/ds-controlled-form 3.0.0-next.2 → 3.0.0-next.6

package/dist/esm/date-time-picker/parts/DateInputs/DDInput.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import React2, { useCallback } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
+import { Styled2DigitsInput } from "../Styleds";
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidDay = (day) => {
+  if (day === "")
+    return false;
+  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
+}) => {
+  const validateOnChange = useCallback((e) => {
+    if (isInvalidDay(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ React2.createElement(Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+export {
+  DDInput
+};
+//# sourceMappingURL=DDInput.js.map

package/dist/esm/date-time-picker/parts/DateInputs/DDInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/date-time-picker/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 { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day) => {\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: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  value: string;\n  disabled: boolean;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.RefObject<HTMLInputElement>;\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  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\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={contextRef}\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,QAAQ;AAC5B,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,MAAM;AAAA;AAc9E,MAAM,UAAU,OAAM,KAC3B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiC;AACjC,QAAM,mBAAmB,YACvB,CAAC,MAAM;AACL,QAAI,aAAa,GAAG,QAAQ,QAAQ;AAClC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,qCAAC,oBAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,oBAAoB;AAAA,IAChC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/DateInputs/DateInputs.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import { MMInput } from "./MMInput";
+import { DDInput } from "./DDInput";
+import { YYYYInput } from "./YYYYInput";
+import { StyledFocusWithIn, StyledSeparator } from "../Styleds";
+import { useDateInputs } from "./useDateInputs";
+import { fixedValues } from "../config";
+const DateInputs = () => {
+  const {
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    onMonthChange,
+    onDayChange,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthFocus,
+    onDayFocus,
+    onYearFocus,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown,
+    disabled
+  } = useDateInputs();
+  const { monthInputRef, dayInputRef, yearInputRef, ariaCurrentValueForInputs } = useContext(ControlledDateTimePickerContext);
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    cols: [
+      fixedValues.smallInputWidth,
+      fixedValues.separatorWidth,
+      fixedValues.smallInputWidth,
+      fixedValues.separatorWidth,
+      fixedValues.largeInputWidth
+    ]
+  }, /* @__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
+  })), /* @__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
+  })), /* @__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
+  })));
+};
+export {
+  DateInputs
+};
+//# sourceMappingURL=DateInputs.js.map

package/dist/esm/date-time-picker/parts/DateInputs/DateInputs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/date-time-picker/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 { monthInputRef, dayInputRef, yearInputRef, ariaCurrentValueForInputs } = useContext(\n    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        />\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        />\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        />\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;AAEJ,QAAM,EAAE,eAAe,aAAa,cAAc,8BAA8B,WAC9E;AAEF,SACE,qCAAC,MAAD;AAAA,IACE,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA;AAAA,KAGd,qCAAC,mBAAD,MACE,qCAAC,SAAD;AAAA,IACE,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,OAGJ,qCAAC,iBAAD;AAAA,IAAiB,YAAW;AAAA,KAAS,MACrC,qCAAC,mBAAD,MACE,qCAAC,SAAD;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,OAGJ,qCAAC,iBAAD;AAAA,IAAiB,YAAW;AAAA,KAAS,MACrC,qCAAC,mBAAD,MACE,qCAAC,WAAD;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/DateInputs/MMInput.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import React2, { useCallback } from "react";
+import { Styled2DigitsInput } from "../Styleds";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidMonth = (month) => {
+  if (month === "")
+    return false;
+  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
+}) => {
+  const validateOnChange = useCallback((e) => {
+    if (isInvalidMonth(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ React2.createElement(Styled2DigitsInput, {
+    autoFocus: autoFocusMonthInput,
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+export {
+  MMInput
+};
+//# sourceMappingURL=MMInput.js.map

package/dist/esm/date-time-picker/parts/DateInputs/MMInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/date-time-picker/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 { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month) => {\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: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  contextRef: React.RefObject<HTMLInputElement>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\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  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\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={contextRef}\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,UAAU;AAChC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,MAAM;AAAA;AAcpF,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,MAAM;AACL,QAAI,eAAe,GAAG,QAAQ,QAAQ;AACpC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,qCAAC,oBAAD;AAAA,IACE,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,sBAAsB;AAAA,IAClC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/DateInputs/YYYYInput.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import React2, { useCallback } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
+import { StyledMin4DigitsInput } from "../Styleds";
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidYear = (year) => {
+  if (year === "")
+    return false;
+  const numberOnly = regExpNumbers.test(year);
+  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
+};
+const YYYYInput = React2.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  disabled,
+  placeholder,
+  contextRef,
+  ariaCurrentValueForInputs
+}) => {
+  const validateOnChange = useCallback((e) => {
+    if (isInvalidYear(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ React2.createElement(StyledMin4DigitsInput, {
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+export {
+  YYYYInput
+};
+//# sourceMappingURL=YYYYInput.js.map

package/dist/esm/date-time-picker/parts/DateInputs/YYYYInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/date-time-picker/parts/DateInputs/YYYYInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { StyledMin4DigitsInput } from '../Styleds';\nimport type { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  value: string;\n  disabled: boolean;\n  contextRef: React.RefObject<HTMLInputElement>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    ariaCurrentValueForInputs,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\n        if (isInvalidYear(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMin4DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={contextRef}\n        placeholder={placeholder}\n        aria-label={`year input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAS;AAC9B,MAAI,SAAS;AAAI,WAAO;AACxB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,MAAM;AAAA;AAchE,MAAM,YAAY,OAAM,KAC7B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACmC;AACnC,QAAM,mBAAmB,YACvB,CAAC,MAAM;AACL,QAAI,cAAc,GAAG,QAAQ,QAAQ;AACnC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,qCAAC,uBAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,qBAAqB;AAAA,IACjC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/DateInputs/useDateInputs.js

@@ -0,0 +1,343 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { useCallback, useMemo, useContext } from "react";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import {
+  getFormattedDateString,
+  prependStringWithPlaceHolders,
+  fillStringWithPlaceHolders
+} from "../../utils/stringHelpers";
+import { getValidationDateStringMetaInfo } from "../../utils/dateHelpers";
+import { defaultMetaInfo, homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownSpaceKeys } from "../../utils/constants";
+const useDateInputs = () => {
+  const {
+    props: {
+      onMonthChange: appOnMonthChange,
+      onDayChange: appOnDayChange,
+      onYearChange: appOnYearChange,
+      getIsDisabledDay,
+      getIsOutOfRangeDay,
+      disabled
+    },
+    month,
+    day,
+    year,
+    hideTime,
+    monthInputRef,
+    dayInputRef,
+    yearInputRef,
+    hourInputRef,
+    meridiemInputRef,
+    clearButtonRef,
+    pickerButtonRef,
+    handleChangeComposedDateString,
+    setLatestInteractionRegion,
+    withClearBtn,
+    withAnyPicker,
+    withAnyRightController,
+    autoFocusMonthInput,
+    lastSegmentRef
+  } = useContext(ControlledDateTimePickerContext);
+  const onHomeKeyDown = useCallback(() => {
+    monthInputRef?.current?.focus?.();
+  }, [monthInputRef]);
+  const onEndKeyDown = useCallback(() => {
+    if (withAnyPicker)
+      pickerButtonRef?.current?.focus?.();
+    else if (withClearBtn)
+      clearButtonRef?.current?.focus?.();
+    else if (!hideTime)
+      meridiemInputRef?.current?.focus?.();
+    else
+      yearInputRef?.current?.focus?.();
+  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, hideTime, meridiemInputRef, yearInputRef]);
+  const setLatestInteractionRegionDateInputs = useCallback(() => {
+    setLatestInteractionRegion("date-inputs");
+  }, [setLatestInteractionRegion]);
+  const handleChangeMonth = useCallback((newMonth, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+    const finalMetaInfo = __spreadProps(__spreadValues(__spreadValues({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {
+      newDateString
+    });
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const onMonthFocus = useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onMonthChange = useCallback((e) => {
+    let newMonth = e?.target?.value;
+    if (Number.parseInt(newMonth, 10) > 1)
+      newMonth = prependStringWithPlaceHolders(newMonth, 2);
+    handleChangeMonth(newMonth, e);
+    if (newMonth.length === 2)
+      dayInputRef?.current?.focus?.();
+  }, [dayInputRef, handleChangeMonth]);
+  const onMonthKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
+    const monthStringConvertedToInteger = Number.parseInt(month, 10);
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
+      let newMonth;
+      if (key === "ArrowUp")
+        newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;
+      else
+        newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
+      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
+      handleChangeMonth(newMonth, e);
+    }
+    if (!Number.isNaN(monthStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+      const newMonth = prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
+      handleChangeMonth(newMonth, e);
+      if (newMonth.length === 2)
+        dayInputRef?.current?.focus?.();
+    }
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
+  }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
+  const onMonthBlur = useCallback((e) => {
+    const newMonth = e?.target?.value;
+    if (newMonth === "0")
+      handleChangeMonth("01", e, { isAutomaticFillTrigger: true });
+    else if (newMonth.length > 0 && newMonth.length < 2)
+      handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
+        isAutomaticFillTrigger: true
+      });
+  }, [handleChangeMonth]);
+  const handleChangeDay = useCallback((newDay, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+    const finalMetaInfo = __spreadProps(__spreadValues(__spreadValues({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {
+      newDateString
+    });
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const onDayFocus = useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onDayChange = useCallback((e) => {
+    let newDay = e?.target?.value;
+    if (Number.parseInt(newDay, 10) > 3)
+      newDay = prependStringWithPlaceHolders(newDay, 2);
+    handleChangeDay(newDay, e);
+    if (newDay.length === 2)
+      yearInputRef?.current?.focus?.();
+  }, [handleChangeDay, yearInputRef]);
+  const onDayKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
+    const dayStringConvertedToInteger = Number.parseInt(day, 10);
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
+      let newDay;
+      if (key === "ArrowUp")
+        newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;
+      else
+        newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
+      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
+      handleChangeDay(newDay, e);
+    }
+    if (!Number.isNaN(dayStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+      const newDay = prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
+      handleChangeDay(newDay, e);
+      if (newDay.length === 2)
+        yearInputRef?.current?.focus?.();
+    }
+    if (key === "Backspace" && day?.length === 0) {
+      monthInputRef?.current?.focus?.();
+    }
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
+  }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
+  const onDayBlur = useCallback((e) => {
+    const newDay = e?.target?.value;
+    if (newDay === "0")
+      handleChangeDay("01", e, { isAutomaticFillTrigger: true });
+    else if (newDay.length > 0 && newDay.length < 2)
+      handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
+        isAutomaticFillTrigger: true
+      });
+  }, [handleChangeDay]);
+  const handleChangeYear = useCallback((newYear, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+    const finalMetaInfo = __spreadProps(__spreadValues(__spreadValues({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {
+      newDateString
+    });
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const onYearFocus = useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onYearChange = useCallback((e) => {
+    const newYear = e?.target?.value;
+    handleChangeYear(newYear, e);
+    if (newYear.length === 4) {
+      if (!hideTime)
+        hourInputRef?.current?.focus?.();
+      else if (withAnyRightController) {
+        if (withClearBtn)
+          clearButtonRef.current?.focus?.();
+        else if (withAnyPicker)
+          pickerButtonRef?.current?.focus?.();
+      }
+    }
+  }, [
+    handleChangeYear,
+    hideTime,
+    hourInputRef,
+    withAnyRightController,
+    withAnyPicker,
+    pickerButtonRef,
+    withClearBtn,
+    clearButtonRef
+  ]);
+  const onYearKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
+    const yearStringConvertedToInteger = Number.parseInt(year, 10);
+    if (homeEndArrowUpDownSpaceKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownSpaceKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
+      let newYear;
+      if (key === "ArrowUp")
+        newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;
+      else
+        newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
+      newYear = prependStringWithPlaceHolders(`${newYear}`, 4);
+      handleChangeYear(newYear, e);
+    }
+    if (!Number.isNaN(yearStringConvertedToInteger) && key === " ") {
+      const newYear = prependStringWithPlaceHolders(`${yearStringConvertedToInteger}`, 4);
+      handleChangeYear(newYear, e);
+      if (newYear.length === 4) {
+        if (!hideTime)
+          hourInputRef?.current?.focus?.();
+        else if (withAnyRightController) {
+          if (withClearBtn)
+            clearButtonRef.current?.focus?.();
+          else if (withAnyPicker)
+            pickerButtonRef?.current?.focus?.();
+        }
+      }
+    }
+    if (key === "Backspace" && year?.length === 0) {
+      dayInputRef?.current?.focus?.();
+    }
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
+  }, [
+    year,
+    onHomeKeyDown,
+    onEndKeyDown,
+    lastSegmentRef,
+    handleChangeYear,
+    hideTime,
+    hourInputRef,
+    withAnyRightController,
+    withClearBtn,
+    clearButtonRef,
+    withAnyPicker,
+    pickerButtonRef,
+    dayInputRef
+  ]);
+  const onYearBlur = useCallback((e) => {
+    const newYear = e?.target?.value;
+    if (newYear.length > 0 && newYear.length < 4)
+      handleChangeYear(fillStringWithPlaceHolders(newYear, 4, "0"), e, {
+        isAutomaticFillTrigger: true
+      });
+  }, [handleChangeYear]);
+  return useMemo(() => ({
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    disabled,
+    onMonthFocus,
+    onMonthChange,
+    onDayFocus,
+    onDayChange,
+    onYearFocus,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown
+  }), [
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    disabled,
+    onMonthFocus,
+    onMonthChange,
+    onDayFocus,
+    onDayChange,
+    onYearFocus,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown
+  ]);
+};
+export {
+  useDateInputs
+};
+//# sourceMappingURL=useDateInputs.js.map