@lumx/react 4.3.2-alpha.36 → 4.3.2-alpha.38

package/index.d.ts

@@ -39,7 +39,6 @@ interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     title?: string;
     /** Props forwarded to the confirm button */
     confirmProps: ButtonProps & {
-        onClick(): void;
         label: string;
     };
     /**
@@ -47,7 +46,6 @@ interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
      * Will not render a cancel button if undefined.
      */
     cancelProps?: ButtonProps & {
-        onClick(): void;
         label: string;
     };
     /**
@@ -647,7 +645,8 @@ declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
 
 interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
     children?: JSXElement;
-    onClick?: (event?: any) => void;
+    handleClick?: (event?: any) => void;
+    handleKeyPress?: (event?: any) => void;
     ref?: CommonRef;
 }
 
@@ -725,7 +724,7 @@ declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
 
 interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
     /** callback for clicking on the button */
-    onClick?: (event: React.MouseEvent) => void;
+    onClick?: (event?: React.MouseEvent) => void;
 }
 /**
  * Button component.
@@ -765,7 +764,7 @@ interface IconButtonProps extends GenericProps$1, ReactToJSX<IconButtonProps$1,
     /** Whether the tooltip should be hidden or not. */
     hideTooltip?: boolean;
     /** callback for clicking on the button */
-    onClick?: (event: React.MouseEvent) => void;
+    onClick?: (event?: React.MouseEvent) => void;
 }
 /**
  * IconButton component.
@@ -820,7 +819,7 @@ interface CheckboxProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDi
     /** Native input id. */
     inputId: string;
     /** On change callback. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+    handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
     /** reference to the root element */
     ref?: CommonRef;
 }
@@ -1871,9 +1870,9 @@ interface ThumbnailProps$1 extends HasTheme$1, HasClassName$1 {
     /** Ref of an existing placeholder image to display while loading. */
     loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
-    onClick?: (event: any) => void;
+    handleClick?: (event: any) => void;
     /** On key press callback. */
-    onKeyPress?: (event: any) => void;
+    handleKeyPress?: (event: any) => void;
     /** Variant of the component. */
     variant?: ThumbnailVariant$1;
     /** Props to pass to the link wrapping the thumbnail. */
@@ -2770,7 +2769,7 @@ interface RadioButtonProps$1 extends HasTheme, HasClassName, HasAriaDisabled, Ha
     /** Native input id. */
     inputId: string;
     /** On change callback. */
-    onChange?(value?: string, name?: string, event?: any): void;
+    handleChange?(value?: string, name?: string, event?: any): void;
     /** reference to the root element */
     ref?: CommonRef;
 }
