@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/components/Menu/Menu.stories.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { Item } from '@react-stately/collections';
+import Menu from '../Menu';
+import Text from '../Text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Menu',
+  component: Menu,
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    selectionMode: {},
+    isDisabled: {},
+    isNotFocusedOnHover: {},
+    'aria-label': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-labelledby': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-describedby': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-details': {
+      control: {
+        type: 'text'
+      }
+    },
+    isSelected: {
+      control: {
+        type: 'none'
+      }
+    },
+    disabledKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    defaultSelectedKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    selectedKeys: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX(Menu, _extends({
+    "aria-label": "Example Menu"
+  }, args), ___EmotionJSX(Item, {
+    key: "edit",
+    textValue: "Edit",
+    "data-id": "edit"
+  }, ___EmotionJSX(Text, null, "Edit")), ___EmotionJSX(Item, {
+    key: "duplicate",
+    textValue: "Duplicate",
+    "data-id": "duplicate"
+  }, ___EmotionJSX(Text, null, "Duplicate")), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "Delete",
+    "data-id": "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete")));
+};

package/lib/components/Menu/Menu.test.js

@@ -0,0 +1,170 @@
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
+import { Menu, Item } from '../../index';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testTitle = 'Test Title';
+var defaultProps = {
+  title: testTitle,
+  'aria-label': 'testLabel'
+};
+var defaultItems = [{
+  key: 'a',
+  children: 'A'
+}, {
+  key: 'b',
+  children: 'B'
+}, {
+  key: 'c',
+  children: 'C'
+}];
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(defaultItems).call(defaultItems, function (item) {
+    return ___EmotionJSX(Item, _extends({
+      key: item.key
+    }, item));
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('should render basic menu with children', function () {
+  getComponent();
+  var menu = screen.queryByRole('menu');
+  expect(menu).toBeInTheDocument();
+  var menuItems = screen.queryAllByRole('menuitem');
+  expect(menuItems).toHaveLength(3);
+  expect(menu).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
+});
+test('should render items when selectionMode is set to single', function () {
+  getComponent({
+    selectionMode: 'single'
+  });
+  var menu = screen.queryByRole('menu');
+  expect(menu).toBeInTheDocument();
+  var menuItems = screen.queryAllByRole('menuitemradio');
+  expect(menuItems).toHaveLength(3);
+});
+test('should render items when selectionMode is set to multiple', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var menu = screen.queryByRole('menu');
+  expect(menu).toBeInTheDocument();
+  var menuItems = screen.queryAllByRole('menuitemcheckbox');
+  expect(menuItems).toHaveLength(3);
+});
+test('applies disabled class with disabled prop', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var menuItems = screen.getAllByRole('menuitem');
+
+  _forEachInstanceProperty(menuItems).call(menuItems, function (item) {
+    return expect(item).toHaveClass('is-disabled');
+  });
+});
+test('should be able to navigate through the items with the keyboard', function () {
+  getComponent();
+  var menuItems = screen.getAllByRole('menuitem');
+  expect(menuItems[0]).not.toHaveFocus(); // Need to tab to them first
+
+  userEvent.tab();
+  expect(menuItems[0]).toHaveFocus(); // Then we can use the arrow keys
+
+  fireEvent.keyDown(menuItems[0], {
+    key: 'ArrowDown'
+  });
+  fireEvent.keyUp(menuItems[0], {
+    key: 'ArrowDown'
+  });
+  expect(menuItems[0]).not.toHaveFocus();
+  expect(menuItems[1]).toHaveFocus();
+  fireEvent.keyDown(menuItems[1], {
+    key: 'ArrowDown'
+  });
+  fireEvent.keyUp(menuItems[1], {
+    key: 'ArrowDown'
+  });
+  expect(menuItems[1]).not.toHaveFocus();
+  expect(menuItems[2]).toHaveFocus();
+});
+test('should fire onAction', function () {
+  var onAction = jest.fn();
+  getComponent({
+    onAction: onAction
+  });
+  var menuItems = screen.getAllByRole('menuitem');
+  expect(onAction).not.toHaveBeenCalled(); // Keyboard events
+
+  userEvent.tab();
+  fireEvent.keyDown(menuItems[0], {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(menuItems[0], {
+    key: 'Enter'
+  });
+  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].key); // Click events
+
+  userEvent.click(menuItems[1]);
+  expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].key);
+});
+test('should not fire onSelectionChange when selectionMode is none', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+  var menuItems = screen.getAllByRole('menuitem');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Keyboard events
+
+  userEvent.tab();
+  fireEvent.keyDown(menuItems[0], {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(menuItems[0], {
+    key: 'Enter'
+  });
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Click events
+
+  userEvent.click(menuItems[1]);
+  expect(onSelectionChange).not.toHaveBeenCalled();
+});
+test('should fire onSelectionChange when selectionMode is not none', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange,
+    selectionMode: 'single'
+  });
+  var menuItems = screen.getAllByRole('menuitemradio');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Keyboard events
+
+  userEvent.tab();
+  fireEvent.keyDown(menuItems[0], {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(menuItems[0], {
+    key: 'Enter'
+  });
+  expect(onSelectionChange).toHaveBeenNthCalledWith(1, expect.any(_Set)); // Click events
+
+  userEvent.click(menuItems[1]);
+  expect(onSelectionChange).toHaveBeenNthCalledWith(2, expect.any(_Set));
+});
+test('props passed through others are passed to menu', function () {
+  getComponent({
+    sx: {
+      bg: 'red'
+    }
+  });
+  var menu = screen.queryByRole('menu');
+  expect(menu).toBeInTheDocument();
+  expect(menu).toHaveStyle('background-color: red');
+});

