diff --git a/types/react-aria-menubutton/index.d.ts b/types/react-aria-menubutton/index.d.ts new file mode 100644 index 0000000000..7a6ed925b2 --- /dev/null +++ b/types/react-aria-menubutton/index.d.ts @@ -0,0 +1,151 @@ +// Type definitions for react-aria-menubutton 5.0 +// Project: https://github.com/davidtheclark/react-aria-menubutton +// Definitions by: Muhammad Fawwaz Orabi +// Chris Rohlfs +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import * as React from "react"; + +export interface WrapperState { + isOpen: boolean; +} + +export type WrapperProps = React.HTMLAttributes & { + /** + * A callback to run when the user makes a selection + * (i.e. clicks or presses Enter or Space on a `MenuItem`). + * It will be passed the value of the selected `MenuItem` and + * the React `SyntheticEvent`. + */ + onSelection(value: any, event: React.SyntheticEvent): any; + + /** + * A callback to run when the menu is opened or closed. + */ + onMenuToggle?(obj: WrapperState): any; + + /** + * By default, it does automatically close. + * If false, the menu will not automatically close when a + * selection is made. Default: `true`. + */ + closeOnSelection?: boolean; + + isOpen?: boolean; + + tag?: T["tagName"]; +}; + +/** + * A simple component to group a `Button`/`Menu`/`MenuItem` set, + * coordinating their interactions. It should wrap your entire menu button + * widget. + * All `Button`, `Menu`, and `MenuItem` components must be nested within a + * `Wrapper` component. + * Each wrapper can contain only one `Button`, only one `Menu`, and + * multiple `MenuItem`s. + */ +export class Wrapper extends React.Component> {} + +export type ButtonProps = React.HTMLAttributes & { + /** + * If true, the element is disabled + * (aria-disabled='true', not in tab order, clicking has no effect). + */ + disabled?: boolean; + + /** + * The HTML tag for this element. Default: 'span'. + */ + tag?: T["tagName"]; +}; + +/** + * A React component to wrap the content of your + * menu-button-pattern's button. + * The `Button` component itself acts as a UI button (with tab-index, role, etc.), + * so you probably do not want to pass an HTML ` + +
    + {menuItems} +
+
+ + ); + } +} + +ReactDOM.render(, document.body); + +const words = [ + "pectinate", + "borborygmus", + "anisodactylous", + "barbar", + "pilcrow", + "destroy" +]; + +interface DemoOneState { + selected: string; + noMenu: boolean; +} + +class DemoOne extends React.Component<{}, DemoOneState> { + constructor(props: any) { + super(props); + this.state = { selected: "", noMenu: false }; + } + + handleSelection(value: string) { + if (value === "destroy") { + this.setState({ noMenu: true }); + } else { + this.setState({ selected: value }); + } + } + + render() { + const { selected, noMenu } = this.state; + + if (noMenu) { + return ( +
+ [You decided to "destroy this menu," so the menu has been destroyed, + according to your wishes. Refresh the page to see it again.] +
+ ); + } + + const menuItemElements = words.map((word, i) => { + let itemClass = "AriaMenuButton-menuItem"; + if (selected === word) { + itemClass += " is-selected"; + } + const display = word === "destroy" ? "destroy this menu" : word; + return ( +
  • + + {display} + +
  • + ); + }); + + return ( +
    + + + +
      + {menuItemElements} +
    +
    +
    + + Your last selection was: {selected} + +
    + ); + } +} + +ReactDOM.render(, document.getElementById("demo-one")); + +closeMenu(""); +closeMenu("", { focusMenu: true }); + +openMenu(""); +openMenu("", { focusMenu: true }); diff --git a/types/react-aria-menubutton/tsconfig.json b/types/react-aria-menubutton/tsconfig.json new file mode 100644 index 0000000000..0e2508eac6 --- /dev/null +++ b/types/react-aria-menubutton/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "jsx": "react", + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-aria-menubutton-tests.tsx" + ] +} diff --git a/types/react-aria-menubutton/tslint.json b/types/react-aria-menubutton/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-aria-menubutton/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }