@pingux/astro 1.1.1-alpha.0 → 1.1.1-alpha.1

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

@@ -1,86 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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 { 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);
-});
-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

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

package/lib/components/MenuItem/MenuItem.js

@@ -1,159 +0,0 @@
-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";
-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, ["isSeparator", "isPressed", "data-id"]);
-
-  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
-    }),
-    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

@@ -1,165 +0,0 @@
-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

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