fix(Menu): correctly handle isFromKeyboard (#596)

* fix(Menu): correctly handle `isFromKeyboard`

* fix mock

* fix exports

* cleanup

* remove unused stuff

* fix SSR

* remove intent

* remove what-input from rollup config

* remove `isFromKeyboard` from ACC

* add entry to changelog

Author: layershifter

CHANGELOG.md

@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `getKeyDownHandler` to pass props for client's onKeyDown handler @sophieH29 ([#595](https://github.com/stardust-ui/react/pull/595))
 - Fix `Popup` not closing on outside click @kuzhelov ([#598](https://github.com/stardust-ui/react/pull/598))
 - Fix multiple React's warnings about keys in docs @layershifter ([#602](https://github.com/stardust-ui/react/pull/602))
+- Fix incorrect handling of `isFromKeyboard` in `Menu` @layershifter ([#596](https://github.com/stardust-ui/react/pull/596))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

build/gulp/tasks/test-projects/rollup/rollup.config.js

@@ -60,7 +60,6 @@ export default {
           'Spacebar',
           'Tab',
         ],
-        'node_modules/what-input/dist/what-input.js': ['ask'],
       },
     }),
   ],

package.json

@@ -70,8 +70,7 @@
     "prop-types": "^15.6.1",
     "react-fela": "^7.2.0",
     "react-is": "^16.6.3",
-    "react-popper": "^1.0.2",
-    "what-input": "^5.1.2"
+    "react-popper": "^1.0.2"
   },
   "devDependencies": {
     "@babel/standalone": "^7.1.0",

src/components/Button/Button.tsx

@@ -7,6 +7,7 @@ import {
   childrenExist,
   customPropTypes,
   createShorthandFactory,
+  isFromKeyboard,
   UIComponentProps,
   ContentComponentProps,
   ChildrenComponentProps,
@@ -18,7 +19,6 @@ import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
 import ButtonGroup from './ButtonGroup'
-import isFromKeyboard from '../../lib/isFromKeyboard'
 
 export interface ButtonProps
   extends UIComponentProps,
@@ -73,7 +73,7 @@ export interface ButtonProps
 }
 
 export interface ButtonState {
-  [isFromKeyboard.propertyName]: boolean
+  isFromKeyboard: boolean
 }
 
 /**
@@ -115,7 +115,9 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
 
   static Group = ButtonGroup
 
-  public state = isFromKeyboard.initial
+  public state = {
+    isFromKeyboard: false,
+  }
 
   public renderComponent({
     ElementType,
@@ -171,7 +173,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
   }
 
   private handleFocus = (e: React.SyntheticEvent) => {
-    this.setState(isFromKeyboard.state())
+    this.setState({ isFromKeyboard: isFromKeyboard() })
 
     _.invoke(this.props, 'onFocus', e, this.props)
   }

src/components/Menu/MenuItem.tsx

@@ -12,12 +12,12 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  isFromKeyboard,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Slot from '../Slot/Slot'
 import { menuItemBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
-import IsFromKeyboard from '../../lib/isFromKeyboard'
 import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
 
 export interface MenuItemProps
@@ -81,7 +81,7 @@ export interface MenuItemProps
 }
 
 export interface MenuItemState {
-  [IsFromKeyboard.propertyName]: boolean
+  isFromKeyboard: boolean
 }
 
 /**
@@ -118,7 +118,9 @@ class MenuItem extends UIComponent<Extendable<MenuItemProps>, MenuItemState> {
     wrapper: { as: 'li' },
   }
 
-  state = IsFromKeyboard.initial
+  state = {
+    isFromKeyboard: false,
+  }
 
   renderComponent({ ElementType, classes, accessibility, rest }) {
     const { children, content, icon, wrapper } = this.props
@@ -167,13 +169,13 @@ class MenuItem extends UIComponent<Extendable<MenuItemProps>, MenuItemState> {
   }
 
   private handleBlur = (e: React.SyntheticEvent) => {
-    this.setState(IsFromKeyboard.initial)
+    this.setState({ isFromKeyboard: false })
 
     _.invoke(this.props, 'onBlur', e, this.props)
   }
 
   private handleFocus = (e: React.SyntheticEvent) => {
-    this.setState(IsFromKeyboard.state())
+    this.setState({ isFromKeyboard: isFromKeyboard() })
 
     _.invoke(this.props, 'onFocus', e, this.props)
   }

src/components/RadioGroup/RadioGroupItem.tsx

@@ -7,6 +7,7 @@ import {
   customPropTypes,
   AutoControlledComponent,
   createShorthandFactory,
+  isFromKeyboard,
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
@@ -16,7 +17,6 @@ import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../type
 import Icon from '../Icon/Icon'
 import { Accessibility } from '../../lib/accessibility/types'
 import { radioGroupItemBehavior } from '../../lib/accessibility'
-import isFromKeyboard from '../../lib/isFromKeyboard'
 
 export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponentProps {
   /**
@@ -41,9 +41,6 @@ export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponent
   /** Initial checked value. */
   defaultChecked?: boolean
 
-  /** Default value for isFromKeyboard (autocontrolled). */
-  defaultIsFromKeyboard?: boolean
-
   /** A radio item can appear disabled and be unable to change states. */
   disabled?: boolean
 
@@ -80,16 +77,13 @@ export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponent
   /** The HTML input value. */
   value?: string | number
 
-  /** Whether focus came from the keyboard (autocontrolled). */
-  [isFromKeyboard.propertyName]?: boolean
-
   /** A vertical radio group displays elements vertically. */
   vertical?: boolean
 }
 
 export interface RadioGroupItemState {
   checked: boolean
-  [isFromKeyboard.propertyName]: boolean
+  isFromKeyboard: boolean
 }
 
 /**
@@ -116,11 +110,8 @@ class RadioGroupItem extends AutoControlledComponent<
     accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     checked: PropTypes.bool,
     defaultChecked: PropTypes.bool,
-    /** Default value for isFromKeyboard (autocontrolled). */
-    defaultIsFromKeyboard: PropTypes.bool,
     disabled: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
