@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.17

package/_internal/{PopoverDialog-21e5c9dd.js → PopoverDialog-e0967e5f.js}

@@ -1,21 +1,22 @@
-import { f as forwardRef, _ as _extends, c as classNames } from './forwardRef-49d2bb84.js';
 import React__default, { useState, useRef, useCallback } from 'react';
+import { f as forwardRef, c as classNames } from './forwardRef-15f62847.js';
 import { getRootClassName } from '@lumx/core/js/utils/className';
 import { mdiChevronRight, mdiChevronLeft } from '@lumx/icons';
 import last from 'lodash/last';
 import { onEnterPressed } from '@lumx/core/js/utils';
 import { V as VISUALLY_HIDDEN } from './constants-d0e3f49e.js';
-import { I as IconButton } from './IconButton-10585058.js';
-import { FlexBox } from './components/flex-box-c8701a85.js';
-import { Toolbar } from './components/toolbar-155562be.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { I as IconButton } from './IconButton-f4df224c.js';
+import { FlexBox } from './components/flex-box-55144e5f.js';
+import { Toolbar } from './components/toolbar-a43533a2.js';
 import { Emphasis } from '@lumx/core/js/constants';
-import { TextField } from './components/text-field-82733568.js';
-import { T as Text } from './index-b4d256e7.js';
-import { a as Button } from './Button-f19e18df.js';
+import { TextField } from './components/text-field-478acd86.js';
+import { T as Text } from './index-a9c5cd69.js';
+import { a as Button } from './Button-1f227024.js';
 import { u as useBooleanState } from './useBooleanState-2a3d237c.js';
-import { u as useDisableStateProps } from './useDisableStateProps-fffc365f.js';
-import { P as Popover } from './index-f415b08e.js';
-import { H as HeadingLevelProvider } from './HeadingLevelProvider-e4817816.js';
+import { u as useDisableStateProps } from './useDisableStateProps-69e16b7c.js';
+import { P as Popover } from './index-9df37c0d.js';
+import { H as HeadingLevelProvider } from './HeadingLevelProvider-ebdcb0c7.js';
 import { P as Placement } from './constants-b9e57936.js';
 
 /**
@@ -259,10 +260,6 @@ function formatDayNumber(locale, date) {
   return formattedDate;
 }
 
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component display name.
  */
@@ -349,98 +346,112 @@ const DatePickerControlled = forwardRef((props, ref) => {
     if (monthHasChanged) setLabelAriaLive('polite');
   }, [monthHasChanged]);
   const yearLabel = getYearDisplayName(locale);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: `${CLASSNAME$1}`,
