@lumx/react 3.6.5 → 3.6.6-alpha.0

package/index.d.ts

@@ -470,7 +470,10 @@ declare type useChipGroupNavigationType<C = any> = (chips: C[], onChipDeleted: (
  * Defines the props of the component.
  */
 interface ChipGroupProps extends GenericProps {
-    /** Chip horizontal alignment. */
+    /**
+     * Chip horizontal alignment.
+     * @deprecated
+     */
     align?: HorizontalAlignment;
     /** List of Chip. */
     children: ReactNode;
@@ -596,19 +599,15 @@ declare const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivEleme
 /**
  * Defines the props of the component.
  */
-interface DatePickerFieldProps extends GenericProps {
+interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'>, GenericProps {
     /** Default month. */
     defaultMonth?: Date;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Locale (language or region) to use. */
     locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */
     minDate?: Date;
-    /** Native input name property. */
-    name?: string;
     /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
     nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
     /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
@@ -2717,6 +2716,8 @@ interface TextFieldProps extends GenericProps, HasTheme {
     isValid?: boolean;
     /** Label text. */
     label?: string;
+    /** Additional label props. */
+    labelProps?: InputLabelProps;
     /** Max string length the input accepts (constrains the input and displays a character counter). */
     maxLength?: number;
     /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */

package/index.js

@@ -6,8 +6,8 @@ import noop from 'lodash/noop';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
 import last from 'lodash/last';
-import pull from 'lodash/pull';
 import { createPortal } from 'react-dom';
+import pull from 'lodash/pull';
 import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
@@ -1895,9 +1895,7 @@ const _excluded$d = ["align", "children", "className"];
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$a = {
-  align: Alignment.left
-};
+const DEFAULT_PROPS$a = {};
 
 /**
  * Component display name.
@@ -1924,7 +1922,6 @@ const InternalChipGroup = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const chipGroupClassName = handleBasicClasses({
-    align,
     prefix: CLASSNAME$a
   });
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -2159,11 +2156,16 @@ const getWeekDays = locale => {
     const letter = iterDate.toLocaleDateString(locale.code, {
       weekday: 'narrow'
     });
+    // Weed day long notation
+    const long = iterDate.toLocaleDateString(locale.code, {
+      weekday: 'long'
+    });
     // Day number (1-based index starting on Monday)
     const number = iterDate.getDay();
     weekDays.push({
       letter,
-      number
+      number,
+      long
     });
     iterDate.setDate(iterDate.getDate() + 1);
   }
@@ -2248,6 +2250,18 @@ function parseLocale(locale) {
   };
 }
 
+/**
+ * Returns the value from the previous render.
+ */
+function usePreviousValue(value) {
+  const prevValueRef = React.useRef();
+  const prevValue = prevValueRef.current;
+  React.useEffect(() => {
+    prevValueRef.current = value;
+  }, [value]);
+  return prevValue;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -2285,6 +2299,14 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     const localeObj = parseLocale(locale);
     return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
   }, [locale, minDate, maxDate, selectedMonth]);
+  const prevSelectedMonth = usePreviousValue(selectedMonth);
+  const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
+
+  // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog
+  const [labelAriaLive, setLabelAriaLive] = React.useState();
+  React.useEffect(() => {
+    if (monthHasChanged) setLabelAriaLive('polite');
+  }, [monthHasChanged]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: `${CLASSNAME$c}`
@@ -2301,7 +2323,8 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: onPrevMonthChange
     })),
     label: /*#__PURE__*/React.createElement("span", {
-      className: `${CLASSNAME$c}__month`
+      className: `${CLASSNAME$c}__month`,
+      "aria-live": labelAriaLive
     }, selectedMonth.toLocaleDateString(locale, {
       year: 'numeric',
       month: 'long'
@@ -2313,14 +2336,18 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
   }, weekDays.map(_ref => {
     let {
       letter,
-      number
+      number,
+      long
     } = _ref;
     return /*#__PURE__*/React.createElement("div", {
       key: number,
       className: `${CLASSNAME$c}__day-wrapper`
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${CLASSNAME$c}__week-day`
-    }, letter.toLocaleUpperCase()));
+      className: `${CLASSNAME$c}__week-day`,
+      "aria-hidden": true
+    }, letter.toLocaleUpperCase()), /*#__PURE__*/React.createElement("span", {
+      className: "visually-hidden"
+    }, long));
   })), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$c}__month-days ${CLASSNAME$c}__days-wrapper`
   }, weeks.flatMap((week, weekIndex) => {
@@ -2344,8 +2371,16 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
         disabled: isOutOfRange,
         type: "button",
         onClick: () => onChange(date)
-      }, /*#__PURE__*/React.createElement("span", null, date.toLocaleDateString(locale, {
+      }, /*#__PURE__*/React.createElement("span", {
+        "aria-hidden": true
+      }, date.toLocaleDateString(locale, {
         day: 'numeric'
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "visually-hidden"
+      }, date.toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
       }))));
     });
   }))));
