@lumx/react 3.0.4 → 3.0.5-alpha.2

package/index.d.ts

@@ -1802,6 +1802,8 @@ interface RadioButtonProps extends GenericProps, HasTheme {
     value?: string;
     /** On change callback. */
     onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * RadioButton component.

package/index.js

@@ -343,13 +343,6 @@ function uid(len) {
  */
 const CSS_PREFIX = 'lumx';
 
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-
 /**
  * Delay on hover after which we open or close the tooltip.
  * Only applies to devices supporting pointer hover.
@@ -2465,42 +2458,6 @@ function partitionMulti(elements, predicates) {
   return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
 }
 
-/**
- * Returns true if the component is visible taking into account the component's
- * own visibility and the animations delay
- *
- * @param isComponentVisible Whether the component intends to be visible or not.
- * @param transitionDuration time in ms that the transition takes for the specific component.
- * @param onVisibilityChange Callback called when the visibility changes.
- * @return true if the component should be rendered
- */
-function useDelayedVisibility(isComponentVisible, transitionDuration, onVisibilityChange) {
-  // Delay visibility to account for the 400ms of CSS opacity animation.
-  const [isVisible, setVisible] = useState(isComponentVisible);
-  useEffect(() => {
-    if (isComponentVisible) {
-      setVisible(true);
-    } else {
-      setTimeout(() => setVisible(false), transitionDuration);
-    }
-  }, [isComponentVisible, transitionDuration]);
-
-  /**
-   * Since we don't want onVisibiltyChange function to trigger itself if when it changes,
-   * we store the previous visibility and only trigger when visibility is different
-   * than previous value.
-   */
-
-  const previousVisibility = useRef(isVisible);
-  useEffect(() => {
-    if (onVisibilityChange && previousVisibility.current !== isVisible) {
-      onVisibilityChange(isVisible);
-      previousVisibility.current = isVisible;
-    }
-  }, [isVisible, onVisibilityChange]);
-  return isComponentVisible || isVisible;
-}
-
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 // Older browsers don't support event options, feature detect it.
@@ -2716,6 +2673,62 @@ const useDisableBodyScroll = modalElement => {
   }, [modalElement]);
 };
 
