@lumx/react 3.6.6 → 3.6.7-alpha-with-popover-change.0

package/index.d.ts

@@ -586,6 +586,8 @@ interface DatePickerControlledProps extends DatePickerProps {
     onPrevMonthChange(): void;
     /** On next month change callback. */
     onNextMonthChange(): void;
+    /** On month/year change callback. */
+    onMonthChange?: (newMonth: Date) => void;
 }
 /**
  * DatePickerControlled component.
@@ -792,6 +794,8 @@ interface PopoverProps extends GenericProps, HasTheme {
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
     usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: RefObject<HTMLElement>;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
@@ -1646,6 +1650,17 @@ interface MessageProps extends GenericProps {
     kind?: Kind;
     /** Message custom icon SVG path. */
     icon?: string;
+    /**
+     * Displays a close button.
+     *
+     * NB: only available if `kind === 'info' && hasBackground === true`
+     */
+    closeButtonProps?: {
+        /** The callback called when the button is clicked */
+        onClick: () => void;
+        /** The label of the close button. */
+        label: string;
+    };
 }
 /**
  * Message component.

package/index.js

@@ -2262,6 +2262,21 @@ function usePreviousValue(value) {
   return prevValue;
 }
 
+const getYearDisplayName = locale => {
+  let label;
+  try {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const displayNames = new Intl.DisplayNames(locale, {
+      type: 'dateTimeField'
+    });
+    label = displayNames.of('year');
+  } catch (error) {
+    label = '';
+  }
+  return label;
+};
+
 /**
  * Defines the props of the component.
  */
@@ -2279,6 +2294,7 @@ const COMPONENT_NAME$e = 'DatePickerControlled';
  * @return React element.
  */
 const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
+  var _RegExp$exec;
   const {
     locale = getCurrentLocale(),
     maxDate,
@@ -2290,7 +2306,8 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     previousButtonProps,
     selectedMonth,
     todayOrSelectedDateRef,
-    value
+    value,
+    onMonthChange
   } = props;
   const {
     weeks,
@@ -2299,6 +2316,37 @@ 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, {
+    year: 'numeric'
+  }).slice(0, 4);
+  const [textFieldYearValue, setTextFieldYearValue] = React.useState(selectedYear);
+  const isYearValid = Number(textFieldYearValue) > 0 && Number(textFieldYearValue) <= 9999;
+
+  // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
+  const updateMonthOffset = React.useCallback(() => {
+    if (isYearValid) {
+      const yearNumber = selectedMonth.getFullYear();
+      const offset = (Number(textFieldYearValue) - yearNumber) * 12;
+      if (onMonthChange) {
+        onMonthChange(addMonthResetDay(selectedMonth, offset));
+      }
+    }
+  }, [isYearValid, selectedMonth, textFieldYearValue, onMonthChange]);
+  const monthYear = selectedMonth.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long'
+  });
+
+  // Year can only be validatd by pressing Enter key or on Blur. The below handles the press Enter key case
+  const handleKeyPress = React.useMemo(() => onEnterPressed(updateMonthOffset), [updateMonthOffset]);
+
+  // Required to update year in the TextField when the user changes year by using prev next month arrows
+  React.useEffect(() => {
+    if (Number(textFieldYearValue) !== selectedMonth.getFullYear()) {
+      setTextFieldYearValue(selectedMonth.getFullYear().toString());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedMonth]);
   const prevSelectedMonth = usePreviousValue(selectedMonth);
   const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
 
@@ -2307,6 +2355,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
   React.useEffect(() => {
     if (monthHasChanged) setLabelAriaLive('polite');
   }, [monthHasChanged]);
+  const label = getYearDisplayName(locale);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: `${CLASSNAME$c}`
@@ -2322,13 +2371,32 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
       icon: mdiChevronLeft,
       onClick: onPrevMonthChange
     })),
