@lumx/react 3.9.2-alpha.8 → 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, {
@@ -6409,6 +6421,11 @@ const FitAnchorWidth = {
  */
 const ARROW_SIZE$1 = 14;
 
+/**
+ * Popover default z-index
+ */
+const POPOVER_ZINDEX = 9999;
+
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
@@ -6602,7 +6619,7 @@ const DEFAULT_PROPS$P = {
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
   usePortal: true,
-  zIndex: 9999
+  zIndex: POPOVER_ZINDEX
 };
 
 /** Method to render the popover inside a portal if usePortal is true */
@@ -13909,6 +13926,11 @@ Toolbar.displayName = COMPONENT_NAME$3;
 Toolbar.className = CLASSNAME$3;
 Toolbar.defaultProps = DEFAULT_PROPS$3;
 
+/**
+ * Make sure tooltip appear above popovers.
+ */
+const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
  * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
@@ -14092,7 +14114,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$2 = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode", "ariaLinkMode"];
+const _excluded$2 = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode", "ariaLinkMode", "zIndex"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -14116,7 +14138,8 @@ const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
 const DEFAULT_PROPS$2 = {
   placement: Placement.BOTTOM,
   closeMode: 'unmount',
-  ariaLinkMode: 'aria-describedby'
+  ariaLinkMode: 'aria-describedby',
+  zIndex: TOOLTIP_ZINDEX
 };
 
 /**
@@ -14141,7 +14164,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       forceOpen,
       closeMode,
-      ariaLinkMode
+      ariaLinkMode,
+      zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
   // Disable in SSR.
@@ -14197,7 +14221,9 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       position,
       hidden: !isOpen && closeMode === 'hide'
     })),
-    style: styles.popper
+    style: _objectSpread2(_objectSpread2({}, styles.popper), {}, {
+      zIndex
+    })
   }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$2}__arrow`
   }), /*#__PURE__*/React__default.createElement("div", {