feat(Grid): Expose isFromKeyboard prop

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `align` prop for `Text` component @Bugaa92 ([#1668](https://github.com/stardust-ui/react/pull/1668))
 - Add `size` prop for `Button` component @layershifter ([#1716](https://github.com/stardust-ui/react/pull/1716))
 - Add `target` prop on `Provider`, allows to specify a `document` where styles should be renderer @layershifter ([#1252](https://github.com/stardust-ui/react/pull/1252))
+- Expose `isFromKeyboard` in `Grid` component @sophieH29 ([#1729](https://github.com/stardust-ui/react/pull/1729))
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))

packages/react/src/components/Grid/Grid.tsx

@@ -1,6 +1,7 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import * as _ from 'lodash'
 import {
   UIComponent,
   childrenExist,
@@ -10,8 +11,9 @@ import {
   commonPropTypes,
   ContentComponentProps,
   rtlTextContainer,
+  isFromKeyboard,
 } from '../../lib'
-import { WithAsProp, withSafeTypeForAs } from '../../types'
+import { WithAsProp, withSafeTypeForAs, ComponentEventHandler } from '../../types'
 import { Accessibility } from '../../lib/accessibility/types'
 
 export interface GridProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
@@ -26,9 +28,27 @@ export interface GridProps extends UIComponentProps, ChildrenComponentProps, Con
 
   /** The rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */
   rows?: string | number
+
+  /**
+   * Called after user's focus.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onFocus?: ComponentEventHandler<GridProps>
+
+  /**
+   * Called after item blur.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onBlur?: ComponentEventHandler<GridProps>
+}
+
+interface GridState {
+  isFromKeyboard: boolean
 }
 
-class Grid extends UIComponent<WithAsProp<GridProps>, any> {
+class Grid extends UIComponent<WithAsProp<GridProps>, GridState> {
   static displayName = 'Grid'
 
   static className = 'ui-grid'
@@ -46,12 +66,26 @@ class Grid extends UIComponent<WithAsProp<GridProps>, any> {
       ]),
     ]),
     rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
   }
 
   static defaultProps: WithAsProp<GridProps> = {
     as: 'div',
   }
 
+  handleBlur = (e: React.SyntheticEvent) => {
+    this.setState({ isFromKeyboard: false })
+
+    _.invoke(this.props, 'onBlur', e, this.props)
+  }
+
+  handleFocus = (e: React.SyntheticEvent) => {
+    this.setState({ isFromKeyboard: isFromKeyboard() })
+
+    _.invoke(this.props, 'onFocus', e, this.props)
+  }
+
   renderComponent({
     accessibility,
     ElementType,
@@ -63,6 +97,8 @@ class Grid extends UIComponent<WithAsProp<GridProps>, any> {
     return (
       <ElementType
         className={classes.root}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
         {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
         {...accessibility.attributes.root}
         {...unhandledProps}