-    style: style
-  }, /*#__PURE__*/React__default.createElement(Toolbar, {
-    className: `${CLASSNAME$1}__toolbar`,
-    after: /*#__PURE__*/React__default.createElement(IconButton, _extends({}, nextButtonProps, {
-      emphasis: Emphasis.low,
-      icon: mdiChevronRight,
-      onClick: onNextMonthChange
-    })),
-    before: /*#__PURE__*/React__default.createElement(IconButton, _extends({}, previousButtonProps, {
-      emphasis: Emphasis.low,
-      icon: mdiChevronLeft,
-      onClick: onPrevMonthChange
-    })),
-    label: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      "aria-live": labelAriaLive,
-      className: onMonthChange ? VISUALLY_HIDDEN : '',
-      dir: "auto"
-    }, monthYear), onMonthChange && /*#__PURE__*/React__default.createElement(FlexBox, {
-      className: `${CLASSNAME$1}__month`,
-      orientation: "horizontal",
-      hAlign: "center",
-      gap: "regular",
-      vAlign: "center",
-      dir: "auto"
-    }, RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.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: updateYear,
-      onKeyPress: updateYearOnEnterPressed,
-      key: "year",
-      className: `${CLASSNAME$1}__year`
-    }) : /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
-      key: part
-    }, part))))
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$1}__calendar`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$1}__week-days ${CLASSNAME$1}__days-wrapper`
-  }, weekDays.map(({
-    letter,
-    number,
-    long
-  }) => /*#__PURE__*/React__default.createElement("div", {
-    key: number,
-    className: `${CLASSNAME$1}__day-wrapper`
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${CLASSNAME$1}__week-day`,
-    "aria-hidden": true
-  }, letter.toLocaleUpperCase()), /*#__PURE__*/React__default.createElement("span", {
-    className: "visually-hidden"
-  }, long)))), /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$1}__month-days ${CLASSNAME$1}__days-wrapper`
-  }, weeks.flatMap((week, weekIndex) => {
-    return weekDays.map((weekDay, dayIndex) => {
-      const {
-        date,
-        isOutOfRange
-      } = week[weekDay.number] || {};
-      const key = `${weekIndex}-${dayIndex}`;
-      const isToday = !isOutOfRange && date && isSameDay(date, new Date());
-      const isSelected = date && value && isSameDay(value, date);
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: key,
-        className: `${CLASSNAME$1}__day-wrapper`
-      }, date && /*#__PURE__*/React__default.createElement(Button, {
-        ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-        className: classNames(`${CLASSNAME$1}__month-day`, {
-          [`${CLASSNAME$1}__month-day--is-today`]: isToday
-        }),
-        disabled: isOutOfRange,
-        isSelected: isSelected,
-        emphasis: "low",
-        onClick: () => onChange(date)
-      }, /*#__PURE__*/React__default.createElement("span", {
-        "aria-hidden": true
-      }, formatDayNumber(locale, date)), /*#__PURE__*/React__default.createElement("span", {
-        className: VISUALLY_HIDDEN
-      }, date.toLocaleDateString(locale, {
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric'
-      }))));
-    });
-  }))));
+    style: style,
+    children: [/*#__PURE__*/jsx(Toolbar, {
+      className: `${CLASSNAME$1}__toolbar`,
+      after: /*#__PURE__*/jsx(IconButton, {
+        ...nextButtonProps,
+        emphasis: Emphasis.low,
+        icon: mdiChevronRight,
+        onClick: onNextMonthChange
+      }),
+      before: /*#__PURE__*/jsx(IconButton, {
+        ...previousButtonProps,
+        emphasis: Emphasis.low,
+        icon: mdiChevronLeft,
+        onClick: onPrevMonthChange
+      }),
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          "aria-live": labelAriaLive,
+          className: onMonthChange ? VISUALLY_HIDDEN : '',
+          dir: "auto",
+          children: monthYear
+        }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
+          className: `${CLASSNAME$1}__month`,
+          orientation: "horizontal",
+          hAlign: "center",
+          gap: "regular",
+          vAlign: "center",
+          dir: "auto",
+          children: RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.slice(1).filter(part => part !== '').map(part => part === formattedYear ? /*#__PURE__*/jsx(TextField, {
+            value: currentYear,
+            "aria-label": yearLabel,
+            onChange: onYearChange,
+            type: "number",
+            max: 9999,
+            min: 0,
+            onBlur: updateYear,
+            onKeyPress: updateYearOnEnterPressed,
+            className: `${CLASSNAME$1}__year`
+          }, "year") : /*#__PURE__*/jsx(Text, {
+            as: "p",
+            children: part
+          }, part))
+        })]
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME$1}__calendar`,
+      children: [/*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__week-days ${CLASSNAME$1}__days-wrapper`,
+        children: weekDays.map(({
+          letter,
+          number,
+          long
+        }) => /*#__PURE__*/jsxs("div", {
+          className: `${CLASSNAME$1}__day-wrapper`,
+          children: [/*#__PURE__*/jsx("span", {
+            className: `${CLASSNAME$1}__week-day`,
+            "aria-hidden": true,
+            children: letter.toLocaleUpperCase()
+          }), /*#__PURE__*/jsx("span", {
+            className: "visually-hidden",
+            children: long
+          })]
+        }, number))
+      }), /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__month-days ${CLASSNAME$1}__days-wrapper`,
+        children: weeks.flatMap((week, weekIndex) => {
+          return weekDays.map((weekDay, dayIndex) => {
+            const {
+              date,
+              isOutOfRange
+            } = week[weekDay.number] || {};
+            const key = `${weekIndex}-${dayIndex}`;
+            const isToday = !isOutOfRange && date && isSameDay(date, new Date());
+            const isSelected = date && value && isSameDay(value, date);
+            return /*#__PURE__*/jsx("div", {
+              className: `${CLASSNAME$1}__day-wrapper`,
+              children: date && /*#__PURE__*/jsxs(Button, {
+                ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
+                className: classNames(`${CLASSNAME$1}__month-day`, {
+                  [`${CLASSNAME$1}__month-day--is-today`]: isToday
+                }),
+                disabled: isOutOfRange,
+                isSelected: isSelected,
+                emphasis: "low",
+                onClick: () => onChange(date),
+                children: [/*#__PURE__*/jsx("span", {
+                  "aria-hidden": true,
+                  children: formatDayNumber(locale, date)
+                }), /*#__PURE__*/jsx("span", {
+                  className: VISUALLY_HIDDEN,
+                  children: date.toLocaleDateString(locale, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric'
+                  })
+                })]
+              })
+            }, key);
+          });
+        })
+      })]
+    })]
+  });
 });
 DatePickerControlled.displayName = COMPONENT_NAME$2;
 DatePickerControlled.className = CLASSNAME$1;
@@ -472,9 +483,9 @@ const DatePicker = forwardRef((props, ref) => {
   const onDatePickerChange = newDate => {
     onChange(newDate);
   };
-  return /*#__PURE__*/React.createElement(DatePickerControlled, _extends({
-    ref: ref
-  }, forwardedProps, {
+  return /*#__PURE__*/jsx(DatePickerControlled, {
+    ref: ref,
+    ...forwardedProps,
     defaultMonth: defaultMonth,
     locale: locale,
     value: value,
@@ -483,15 +494,11 @@ const DatePicker = forwardRef((props, ref) => {
     selectedMonth: selectedMonth,
     onChange: onDatePickerChange,
     onMonthChange: setSelectedMonth
-  }));
+  });
 });
 DatePicker.displayName = COMPONENT_NAME$3;
 DatePicker.className = CLASSNAME$1;
 
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component display name.
  */
@@ -545,49 +552,47 @@ const DatePickerField = forwardRef((props, ref) => {
     day: 'numeric'
   }) || '';
   const todayOrSelectedDateRef = React__default.useRef(null);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, _extends({
-    ref: ref
-  }, forwardedProps, {
-    name: name,
-    forceFocusStyle: isOpen,
-    textFieldRef: anchorRef,
-    value: textFieldValue,
-    onClick: toggleOpen,
-    onChange: onTextFieldChange,
-    onKeyPress: handleKeyboardNav
-  }, disabledStateProps, {
-    readOnly: true,
-    "aria-haspopup": "dialog"
-  })), isOpen ? /*#__PURE__*/React__default.createElement(PopoverDialog
-  // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)
-  , {
-    "aria-label": forwardedProps.label,
-    anchorRef: anchorRef,
-    placement: Placement.BOTTOM_START,
-    isOpen: isOpen,
-    onClose: close
-    // On open, focus the selected day or today
-    ,
-    focusElement: todayOrSelectedDateRef
-  }, /*#__PURE__*/React__default.createElement(DatePicker, {
-    locale: locale,
-    maxDate: maxDate,
-    minDate: minDate,
-    value: value,
-    todayOrSelectedDateRef: todayOrSelectedDateRef,
-    onChange: onDatePickerChange,
-    defaultMonth: defaultMonth,
-    nextButtonProps: nextButtonProps,
-    previousButtonProps: previousButtonProps
-  })) : null);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TextField, {
+      ref: ref,
+      ...forwardedProps,
+      name: name,
+      forceFocusStyle: isOpen,
+      textFieldRef: anchorRef,
+      value: textFieldValue,
+      onClick: toggleOpen,
+      onChange: onTextFieldChange,
+      onKeyPress: handleKeyboardNav,
+      ...disabledStateProps,
+      readOnly: true,
+      "aria-haspopup": "dialog"
+    }), isOpen ? /*#__PURE__*/jsx(PopoverDialog
+    // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)
+    , {
+      "aria-label": forwardedProps.label,
+      anchorRef: anchorRef,
+      placement: Placement.BOTTOM_START,
+      isOpen: isOpen,
+      onClose: close
+      // On open, focus the selected day or today
+      ,
+      focusElement: todayOrSelectedDateRef,
+      children: /*#__PURE__*/jsx(DatePicker, {
+        locale: locale,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        todayOrSelectedDateRef: todayOrSelectedDateRef,
+        onChange: onDatePickerChange,
+        defaultMonth: defaultMonth,
+        nextButtonProps: nextButtonProps,
+        previousButtonProps: previousButtonProps
+      })
+    }) : null]
+  });
 });
 DatePickerField.displayName = COMPONENT_NAME$1;
 
-/**
- * PopoverDialog props.
- * The PopoverDialog has the same props as the Popover but requires an accessible label.
- */
-
 /**
  * Component display name.
  */
@@ -620,7 +625,8 @@ const PopoverDialog = forwardRef((props, ref) => {
     className,
     ...forwardedProps
   } = props;
-  return /*#__PURE__*/React.createElement(Popover, _extends({}, forwardedProps, {
+  return /*#__PURE__*/jsx(Popover, {
+    ...forwardedProps,
     ref: ref,
     className: classNames(className, CLASSNAME),
     role: "dialog",
@@ -634,14 +640,16 @@ const PopoverDialog = forwardRef((props, ref) => {
     focusElement: focusElement,
     closeOnClickAway: true,
     closeOnEscape: true,
-    withFocusTrap: true
-  }), /*#__PURE__*/React.createElement(HeadingLevelProvider, {
-    level: 2
-  }, children));
+    withFocusTrap: true,
+    children: /*#__PURE__*/jsx(HeadingLevelProvider, {
+      level: 2,
+      children: children
+    })
+  });
 });
 PopoverDialog.displayName = COMPONENT_NAME;
 PopoverDialog.className = CLASSNAME;
 PopoverDialog.defaultProps = DEFAULT_PROPS;
 
 export { DatePicker as D, PopoverDialog as P, DatePickerControlled as a, DatePickerField as b };
-//# sourceMappingURL=PopoverDialog-21e5c9dd.js.map
+//# sourceMappingURL=PopoverDialog-e0967e5f.js.map