@lumx/react 4.3.2-alpha.35 → 4.3.2-alpha.37

package/index.d.ts

@@ -647,7 +647,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;
 }
 
@@ -820,7 +821,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 +1872,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 +2771,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;
 }
@@ -3323,7 +3324,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 */
@@ -3363,9 +3364,7 @@ interface TableProps$1 extends HasTheme, HasClassName {
 /**
  * Defines the props of the component.
  */
-interface TableProps extends GenericProps$1, Omit<TableProps$1, 'ref'> {
-    /** Children */
-    children?: React.ReactNode;
+interface TableProps extends GenericProps$1, ReactToJSX<TableProps$1> {
 }
 /**
  * Table component.
@@ -3389,9 +3388,7 @@ interface TableBodyProps$1 extends HasClassName {
 /**
  * Defines the props of the component.
  */
-interface TableBodyProps extends GenericProps$1, Omit<TableBodyProps$1, 'ref'> {
-    /** Children */
-    children?: React.ReactNode;
+interface TableBodyProps extends GenericProps$1, ReactToJSX<TableBodyProps$1> {
 }
 /**
  * TableBody component.
@@ -3431,7 +3428,7 @@ interface TableCellProps$1 extends HasClassName {
     /** Variant. */
     variant?: TableCellVariant;
     /** On header cell click callback. */
-    onHeaderClick?(): void;
+    handleClick?(): void;
     /** Children */
     children?: JSXElement;
     /** reference to the root element */
@@ -3441,9 +3438,9 @@ interface TableCellProps$1 extends HasClassName {
 /**
  * Defines the props of the component.
  */
-interface TableCellProps extends GenericProps$1, Omit<TableCellProps$1, 'ref'> {
-    /** Children */
-    children?: React.ReactNode;
+interface TableCellProps extends GenericProps$1, ReactToJSX<TableCellProps$1> {
+    /** On header cell click callback. */
+    onHeaderClick?: () => void;
 }
 /**
  * TableCell component.
@@ -3467,9 +3464,7 @@ interface TableHeaderProps$1 extends HasClassName {
 /**
  * Defines the props of the component.
  */
-interface TableHeaderProps extends GenericProps$1, Omit<TableHeaderProps$1, 'ref'> {
-    /** Children */
-    children?: React.ReactNode;
+interface TableHeaderProps extends GenericProps$1, ReactToJSX<TableHeaderProps$1, 'ref'> {
 }
 /**
  * TableHeader component.
@@ -3499,11 +3494,9 @@ interface TableRowProps$1 extends HasClassName, HasAriaDisabled {
 /**
  * Defines the props of the component.
  */
-interface TableRowProps extends GenericProps$1, Omit<TableRowProps$1, 'ref' | 'tabIndex' | 'aria-disabled'> {
+interface TableRowProps extends GenericProps$1, ReactToJSX<TableRowProps$1, 'tabIndex' | 'aria-disabled'> {
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /** Children */
-    children?: React.ReactNode;
 }
 /**
  * TableRow component.

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
+          })]
+        })
       })
     })
   });
@@ -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,
@@ -13362,7 +13371,7 @@ const TableCell$1 = props => {
     className,
     icon,
     isSortable,
-    onHeaderClick,
+    handleClick,
     ref,
     sortOrder,
     variant = DEFAULT_PROPS$e.variant,
@@ -13370,10 +13379,10 @@ const TableCell$1 = props => {
   } = props;
 
   // Use button if clickable
-  const Wrapper = onHeaderClick ? 'button' : 'div';
+  const Wrapper = handleClick ? 'button' : 'div';
   const wrapperProps = Wrapper === 'button' ? {
     type: 'button',
-    onClick: onHeaderClick
+    onClick: handleClick
   } : undefined;
 
   // ARIA sort
@@ -13440,13 +13449,13 @@ const TableCell$1 = props => {
  */
 const TableCell = forwardRef((props, ref) => {
   const {
-    children,
+    onHeaderClick,
     ...otherProps
   } = props;
   return TableCell$1({
     ref,
-    children,
-    ...otherProps
+    ...otherProps,
+    handleClick: onHeaderClick
   });
 });
 TableCell.displayName = COMPONENT_NAME$a;
@@ -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)