@lumx/react 3.9.2-alpha.9 → 3.9.3

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

@@ -389,6 +389,11 @@ const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
  */
 const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
 
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
 const _excluded$1s = ["prefix"];
 
 /**
@@ -2353,37 +2358,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 +2409,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}`
@@ -2410,7 +2427,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     })),
     label: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
       "aria-live": labelAriaLive,
-      className: onMonthChange ? 'visually-hidden' : '',
+      className: onMonthChange ? VISUALLY_HIDDEN : '',
       dir: "auto"
     }, monthYear), onMonthChange && /*#__PURE__*/React__default.createElement(FlexBox, {
       className: `${CLASSNAME$17}__month`,
@@ -2419,15 +2436,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, {
@@ -2479,7 +2496,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
       }, /*#__PURE__*/React__default.createElement("span", {
         "aria-hidden": true
       }, formatDayNumber(locale, date)), /*#__PURE__*/React__default.createElement("span", {
-        className: "visually-hidden"
+        className: VISUALLY_HIDDEN
       }, date.toLocaleDateString(locale, {
         day: 'numeric',
         month: 'long',
@@ -8344,9 +8361,21 @@ function unref(maybeElement) {
   return maybeElement === null || maybeElement === void 0 ? void 0 : maybeElement.current;
 }
 
-function setTransitionViewName(elementRef, name) {
-  const element = unref(elementRef);
-  if (element) element.style.viewTransitionName = name;
+function setupViewTransitionName(elementRef, name) {
+  let originalName = null;
+  return {
+    set() {
+      const element = unref(elementRef);
+      if (!element) return;
+      originalName = element.style.viewTransitionName;
+      element.style.viewTransitionName = name;
+    },
+    unset() {
+      const element = unref(elementRef);
+      if (!element || originalName === null) return;
+      element.style.viewTransitionName = originalName;
+    }
+  };
 }
 
 /**
@@ -8373,21 +8402,18 @@ async function startViewTransition(_ref) {
     return;
   }
 
-  // Set transition name on source element
-  setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+  // Setup set/unset transition name on source & target
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  sourceTransitionName.set();
 
   // Start view transition, apply changes & flush to DOM
   await start(() => {
-    // Un-set transition name on source element
-    setTransitionViewName(viewTransitionName.source, null);
+    sourceTransitionName.unset();
     flushSync(changes);
-
-    // Set transition name on target element
-    setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+    targetTransitionName.set();
   }).updateCallbackDone;
-
-  // Un-set transition name on target element
-  setTransitionViewName(viewTransitionName.target, null);
+  targetTransitionName.unset();
 }
 
 /** Find image in element including the element */
@@ -8479,9 +8505,9 @@ function useImageLightbox(props) {
             },
             isOpen: true,
             onClose: () => {
-              var _prevProps$onClose;
+              var _propsRef$current2, _propsRef$current2$on;
               close();
-              prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$onClose = prevProps.onClose) === null || _prevProps$onClose === void 0 ? void 0 : _prevProps$onClose.call(prevProps);
+              (_propsRef$current2 = propsRef.current) === null || _propsRef$current2 === void 0 ? void 0 : (_propsRef$current2$on = _propsRef$current2.onClose) === null || _propsRef$current2$on === void 0 ? void 0 : _propsRef$current2$on.call(_propsRef$current2);
             },
             images,
             activeImageIndex: activeImageIndex || 0
@@ -8552,7 +8578,10 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
     onClose: onClose,
     closeButtonProps: closeButtonProps,
     focusElement: currentPaginationItemRef
-  }, forwardedProps), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
+  }, forwardedProps, {
+    // Disable the close on click away as we want a custom one here
+    preventAutoClose: true
+  }), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
     childrenRefs: clickAwayChildrenRefs,
     callback: onClickAway
   }, /*#__PURE__*/React__default.createElement(ImageSlideshow, {
@@ -14183,6 +14212,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = (isActivated || forceOpen) && !!label;
   const isMounted = !!label && (isOpen || closeMode === 'hide');
+  const isHidden = !isOpen && closeMode === 'hide';
   const wrappedChildren = useInjectTooltipRef({
     children,
     setAnchorElement,
@@ -14206,9 +14236,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": label || '',
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$2,
-      position,
-      hidden: !isOpen && closeMode === 'hide'
-    })),
+      position
+    }), isHidden && VISUALLY_HIDDEN),
     style: _objectSpread2(_objectSpread2({}, styles.popper), {}, {
       zIndex
     })