+const userHasReducedMotion = () => {
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Returns true if the component is visible tracking the opacity transition.
+ *
+ * @param ref Element on which to listen the transition event.
+ * @param isComponentVisible Whether the component intends to be visible or not.
+ * @param onVisibilityChange Callback called when the visibility changes.
+ * @return true if the component should be rendered
+ */
+const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) => {
+  const [isVisible, setVisible] = useState(isComponentVisible);
+  const previousVisibility = useRef(isVisible);
+
+  // On component visibility change.
+  useEffect(() => {
+    if (isComponentVisible) {
+      setVisible(true);
+      return undefined;
+    }
+    const {
+      current: element
+    } = ref;
+
+    // Transition event is not supported or the user prefers reduced motion.
+    // => Skip `transitionend` event listening and set visibility to false directly.
+    if (!element || !window.TransitionEvent || userHasReducedMotion()) {
+      setVisible(false);
+      return undefined;
+    }
+
+    // Update visibility on opacity transition end.
+    const onTransitionEnd = e => {
+      if (e.target !== ref.current || e.propertyName !== 'opacity') return;
+      setVisible(wasVisible => !wasVisible);
+    };
+    element.addEventListener('transitionend', onTransitionEnd);
+    return () => {
+      element.removeEventListener('transitionend', onTransitionEnd);
+    };
+  }, [isComponentVisible, ref]);
+  useEffect(() => {
+    if (onVisibilityChange && previousVisibility.current !== isVisible) {
+      onVisibilityChange(isVisible);
+      previousVisibility.current = isVisible;
+    }
+  }, [isVisible, onVisibilityChange]);
+  return isVisible || isComponentVisible;
+};
+
 const _excluded$h = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange"];
 
 /**
@@ -2827,14 +2840,14 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
   const footerChildProps = footerChild === null || footerChild === void 0 ? void 0 : footerChild.props;
   const footerChildContent = footerChildProps === null || footerChildProps === void 0 ? void 0 : footerChildProps.children;
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
-
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const clickAwayRefs = useRef([wrapperRef]);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const rootRef = useRef(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
   return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
   }, forwardedProps, {
@@ -6402,7 +6415,8 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(IconButton, _extends({}, toggleButtonProps, {
     color: color,
     emphasis: Emphasis.low,
-    icon: isOpen ? mdiChevronUp : mdiChevronDown
+    icon: isOpen ? mdiChevronUp : mdiChevronDown,
+    "aria-expanded": isOpen || 'false'
   })))), (isOpen || isContentVisible()) && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$k}__wrapper`,
     style: {
@@ -7266,7 +7280,6 @@ InputLabel.className = CLASSNAME$w;
 InputLabel.defaultProps = DEFAULT_PROPS$s;
 
 const _excluded$B = ["ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "preventAutoClose", "theme", "zIndex"];
-const LIGHTBOX_TRANSITION_DURATION = 400;
 
 /**
  * Defines the props of the component.
@@ -7318,7 +7331,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
   useDisableBodyScroll(isOpen && wrapperRef.current);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION);
+  const isVisible = useTransitionVisibility(wrapperRef, !!isOpen);
 
   // Handle focus trap.
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -7906,7 +7919,8 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     color,
     icon
   } = NOTIFICATION_CONFIGURATION[type] || {};
-  const isVisible = useDelayedVisibility(!!isOpen, NOTIFICATION_TRANSITION_DURATION);
+  const rootRef = useRef(null);
+  const isVisible = useTransitionVisibility(rootRef, !!isOpen);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
     if (isFunction(onActionClick)) {
@@ -7918,7 +7932,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   React.createElement("div", _extends({
-    ref: ref,
+    ref: mergeRefs(ref, rootRef),
     role: "alert"
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
@@ -8607,7 +8621,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$M;
 ProgressTrackerStepPanel.className = CLASSNAME$J;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$B;
 
-const _excluded$P = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value"];
+const _excluded$P = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -8651,10 +8665,11 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onChange,
       theme,
-      value
+      value,
+      inputProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$P);
-  const radioButtonId = useMemo(() => id || `${CLASSNAME$K.toLowerCase()}-${uid()}`, [id]);
+  const inputId = useMemo(() => id || `${CLASSNAME$K.toLowerCase()}-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -8672,18 +8687,19 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     }))
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$K}__input-wrapper`
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({
     ref: inputRef,
     className: `${CLASSNAME$K}__input-native`,
     disabled: isDisabled,
-    id: radioButtonId,
+    id: inputId,
     tabIndex: isDisabled ? -1 : 0,
     type: "radio",
     name: name,
     value: value,
     checked: isChecked,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement("div", {
+    onChange: handleChange,
+    "aria-describedby": helper ? `${inputId}-helper` : undefined
+  }, inputProps)), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$K}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$K}__input-background`
@@ -8692,10 +8708,11 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$K}__content`
   }, label && /*#__PURE__*/React.createElement(InputLabel, {
-    htmlFor: radioButtonId,
+    htmlFor: inputId,
     theme: theme,
     className: `${CLASSNAME$K}__label`
   }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
+    id: `${inputId}-helper`,
     theme: theme,
     className: `${CLASSNAME$K}__helper`
   }, helper)));
@@ -10572,7 +10589,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps = {}
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$13);
-  const switchId = useMemo(() => id || `switch-${uid()}`, [id]);
+  const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -10595,14 +10612,15 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
     role: "switch",
-    id: switchId,
+    id: inputId,
     className: `${CLASSNAME$Z}__input-native`,
     name: name,
     value: value,
     disabled: isDisabled,
     checked: isChecked,
     "aria-checked": Boolean(isChecked),
-    onChange: handleChange
+    onChange: handleChange,
+    "aria-describedby": helper ? `${inputId}-helper` : undefined
   }, inputProps)), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$Z}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
@@ -10612,10 +10630,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   }))), Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$Z}__content`
   }, /*#__PURE__*/React.createElement(InputLabel, {
-    htmlFor: switchId,
+    htmlFor: inputId,
     theme: theme,
     className: `${CLASSNAME$Z}__label`
   }, children), !isEmpty(helper) && /*#__PURE__*/React.createElement(InputHelper, {
+    id: `${inputId}-helper`,
     theme: theme,
     className: `${CLASSNAME$Z}__helper`
   }, helper)));