diff --git a/lib/components/Button/Button.test.tsx b/lib/components/Button/Button.test.tsx
index e8de787..67f36a0 100644
--- a/lib/components/Button/Button.test.tsx
+++ b/lib/components/Button/Button.test.tsx
@@ -48,7 +48,7 @@ describe('on unknown kinds', () => {
it('should render null', () => {
fc.assert(
- fc.property(fc.string().filter(s => !['button', 'a'].includes(s)), (element) => {
+ fc.property(fc.string().filter((s) => !['button', 'a'].includes(s)), (element) => {
const wrapper = Enzyme.shallow()
expect(wrapper.isEmptyRender()).toBe(true)
diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
index 64d6255..07915c0 100644
--- a/lib/components/Button/Button.tsx
+++ b/lib/components/Button/Button.tsx
@@ -156,6 +156,18 @@ const propTypes = {
* Does the button display a border?
*/
border: PropTypes.bool,
+ /**
+ * Event handler triggered when the component is clicked.
+ */
+ onClick: PropTypes.func,
+ /**
+ * Event handler triggered when the component receives focus.
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Event handler triggered when the component loses focus.
+ */
+ onBlur: PropTypes.func,
}
type Props = PropTypes.InferProps
@@ -173,7 +185,9 @@ const Button = React.forwardRef {
@@ -184,12 +198,7 @@ const Button = React.forwardRef
- {
- border
- && (
-
- )
- }
+ {border && }
{stringify(children)}
)
@@ -197,26 +206,36 @@ const Button = React.forwardRef} disabled={disabled!} style={commonButtonStyles}>
+ }
+ type={type!}
+ ref={ref as React.Ref}
+ disabled={disabled!}
+ style={commonButtonStyles}
+ onFocus={onFocus as React.FocusEventHandler}
+ onBlur={onBlur as React.FocusEventHandler}
+ >
{buttonContent}
)
case 'a':
if (disabled) {
return (
- } style={commonButtonStyles}>
+ } style={commonButtonStyles}>
{buttonContent}
)
}
return (
}
href={href!}
target={target!}
rel={rel!}
ref={ref as React.Ref}
style={commonButtonStyles}
+ onFocus={onFocus as React.FocusEventHandler}
+ onBlur={onBlur as React.FocusEventHandler}
>
{buttonContent}
diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index d32047a..562d7cb 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -123,6 +123,18 @@ const propTypes = {
* Name of the form field associated with this component.
*/
name: PropTypes.string,
+ /**
+ * Event handler triggered when the component is toggled.
+ */
+ onChange: PropTypes.func,
+ /**
+ * Event handler triggered when the component receives focus.
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Event handler triggered when the component loses focus.
+ */
+ onBlur: PropTypes.func,
}
type Props = PropTypes.InferProps
@@ -133,10 +145,17 @@ type Props = PropTypes.InferProps
* @see {@link RadioButton} for a similar component on selecting a single value among very few choices.
* @type {React.ComponentType<{readonly label?: string} & React.ClassAttributes>}
*/
-const Checkbox = React.forwardRef(({ label = '', name, }, ref) => (
+const Checkbox = React.forwardRef(({ label = '', name, onChange, onFocus, onBlur }, ref) => (
-
+
diff --git a/lib/components/Icon/Icon.tsx b/lib/components/Icon/Icon.tsx
index a94627b..bd6d84c 100644
--- a/lib/components/Icon/Icon.tsx
+++ b/lib/components/Icon/Icon.tsx
@@ -43,12 +43,7 @@ const propTypes = {
type Props = PropTypes.InferProps
-const Icon: React.FC = ({
- name,
- weight = '0.125rem',
- size = '1.5rem',
- label = name,
-}) => {
+const Icon: React.FC = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => {
const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon
const { magnitude: sizeValue, unit: sizeUnit } = splitValueAndUnit(size)
diff --git a/lib/components/RadioButton/RadioButton.tsx b/lib/components/RadioButton/RadioButton.tsx
index d6f8676..64f0550 100644
--- a/lib/components/RadioButton/RadioButton.tsx
+++ b/lib/components/RadioButton/RadioButton.tsx
@@ -121,6 +121,18 @@ const propTypes = {
* Short textual description indicating the nature of the component's value.
*/
label: PropTypes.any,
+ /**
+ * Event handler triggered when the component is selected.
+ */
+ onChange: PropTypes.func,
+ /**
+ * Event handler triggered when the component receives focus.
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Event handler triggered when the component loses focus.
+ */
+ onBlur: PropTypes.func,
}
type Props = PropTypes.InferProps
@@ -132,13 +144,17 @@ type Props = PropTypes.InferProps
* @type {React.ComponentType<{readonly label?: string, readonly name?: string} & React.ClassAttributes>}
*/
const RadioButton = React.forwardRef(
- (
- { label = '', name, },
- ref
- ) => (
+ ({ label = '', name, onChange, onFocus, onBlur }, ref) => (
-
+
@@ -149,7 +165,7 @@ const RadioButton = React.forwardRef(
- )
+ ),
)
RadioButton.propTypes = propTypes
diff --git a/lib/components/Select/Select.tsx b/lib/components/Select/Select.tsx
index 25fca9f..af181f0 100644
--- a/lib/components/Select/Select.tsx
+++ b/lib/components/Select/Select.tsx
@@ -242,12 +242,7 @@ const Select = React.forwardRef(
opacity: disabled ? 0.5 : undefined,
}}
>
- {
- border
- && (
-
- )
- }
+ {border && }
@@ -226,6 +230,7 @@ const Slider: React.FC = ({
label = '',
length = '16rem',
disabled = false,
+ onChange,
}) => {
const [isClient, setIsClient] = React.useState(false)
@@ -295,6 +300,7 @@ const Slider: React.FC = ({
padding: orientation === 'horizontal' ? '0.875rem 0.75rem' : '0.75rem 0.875rem',
cursor: disabled ? 'not-allowed' : undefined,
}}
+ onChange={onChange!}
>