@lumx/react 3.9.2-alpha.9 → 3.9.2

package/index.d.ts

@@ -2820,6 +2820,8 @@ interface TextFieldProps extends GenericProps, HasTheme {
     placeholder?: string;
     /** Reference to the wrapper. */
     textFieldRef?: Ref<HTMLDivElement>;
+    /** Native input type (only when `multiline` is disabled). */
+    type?: React.ComponentProps<'input'>['type'];
     /** Value. */
     value?: string;
     /** On blur callback. */

package/index.js

@@ -2353,37 +2353,49 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     const localeObj = parseLocale(locale);
     return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
   }, [locale, minDate, maxDate, selectedMonth]);
-  const selectedYear = selectedMonth.toLocaleDateString(locale, {
+  const selectedYear = selectedMonth.getFullYear();
+  const formattedYear = selectedMonth.toLocaleDateString(locale, {
     year: 'numeric'
   }).slice(0, 4);
-  const [textFieldYearValue, setTextFieldYearValue] = React__default.useState(selectedYear);
-  const isYearValid = Number(textFieldYearValue) > 0 && Number(textFieldYearValue) <= 9999;
+  const [currentYear, setCurrentYear] = React__default.useState(String(selectedYear));
 
   // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
-  const updateMonthOffset = React__default.useCallback(() => {
-    if (isYearValid) {
-      const yearNumber = selectedMonth.getFullYear();
-      const offset = (Number(textFieldYearValue) - yearNumber) * 12;
-      if (onMonthChange) {
-        onMonthChange(addMonthResetDay(selectedMonth, offset));
-      }
+  const updateMonthOffset = React__default.useCallback(newYearValue => {
+    const yearNumber = Number(newYearValue);
+    if (yearNumber < 0 && yearNumber >= 9999) {
+      return;
     }
-  }, [isYearValid, selectedMonth, textFieldYearValue, onMonthChange]);
+    const previousYearNumber = selectedMonth.getFullYear();
+    const offset = (yearNumber - previousYearNumber) * 12;
+    onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(addMonthResetDay(selectedMonth, offset));
+  }, [selectedMonth, onMonthChange]);
+  const onYearChange = React__default.useCallback((newYearValue, _, event) => {
+    var _event$nativeEvent;
+    setCurrentYear(newYearValue);
+
+    // Detect if change is coming from the spin up/down arrows
+    const inputType = event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.inputType;
+    if (
+    // Chrome/Safari
+    !inputType ||
+    // Firefox
+    inputType === 'insertReplacementText') {
+      updateMonthOffset(newYearValue);
+    }
+  }, [updateMonthOffset]);
+  const updateYear = React__default.useCallback(() => {
+    updateMonthOffset(currentYear);
+  }, [updateMonthOffset, currentYear]);
+  const updateYearOnEnterPressed = React__default.useMemo(() => onEnterPressed(updateYear), [updateYear]);
   const monthYear = selectedMonth.toLocaleDateString(locale, {
     year: 'numeric',
     month: 'long'
   });
 
-  // Year can only be validated by pressing Enter key or on Blur. The below handles the press Enter key case
-  const handleKeyPress = React__default.useMemo(() => onEnterPressed(updateMonthOffset), [updateMonthOffset]);
-
-  // Required to update year in the TextField when the user changes year by using prev next month arrows
+  // Update current year when selected year changes
   React__default.useEffect(() => {
-    if (Number(textFieldYearValue) !== selectedMonth.getFullYear()) {
-      setTextFieldYearValue(selectedMonth.getFullYear().toString());
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedMonth]);
+    setCurrentYear(String(selectedYear));
+  }, [selectedYear]);
   const prevSelectedMonth = usePreviousValue(selectedMonth);
   const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
 
@@ -2392,7 +2404,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
   React__default.useEffect(() => {
     if (monthHasChanged) setLabelAriaLive('polite');
   }, [monthHasChanged]);
-  const label = getYearDisplayName(locale);
+  const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: `${CLASSNAME$17}`
@@ -2419,15 +2431,15 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
       gap: "regular",
       vAlign: "center",
       dir: "auto"
-    }, (_RegExp$exec = RegExp(`(.*)(${selectedYear})(.*)`).exec(monthYear)) === null || _RegExp$exec === void 0 ? void 0 : _RegExp$exec.slice(1).filter(part => part !== '').map(part => part === selectedYear ? /*#__PURE__*/React__default.createElement(TextField, {
-      value: textFieldYearValue,
-      "aria-label": label,
-      onChange: setTextFieldYearValue,
+    }, (_RegExp$exec = RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)) === null || _RegExp$exec === void 0 ? void 0 : _RegExp$exec.slice(1).filter(part => part !== '').map(part => part === formattedYear ? /*#__PURE__*/React__default.createElement(TextField, {
+      value: currentYear,
+      "aria-label": yearLabel,
+      onChange: onYearChange,
       type: "number",
       max: 9999,
       min: 0,
-      onBlur: updateMonthOffset,
-      onKeyPress: handleKeyPress,
+      onBlur: updateYear,
+      onKeyPress: updateYearOnEnterPressed,
       key: "year",
       className: `${CLASSNAME$17}__year`
     }) : /*#__PURE__*/React__default.createElement(Text, {