@@ -2398,38 +2433,108 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
 DatePicker.displayName = COMPONENT_NAME$d;
 DatePicker.className = CLASSNAME$c;
 
-/** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
+const useBooleanState = defaultValue => {
+  const [booleanValue, setBoolean] = useState(defaultValue);
+  const setToFalse = useCallback(() => setBoolean(false), []);
+  const setToTrue = useCallback(() => setBoolean(true), []);
+  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
+  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
+};
 
-/** CSS selector matching element that are disabled (should not receive focus). */
-const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+const _excluded$g = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
-const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
-function getFocusableElements(element) {
-  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
-}
+/**
+ * Defines the props of the component.
+ */
 
 /**
- * Get first and last elements focusable in an element.
+ * Component display name.
+ */
+const COMPONENT_NAME$f = 'DatePickerField';
+
+/**
+ * DatePickerField component.
  *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-function getFirstAndLastFocusable(parentElement) {
-  const focusableElements = getFocusableElements(parentElement);
+const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      defaultMonth,
+      disabled,
+      isDisabled = disabled,
+      locale = getCurrentLocale(),
+      maxDate,
+      minDate,
+      name,
+      nextButtonProps,
+      onChange,
+      previousButtonProps,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+  const anchorRef = useRef(null);
+  const [isOpen, close,, toggleOpen] = useBooleanState(false);
+  const handleKeyboardNav = useCallback(evt => {
+    if (evt.key === 'Enter' || evt.key === ' ') {
+      toggleOpen();
+    }
+  }, [toggleOpen]);
+  const onTextFieldChange = useCallback((textFieldValue, textFieldName, event) => {
+    if (!textFieldValue) {
+      onChange(undefined, textFieldName, event);
+    }
+  }, [onChange]);
+  const onDatePickerChange = useCallback(newDate => {
+    onChange(newDate, name);
+    close();
+  }, [name, onChange, close]);
 
-  // First non disabled element.
-  const first = focusableElements[0];
-  // Last non disabled element.
-  const last = focusableElements[focusableElements.length - 1];
-  if (last && first) {
-    return {
-      first,
-      last
-    };
-  }
-  return {};
-}
+  // Format date for text field
+  const textFieldValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })) || '';
+  const todayOrSelectedDateRef = React.useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({
+    ref: ref
+  }, forwardedProps, {
+    name: name,
+    forceFocusStyle: isOpen,
+    textFieldRef: anchorRef,
+    value: textFieldValue,
+    onClick: toggleOpen,
+    onChange: onTextFieldChange,
+    onKeyPress: handleKeyboardNav,
+    isDisabled: isDisabled,
+    readOnly: true,
+    "aria-haspopup": "dialog"
+  })), isOpen ? /*#__PURE__*/React.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.createElement(DatePicker, {
+    locale: locale,
+    maxDate: maxDate,
+    minDate: minDate,
+    value: value,
+    todayOrSelectedDateRef: todayOrSelectedDateRef,
+    onChange: onDatePickerChange,
+    defaultMonth: defaultMonth,
+    nextButtonProps: nextButtonProps,
+    previousButtonProps: previousButtonProps
+  })) : null);
+});
+DatePickerField.displayName = COMPONENT_NAME$f;
 
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
@@ -2460,6 +2565,67 @@ function makeListenerTowerContext() {
   };
 }
 