package/lib/components/Menu/index.js

@@ -0,0 +1 @@
+export { default } from './Menu';

package/lib/components/MenuItem/MenuItem.js

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isSeparator", "isPressed", "data-id"];
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
+import { useMenuItem } from '@react-aria/menu';
+import { useFocus, useHover, usePress } from '@react-aria/interactions';
+import { useMenuContext } from '../../context/MenuContext';
+import { usePropWarning, useStatusClasses } from '../../hooks';
+import Box from '../Box';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+/**
+ * Menu Item component intended to be used within Menu or PopupMenu.
+ * This component is not intented to be used outside of Menu or independently.
+ * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var item = props.item,
+      propIsDisabled = props.isDisabled,
+      isFocusVisible = props.isFocusVisible,
+      isNotFocusedOnHover = props.isNotFocusedOnHover,
+      className = props.className,
+      onAction = props.onAction,
+      state = props.state;
+
+  var _useMenuContext = useMenuContext(),
+      onClose = _useMenuContext.onClose,
+      closeOnSelect = _useMenuContext.closeOnSelect;
+
+  var key = item.key,
+      rendered = item.rendered,
+      itemProps = item.props;
+
+  var isSeparator = itemProps.isSeparator,
+      propIsPressed = itemProps.isPressed,
+      dataId = itemProps['data-id'],
+      others = _objectWithoutProperties(itemProps, _excluded);
+
+  var isDisabled = propIsDisabled || state.disabledKeys.has(key);
+  var isSelected = state.selectionManager.isSelected(key);
+  var menuItemRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return menuItemRef.current;
+  });
+
+  var _useMenuItem = useMenuItem({
+    key: item.key,
+    'aria-label': item['aria-label'],
+    isDisabled: isDisabled,
+    onAction: onAction,
+    isSelected: isSelected,
+    onClose: onClose,
+    closeOnSelect: closeOnSelect
+  }, state, menuItemRef),
+      menuItemProps = _useMenuItem.menuItemProps;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var _usePress = usePress({
+    ref: menuItemRef,
+    isDisabled: isDisabled,
+    isPressed: propIsPressed
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocus = useFocus({
+    onFocusChange: setFocused
+  }),
+      focusProps = _useFocus.focusProps;
+
+  var _useHover = useHover({
+    isDisabled: isDisabled
+  }),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isFocused: isFocused || isHovered && !isFocusVisible,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    isPressed: isPressed
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  if (isNotFocusedOnHover) {
+    delete menuItemProps.onPointerEnter;
+    delete menuItemProps.onPointerLeave;
+  }
+
+  return ___EmotionJSX(Box, _extends({
+    as: "li",
+    className: classNames,
+    ref: menuItemRef,
+    variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
+    "data-id": dataId
+  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+});
+MenuItem.displayName = 'MenuItem';
+MenuItem.propTypes = {
+  /** Whether the item is disabled. */
+  isDisabled: PropTypes.bool,
+
+  /** Whether the menu item is selected. */
+  isSelected: PropTypes.bool,
+
+  /** Whether the menu item is currently pressed. */
+  isPressed: PropTypes.bool,
+
+  /**
+   * Whether the containing menu has keyboard focus.
+   * Used to determine when to present hover vs focus styling.
+   */
+  isFocusVisible: PropTypes.bool,
+
+  /**
+   * Whether menu item should receive focus state on hover.
+   */
+  isNotFocusedOnHover: PropTypes.bool,
+
+  /** A screen reader only label for the menu item. */
+  'aria-label': PropTypes.string,
+
+  /** Handler that is called when the menu should close after selecting an item. */
+  onClose: PropTypes.func,
+
+  /** Handler that is called when the user activates the item. */
+  onAction: PropTypes.func,
+  item: PropTypes.shape({
+    'aria-label': PropTypes.string,
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      'data-id': PropTypes.string,
+      isSeparator: PropTypes.bool,
+      isPressed: PropTypes.bool
+    }),
+    rendered: PropTypes.node,
+    isDisabled: PropTypes.bool
+  }),
+  state: PropTypes.shape({
+    disabledKeys: isIterableProp,
+    selectionManager: PropTypes.shape({
+      isSelected: PropTypes.func
+    })
+  })
+};
+MenuItem.defaultProps = {
+  isDisabled: false,
+  isPressed: false
+};
+export default MenuItem;

