How to use @pluralsight/ps-design-system-actionmenu - 4 common examples

'onClose',
              'function',
              null,
              null,
              'triggered when a menu collapses; providing it renders an overlay that triggers this function on click'
            ]),
            PropTypes.row([
              'onChange',
              <span>(Event, value, label) =&gt; ()</span>,
              null,
              null,
              'triggered when an item selected'
            ]),
            PropTypes.row([
              'origin',
              PropTypes.union(ActionMenu.origins),
              null,
              <code>topLeft</code>,
              <span>
                orientation (from <code>ActionMenu.origins</code>) of nested
                menus
              </span>
            ]),
            PropTypes.row([
              'shouldFocusOnMount',
              'boolean',
              null,
              <code>true</code>,
              'focus first menu item on render'
            ])
          ],
          'ActionMenu.Item': [

min-height: 200px;
        }
        .label {
          padding: ${core.layout.spacingLarge} 0;
          font-size: ${core.type.fontSizeMedium};
        }
      `}

      
        <div>
          
                
                  {categories.map(cat =&gt; (
                    
                          {cat.options.map(opt =&gt; (
                            
                              {opt.label}
                            
                          ))}
                        
                      }
                    &gt;
                      {cat.name}</div>

const Story = props => {
      const [isOpen, setIsOpen] = React.useState(false)

      return (
        
          
                    
                      Edit
                      Delete
                    
                  
                }
              >
                }
                  onClick={_ => setIsOpen(!isOpen)}
                  title="More"
                />
              
            ]}
            actionBarVisible
          />

Four item
  

`
        ]}
      />

      Origin
      <p>
        The origin prop determines the starting position and direction of nested
        menus.
      </p>
      <code>
        {Object.keys(ActionMenu.origins)
          .reduce(
            (acc, origin) =&gt; acc.concat([`ActionMenu.origins.${origin}`]),
            []
          )
          .join('\n')}
      </code>
      <p>Here's an example of ActionMenu.origins.bottomRight in action:</p>