From 9e20317f5c89033f02f629248538e34bb430ce50 Mon Sep 17 00:00:00 2001 From: "tobias.goeschel" Date: Wed, 22 Apr 2020 00:50:16 +0200 Subject: [PATCH 1/6] Workaround to fix an issue that prevents className and style base properties from being forwarded to web components. See github.com/facebook/react/issues/4933 --- .gitignore | 3 +- src/WiredButton.tsx | 8 +- src/WiredCalendar.tsx | 10 ++- src/WiredCard.tsx | 8 +- src/WiredCheckBox.tsx | 4 +- src/WiredCombo.tsx | 8 +- src/WiredDialog.tsx | 8 +- src/WiredDivider.tsx | 14 ++- src/WiredFab.tsx | 4 +- src/WiredIconButton.tsx | 7 +- src/WiredImage.tsx | 6 +- src/WiredInput.tsx | 6 +- src/WiredItem.tsx | 10 ++- src/WiredLink.tsx | 8 +- src/WiredListBox.tsx | 8 +- src/WiredProgress.tsx | 10 ++- src/WiredRadio.tsx | 8 +- src/WiredRadioGroup.tsx | 8 +- src/WiredSearchInput.tsx | 10 ++- src/WiredSlider.tsx | 6 +- src/WiredSpinner.tsx | 10 ++- src/WiredTab.tsx | 11 ++- src/WiredTextArea.tsx | 10 ++- src/WiredToggle.tsx | 6 +- src/WiredVideo.tsx | 6 +- test/WiredButton.test.tsx | 12 ++- test/WiredCalendar.test.tsx | 11 ++- test/WiredCard.test.tsx | 11 ++- test/WiredCheckBox.test.tsx | 10 ++- test/WiredCombo.test.tsx | 9 +- test/WiredDialog.test.tsx | 9 +- test/WiredDivider.test.tsx | 11 ++- test/WiredFab.test.tsx | 9 +- test/WiredIconButton.test.tsx | 13 ++- test/WiredImage.test.tsx | 11 ++- test/WiredInput.test.tsx | 11 ++- test/WiredItem.test.tsx | 29 +++++- test/WiredLink.test.tsx | 12 ++- test/WiredListBox.test.tsx | 11 ++- test/WiredProgress.test.tsx | 11 ++- test/WiredRadio.test.tsx | 11 ++- test/WiredRadioGroup.test.tsx | 11 ++- test/WiredSearchInput.test.tsx | 11 ++- test/WiredSlider.test.tsx | 11 ++- test/WiredSpinner.test.tsx | 11 ++- test/WiredTab.test.tsx | 8 +- test/WiredTextArea.test.tsx | 11 ++- test/WiredToggle.test.tsx | 11 ++- test/WiredVideo.test.tsx | 11 ++- yarn.lock | 157 ++------------------------------- 50 files changed, 408 insertions(+), 222 deletions(-) diff --git a/.gitignore b/.gitignore index ada6753..a9add3f 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ node_modules .cache dist -storybook-static \ No newline at end of file +storybook-static +jest.config.js diff --git a/src/WiredButton.tsx b/src/WiredButton.tsx index eb08351..61da36a 100644 --- a/src/WiredButton.tsx +++ b/src/WiredButton.tsx @@ -26,6 +26,8 @@ export interface WiredButtonProps extends BaseProps { } export const WiredButton = ({ + className, + style, onClick, elevation = 1, disabled = false, @@ -39,5 +41,9 @@ export const WiredButton = ({ }, [elevation, disabled, onClick]); const register = useCustomElement(customValues); - return {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredCalendar.tsx b/src/WiredCalendar.tsx index 7fa2859..1eed263 100644 --- a/src/WiredCalendar.tsx +++ b/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 ; + return ( + + ); }; /* diff --git a/src/WiredCard.tsx b/src/WiredCard.tsx index b86c6a8..805c78f 100644 --- a/src/WiredCard.tsx +++ b/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 {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredCheckBox.tsx b/src/WiredCheckBox.tsx index 9041228..8ccf93c 100644 --- a/src/WiredCheckBox.tsx +++ b/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 ; + return ; }; diff --git a/src/WiredCombo.tsx b/src/WiredCombo.tsx index 55a1989..efe737d 100644 --- a/src/WiredCombo.tsx +++ b/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 {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredDialog.tsx b/src/WiredDialog.tsx index 0dda1c4..69750ac 100644 --- a/src/WiredDialog.tsx +++ b/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 {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredDivider.tsx b/src/WiredDivider.tsx index d58aceb..79816b6 100644 --- a/src/WiredDivider.tsx +++ b/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 ; + return ( + + ); }; diff --git a/src/WiredFab.tsx b/src/WiredFab.tsx index 48d07ea..42881a6 100644 --- a/src/WiredFab.tsx +++ b/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 ( - + {children || ( diff --git a/src/WiredIconButton.tsx b/src/WiredIconButton.tsx index f2e8b92..42f4175 100644 --- a/src/WiredIconButton.tsx +++ b/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,6 +51,8 @@ export const WiredIconButton = ({ iconSize = 24, onClick, children, + className, + style, }: WiredIconButtonProps) => { const customValues = useMemo(() => { return { @@ -59,7 +64,7 @@ export const WiredIconButton = ({ const register = useCustomElement(customValues); return ( - +
{children || ( { const customValues = useMemo(() => { return { @@ -27,5 +29,7 @@ export const WiredImage = ({ }, [elevation, src]); const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredInput.tsx b/src/WiredInput.tsx index 5680875..01bbf76 100644 --- a/src/WiredInput.tsx +++ b/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 ; + return ( + + ); }; diff --git a/src/WiredItem.tsx b/src/WiredItem.tsx index 5d736c9..a85cd75 100644 --- a/src/WiredItem.tsx +++ b/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,16 @@ 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 ( onClick && onClick(selected)} - style={{ color: selected ? selectedColor : color }} ref={register} > {children} diff --git a/src/WiredLink.tsx b/src/WiredLink.tsx index 1052e18..b9b683b 100644 --- a/src/WiredLink.tsx +++ b/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 {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredListBox.tsx b/src/WiredListBox.tsx index a37727d..d4681c7 100644 --- a/src/WiredListBox.tsx +++ b/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,9 @@ export const WiredListBox = ({ const register = useCustomElement(customValues); - return {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredProgress.tsx b/src/WiredProgress.tsx index 1f242a3..e34b920 100644 --- a/src/WiredProgress.tsx +++ b/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(null); @@ -108,5 +110,11 @@ export const WiredProgress = ({ ]); const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredRadio.tsx b/src/WiredRadio.tsx index ad35bc8..46700bf 100644 --- a/src/WiredRadio.tsx +++ b/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 {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredRadioGroup.tsx b/src/WiredRadioGroup.tsx index 232b336..8f77b0b 100644 --- a/src/WiredRadioGroup.tsx +++ b/src/WiredRadioGroup.tsx @@ -22,6 +22,8 @@ export const WiredRadioGroup = ({ children, selected, onSelect, + className, + style, }: WiredRadioGroupProps) => { const customValues = useMemo(() => { return { @@ -31,5 +33,9 @@ export const WiredRadioGroup = ({ }, [selected, onSelect]); const register = useCustomElement(customValues); - return {children}; + return ( + + {children} + + ); }; diff --git a/src/WiredSearchInput.tsx b/src/WiredSearchInput.tsx index a3f49f8..0d05ac5 100644 --- a/src/WiredSearchInput.tsx +++ b/src/WiredSearchInput.tsx @@ -39,6 +39,8 @@ export const WiredSearchInput = ({ onChange, onBlur, onFocus, + className, + style, }: WiredSearchInputProps) => { const customValues = useMemo(() => { return { @@ -48,5 +50,11 @@ export const WiredSearchInput = ({ }, [placeholder, disabled, value, onChange, onBlur, onFocus]); const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredSlider.tsx b/src/WiredSlider.tsx index 3c9adc2..5b5d4c9 100644 --- a/src/WiredSlider.tsx +++ b/src/WiredSlider.tsx @@ -50,6 +50,8 @@ export const WiredSlider = ({ knobColor = 'rgba(0, 0, 200, 0.8)', barColor = 'currentColor', onChange, + className, + style, }: WiredSliderProps) => { const customValues = useMemo(() => { return { @@ -64,5 +66,7 @@ export const WiredSlider = ({ }, [value, min, max, knobZeroColor, knobColor, barColor, onChange]); const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredSpinner.tsx b/src/WiredSpinner.tsx index 5b715a3..03ce599 100644 --- a/src/WiredSpinner.tsx +++ b/src/WiredSpinner.tsx @@ -25,6 +25,8 @@ export const WiredSpinner = ({ spinning = false, duration = 1500, color = 'black', + className, + style, }: WiredSpinnerProps) => { const customValues = useMemo(() => { return { @@ -35,5 +37,11 @@ export const WiredSpinner = ({ const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredTab.tsx b/src/WiredTab.tsx index 69b53ac..a83102c 100644 --- a/src/WiredTab.tsx +++ b/src/WiredTab.tsx @@ -18,7 +18,13 @@ export interface WiredTabProps extends BaseProps { children?: React.ReactNode; } -export const WiredTab = ({ children, name, label }: WiredTabProps) => { +export const WiredTab = ({ + children, + name, + label, + className, + style, +}: WiredTabProps) => { const customValues = useMemo(() => { return { attributes: { name, label }, @@ -26,8 +32,9 @@ export const WiredTab = ({ children, name, label }: WiredTabProps) => { }, [name, label]); const register = useCustomElement(customValues); + const appliedStyle = { ...style, minWidth: '200px' }; return ( - + {children} ); diff --git a/src/WiredTextArea.tsx b/src/WiredTextArea.tsx index abed453..c270636 100644 --- a/src/WiredTextArea.tsx +++ b/src/WiredTextArea.tsx @@ -51,6 +51,8 @@ export const WiredTextArea = ({ onChange, onBlur, onFocus, + className, + style, }: WiredTextAreaProps) => { const customValues = useMemo(() => { return { @@ -60,7 +62,13 @@ export const WiredTextArea = ({ }, [placeholder, disabled, value, rows, maxRows, onChange, onBlur, onFocus]); const register = useCustomElement(customValues); - return ; + return ( + + ); }; /* diff --git a/src/WiredToggle.tsx b/src/WiredToggle.tsx index c9f5cc4..64fa142 100644 --- a/src/WiredToggle.tsx +++ b/src/WiredToggle.tsx @@ -36,6 +36,8 @@ export const WiredToggle = ({ onChange, activeColor = 'rgb(63, 81, 181)', inactiveColor = 'gray', + className, + style, }: WiredToggleProps) => { const customValues = useMemo(() => { return { @@ -50,5 +52,7 @@ export const WiredToggle = ({ const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/src/WiredVideo.tsx b/src/WiredVideo.tsx index a6da016..4c1f710 100644 --- a/src/WiredVideo.tsx +++ b/src/WiredVideo.tsx @@ -43,6 +43,8 @@ export const WiredVideo = ({ muted = false, playsInline = false, color = 'black', + className, + style, }: WiredVideoProps) => { const customValues = useMemo(() => { return { @@ -59,5 +61,7 @@ export const WiredVideo = ({ const register = useCustomElement(customValues); - return ; + return ( + + ); }; diff --git a/test/WiredButton.test.tsx b/test/WiredButton.test.tsx index ee8f41b..48da539 100644 --- a/test/WiredButton.test.tsx +++ b/test/WiredButton.test.tsx @@ -1,11 +1,17 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import * as ReactDOM from 'react-dom'; import { WiredButton } from '../src/WiredButton'; describe('WiredButton', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + let button: ReactElement = ( + + ); + ReactDOM.render(button, div); + expect(div.innerHTML).toMatch( + 'Click Me!' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredCalendar.test.tsx b/test/WiredCalendar.test.tsx index bde6fe1..7a4cac3 100644 --- a/test/WiredCalendar.test.tsx +++ b/test/WiredCalendar.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredCalendar } from '../src/WiredCalendar'; describe('WiredCalendar', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredCard.test.tsx b/test/WiredCard.test.tsx index 993a64b..d102cdb 100644 --- a/test/WiredCard.test.tsx +++ b/test/WiredCard.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredCard } from '../src/WiredCard'; describe('WiredCard', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredCheckBox.test.tsx b/test/WiredCheckBox.test.tsx index a9b7e84..032b74b 100644 --- a/test/WiredCheckBox.test.tsx +++ b/test/WiredCheckBox.test.tsx @@ -3,9 +3,15 @@ import * as ReactDOM from 'react-dom'; import { WiredCheckBox } from '../src/WiredCheckBox'; describe('WiredCheckBox', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredCombo.test.tsx b/test/WiredCombo.test.tsx index b05797a..8131537 100644 --- a/test/WiredCombo.test.tsx +++ b/test/WiredCombo.test.tsx @@ -5,7 +5,14 @@ import { WiredCombo } from '../src/WiredCombo'; describe('WiredCombo', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredDialog.test.tsx b/test/WiredDialog.test.tsx index b8ebddf..8b81cbd 100644 --- a/test/WiredDialog.test.tsx +++ b/test/WiredDialog.test.tsx @@ -5,7 +5,14 @@ import { WiredDialog } from '../src/WiredDialog'; describe('WiredDialog', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredDivider.test.tsx b/test/WiredDivider.test.tsx index ea1f565..ff6f10e 100644 --- a/test/WiredDivider.test.tsx +++ b/test/WiredDivider.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredDivider } from '../src/WiredDivider'; describe('WiredDivider', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredFab.test.tsx b/test/WiredFab.test.tsx index 90ad5ed..4f4dce8 100644 --- a/test/WiredFab.test.tsx +++ b/test/WiredFab.test.tsx @@ -3,9 +3,14 @@ import * as ReactDOM from 'react-dom'; import { WiredFab } from '../src/WiredFab'; describe('WiredFab', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render(, div); + expect(div.innerHTML).toMatch( + '' + + 'favorite' + + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredIconButton.test.tsx b/test/WiredIconButton.test.tsx index cbde578..6afb7f0 100644 --- a/test/WiredIconButton.test.tsx +++ b/test/WiredIconButton.test.tsx @@ -3,9 +3,18 @@ import * as ReactDOM from 'react-dom'; import { WiredIconButton } from '../src/WiredIconButton'; describe('WiredIconButton', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + expect(div.innerHTML).toMatch( + '' + + '
favorite
' + + '' + ); + ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredImage.test.tsx b/test/WiredImage.test.tsx index df6e23a..d50eb0a 100644 --- a/test/WiredImage.test.tsx +++ b/test/WiredImage.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredImage } from '../src/WiredImage'; describe('WiredImage', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredInput.test.tsx b/test/WiredInput.test.tsx index f4efe10..28e7b88 100644 --- a/test/WiredInput.test.tsx +++ b/test/WiredInput.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredInput } from '../src/WiredInput'; describe('WiredInput', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredItem.test.tsx b/test/WiredItem.test.tsx index 35d69d4..c39234b 100644 --- a/test/WiredItem.test.tsx +++ b/test/WiredItem.test.tsx @@ -3,9 +3,34 @@ import * as ReactDOM from 'react-dom'; import { WiredItem } from '../src/WiredItem'; describe('WiredItem', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); + ReactDOM.unmountComponentAtNode(div); + }); + + it('renders with selected colors', () => { + const div = document.createElement('div'); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredLink.test.tsx b/test/WiredLink.test.tsx index 0a76e75..9033423 100644 --- a/test/WiredLink.test.tsx +++ b/test/WiredLink.test.tsx @@ -3,9 +3,17 @@ import * as ReactDOM from 'react-dom'; import { WiredLink } from '../src/WiredLink'; describe('WiredLink', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); + ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredListBox.test.tsx b/test/WiredListBox.test.tsx index 92640aa..40e69c8 100644 --- a/test/WiredListBox.test.tsx +++ b/test/WiredListBox.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredListBox } from '../src/WiredListBox'; describe('WiredListBox', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredProgress.test.tsx b/test/WiredProgress.test.tsx index 2248d5d..afa8bc4 100644 --- a/test/WiredProgress.test.tsx +++ b/test/WiredProgress.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredProgress } from '../src/WiredProgress'; describe('WiredProgress', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredRadio.test.tsx b/test/WiredRadio.test.tsx index c5e0832..4b382cf 100644 --- a/test/WiredRadio.test.tsx +++ b/test/WiredRadio.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredRadio } from '../src/WiredRadio'; describe('WiredRadio', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredRadioGroup.test.tsx b/test/WiredRadioGroup.test.tsx index 1bce1fa..af69d4b 100644 --- a/test/WiredRadioGroup.test.tsx +++ b/test/WiredRadioGroup.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredRadioGroup } from '../src/WiredRadioGroup'; describe('WiredRadioGroup', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredSearchInput.test.tsx b/test/WiredSearchInput.test.tsx index 4410e76..a6ad5bd 100644 --- a/test/WiredSearchInput.test.tsx +++ b/test/WiredSearchInput.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredSearchInput } from '../src/WiredSearchInput'; describe('WiredSearchInput', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredSlider.test.tsx b/test/WiredSlider.test.tsx index 88a3078..3558d02 100644 --- a/test/WiredSlider.test.tsx +++ b/test/WiredSlider.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredSlider } from '../src/WiredSlider'; describe('WiredSlider', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredSpinner.test.tsx b/test/WiredSpinner.test.tsx index 470da7c..3c76556 100644 --- a/test/WiredSpinner.test.tsx +++ b/test/WiredSpinner.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredSpinner } from '../src/WiredSpinner'; describe('WiredSpinner', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredTab.test.tsx b/test/WiredTab.test.tsx index c2ad5f2..05b1b0c 100644 --- a/test/WiredTab.test.tsx +++ b/test/WiredTab.test.tsx @@ -3,9 +3,13 @@ import * as ReactDOM from 'react-dom'; import { WiredTab } from '../src/WiredTab'; describe('WiredTab', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render(, div); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredTextArea.test.tsx b/test/WiredTextArea.test.tsx index 533b6a6..11af4d1 100644 --- a/test/WiredTextArea.test.tsx +++ b/test/WiredTextArea.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredTextArea } from '../src/WiredTextArea'; describe('WiredTextArea', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredToggle.test.tsx b/test/WiredToggle.test.tsx index dbf47d6..1028457 100644 --- a/test/WiredToggle.test.tsx +++ b/test/WiredToggle.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredToggle } from '../src/WiredToggle'; describe('WiredToggle', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/test/WiredVideo.test.tsx b/test/WiredVideo.test.tsx index 7cae287..cf6fc9f 100644 --- a/test/WiredVideo.test.tsx +++ b/test/WiredVideo.test.tsx @@ -3,9 +3,16 @@ import * as ReactDOM from 'react-dom'; import { WiredVideo } from '../src/WiredVideo'; describe('WiredVideo', () => { - it('renders without crashing', () => { + it('renders with base props', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOM.render( + , + div + ); + // noinspection CheckTagEmptyBody + expect(div.innerHTML).toMatch( + '' + ); ReactDOM.unmountComponentAtNode(div); }); }); diff --git a/yarn.lock b/yarn.lock index 38afaa5..43a6d8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2456,11 +2456,6 @@ abab@^2.0.0: resolved "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a" integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg== -abbrev@1: - version "1.1.1" - resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" - integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== - accepts@~1.3.7: version "1.3.7" resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd" @@ -4473,7 +4468,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6. dependencies: ms "2.0.0" -debug@^3.0.0, debug@^3.2.5, debug@^3.2.6: +debug@^3.0.0, debug@^3.2.5: version "3.2.6" resolved "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ== @@ -4509,11 +4504,6 @@ deep-equal@^1.1.1: object-keys "^1.1.1" regexp.prototype.flags "^1.2.0" -deep-extend@^0.6.0: - version "0.6.0" - resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" - integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== - deep-is@~0.1.3: version "0.1.3" resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" @@ -4600,11 +4590,6 @@ detab@2.0.3, detab@^2.0.0: dependencies: repeat-string "^1.5.4" -detect-libc@^1.0.2: - version "1.0.3" - resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" - integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= - detect-newline@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2" @@ -5820,13 +5805,6 @@ fs-extra@^0.30.0: path-is-absolute "^1.0.0" rimraf "^2.2.8" -fs-minipass@^1.2.5: - version "1.2.7" - resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7" - integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA== - dependencies: - minipass "^2.6.0" - fs-minipass@^2.0.0: version "2.1.0" resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb" @@ -6447,7 +6425,7 @@ husky@^4.2.3: slash "^3.0.0" which-pm-runs "^1.0.0" -iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13: +iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13: version "0.4.24" resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -6471,13 +6449,6 @@ iferr@^0.1.5: resolved "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= -ignore-walk@^3.0.1: - version "3.0.3" - resolved "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37" - integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw== - dependencies: - minimatch "^3.0.4" - ignore@^3.3.5: version "3.3.10" resolved "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043" @@ -6574,7 +6545,7 @@ inherits@2.0.3: resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= -ini@^1.3.5, ini@~1.3.0: +ini@^1.3.5: version "1.3.5" resolved "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== @@ -8326,14 +8297,6 @@ minipass-pipeline@^1.2.2: dependencies: minipass "^3.0.0" -minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0: - version "2.9.0" - resolved "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6" - integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg== - dependencies: - safe-buffer "^5.1.2" - yallist "^3.0.0" - minipass@^3.0.0, minipass@^3.1.1: version "3.1.1" resolved "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5" @@ -8341,13 +8304,6 @@ minipass@^3.0.0, minipass@^3.1.1: dependencies: yallist "^4.0.0" -minizlib@^1.2.1: - version "1.3.3" - resolved "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d" - integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q== - dependencies: - minipass "^2.9.0" - mississippi@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022" @@ -8380,7 +8336,7 @@ mixin-object@^2.0.1: for-in "^0.1.3" is-extendable "^0.1.1" -mkdirp@0.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1: +mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1: version "0.5.4" resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512" integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw== @@ -8456,15 +8412,6 @@ natural-compare@^1.4.0: resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -needle@^2.2.1: - version "2.3.3" - resolved "https://registry.npmjs.org/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117" - integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw== - dependencies: - debug "^3.2.6" - iconv-lite "^0.4.4" - sax "^1.2.4" - negotiator@0.6.2: version "0.6.2" resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -8582,35 +8529,11 @@ node-notifier@^5.4.2: shellwords "^0.1.1" which "^1.3.0" -node-pre-gyp@*: - version "0.14.0" - resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" - integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== - dependencies: - detect-libc "^1.0.2" - mkdirp "^0.5.1" - needle "^2.2.1" - nopt "^4.0.1" - npm-packlist "^1.1.6" - npmlog "^4.0.2" - rc "^1.2.7" - rimraf "^2.6.1" - semver "^5.3.0" - tar "^4.4.2" - node-releases@^1.1.29, node-releases@^1.1.53: version "1.1.53" resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4" integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ== -nopt@^4.0.1: - version "4.0.3" - resolved "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48" - integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg== - dependencies: - abbrev "1" - osenv "^0.1.4" - normalize-package-data@^2.3.2: version "2.5.0" resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -8648,27 +8571,6 @@ normalize-url@1.9.1: query-string "^4.1.0" sort-keys "^1.0.0" -npm-bundled@^1.0.1: - version "1.1.1" - resolved "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b" - integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA== - dependencies: - npm-normalize-package-bin "^1.0.1" - -npm-normalize-package-bin@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2" - integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA== - -npm-packlist@^1.1.6: - version "1.4.8" - resolved "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e" - integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A== - dependencies: - ignore-walk "^3.0.1" - npm-bundled "^1.0.1" - npm-normalize-package-bin "^1.0.1" - npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -8683,7 +8585,7 @@ npm-run-path@^4.0.0: dependencies: path-key "^3.0.0" -npmlog@^4.0.2, npmlog@^4.1.2: +npmlog@^4.1.2: version "4.1.2" resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b" integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg== @@ -8895,24 +8797,11 @@ os-browserify@^0.3.0: resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc= -os-homedir@^1.0.0: - version "1.0.2" - resolved "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" - integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M= - -os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: +os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -osenv@^0.1.4: - version "0.1.5" - resolved "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410" - integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g== - dependencies: - os-homedir "^1.0.0" - os-tmpdir "^1.0.0" - p-each-series@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71" @@ -9786,16 +9675,6 @@ raw-loader@^3.1.0: loader-utils "^1.1.0" schema-utils "^2.0.1" -rc@^1.2.7: - version "1.2.8" - resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" - integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw== - dependencies: - deep-extend "^0.6.0" - ini "~1.3.0" - minimist "^1.2.0" - strip-json-comments "~2.0.1" - react-addons-create-fragment@^15.6.2: version "15.6.2" resolved "https://registry.npmjs.org/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8" @@ -10514,7 +10393,7 @@ rimraf@2.6.3, rimraf@~2.6.2: dependencies: glob "^7.1.3" -rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1: +rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1: version "2.7.1" resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -10710,7 +10589,7 @@ semver-regex@^2.0.0: resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338" integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw== -"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: +"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.1" resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== @@ -11374,11 +11253,6 @@ strip-json-comments@^3.0.1: resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7" integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw== -strip-json-comments@~2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= - style-loader@^1.0.0: version "1.1.3" resolved "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200" @@ -11479,19 +11353,6 @@ tapable@^1.0.0, tapable@^1.1.3: resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== -tar@^4.4.2: - version "4.4.13" - resolved "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" - integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA== - dependencies: - chownr "^1.1.1" - fs-minipass "^1.2.5" - minipass "^2.8.6" - minizlib "^1.2.1" - mkdirp "^0.5.0" - safe-buffer "^5.1.2" - yallist "^3.0.3" - telejson@^3.2.0: version "3.3.0" resolved "https://registry.npmjs.org/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03" @@ -12934,7 +12795,7 @@ yallist@^2.1.2: resolved "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= -yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3: +yallist@^3.0.2: version "3.1.1" resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== From 0c445ac19a370cdfe1577320cdb3568e53302476 Mon Sep 17 00:00:00 2001 From: "tobias.goeschel" Date: Wed, 22 Apr 2020 12:33:32 +0200 Subject: [PATCH 2/6] Bugfix: Adding the click handler per useCustomElement() leads to a multiplication of handlers - one eventlistener is added per render pass - and thus, a single click will cause many actions, e.g. when a form is updated via onChange() on input elements. --- src/WiredButton.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/WiredButton.tsx b/src/WiredButton.tsx index 61da36a..e7989ca 100644 --- a/src/WiredButton.tsx +++ b/src/WiredButton.tsx @@ -36,13 +36,17 @@ export const WiredButton = ({ const customValues = useMemo(() => { return { attributes: { disabled, elevation }, - methods: { click: onClick }, }; - }, [elevation, disabled, onClick]); + }, [elevation, disabled]); const register = useCustomElement(customValues); return ( - + {children} ); From c47b67aa130e42e6a8108d3ef68f5d8557c1758e Mon Sep 17 00:00:00 2001 From: "tobias.goeschel" Date: Thu, 23 Apr 2020 18:30:25 +0200 Subject: [PATCH 3/6] Bugfix: Adding the click handler per useCustomElement() leads to a multiplication of handlers - one eventlistener is added per render pass - and thus, a single click will cause many actions, e.g. when a form is updated via onChange() on input elements. --- src/WiredIconButton.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/WiredIconButton.tsx b/src/WiredIconButton.tsx index 42f4175..55cad86 100644 --- a/src/WiredIconButton.tsx +++ b/src/WiredIconButton.tsx @@ -57,14 +57,18 @@ export const WiredIconButton = ({ 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 ( - +
{children || ( Date: Thu, 23 Apr 2020 18:32:02 +0200 Subject: [PATCH 4/6] Bugfix: Adding value directly to the web component results in it being rendered correctly. --- src/WiredItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/WiredItem.tsx b/src/WiredItem.tsx index a85cd75..412c2c7 100644 --- a/src/WiredItem.tsx +++ b/src/WiredItem.tsx @@ -69,6 +69,7 @@ export const WiredItem = ({ appliedStyle.color = selected ? selectedColor : color || style?.color; return ( onClick && onClick(selected)} From 59b1de394ea22c607a2c0421daa687b2854be294 Mon Sep 17 00:00:00 2001 From: "tobias.goeschel" Date: Thu, 23 Apr 2020 18:32:47 +0200 Subject: [PATCH 5/6] Bugfix: Adding selected directly to the web component results in it being rendered correctly. --- src/WiredListBox.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/WiredListBox.tsx b/src/WiredListBox.tsx index d4681c7..9f108f3 100644 --- a/src/WiredListBox.tsx +++ b/src/WiredListBox.tsx @@ -58,7 +58,12 @@ export const WiredListBox = ({ const register = useCustomElement(customValues); return ( - + {children} ); From 245c0ad9cd3514384bd232115bcc5592ac065a60 Mon Sep 17 00:00:00 2001 From: "tobias.goeschel" Date: Thu, 23 Apr 2020 18:33:37 +0200 Subject: [PATCH 6/6] Bugfix: ref.current sometimes returns null on page refresh - conditional operator prevents undesired errors. --- src/utils/useCustomElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/useCustomElement.tsx b/src/utils/useCustomElement.tsx index 0301377..3703ef4 100644 --- a/src/utils/useCustomElement.tsx +++ b/src/utils/useCustomElement.tsx @@ -56,7 +56,7 @@ export function useCustomElement(values: Values) { useEffect(() => { // A hack, but it works for now. setTimeout(() => { - if (ref.current.requestUpdate) { + if (ref.current?.requestUpdate) { ref.current.requestUpdate(); } }, 0);