@abgov/react-components 7.2.0-dev.17 → 7.2.0-dev.18

package/lib/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { DataAttributes, GoabCheckboxOnChangeDetail, GoabCheckboxSize, Margins } from '@abgov/ui-components-common';
+import { DataAttributes, GoabCheckboxOnBlurDetail, GoabCheckboxOnChangeDetail, GoabCheckboxOnFocusDetail, GoabCheckboxSize, Margins } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 declare module "react" {
     namespace JSX {
@@ -62,8 +62,12 @@ export interface GoabCheckboxProps extends Margins, DataAttributes {
     size?: GoabCheckboxSize;
     /** Callback fired when the checkbox selection changes. */
     onChange?: (detail: GoabCheckboxOnChangeDetail) => void;
+    /** Callback fired when the checkbox receives focus. */
+    onFocus?: (detail: GoabCheckboxOnFocusDetail) => void;
+    /** Callback fired when the checkbox loses focus. */
+    onBlur?: (detail: GoabCheckboxOnBlurDetail) => void;
 }
 export type Props = GoabCheckboxProps;
 /** Let the user select one or more options. */
-export declare function GoabCheckbox({ error, checked, indeterminate, disabled, value, description, reveal, onChange, name, children, size, ...rest }: GoabCheckboxProps): JSX.Element;
+export declare function GoabCheckbox({ error, checked, indeterminate, disabled, value, description, reveal, onChange, onFocus, onBlur, name, children, size, ...rest }: GoabCheckboxProps): JSX.Element;
 export default GoabCheckbox;

package/lib/checkbox-list/checkbox-list.d.ts

@@ -1,4 +1,4 @@
-import { GoabCheckboxListOnChangeDetail, Margins } from '@abgov/ui-components-common';
+import { GoabCheckboxListOnBlurDetail, GoabCheckboxListOnChangeDetail, GoabCheckboxListOnFocusDetail, Margins } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement | null>;
@@ -37,7 +37,11 @@ export interface GoabCheckboxListProps extends Margins {
     children?: React.ReactNode;
     /** Callback fired when the selected values change. */
     onChange?: (detail: GoabCheckboxListOnChangeDetail) => void;
+    /** Callback fired when focus enters any checkbox in the list. */
+    onFocus?: (detail: GoabCheckboxListOnFocusDetail) => void;
+    /** Callback fired when focus leaves all checkboxes in the list. */
+    onBlur?: (detail: GoabCheckboxListOnBlurDetail) => void;
 }
 /** A multiple selection input. */
-export declare function GoabCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, mt, mr, mb, ml, }: GoabCheckboxListProps): JSX.Element;
+export declare function GoabCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, onFocus, onBlur, mt, mr, mb, ml, }: GoabCheckboxListProps): JSX.Element;
 export default GoabCheckboxList;

package/lib/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { GoabDatePickerInputType, GoabDatePickerOnChangeDetail, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabDatePickerInputType, GoabDatePickerOnBlurDetail, GoabDatePickerOnChangeDetail, GoabDatePickerOnFocusDetail, Margins, DataAttributes } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     name?: string;
     value?: string;
@@ -45,7 +45,11 @@ export interface GoabDatePickerProps extends Margins, DataAttributes {
     width?: string;
     /** Callback fired when the selected date changes. */
     onChange?: (detail: GoabDatePickerOnChangeDetail) => void;
+    /** Callback fired when focus enters any of the date picker's internal fields. */
+    onFocus?: (detail: GoabDatePickerOnFocusDetail) => void;
+    /** Callback fired when focus leaves all of the date picker's internal fields. */
+    onBlur?: (detail: GoabDatePickerOnBlurDetail) => void;
 }
 /** Lets users select a date through a calendar without the need to manually type it in a field. */
-export declare function GoabDatePicker({ value, error, min, max, disabled, relative, onChange, ...rest }: GoabDatePickerProps): JSX.Element;
+export declare function GoabDatePicker({ value, error, min, max, disabled, relative, onChange, onFocus, onBlur, ...rest }: GoabDatePickerProps): JSX.Element;
 export default GoabDatePicker;