package/lib/components/MenuItem/MenuItem.test.js

@@ -0,0 +1,165 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
+import { Menu, Item } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'testId';
+var defaultMenuItems = [{
+  key: 'MenuItem 1',
+  children: 'MenuItem 1',
+  'data-id': 'menuItem1'
+}, {
+  key: 'MenuItem 2',
+  children: 'MenuItem 2',
+  'data-id': 'menuItem2'
+}, {
+  key: 'MenuItem 3',
+  children: 'MenuItem 3',
+  'data-id': 'menuItem3'
+}];
+var defaultProps = {
+  'data-testid': testId,
+  defaultSelectedKey: defaultMenuItems[0].key,
+  'aria-label': 'testLabel'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? defaultMenuItems : _ref$items,
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(items).call(items, function (li) {
+    return ___EmotionJSX(Item, _extends({
+      key: li.key
+    }, li, {
+      sx: {
+        backgroundColor: 'orange'
+      }
+    }));
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders menu with menu items', function () {
+  getComponent();
+  var menu = screen.getByRole('menu');
+  var menuItems = screen.getAllByRole('menuitem');
+  expect(menu).toBeInTheDocument();
+  expect(menuItems).toHaveLength(menuItems.length);
+
+  _forEachInstanceProperty(menuItems).call(menuItems, function (item) {
+    return expect(item).toBeInTheDocument();
+  });
+});
+test('applies focus when tabbed to', function () {
+  getComponent();
+  var itemText = defaultMenuItems[0].children;
+  var menuItem = screen.getByText(itemText);
+  expect(menuItem).not.toHaveFocus();
+  expect(menuItem).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(menuItem).toHaveFocus();
+  expect(menuItem).toHaveClass('is-focused');
+});
+test('can arrow through menuItems', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+  var itemText2 = defaultMenuItems[1].children;
+  var menuItem1 = screen.getByText(itemText1);
+  var menuItem2 = screen.getByText(itemText2);
+  expect(menuItem1).not.toHaveFocus();
+  expect(menuItem1).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(menuItem1).toHaveFocus();
+  expect(menuItem1).toHaveClass('is-focused');
+  fireEvent.keyDown(menuItem1, {
+    key: 'ArrowDown',
+    code: 'ArrowDown'
+  });
+  expect(menuItem2).toHaveFocus();
+  expect(menuItem2).toHaveClass('is-focused');
+});
+test('hovering menuItems applies focus class and removes focus style on unhover with "isNotFocusedOnHover"', function () {
+  getComponent({
+    isNotFocusedOnHover: true
+  });
+  var itemText1 = defaultMenuItems[0].children;
+  var menuItem1 = screen.getByText(itemText1);
+  expect(menuItem1).not.toHaveClass('is-focused');
+  userEvent.hover(menuItem1);
+  expect(menuItem1).toHaveClass('is-focused');
+  userEvent.unhover(menuItem1);
+  expect(menuItem1).not.toHaveClass('is-focused');
+});
+test('hovering menuItems applies focus class and leaves focus style on unhover', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+  var itemText2 = defaultMenuItems[1].children;
+  var menuItem1 = screen.getByText(itemText1);
+  var menuItem2 = screen.getByText(itemText2);
+  expect(menuItem1).not.toHaveClass('is-focused');
+  expect(menuItem2).not.toHaveClass('is-focused');
+  userEvent.hover(menuItem1);
+  expect(menuItem1).toHaveClass('is-focused');
+  userEvent.hover(menuItem2);
+  expect(menuItem2).toHaveClass('is-focused');
+  userEvent.unhover(menuItem2);
+  expect(menuItem2).toHaveClass('is-focused');
+});
+test('disables item with isDisabled applied, does not disable without prop', function () {
+  getComponent({
+    disabledKeys: [defaultMenuItems[0].key]
+  });
+  var disbaledItemText = defaultMenuItems[0].children;
+  var disabledMenuItem = screen.getByText(disbaledItemText);
+  expect(disabledMenuItem).toHaveClass('is-disabled');
+  var menuItemText = defaultMenuItems[1].children;
+  var menuItem = screen.getByText(menuItemText);
+  expect(menuItem).not.toHaveClass('is-disabled');
+});
+test('should change styles according to isPressed prop', function () {
+  var customItems = _Array$from(defaultMenuItems);
+
+  customItems[0].isPressed = true;
+  getComponent({}, {
+    items: customItems
+  });
+  var pressedItem = screen.getAllByRole('menuitem')[0];
+  var regularItem = screen.getAllByRole('menuitem')[1];
+  expect(pressedItem).toHaveClass('is-pressed');
+  expect(regularItem).not.toHaveClass('is-pressed');
+});
+test('applies selected styling with isSelected prop, does not add class without prop', function () {
+  getComponent({
+    selectionMode: 'single',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var selectedItemText = defaultMenuItems[0].children;
+  var selectedMenuItem = screen.getByText(selectedItemText);
+  expect(selectedMenuItem).toHaveClass('is-selected');
+  var menuItemText = defaultMenuItems[1].children;
+  var menuItem = screen.getByText(menuItemText);
+  expect(menuItem).not.toHaveClass('is-selected');
+});
+test('Item accepts a data-id and the data-id can be found in the DOM', function () {
+  getComponent();
+  var menuItems = screen.queryAllByRole('menuitem');
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
+  expect(menuItems[0]).toHaveAttribute('data-id', defaultMenuItems[0]['data-id']);
+});
+test('custom props are passed into menuItem', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+  var menuItem1 = screen.getByText(itemText1);
+  expect(menuItem1).toHaveStyleRule('background-color', 'orange');
+});

package/lib/components/MenuItem/index.js

@@ -0,0 +1 @@
+export { default } from './MenuItem';