react-aria-menubutton 7.0.2 → 8.0.0

package/package.json

@@ -1,21 +1,39 @@
 {
   "name": "react-aria-menubutton",
-  "version": "7.0.2",
+  "version": "8.0.0",
   "description": "A fully accessible and flexible React-powered menu button",
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "dist/react-aria-menubutton.cjs.js",
+  "module": "dist/react-aria-menubutton.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-aria-menubutton.es.js",
+      "require": "./dist/react-aria-menubutton.cjs.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "lint": "eslint .",
-    "demo-bundle": "webpack --mode production --config ./webpack-demo.config.js",
-    "demo-watch": "webpack --mode development --config ./webpack-demo.config.js --watch",
-    "start": "npm run demo-watch & http-server demo",
-    "jest": "jest",
-    "test": "npm run lint && npm run jest",
-    "umd-unminified": "webpack --mode development --config ./webpack-umd.config.js",
-    "umd-minified": "webpack --mode production --config ./webpack-umd.config.js",
-    "umd": "npm run umd-unminified && npm run umd-minified",
-    "format": "prettier --single-quote --write src/**/*.js demo/js/*.js",
-    "build": "babel src -d dist --ignore src/__tests__",
-    "prepublishOnly": "npm run umd && npm run build"
+    "start": "vite",
+    "demo-build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"demo/js/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"demo/js/*.{ts,tsx}\"",
+    "build": "vite build -c vite.lib.config.ts",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc",
+    "start:dist": "npm run build && vite -c vite.demo-dist.config.ts"
   },
   "husky": {
     "hooks": {
@@ -23,7 +41,10 @@
     }
   },
   "lint-staged": {
-    "*.js": "eslint"
+    "*.{ts,tsx}": [
+      "eslint",
+      "prettier --check"
+    ]
   },
   "repository": {
     "type": "git",
@@ -51,54 +72,38 @@
   ],
   "dependencies": {
     "focus-group": "^0.3.1",
-    "prop-types": "^15.6.0",
     "teeny-tap": "^0.2.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.3",
-    "eslint": "^4.13.1",
-    "http-server": "^0.10.0",
-    "husky": "^2.7.0",
-    "jest": "^21.2.1",
+    "@eslint/js": "^9.28.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.0.8",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-transition-group": "^4.4.12",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "husky": "^8.0.0",
+    "jiti": "^2.6.1",
+    "jsdom": "^26.1.0",
     "lint-staged": "^8.2.1",
-    "prettier": "^1.9.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-test-renderer": "^16.11.0",
-    "webpack": "^4.15.1",
-    "webpack-cli": "^3.0.8"
-  },
-  "babel": {
-    "presets": [
-      "react",
-      [
-        "env",
-        {
-          "loose": true
-        }
-      ]
-    ],
-    "plugins": [
-      "transform-class-properties"
-    ]
-  },
-  "jest": {
-    "setupFiles": [
-      "./src/__tests__/helpers/jest-setup.js"
-    ],
-    "testRegex": "/__tests__/.*\\.test.js$",
-    "clearMocks": true
+    "prettier": "^3.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-transition-group": "^4.4.5",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.34.0",
+    "vite": "^7.2.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   }
 }

package/CHANGELOG.md