package/lib/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { GoabDropdownOnChangeDetail, GoabDropdownSize, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabDropdownOnBlurDetail, GoabDropdownOnChangeDetail, GoabDropdownOnFocusDetail, GoabDropdownSize, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     arialabel?: string;
@@ -38,6 +38,10 @@ export interface GoabDropdownProps extends Margins, DataAttributes {
     value?: string[] | string;
     /** Callback fired when the selected value changes. */
     onChange?: (detail: GoabDropdownOnChangeDetail) => void;
+    /** Callback fired when the dropdown receives focus. */
+    onFocus?: (detail: GoabDropdownOnFocusDetail) => void;
+    /** Callback fired when the dropdown loses focus. */
+    onBlur?: (detail: GoabDropdownOnBlurDetail) => void;
     /** Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name. */
     ariaLabel?: string;
     /** The aria-labelledby attribute identifies the element that labels the dropdown. Normally it is the id of the label. */
@@ -76,5 +80,5 @@ export interface GoabDropdownProps extends Margins, DataAttributes {
     relative?: boolean;
 }
 /** Present a list of options to the user to select from. */
-export declare function GoabDropdown({ value, onChange, disabled, error, filterable, multiselect, native, relative, children, size, ...rest }: GoabDropdownProps): JSX.Element;
+export declare function GoabDropdown({ value, onChange, onFocus, onBlur, disabled, error, filterable, multiselect, native, relative, children, size, ...rest }: GoabDropdownProps): JSX.Element;
 export default GoabDropdown;

package/lib/radio-group/radio-group.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { GoabRadioGroupOnChangeDetail, GoabRadioGroupOrientation, GoabRadioGroupSize, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabRadioGroupOnBlurDetail, GoabRadioGroupOnChangeDetail, GoabRadioGroupOnFocusDetail, GoabRadioGroupOrientation, GoabRadioGroupSize, Margins, DataAttributes } from '@abgov/ui-components-common';
 export * from './radio';
 interface WCProps extends Margins {
     name: string;
@@ -45,7 +45,11 @@ export interface GoabRadioGroupProps extends Margins, DataAttributes {
     children?: React.ReactNode;
     /** Callback fired when the selected radio item changes. */
     onChange?: (detail: GoabRadioGroupOnChangeDetail) => void;
+    /** Callback fired when focus enters any radio item in the group. */
+    onFocus?: (detail: GoabRadioGroupOnFocusDetail) => void;
+    /** Callback fired when focus leaves all radio items in the group. */
+    onBlur?: (detail: GoabRadioGroupOnBlurDetail) => void;
 }
 /** Allow users to select one option from a set. */
-export declare function GoabRadioGroup({ disabled, error, onChange, name, children, size, ...rest }: GoabRadioGroupProps): JSX.Element;
+export declare function GoabRadioGroup({ disabled, error, onChange, onFocus, onBlur, name, children, size, ...rest }: GoabRadioGroupProps): JSX.Element;
 export default GoabRadioGroup;

package/lib/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import { GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTextAreaOnBlurDetail, GoabTextAreaSize, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTextAreaOnBlurDetail, GoabTextAreaOnFocusDetail, GoabTextAreaSize, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     name: string;
@@ -64,9 +64,11 @@ export interface GoabTextAreaProps extends Margins, DataAttributes {
     onChange?: (event: GoabTextAreaOnChangeDetail) => void;
     /** Callback fired when a key is pressed within the textarea. */
     onKeyPress?: (event: GoabTextAreaOnKeyPressDetail) => void;
+    /** Callback fired when the textarea receives focus. */
+    onFocus?: (event: GoabTextAreaOnFocusDetail) => void;
     /** Callback fired when the textarea loses focus. */
     onBlur?: (event: GoabTextAreaOnBlurDetail) => void;
 }
 /** A multi-line field where users can input and edit text. */
-export declare function GoabTextArea({ readOnly, disabled, error, onChange, onKeyPress, onBlur, ...rest }: GoabTextAreaProps): JSX.Element;
+export declare function GoabTextArea({ readOnly, disabled, error, onChange, onKeyPress, onFocus, onBlur, ...rest }: GoabTextAreaProps): JSX.Element;
 export default GoabTextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "7.2.0-dev.17",
+  "version": "7.2.0-dev.18",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"