@@ -2851,7 +2850,7 @@ interface CoreSelectProps extends GenericProps$1, HasTheme$1 {
     /** Select variant. */
     variant?: SelectVariant;
     /** On clear callback. */
-    onClear?(event: SyntheticEvent, value?: string): void;
+    onClear?(event?: SyntheticEvent, value?: string): void;
     /** On blur callback. */
     onBlur?(): void;
     /** On filter text change callback (with 500ms debounce). */
@@ -3323,7 +3322,7 @@ interface SwitchProps$1 extends HasTheme, HasClassName, HasAriaDisabled, HasDisa
     /** Native input id. */
     inputId: string;
     /** On change callback. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+    handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
     /** Position of the switch relative to the label. */
     position?: 'left' | 'right';
     /** reference to the root element */

package/index.js

@@ -1026,10 +1026,11 @@ BadgeWrapper.className = CLASSNAME$1e;
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
  */
-const RawClickable$1 = props => {
+const RawClickable = props => {
   const {
     children,
-    onClick,
+    handleClick,
+    handleKeyPress,
     disabled,
     isDisabled = disabled,
     'aria-disabled': ariaDisabled,
@@ -1053,13 +1054,14 @@ const RawClickable$1 = props => {
     "aria-disabled": isAnyDisabled || undefined,
     ...forwardedProps,
     ...clickableProps,
+    onKeyPress: handleKeyPress,
     onClick: event => {
       if (isAnyDisabled) {
         event.stopPropagation();
         event.preventDefault();
         return;
       }
-      onClick?.(event);
+      handleClick?.(event);
     },
     children: children
   });
@@ -1156,7 +1158,7 @@ const ButtonRoot = props => {
     [`variant-${variant}`]: Boolean(variant),
     'is-full-width': fullWidth
   }));
-  return RawClickable$1({
+  return RawClickable({
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
     ...forwardedProps,
     'aria-disabled': ariaDisabled,
@@ -1255,6 +1257,10 @@ const Button = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
+  const {
+    onClick,
+    ...restOfOtherProps
+  } = otherProps;
   const {
     leftIcon,
     rightIcon,
@@ -1264,8 +1270,9 @@ const Button = forwardRef((props, ref) => {
     ref,
     theme: defaultTheme,
     ...disabledStateProps,
-    ...otherProps,
+    ...restOfOtherProps,
     'aria-disabled': isAnyDisabled,
+    handleClick: onClick,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && !isEmpty(leftIcon) &&
       /*#__PURE__*/
@@ -1463,6 +1470,10 @@ const IconButton = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(forwardedProps);
+  const {
+    onClick,
+    ...restOfOtherProps
+  } = otherProps;
   return /*#__PURE__*/jsx(Tooltip, {
     label: hideTooltip ? '' : label,
     ...tooltipProps,
@@ -1470,7 +1481,8 @@ const IconButton = forwardRef((props, ref) => {
       ref,
       theme: defaultTheme,
       ...disabledStateProps,
-      ...otherProps,
+      ...restOfOtherProps,
+      handleClick: onClick,
       'aria-disabled': isAnyDisabled,
       label
     })
@@ -1669,7 +1681,7 @@ const Checkbox$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -1678,9 +1690,9 @@ const Checkbox$1 = props => {
     ...forwardedProps
   } = props;
   const intermediateState = isChecked === INTERMEDIATE_STATE;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(!isChecked, value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(!isChecked, value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -1703,7 +1715,7 @@ const Checkbox$1 = props => {
         name: name,
         value: value,
         checked: isChecked,
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
         ...(inputProps?.readOnly ? {
@@ -1792,7 +1804,7 @@ const Checkbox = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -9264,7 +9276,7 @@ const Message$1 = props => {
     }), isCloseButtonDisplayed && IconButton$1({
       className: element$r('close-button'),
       icon: mdiClose,
-      onClick,
+      handleClick: onClick,
       label: closeButtonLabel,
       emphasis: Emphasis.low
     })]
@@ -9375,20 +9387,6 @@ Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$G;
 
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-const RawClickable = forwardRefPolymorphic((props, ref) => {
-  return RawClickable$1({
-    ref,
-    ...props
-  });
-});
-
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
 });
@@ -9441,31 +9439,33 @@ const NavigationSection = forwardRef((props, ref) => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     ref: ref,
-    children: [/*#__PURE__*/jsxs(RawClickable, {
-      as: "button",
+    children: [RawClickable({
+      as: 'button',
       ...forwardedProps,
-      "aria-controls": sectionId,
-      "aria-expanded": isOpen,
+      'aria-controls': sectionId,
+      'aria-expanded': isOpen,
       className: itemElement('link'),
       ref: buttonRef,
-      onClick: event => {
+      handleClick: event => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
-      children: [icon ? /*#__PURE__*/jsx(Icon, {
-        className: itemElement('icon'),
-        icon: icon,
-        size: Size$1.xs
-      }) : null, /*#__PURE__*/jsx(Text, {
-        as: "span",
-        truncate: true,
-        className: itemElement('label'),
-        ref: ref,
-        children: label
-      }), /*#__PURE__*/jsx(Icon, {
-        className: classNames.join(itemElement('icon'), sectionElement('chevron')),
-        icon: isOpen ? mdiChevronUp : mdiChevronDown
-      })]
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [icon ? /*#__PURE__*/jsx(Icon, {
+          className: itemElement('icon'),
+          icon: icon,
+          size: Size$1.xs
+        }) : null, /*#__PURE__*/jsx(Text, {
+          as: "span",
+          truncate: true,
+          className: itemElement('label'),
+          ref: ref,
+          children: label
+        }), /*#__PURE__*/jsx(Icon, {
+          className: classNames.join(itemElement('icon'), sectionElement('chevron')),
+          icon: isOpen ? mdiChevronUp : mdiChevronDown
+        })]
+      })
     }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
       anchorRef: buttonRef,
       isOpen: isOpen,
@@ -9501,6 +9501,9 @@ const NavigationSection = forwardRef((props, ref) => {
 NavigationSection.displayName = COMPONENT_NAME$C;
 NavigationSection.className = CLASSNAME$D;
 
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
 const {
   block: block$z,
   element: element$p
@@ -9517,6 +9520,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     label,
     isCurrentPage,
     as: Element = 'a',
+    onClick,
     ...forwardedProps
   } = props;
   const theme = useTheme();
@@ -9531,26 +9535,29 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     children: /*#__PURE__*/jsx(Tooltip, {
       label: tooltipLabel,
       placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(RawClickable, {
+      children: RawClickable({
         as: Element,
         className: element$p('link', {
           'is-selected': isCurrentPage
         }),
-        ref: ref,
-        "aria-current": isCurrentPage ? 'page' : undefined,
+        ref,
+        'aria-current': isCurrentPage ? 'page' : undefined,
         ...forwardedProps,
-        children: [icon ? /*#__PURE__*/jsx(Icon, {
-          className: element$p('icon'),
-          icon: icon,
-          size: Size$1.xs,
-          theme: theme
-        }) : null, /*#__PURE__*/jsx(Text, {
-          as: "span",
-          truncate: true,
-          className: element$p('label'),
-          ref: labelRef,
-          children: label
-        })]
+        handleClick: onClick,
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [icon ? /*#__PURE__*/jsx(Icon, {
+            className: element$p('icon'),
+            icon: icon,
+            size: Size$1.xs,
+            theme: theme
+          }) : null, /*#__PURE__*/jsx(Text, {
+            as: "span",
+            truncate: true,
+            className: element$p('label'),
+            ref: labelRef,
+            children: label
+          })]
+        })
       })
     })
   });
@@ -9700,7 +9707,7 @@ const Notification = forwardRef((props, ref) => {
     if (isFunction(onActionClick)) {
       onActionClick();
     }
-    evt.stopPropagation();
+    evt?.stopPropagation();
   };
   if (!type || !isVisible) {
     return null;
@@ -10671,7 +10678,7 @@ const RadioButton$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -10679,9 +10686,9 @@ const RadioButton$1 = props => {
     inputId,
     ...forwardedProps
   } = props;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -10703,7 +10710,7 @@ const RadioButton$1 = props => {
         name: name,
         value: value,
         checked: isChecked,
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...(inputProps?.readOnly ? {
           readOnly: inputProps.readOnly
@@ -10782,7 +10789,7 @@ const RadioButton = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -11413,18 +11420,20 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })),
     children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
       className: element$d('wrapper'),
-      children: [/*#__PURE__*/jsxs(RawClickable, {
+      children: [RawClickable({
         as: linkAs || (linkProps?.href ? 'a' : 'button'),
         ...linkProps,
         className: element$d('link'),
-        onClick: onClick,
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: element$d('icon'),
-          icon: icon,
-          size: Size$1.xs
-        }), /*#__PURE__*/jsx("span", {
-          children: label
-        })]
+        handleClick: onClick,
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [icon && /*#__PURE__*/jsx(Icon, {
+            className: element$d('icon'),
+            icon: icon,
+            size: Size$1.xs
+          }), /*#__PURE__*/jsx("span", {
+            children: label
+          })]
+        })
       }), /*#__PURE__*/jsx(IconButton, {
         ...toggleButtonProps,
         className: element$d('toggle'),
@@ -13041,7 +13050,7 @@ const Switch$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -13050,9 +13059,9 @@ const Switch$1 = props => {
     position = DEFAULT_PROPS$h.position,
     ...forwardedProps
   } = props;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(!isChecked, value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(!isChecked, value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -13076,7 +13085,7 @@ const Switch$1 = props => {
         name: name,
         value: value,
         checked: Boolean(isChecked),
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         "aria-checked": Boolean(isChecked),
         ...(inputProps?.readOnly ? {
@@ -13160,7 +13169,7 @@ const Switch = forwardRef((props, ref) => {
     isChecked,
     label: children,
     name,
-    onChange,
+    handleChange: onChange,
     position,
     theme,
     value,
@@ -14134,9 +14143,9 @@ const TextField = forwardRef((props, ref) => {
    * @param evt On clear event.
    */
   const handleClear = evt => {
-    evt.nativeEvent.preventDefault();
-    evt.nativeEvent.stopPropagation();
-    evt.currentTarget.blur();
+    evt?.nativeEvent.preventDefault();
+    evt?.nativeEvent.stopPropagation();
+    (evt?.currentTarget).blur();
     onChange('');
     if (onClear) {
       onClear(evt);
@@ -14464,6 +14473,8 @@ const Thumbnail$1 = props => {
     variant,
     linkProps,
     linkAs,
+    handleClick,
+    handleKeyPress,
     ...forwardedProps
   } = props;
   const isLoading = isLoadingProp || loadingState === 'isLoading';
@@ -14479,7 +14490,7 @@ const Thumbnail$1 = props => {
     imageErrorStyle.display = 'none';
   }
   const isLink = Boolean(linkProps?.href || linkAs);
-  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!handleClick || !!handleKeyPress);
   const wrapperProps = {
     ...forwardedProps
   };
@@ -14557,11 +14568,13 @@ const Thumbnail$1 = props => {
 
   /** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
   if (isClickable) {
-    return RawClickable$1({
+    return RawClickable({
       ref,
       ...wrapperProps,
       className: wrapperClassName,
-      children: innerImage
+      children: innerImage,
+      handleClick,
+      handleKeyPress
     });
   }
   return /*#__PURE__*/jsx("div", {
@@ -14668,6 +14681,8 @@ const Thumbnail = forwardRef((props, ref) => {
     focusPoint,
     image,
     imgRef: propImgRef,
+    onClick,
+    onKeyPress,
     ...forwardedProps
   } = otherProps;
   const [imgElement, setImgElement] = useState();
@@ -14687,6 +14702,8 @@ const Thumbnail = forwardRef((props, ref) => {
     focusPointStyle,
     loadingState,
     imgRef: useMergeRefs(setImgElement, propImgRef),
+    handleClick: onClick,
+    handleKeyPress: onKeyPress,
     image,
     badge: badge && /*#__PURE__*/React__default.cloneElement(badge, {
       className: classNames.join(element$4('badge'), badge.props.className)