fix(Popup): keypress toggle logic

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix Attachment `styles` prop typing @levithomason ([#299](https://github.com/stardust-ui/react/pull/299))
 - Fix generation of `key` for the `Accordion.Content` @mnajdova ([#305](https://github.com/stardust-ui/react/pull/305))
 - Ensure `Popup` is rendered as direct child of `body` element in the DOM tree @kuzhelov ([#302](https://github.com/stardust-ui/react/pull/302))
+- Fix toggle logic of `Popup` as reaction on key press events @kuzhelov ([#304](https://github.com/stardust-ui/react/pull/304))
 
 ### Features
 - Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))

docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Popup } from '@stardust-ui/react'
+import { Button, Input, Popup } from '@stardust-ui/react'
 
 class PopupExample extends React.Component<any, any> {
   state = { popupOpen: false }
@@ -13,11 +13,11 @@ class PopupExample extends React.Component<any, any> {
       <Popup
         open={this.state.popupOpen}
         onOpenChange={(e, newProps) => {
+          alert(`Popup is requested to change its open state to "${newProps.open}".`)
           this.setState({ popupOpen: newProps.open })
-          alert(`Popup open state was changed to "${newProps.open ? 'true' : 'false'}".`)
         }}
         trigger={<Button icon="expand" onClick={() => this.togglePopup()} />}
-        content="Add users to your feed."
+        content={<Input icon="search" placeholder="Search..." />}
       />
     )
   }

docs/src/examples/components/Popup/Types/PopupExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Popup } from '@stardust-ui/react'
+import { Button, Input, Popup } from '@stardust-ui/react'
 
 class PopupExample extends React.Component<any, any> {
   state = { popupOpen: false }
@@ -8,17 +8,15 @@ class PopupExample extends React.Component<any, any> {
     this.setState(prev => ({ popupOpen: !prev.popupOpen }))
   }
 
-  handleOpenChange = (e, newProps) => {
-    this.setState({ popupOpen: newProps.open })
-    alert(`Popup open state was changed to "${newProps.open ? 'true' : 'false'}".`)
-  }
-
   render() {
     return (
       <Popup
         open={this.state.popupOpen}
-        onOpenChange={this.handleOpenChange.bind(this)}
-        content="Add users to your feed."
+        onOpenChange={(e, newProps) => {
+          alert(`Popup is requested to change its open state to "${newProps.open}".`)
+          this.setState({ popupOpen: newProps.open })
+        }}
+        content={<Input icon="search" placeholder="Search..." />}
       >
         <Button icon="expand" onClick={() => this.togglePopup()} />
       </Popup>

docs/src/examples/components/Popup/Types/index.tsx

@@ -7,7 +7,7 @@ const Types = () => (
   <ExampleSection title="Types">
     <ComponentExample
       title="Default"
-      description="A default popup. Note that Popup is a controlled component, and its 'open' prop value could be changed either by parent component, or by user actions (keypress) - thus it is necessary to handle 'onOpenChanged' event. Try to press space key while button is focused to see the effect."
+      description="A default popup. Note that Popup is a controlled component, and its 'open' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onOpenChanged' event. Try to type some text into popup's input field and press ESC to see the effect."
       examplePath="components/Popup/Types/PopupExample"
     />
   </ExampleSection>

src/lib/accessibility/Behaviors/Popup/PopupBehavior.ts

@@ -18,11 +18,6 @@ const PopupBehavior: Accessibility = (props: any) => ({
     },
   },
   keyActions: {
-    trigger: {
-      toggle: {
-        keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
-      },
-    },
     popup: {
       closeAndFocusTrigger: {
         keyCombinations: [{ keyCode: keyboardKey.Escape }],