-    label: /*#__PURE__*/React.createElement("span", {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      "aria-live": labelAriaLive,
+      className: onMonthChange ? 'visually-hidden' : '',
+      dir: "auto"
+    }, monthYear), onMonthChange && /*#__PURE__*/React.createElement(FlexBox, {
       className: `${CLASSNAME$c}__month`,
-      "aria-live": labelAriaLive
-    }, selectedMonth.toLocaleDateString(locale, {
-      year: 'numeric',
-      month: 'long'
-    }))
+      orientation: "horizontal",
+      hAlign: "center",
+      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.createElement(TextField, {
+      value: textFieldYearValue,
+      "aria-label": label,
+      onChange: setTextFieldYearValue,
+      type: "number",
+      max: 9999,
+      min: 0,
+      onBlur: updateMonthOffset,
+      onKeyPress: handleKeyPress,
+      key: "year",
+      className: `${CLASSNAME$c}__year`
+    }) : /*#__PURE__*/React.createElement(Text, {
+      as: "p",
+      key: part
+    }, part))))
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__calendar`
   }, /*#__PURE__*/React.createElement("div", {
@@ -2410,14 +2478,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
     referenceDate = new Date();
   }
-  const [monthOffset, setMonthOffset] = useState(0);
-  const setPrevMonth = () => setMonthOffset(monthOffset - 1);
-  const setNextMonth = () => setMonthOffset(monthOffset + 1);
+  const [selectedMonth, setSelectedMonth] = useState(referenceDate);
+  const setPrevMonth = () => setSelectedMonth(current => addMonthResetDay(current, -1));
+  const setNextMonth = () => setSelectedMonth(current => addMonthResetDay(current, +1));
   const onDatePickerChange = newDate => {
     onChange(newDate);
-    setMonthOffset(0);
   };
-  const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
   return /*#__PURE__*/React.createElement(DatePickerControlled, _extends({
     ref: ref
   }, forwardedProps, {
@@ -2427,7 +2493,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     onPrevMonthChange: setPrevMonth,
     onNextMonthChange: setNextMonth,
     selectedMonth: selectedMonth,
-    onChange: onDatePickerChange
+    onChange: onDatePickerChange,
+    onMonthChange: setSelectedMonth
   }));
 });
 DatePicker.displayName = COMPONENT_NAME$d;
@@ -2646,6 +2713,9 @@ function useFocusTrap(focusZoneElement, focusElement) {
       return undefined;
     }
 
+    // Use the shadow root as focusZoneElement when available
+    const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+
     // Trap 'Tab' key down focus switch into the focus zone.
     const trapTabFocusInFocusZone = evt => {
       const {
@@ -2654,20 +2724,21 @@ function useFocusTrap(focusZoneElement, focusElement) {
       if (key !== 'Tab') {
         return;
       }
-      const focusable = getFirstAndLastFocusable(focusZoneElement);
+      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
 
       // Prevent focus switch if no focusable available.
       if (!focusable.first) {
         evt.preventDefault();
         return;
       }
+      const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
       if (
       // No previous focus
-      !document.activeElement ||
+      !activeElement ||
       // Previous focus is at the end of the focus zone.
-      !evt.shiftKey && document.activeElement === focusable.last ||
+      !evt.shiftKey && activeElement === focusable.last ||
       // Previous focus is outside the focus zone
-      !focusZoneElement.contains(document.activeElement)) {
+      !focusZoneElementOrShadowRoot.contains(activeElement)) {
         focusable.first.focus();
         evt.preventDefault();
         return;
@@ -2676,7 +2747,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
       // Focus order reversed
       evt.shiftKey &&
       // Previous focus is at the start of the focus zone.
-      document.activeElement === focusable.first) {
+      activeElement === focusable.first) {
         focusable.last.focus();
         evt.preventDefault();
       }
@@ -2687,7 +2758,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
     };
 
     // SETUP:
-    if (focusElement && focusZoneElement.contains(focusElement)) {
+    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
       // Focus the given element.
       focusElement.focus({
         preventScroll: true
@@ -2695,7 +2766,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
     } else {
       var _getFirstAndLastFocus;
       // Focus the first focusable element in the zone.
-      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
         preventScroll: true
       });
     }
@@ -6471,7 +6542,7 @@ function usePopoverStyle(_ref5) {
   };
 }
 
-const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "offset", "placement", "style", "theme", "zIndex"];
+const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6524,6 +6595,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
+      focusTrapZoneElement,
       offset,
       placement,
       style,
@@ -6557,11 +6629,12 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     anchorRef,
     parentElement
   }, popperElement);
+  const focusZoneElement = (focusTrapZoneElement === null || focusTrapZoneElement === void 0 ? void 0 : focusTrapZoneElement.current) || (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current);
   useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
   /** Only set focus within if the focus trap is disabled as they interfere with one another. */
   useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, !withFocusTrap && isOpen && isPositioned);
-  useFocusTrap(withFocusTrap && isOpen && (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current), focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
+  useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
   return isOpen ? renderPopover( /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {
@@ -8233,7 +8306,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$F;
 ListSubheader.className = CLASSNAME$C;
 
-const _excluded$H = ["children", "className", "hasBackground", "kind", "icon"];
+const _excluded$H = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -8284,13 +8357,19 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       hasBackground,
       kind,
-      icon: customIcon
+      icon: customIcon,
+      closeButtonProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$H);
   const {
     color,
     icon
   } = CONFIG$1[kind] || {};
+  const {
+    onClick,
+    label: closeButtonLabel
+  } = closeButtonProps || {};
+  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -8305,7 +8384,13 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
     color: color
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$D}__text`
-  }, children));
+  }, children), isCloseButtonDisplayed && /*#__PURE__*/React.createElement(IconButton, {
+    className: `${CLASSNAME$D}__close-button`,
+    icon: mdiClose,
+    onClick: onClick,
+    label: closeButtonLabel,
+    emphasis: Emphasis.low
+  }));
 });
 Message.displayName = COMPONENT_NAME$G;
 Message.className = CLASSNAME$D;