@@ -1,173 +0,0 @@
-# Changelog
-
-## 7.0.2
-- Fix blur handler breaking due to unavailability of button
-
-## 7.0.1
-- Added React v17+ in peer dependency
-
-## 7.0.0
-- **Breaking:** Removed usage of `ReactDOM.findDOMNode` and `create-react-context`. This will no longer support older versions of React, it now requires `^16.3.0`
-
-## 6.3.0
-- Removed usage of legacy React context API, the package now use `create-react-context` which uses new context API if available else fallsback to the legacy API.
-
-## 6.2.0
-
-- Bind `Home` key to jump to first item in the current menu.
-- Bind `End` key to jump to the last item in the current menu.
-- Removed use of deprecated React lifecycle methods.
-
-## 6.1.0
-
-- Add `closeOnBlur` prop.
-
-## 6.0.1
-
-- Chore: Use loose mode for Babel compilation.
-
-## 6.0.0
-
-- **Breaking:** Pass `disabled` attribute to `Button` component's inner element if it is a regular HTML element that supports `disabled`.
-  Considered a potentially breaking (though positive) change because it may affect behavior and styling of your UI.
-
-## 5.1.1
-
-- Fix keydown behavior of link menu items, so Enter and Space open the link the same way a click does.
-- Make prop `onSelection` optional, because it's not necessary if your menu items are link.
-
-## 5.1.0
-
-- React 16 support.
-
-## 5.0.2
-
-- Satisfy React deprecation warnings.
-
-## 5.0.1
-
-- Clicks inside the menu that are not on a `MenuItem` move focus to the first `MenuItem`.
-- When the menu opens, focus only moves to the first menu item *if you opened with keyboard interactions*.
-  With a mouse click on the trigger, for example, focus remains on the trigger.
-
-## 5.0.0
-
-- When the menu opens, move focus to the first item (by default).
-  This represents a change to [the WAI-ARIA Menu Button Design Pattern](http://www.w3.org/TR/wai-aria-practices/#menubutton).
-
-## 4.3.1
-
-- Introduce `dist/`, where `src/` now compiles to, since React 15.5+ demands `class`es, so Babel-compilation.
-  Which is actually a huge overhaul, though in semver it's just a patch.
-
-## 4.3.0
-
-- Add `onMenuToggle` prop to `Wrapper`.
-
-## 4.2.0
-
-- Use `ownerDocument` instead of `document.documentElement` in case this is used in an iframe.
-- Rewrite test suite using Jest.
-
-## 4.1.3
-
-- Fix UMD build.
-
-## 4.1.2
-
-- Allow React 15 as a `peerDependency`.
-
-## 4.1.1
-
-- Update UMD build.
-
-## 4.1.0
-
-- Add `openMenu()` and `closeMenu()` to API.
-- Improve (fix) UMD build.
-- Allow arbitrary props to pass through to Button, Menu, MenuItem, and Wrapper elements.
-
-## 4.0.2
-
-- Move `react` and `react-dom` to peer dependencies.
-
-## 4.0.1
-
-- Update `focus-group` due to important fix there.
-
-## 4.0.0
-
-- Use `focus-group` for focus management, which includes improving letter navigation.
-- Switch from `tap.js` to `teeny-tap`.
-- Move UMD build to `umd/` directory that is only distributed with the npm package (available on unpkg).
-
-## 3.1.0
-
-- Add `disabled` prop to `Button`.
-
-## 3.0.0
-
-- Upgrade to React 0.14.
-- Use React's `context` to simplify API.
-- Add `<Wrapper>` component (replacing the need for the factory function `ariaMenuButton()`).
-- Add `style` prop to all components.
-
-## 2.0.4 and 2.0.5
-
-- Better cleanup of Tap.js listeners.
-- Key code 91 is not a letter so I should stop treating it like one.
-
-## 2.0.2 and 2.0.3
-
-- Avoid presuming that `document` exists, to avoid breaking `React.renderToString()`.
-
-## 2.0.1
-
-- Allow for the case that selecting a menu item unmounts the menu (mostly by manager timers more intelligently).
-
-## 2.0.0
-
-- Ignore letter key presses if the letter is paired with `alt`, `ctrl`, or `meta` keys.
-- Use [tap.js](https://github.com/alexgibson/tap.js) to improve click-outside-closes behavior: no overlay required anymore, meaning that a click outside can *both* close the menu *and* do something else — with both mouse and touch events.
-
-## 1.1.0
-
-- Allow objects as MenuItem `value`s.
-
-## 1.0.0
-
-- Nothing really: it was just time to start the real versioning.
-
-## 0.8.0
-- Overlay to enable close-when-clicking-outside for mobile.
-
-## 0.7.0
-- New, more flexible API: provided components are just wrappers around whatever elements they're given.
-
-## 0.6.0
-- Pass `event` to `handleSelection`.
-
-## 0.5.2
-- Add keywords to `package.json`.
-
-## 0.5.1
-- Update build.
-
-## 0.5.0
-- Make class names a little more explicit (change `menuWrapper--trans` to `menuWrapper--transition` and `li` to `menuItemWrapper`).
-- Add `transition` option to factory and remove `transition` prop from component.
-
-## 0.4.0
-- Options to customize css classes' component name and namespace.
-- Remove the need to pass in React by distinguishing `dist-modules/` with (transpiled) CommonJS modules and `dist/` with a UMD library that expects React to be global.
-- Switch from browserify to webpack for JS module compilation.
-
-## 0.3.0
-- Remove `classnames` dependency.
-
-## 0.2.0
-- Add `dist-modules` for modular consumption.
-- Upgrade dependencies.
-
-## 0.1.0
-- Initial release.

package/CODE_OF_CONDUCT.md

@@ -1,22 +0,0 @@
-# Contributor Code of Conduct
-
-As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
-
-We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery
-* Personal attacks
-* Trolling or insulting/derogatory comments
-* Public or private harassment
-* Publishing other's private information, such as physical or electronic addresses, without explicit permission
-* Other unethical or unprofessional conduct.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
-
-This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
-
-This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)

package/dist/Button.js

@@ -1,140 +0,0 @@
-'use strict';
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ManagerContext = require('./ManagerContext');
-
-var _require = require("./propTypes"),
-    refType = _require.refType;
-
-var specialAssign = require('./specialAssign');
-
-var checkedProps = {
-  ambManager: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  forwardedRef: refType,
-  tag: PropTypes.string
-};
-
-// List retrieved from https://www.w3schools.com/tags/att_disabled.asp
-var disabledSupportedTags = function disabledSupportedTags() {
-  return ['button', 'fieldset', 'input', 'optgroup', 'option', 'select', 'textarea'];
-};
-
-var AriaMenuButtonButton = function (_React$Component) {
-  _inherits(AriaMenuButtonButton, _React$Component);
-
-  function AriaMenuButtonButton() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AriaMenuButtonButton);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.ref = React.createRef(), _this.handleKeyDown = function (event) {
-      if (_this.props.disabled) return;
-
-      var ambManager = _this.props.ambManager;
-
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          if (!ambManager.isOpen) {
-            ambManager.openMenu();
-          } else {
-            ambManager.focusItem(0);
-          }
-          break;
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          ambManager.toggleMenu();
-          break;
-        case 'Escape':
-          ambManager.handleMenuKey(event);
-          break;
-        default:
-          // (Potential) letter keys
-          ambManager.handleButtonNonArrowKey(event);
-      }
-    }, _this.handleClick = function () {
-      if (_this.props.disabled) return;
-      _this.props.ambManager.toggleMenu({}, { focusMenu: false });
-    }, _this.setRef = function (instance) {
-      _this.ref.current = instance;
-      if (typeof _this.props.forwardedRef === "function") {
-        _this.props.forwardedRef(instance);
-      } else if (_this.props.forwardedRef) {
-        _this.props.forwardedRef.current = instance;
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  AriaMenuButtonButton.prototype.componentDidMount = function componentDidMount() {
-    this.props.ambManager.button = this;
-  };
-
-  AriaMenuButtonButton.prototype.componentWillUnmount = function componentWillUnmount() {
-    this.props.ambManager.destroy();
-  };
-
-  AriaMenuButtonButton.prototype.render = function render() {
-    var props = this.props;
-    var ambManager = this.props.ambManager;
-
-    var buttonProps = {
-      // "The menu button itself has a role of button."
-      role: 'button',
-      tabIndex: props.disabled ? '' : '0',
-      // "The menu button has an aria-haspopup property, set to true."
-      'aria-haspopup': true,
-      'aria-expanded': ambManager.isOpen,
-      'aria-disabled': props.disabled,
-      onKeyDown: this.handleKeyDown,
-      onClick: this.handleClick
-    };
-
-    var reserved = {};
-    specialAssign(reserved, checkedProps);
-    // The disabled property should be passed down to the Button element
-    // if the tag has support for disabled attribute. So it needs to be removed
-    // from the reserved property object
-    if (disabledSupportedTags().indexOf(props.tag) >= 0) {
-      delete reserved.disabled;
-    }
-    if (ambManager.options.closeOnBlur) {
-      buttonProps.onBlur = ambManager.handleBlur;
-    }
-    specialAssign(buttonProps, props, reserved);
-    specialAssign(buttonProps, { ref: this.setRef });
-
-    return React.createElement(props.tag, buttonProps, props.children);
-  };
-
-  return AriaMenuButtonButton;
-}(React.Component);
-
-AriaMenuButtonButton.propTypes = checkedProps;
-AriaMenuButtonButton.defaultProps = { tag: 'span' };
-
-
-module.exports = React.forwardRef(function (props, ref) {
-  return React.createElement(ManagerContext.Consumer, null, function (ambManager) {
-    var buttonProps = { ambManager: ambManager, forwardedRef: ref };
-    specialAssign(buttonProps, props, {
-      ambManager: checkedProps.ambManager,
-      children: checkedProps.children,
-      forwardedRef: checkedProps.forwardedRef
-    });
-    return React.createElement(AriaMenuButtonButton, buttonProps, props.children);
-  });
-});

package/dist/ManagerContext.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-var AriaMenuButtonManagerContext = React.createContext();
-
-module.exports = AriaMenuButtonManagerContext;

package/dist/Menu.js

@@ -1,131 +0,0 @@
-'use strict';
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var createTapListener = require('teeny-tap');
-var ManagerContext = require('./ManagerContext');
-
-var _require = require("./propTypes"),
-    refType = _require.refType;
-
-var specialAssign = require('./specialAssign');
-
-var checkedProps = {
-  ambManager: PropTypes.object.isRequired,
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  forwardedRef: refType,
-  tag: PropTypes.string
-};
-
-var AriaMenuButtonMenu = function (_React$Component) {
-  _inherits(AriaMenuButtonMenu, _React$Component);
-
-  function AriaMenuButtonMenu() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AriaMenuButtonMenu);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.ref = React.createRef(), _this.addTapListener = function () {
-      var el = _this.ref.current;
-      if (!el) return;
-      var doc = el.ownerDocument;
-      if (!doc) return;
-      _this.tapListener = createTapListener(doc.documentElement, _this.handleTap);
-    }, _this.handleTap = function (event) {
-      if (_this.ref.current.contains(event.target)) return;
-      if (_this.props.ambManager.button.ref.current.contains(event.target)) return;
-      _this.props.ambManager.closeMenu();
-    }, _this.setRef = function (instance) {
-      _this.ref.current = instance;
-      if (typeof _this.props.forwardedRef === "function") {
-        _this.props.forwardedRef(instance);
-      } else if (_this.props.forwardedRef) {
-        _this.props.forwardedRef.current = instance;
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  AriaMenuButtonMenu.prototype.componentDidMount = function componentDidMount() {
-    this.props.ambManager.menu = this;
-  };
-
-  AriaMenuButtonMenu.prototype.componentDidUpdate = function componentDidUpdate() {
-    var ambManager = this.props.ambManager;
-    if (!ambManager.options.closeOnBlur) return;
-    if (ambManager.isOpen && !this.tapListener) {
-      this.addTapListener();
-    } else if (!ambManager.isOpen && this.tapListener) {
-      this.tapListener.remove();
-      delete this.tapListener;
-    }
-
-    if (!ambManager.isOpen) {
-      // Clear the ambManager's items, so they
-      // can be reloaded next time this menu opens
-      ambManager.clearItems();
-    }
-  };
-
-  AriaMenuButtonMenu.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (this.tapListener) this.tapListener.remove();
-    this.props.ambManager.destroy();
-  };
-
-  AriaMenuButtonMenu.prototype.render = function render() {
-    var props = this.props;
-    var ambManager = this.props.ambManager;
-
-    var childrenToRender = function () {
-      if (typeof props.children === 'function') {
-        return props.children({ isOpen: ambManager.isOpen });
-      }
-      if (ambManager.isOpen) return props.children;
-      return false;
-    }();
-
-    if (!childrenToRender) return false;
-
-    var menuProps = {
-      onKeyDown: ambManager.handleMenuKey,
-      role: 'menu',
-      tabIndex: -1
-    };
-
-    if (ambManager.options.closeOnBlur) {
-      menuProps.onBlur = ambManager.handleBlur;
-    }
-
-    specialAssign(menuProps, props, checkedProps);
-    specialAssign(menuProps, { ref: this.setRef });
-
-    return React.createElement(props.tag, menuProps, childrenToRender);
-  };
-
-  return AriaMenuButtonMenu;
-}(React.Component);
-
-AriaMenuButtonMenu.propTypes = checkedProps;
-AriaMenuButtonMenu.defaultProps = { tag: 'div' };
-
-
-module.exports = React.forwardRef(function (props, ref) {
-  return React.createElement(ManagerContext.Consumer, null, function (ambManager) {
-    var buttonProps = { ambManager: ambManager, forwardedRef: ref };
-    specialAssign(buttonProps, props, {
-      ambManager: checkedProps.ambManager,
-      children: checkedProps.children,
-      forwardedRef: checkedProps.forwardedRef
-    });
-    return React.createElement(AriaMenuButtonMenu, buttonProps, props.children);
-  });
-});