Bugfixes: Allow base props "className" and "style" to work on all components, fix some event listener issues.

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 .cache
 dist
-storybook-static
+storybook-static
+jest.config.js

src/WiredButton.tsx

@@ -26,6 +26,8 @@ export interface WiredButtonProps extends BaseProps {
 }
 
 export const WiredButton = ({
+  className,
+  style,
   onClick,
   elevation = 1,
   disabled = false,
@@ -34,10 +36,18 @@ export const WiredButton = ({
   const customValues = useMemo(() => {
     return {
       attributes: { disabled, elevation },
-      methods: { click: onClick },
     };
-  }, [elevation, disabled, onClick]);
+  }, [elevation, disabled]);
 
   const register = useCustomElement(customValues);
-  return <wired-button ref={register}>{children}</wired-button>;
+  return (
+    <wired-button
+      onClick={onClick}
+      class={className}
+      style={style}
+      ref={register}
+    >
+      {children}
+    </wired-button>
+  );
 };

src/WiredCalendar.tsx

@@ -78,6 +78,8 @@ export const WiredCalendar = ({
   selectedColor = 'red',
   dimmedColor = 'gray',
   onSelect,
+  className,
+  style,
 }: WiredCalendarProps) => {
   const customValues = useMemo(() => {
     return {
@@ -118,7 +120,13 @@ export const WiredCalendar = ({
   ]);
 
   const register = useCustomElement(customValues);
-  return <wired-calendar ref={register}></wired-calendar>;
+  return (
+    <wired-calendar
+      class={className}
+      style={style}
+      ref={register}
+    ></wired-calendar>
+  );
 };
 
 /*

src/WiredCard.tsx

@@ -29,6 +29,8 @@ export const WiredCard = ({
   elevation,
   fill,
   children,
+  className,
+  style,
 }: WiredCardProps) => {
   const customValues = useMemo(() => {
     return {
@@ -39,5 +41,9 @@ export const WiredCard = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-card ref={register}>{children}</wired-card>;
+  return (
+    <wired-card class={className} style={style} ref={register}>
+      {children}
+    </wired-card>
+  );
 };

src/WiredCheckBox.tsx

@@ -30,6 +30,8 @@ export const WiredCheckBox = ({
   color = 'currentColor',
   disabled = false,
   onChange,
+  className,
+  style,
 }: WiredCheckBoxProps) => {
   const customValues = useMemo(() => {
     return {
@@ -41,5 +43,5 @@ export const WiredCheckBox = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-checkbox ref={register} />;
+  return <wired-checkbox class={className} style={style} ref={register} />;
 };

src/WiredCombo.tsx

@@ -42,6 +42,8 @@ export const WiredCombo = ({
   onSelect,
   popupBgColor = 'white',
   selectedBgColor = 'gray',
+  className,
+  style,
 }: WiredComboProps) => {
   const customValues = useMemo(() => {
     return {
@@ -55,5 +57,9 @@ export const WiredCombo = ({
   }, [disabled, value, onSelect, popupBgColor, selectedBgColor]);
 
   const register = useCustomElement(customValues);
-  return <wired-combo ref={register}>{children}</wired-combo>;
+  return (
+    <wired-combo class={className} style={style} ref={register}>
+      {children}
+    </wired-combo>
+  );
 };

src/WiredDialog.tsx

@@ -30,6 +30,8 @@ export const WiredDialog = ({
   elevation = 1,
   open = false,
   zIndex = 1,
+  className,
+  style,
 }: WiredDialogProps) => {
   const customValues = useMemo(() => {
     return {
@@ -39,5 +41,9 @@ export const WiredDialog = ({
   }, [elevation, open, zIndex]);
 
   const register = useCustomElement(customValues);
-  return <wired-dialog ref={register}>{children}</wired-dialog>;
+  return (
+    <wired-dialog class={className} style={style} ref={register}>
+      {children}
+    </wired-dialog>
+  );
 };

src/WiredDivider.tsx

@@ -11,7 +11,11 @@ export interface WiredDividerProps extends BaseProps {
   elevation?: 1 | 2 | 3 | 4 | 5;
 }
 
-export const WiredDivider = ({ elevation = 1 }: WiredDividerProps) => {
+export const WiredDivider = ({
+  elevation = 1,
+  className,
+  style,
+}: WiredDividerProps) => {
   const customValues = useMemo(() => {
     return {
       attributes: { elevation },
@@ -20,5 +24,11 @@ export const WiredDivider = ({ elevation = 1 }: WiredDividerProps) => {
 
   const register = useCustomElement(customValues);
 
-  return <wired-divider ref={register}></wired-divider>;
+  return (
+    <wired-divider
+      class={className}
+      style={style}
+      ref={register}
+    ></wired-divider>
+  );
 };

src/WiredFab.tsx

@@ -42,6 +42,8 @@ export const WiredFab = ({
   icon = 'favorite',
   onClick,
   children,
+  className,
+  style,
 }: WiredFabProps) => {
   const customValues = useMemo(() => {
     return {
@@ -53,7 +55,7 @@ export const WiredFab = ({
 
   const register = useCustomElement(customValues);
   return (
-    <wired-fab ref={register}>
+    <wired-fab class={className} style={style} ref={register}>
       <span>
         {children || (
           <span className="material-icons" style={{ color: iconColor }}>

src/WiredIconButton.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { BaseProps } from './types';
 import { useCustomElement } from './utils/useCustomElement';
 import { Icon } from './utils/icons';
+
 const { useMemo } = React;
 
 export interface WiredIconButtonProps extends BaseProps {
@@ -30,10 +31,12 @@ export interface WiredIconButtonProps extends BaseProps {
    * @default favorite
    */
   icon?: Icon;
+
   /**
    * Event fired when button is clicked/submitted
    */
   onClick?(e: MouseEvent): void;
+
   /**
    * The children. Optionally pass in your own icon.
    */
@@ -48,18 +51,24 @@ export const WiredIconButton = ({
   iconSize = 24,
   onClick,
   children,
+  className,
+  style,
 }: WiredIconButtonProps) => {
   const customValues = useMemo(() => {
     return {
       attributes: { disabled },
-      methods: { click: onClick },
       css: { color: lineColor, '--mdc-icon-size': iconSize },
     };
-  }, [disabled, lineColor, iconSize, onClick]);
+  }, [disabled, lineColor, iconSize]);
 
   const register = useCustomElement(customValues);
   return (
-    <wired-icon-button ref={register}>
+    <wired-icon-button
+      onClick={onClick}
+      class={className}
+      style={style}
+      ref={register}
+    >
       <div style={{ height: '24px', width: '24px' }}>
         {children || (
           <span

src/WiredImage.tsx

@@ -19,6 +19,8 @@ export interface WiredImageProps extends BaseProps {
 export const WiredImage = ({
   elevation = 1,
   src = 'http://placekitten.com/200/300',
+  className,
+  style,
 }: WiredImageProps) => {
   const customValues = useMemo(() => {
     return {
@@ -27,5 +29,7 @@ export const WiredImage = ({
   }, [elevation, src]);
 
   const register = useCustomElement(customValues);
-  return <wired-image ref={register}></wired-image>;
+  return (
+    <wired-image class={className} style={style} ref={register}></wired-image>
+  );
 };

src/WiredInput.tsx

@@ -46,6 +46,8 @@ export const WiredInput = ({
   onChange,
   onBlur,
   onFocus,
+  className,
+  style,
 }: WiredInputProps) => {
   const customValues = useMemo(() => {
     return {
@@ -55,5 +57,7 @@ export const WiredInput = ({
   }, [placeholder, disabled, type, value, onChange, onBlur, onFocus]);
 
   const register = useCustomElement(customValues);
-  return <wired-input ref={register}></wired-input>;
+  return (
+    <wired-input class={className} style={style} ref={register}></wired-input>
+  );
 };

src/WiredItem.tsx

@@ -48,6 +48,8 @@ export const WiredItem = ({
   color = 'black',
   selected = false,
   onClick,
+  className,
+  style,
 }: WiredItemProps) => {
   const customValues = useMemo(() => {
     return {
@@ -60,10 +62,17 @@ export const WiredItem = ({
   }, [value, selectedBgColor, selectedColor, selected]);
 
   const register = useCustomElement(customValues);
+  const appliedStyle: any = { ...style };
+  appliedStyle.backgroundColor = selected
+    ? selectedBgColor
+    : style?.backgroundColor;
+  appliedStyle.color = selected ? selectedColor : color || style?.color;
   return (
     <wired-item
+      value={value}
+      class={className}
+      style={appliedStyle}
       onClick={() => onClick && onClick(selected)}
-      style={{ color: selected ? selectedColor : color }}
       ref={register}
     >
       {children}

src/WiredLink.tsx

@@ -40,6 +40,8 @@ export const WiredLink = ({
   color = 'black',
   lineColor = 'black',
   children,
+  className,
+  style,
 }: WiredLinkProps) => {
   const customValues = useMemo(() => {
     return {
@@ -50,5 +52,9 @@ export const WiredLink = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-link ref={register}>{children}</wired-link>;
+  return (
+    <wired-link class={className} style={style} ref={register}>
+      {children}
+    </wired-link>
+  );
 };

src/WiredListBox.tsx

@@ -41,6 +41,8 @@ export const WiredListBox = ({
   onSelect,
   color = 'black',
   bgColor = 'white',
+  className,
+  style,
 }: WiredListBoxProps) => {
   const customValues = useMemo(() => {
     return {
@@ -55,5 +57,14 @@ export const WiredListBox = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-listbox ref={register}>{children}</wired-listbox>;
+  return (
+    <wired-listbox
+      selected={selected}
+      class={className}
+      style={style}
+      ref={register}
+    >
+      {children}
+    </wired-listbox>
+  );
 };

src/WiredProgress.tsx

@@ -61,6 +61,8 @@ export const WiredProgress = ({
   progressBarColor = 'rgba(0, 0, 200, 0.8)',
   fontSize = 14,
   stuckAt,
+  className,
+  style,
 }: WiredProgressProps) => {
   const [stuckAtValue, setStuckAtValue] = useState<number | null>(null);
 
@@ -108,5 +110,11 @@ export const WiredProgress = ({
   ]);
 
   const register = useCustomElement(customValues);
-  return <wired-progress ref={register}></wired-progress>;
+  return (
+    <wired-progress
+      class={className}
+      style={style}
+      ref={register}
+    ></wired-progress>
+  );
 };

src/WiredRadio.tsx

@@ -41,6 +41,8 @@ export const WiredRadio = ({
   color = 'currentColor',
   onChange,
   children,
+  className,
+  style,
 }: WiredRadioProps) => {
   const customValues = useMemo(() => {
     return {
@@ -51,5 +53,9 @@ export const WiredRadio = ({
   }, [checked, disabled, name, color, onChange]);
 
   const register = useCustomElement(customValues);
-  return <wired-radio ref={register}>{children}</wired-radio>;
+  return (
+    <wired-radio class={className} style={style} ref={register}>
+      {children}
+    </wired-radio>
+  );
 };