@lumx/react 3.0.5-alpha.1 → 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

@@ -2673,6 +2673,14 @@ 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.
  *
@@ -2684,29 +2692,25 @@ const useDisableBodyScroll = modalElement => {
 const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) => {
   const [isVisible, setVisible] = useState(isComponentVisible);
   const previousVisibility = useRef(isVisible);
+
+  // On component visibility change.
   useEffect(() => {
     if (isComponentVisible) {
       setVisible(true);
-    } else if (!window.TransitionEvent) {
-      // Transition event is not available so visibility is set to false directly.
-      setVisible(false);
-    }
-  }, [isComponentVisible]);
-  useEffect(() => {
-    if (onVisibilityChange && previousVisibility.current !== isVisible) {
-      onVisibilityChange(isVisible);
-      previousVisibility.current = isVisible;
+      return undefined;
     }
-  }, [isVisible, onVisibilityChange]);
-  useEffect(() => {
     const {
       current: element
     } = ref;
-    if (!element) {
+
+    // 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;
     }
 
-    // Listen opacity transition
+    // Update visibility on opacity transition end.
     const onTransitionEnd = e => {
       if (e.target !== ref.current || e.propertyName !== 'opacity') return;
       setVisible(wasVisible => !wasVisible);
@@ -2715,7 +2719,13 @@ const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) =>
     return () => {
       element.removeEventListener('transitionend', onTransitionEnd);
     };
-  });
+  }, [isComponentVisible, ref]);
+  useEffect(() => {
+    if (onVisibilityChange && previousVisibility.current !== isVisible) {
+      onVisibilityChange(isVisible);
+      previousVisibility.current = isVisible;
+    }
+  }, [isVisible, onVisibilityChange]);
   return isVisible || isComponentVisible;
 };
 
@@ -6405,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: {
@@ -8610,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.
@@ -8654,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);
@@ -8675,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`
@@ -8695,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)));
@@ -10575,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);
@@ -10598,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", {
@@ -10615,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)));