feat(MenuButton): add component

docs/src/components/ComponentPlayground/ComponentPlayground.tsx

@@ -22,6 +22,7 @@ const unsupportedComponents = [
   'ItemLayout',
   'Layout',
   'List',
+  'MenuButton',
   'Portal',
   'Provider',
   'RadioGroup',

docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.steps.ts

@@ -0,0 +1,7 @@
+import { Button } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [builder => builder.click(`.${Button.className}`).snapshot('RTL: Shows menuButton')],
+}
+
+export default config

docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { Button, MenuButton } from '@stardust-ui/react'
+
+const ContextMenuExampleRtl = () => (
+  <MenuButton
+    trigger={<Button content="ا يجلبه إلينا الأس" />}
+    menu={{ items: ['English text!', 'غالباً ونرفض الشعور'] }}
+  />
+)
+
+export default ContextMenuExampleRtl

docs/src/examples/components/MenuButton/Rtl/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/MenuButton/Rtl/MenuButtonExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl

docs/src/examples/components/MenuButton/Usage/MenuButtonExampleControlled.shorthand.tsx

@@ -0,0 +1,20 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import * as React from 'react'
+import { Button, MenuButton } from '@stardust-ui/react'
+
+const items = ['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]
+
+const MenuButtonControlledExample = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open', initialValue: true })
+
+  return (
+    <MenuButton
+      open={open}
+      onOpenChange={(e, { open }) => setOpen(open)}
+      trigger={<Button icon="expand" title="Open MenuButton" />}
+      menu={{ items }}
+    />
+  )
+}
+
+export default MenuButtonControlledExample

docs/src/examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Alert, Button, Flex, MenuButton } from '@stardust-ui/react'
+
+const items = ['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]
+
+class MenuButtonExampleOn extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Flex gap="gap.smaller">
+          <MenuButton
+            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            menu={{ items }}
+            on="click"
+          />
+          <MenuButton
+            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            menu={{ items }}
+            on="hover"
+          />
+          <MenuButton
+            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            menu={{ items }}
+            on="focus"
+          />
+          <MenuButton
+            trigger={
+              <Button
+                icon="expand"
+                content="Context"
+                aria-label="Context button"
+                onClick={this.showAlert}
+              />
+            }
+            menu={{ items }}
+            on="context"
+          />
+        </Flex>
+        {this.state.alert && (
+          <Alert
+            warning
+            content="Right, you can still click the button! Right click opens the MenuButton."
+          />
+        )}
+      </>
+    )
+  }
+}
+
+export default MenuButtonExampleOn

docs/src/examples/components/MenuButton/Usage/MenuButtonExampleOnElement.shorthand.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Alert, Button, MenuButton } from '@stardust-ui/react'
+
+const items = ['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]
+
+class MenuButtonOnElement extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <MenuButton
+          trigger={
+            <div style={{ padding: '4rem', border: 'red dashed' }}>
+              <Button content="Random button" onClick={this.showAlert} />
+            </div>
+          }
+          shouldTriggerBeTabbable={false}
+          menu={{ items }}
+          contextMenu
+        />
+        {this.state.alert && <Alert warning content="Click!" />}
+      </>
+    )
+  }
+}
+
+export default MenuButtonOnElement

docs/src/examples/components/MenuButton/Usage/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Triggering menu on different actions"
+      description="A context menu can be triggered on click, hover or focus."
+      examplePath="components/MenuButton/Usage/MenuButtonExampleOn"
+    />
+    <ComponentExample
+      title="Context menu"
+      description="A menu button can be attached to any element to create a context menu."
+      examplePath="components/MenuButton/Usage/MenuButtonExampleOnElement"
+    />
+    <ComponentExample
+      title="Controlled"
+      description="Note that if MenuButton is controlled, then 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 'onOpenChange' event."
+      examplePath="components/MenuButton/Usage/MenuButtonExampleControlled"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/MenuButton/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import Rtl from './Rtl'
+import Usage from './Usage'
+
+const MenuButtonExamples = () => (
+  <>
+    <Usage />
+    <Rtl />
+  </>
+)
+
+export default MenuButtonExamples