-    isFromKeyboard: PropTypes.bool,
     label: customPropTypes.nodeContent,
     name: PropTypes.string,
     onBlur: PropTypes.func,
@@ -137,7 +128,7 @@ class RadioGroupItem extends AutoControlledComponent<
     accessibility: radioGroupItemBehavior as Accessibility,
   }
 
-  static autoControlledProps = ['checked', isFromKeyboard.propertyName]
+  static autoControlledProps = ['checked']
 
   componentDidUpdate(prevProps, prevState) {
     const checked = this.state.checked
@@ -180,12 +171,12 @@ class RadioGroupItem extends AutoControlledComponent<
   }
 
   private handleFocus = (e: React.SyntheticEvent) => {
-    this.setState(isFromKeyboard.state())
+    this.setState({ isFromKeyboard: isFromKeyboard() })
     _.invoke(this.props, 'onFocus', e, this.props)
   }
 
   private handleBlur = (e: React.SyntheticEvent) => {
-    this.setState(isFromKeyboard.initial)
+    this.setState({ isFromKeyboard: false })
     _.invoke(this.props, 'onBlur', e, this.props)
   }
 

src/lib/index.ts

@@ -27,14 +27,14 @@ export {
 } from './htmlPropsUtils'
 
 export { default as isBrowser } from './isBrowser'
-export { default as typescriptUtils } from './typescriptUtils'
 export { default as doesNodeContainClick } from './doesNodeContainClick'
 export { default as leven } from './leven'
 
 export { pxToRem } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
 export { default as createComponent } from './createStardustComponent'
+export * from './whatInput'
 
 export * from './commonPropInterfaces'
 export { commonPropTypes }