+const LISTENERS = makeListenerTowerContext();
+
+/**
+ * Register a global listener on 'Escape' key pressed.
+ *
+ * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+ * one gets activated again.
+ *
+ * @param callback      Callback
+ * @param closeOnEscape Disables the hook when false
+ */
+function useCallbackOnEscape(callback) {
+  let closeOnEscape = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  useEffect(() => {
+    const rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
+    if (!closeOnEscape || !callback || !rootElement) {
+      return undefined;
+    }
+    const onKeyDown = onEscapePressed(callback);
+    const listener = {
+      enable: () => rootElement.addEventListener('keydown', onKeyDown),
+      disable: () => rootElement.removeEventListener('keydown', onKeyDown)
+    };
+    LISTENERS.register(listener);
+    return () => LISTENERS.unregister(listener);
+  }, [callback, closeOnEscape]);
+}
+
+/** CSS selector listing all tabbable elements. */
+const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
+
+/** CSS selector matching element that are disabled (should not receive focus). */
+const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+
+const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
+function getFocusableElements(element) {
+  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+function getFirstAndLastFocusable(parentElement) {
+  const focusableElements = getFocusableElements(parentElement);
+
+  // First non disabled element.
+  const first = focusableElements[0];
+  // Last non disabled element.
+  const last = focusableElements[focusableElements.length - 1];
+  if (last && first) {
+    return {
+      first,
+      last
+    };
+  }
+  return {};
+}
+
 const FOCUS_TRAPS = makeListenerTowerContext();
 
 /**
@@ -2540,136 +2706,6 @@ function useFocusTrap(focusZoneElement, focusElement) {
   }, [focusElement, focusZoneElement]);
 }
 
-const _excluded$g = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$f = 'DatePickerField';
-
-/**
- * DatePickerField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      defaultMonth,
-      disabled,
-      isDisabled = disabled,
-      locale = getCurrentLocale(),
-      maxDate,
-      minDate,
-      name,
-      nextButtonProps,
-      onChange,
-      previousButtonProps,
-      value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
-  const [wrapperElement, setWrapperElement] = useState(null);
-  const anchorRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleSimpleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-  useFocus(anchorRef.current, isOpen);
-  const handleKeyboardNav = evt => {
-    if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {
-      toggleSimpleMenu();
-    }
-  };
-
-  // Handle focus trap.
-  const [todayOrSelectedDate, setTodayOrSelectedDate] = useState(null);
-  useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
-  const onTextFieldChange = (textFieldValue, textFieldName, event) => {
-    if (!textFieldValue) {
-      onChange(undefined, textFieldName, event);
-    }
-  };
-  const onDatePickerChange = newDate => {
-    onChange(newDate, name);
-    onClose();
-  };
-
-  // Format date for text field
-  const textFieldValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  })) || '';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({
-    ref: ref
-  }, forwardedProps, {
-    name: name,
-    forceFocusStyle: isOpen,
-    textFieldRef: anchorRef,
-    value: textFieldValue,
-    onClick: toggleSimpleMenu,
-    onChange: onTextFieldChange,
-    onKeyPress: handleKeyboardNav,
-    isDisabled: isDisabled,
-    readOnly: true
-  })), isOpen ? /*#__PURE__*/React.createElement(Popover, {
-    anchorRef: anchorRef,
-    placement: Placement.BOTTOM_START,
-    isOpen: isOpen,
-    onClose: onClose,
-    closeOnClickAway: true,
-    closeOnEscape: true
-  }, /*#__PURE__*/React.createElement(DatePicker, {
-    ref: setWrapperElement,
-    locale: locale,
-    maxDate: maxDate,
-    minDate: minDate,
-    value: value,
-    onChange: onDatePickerChange,
-    todayOrSelectedDateRef: setTodayOrSelectedDate,
-    defaultMonth: defaultMonth,
-    nextButtonProps: nextButtonProps,
-    previousButtonProps: previousButtonProps
-  })) : null);
-});
-DatePickerField.displayName = COMPONENT_NAME$f;
-
-const LISTENERS = makeListenerTowerContext();
-
-/**
- * Register a global listener on 'Escape' key pressed.
- *
- * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
- * one gets activated again.
- *
- * @param callback      Callback
- * @param closeOnEscape Disables the hook when false
- */
-function useCallbackOnEscape(callback) {
-  let closeOnEscape = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  useEffect(() => {
-    const rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
-    if (!closeOnEscape || !callback || !rootElement) {
-      return undefined;
-    }
-    const onKeyDown = onEscapePressed(callback);
-    const listener = {
-      enable: () => rootElement.addEventListener('keydown', onKeyDown),
-      disable: () => rootElement.removeEventListener('keydown', onKeyDown)
-    };
-    LISTENERS.register(listener);
-    return () => LISTENERS.unregister(listener);
-  }, [callback, closeOnEscape]);
-}
-
 /**
  * Convenient hook to create interaction observers.
  *
@@ -8692,7 +8728,7 @@ Notification.displayName = COMPONENT_NAME$L;
 Notification.className = CLASSNAME$I;
 Notification.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$N = ["children", "isOpen", "focusElement", "label", "className"];
+const _excluded$N = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 
 /**
  * PopoverDialog props.
@@ -8726,7 +8762,8 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       isOpen,
       focusElement,
-      label,
+      'aria-label': ariaLabel,
+      label = ariaLabel,
       className
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$N);
@@ -12180,7 +12217,7 @@ TabPanel.className = CLASSNAME$1c;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
 const _excluded$1l = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
-  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
+  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "labelProps", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
  * Defines the props of the component.
@@ -12334,6 +12371,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       isRequired,
       isValid,
       label,
+      labelProps,
       maxLength,
       minimumRows,
       multiline,
@@ -12414,12 +12452,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }))
   }, (label || maxLength) && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__header`
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
+  }, label && /*#__PURE__*/React.createElement(InputLabel, _extends({}, labelProps, {
     htmlFor: textFieldId,
     className: `${CLASSNAME$1d}__label`,
     isRequired: isRequired,
     theme: theme
-  }, label), maxLength && /*#__PURE__*/React.createElement("div", {
+  }), label), maxLength && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__char-counter`
   }, /*#__PURE__*/React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && /*#__PURE__*/React.createElement(Icon, {
     icon: mdiAlertCircle,
@@ -12752,7 +12790,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       hasBadge: !!badge
     }), fillHeight && `${CLASSNAME$1e}--fill-height`)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1e}__background`
   }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle),
@@ -12766,7 +12804,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     src: image,
     alt: alt,
     loading: loading
-  })), !isLoading && hasError && /*#__PURE__*/React.createElement("div", {
+  })), !isLoading && hasError && /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1e}__fallback`
   }, hasIconErrorFallback ? /*#__PURE__*/React.createElement(Icon, {
     icon: fallback,
@@ -13137,14 +13175,6 @@ Tooltip.displayName = COMPONENT_NAME$1j;
 Tooltip.className = CLASSNAME$1g;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
-const useBooleanState = defaultValue => {
-  const [booleanValue, setBoolean] = useState(defaultValue);
-  const setToFalse = useCallback(() => setBoolean(false), []);
-  const setToTrue = useCallback(() => setBoolean(true), []);
-  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
-  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
-};
-
 const _excluded$1p = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
 
 /**