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

package/lib/components/TabPicker/TabPicker.js

@@ -0,0 +1,217 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "items", "state", "item"];
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Item as Tab } from '@react-stately/collections';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { Pressable } from '@react-aria/interactions';
+import { useStatusClasses } from '../../hooks';
+import { Box, Text, PopoverMenu, Icon, Menu } from '../..';
+import { TabLine } from '../Tab';
+/* istanbul ignore next */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      items = _ref.items,
+      state = _ref.state,
+      item = _ref.item,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(state.selectedKey),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1];
+
+  var selectionManager = state.selectionManager;
+
+  var _useState5 = useState(selectionManager.focusedKey),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusedItem = _useState6[0],
+      setFocusedItem = _useState6[1];
+
+  var isTabFocused = selectionManager.focusedKey === item.key;
+  var isTabSelected = state.selectedKey === item.key;
+
+  var isListItemFocused = _someInstanceProperty(items).call(items, function (el) {
+    return el.key === selectionManager.focusedKey;
+  });
+
+  var isListItemSelected = _someInstanceProperty(items).call(items, function (el) {
+    return el.key === state.selectedKey;
+  });
+
+  var _useMemo = useMemo(function () {
+    var _context, _tabs$prevIndex, _tabs$nextIndex;
+
+    var tabs = _filterInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (tab) {
+      var _tab$value;
+
+      return !(tab !== null && tab !== void 0 && (_tab$value = tab.value) !== null && _tab$value !== void 0 && _tab$value.isListItem);
+    });
+
+    var prevIndex = _findIndexInstanceProperty(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) - 1;
+    var nextIndex = _findIndexInstanceProperty(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) + 1;
+    return {
+      prevKey: ((_tabs$prevIndex = tabs[prevIndex]) === null || _tabs$prevIndex === void 0 ? void 0 : _tabs$prevIndex.key) || tabs[tabs.length].key,
+      nextKey: ((_tabs$nextIndex = tabs[nextIndex]) === null || _tabs$nextIndex === void 0 ? void 0 : _tabs$nextIndex.key) || tabs[0].key
+    };
+  }, []),
+      prevKey = _useMemo.prevKey,
+      nextKey = _useMemo.nextKey;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isListItemSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var menuRef = useRef();
+
+  var handleSelectedItem = function handleSelectedItem(currentItem) {
+    state.setSelectedKey(currentItem);
+    setFocusedItem(currentItem);
+  };
+
+  useEffect(function () {
+    if (selectedItem) {
+      handleSelectedItem(selectedItem);
+    }
+  }, [selectedItem]);
+  useEffect(function () {
+    if (focusedItem) {
+      selectionManager.setFocusedKey(focusedItem);
+    }
+  }, [focusedItem]);
+  useEffect(function () {
+    if (isOpen && (isTabFocused || isListItemSelected) && menuRef.current) {
+      if (focusedItem) {
+        var _context2;
+
+        _findInstanceProperty(_context2 = _Array$from(menuRef.current.children)).call(_context2, function (el) {
+          return el.dataset.key === focusedItem;
+        }).focus();
+      } else {
+        menuRef.current.firstChild.focus();
+      }
+    }
+
+    if (!isOpen && isTabSelected && !selectedItem) {
+      setSelectedItem(selectionManager.focusedKey);
+    }
+  }, [isOpen]);
+  useEffect(function () {
+    if (isOpen && isListItemFocused) {
+      setFocusedItem(selectionManager.focusedKey);
+    } else if (!isOpen && isListItemFocused) {
+      selectionManager.setFocusedKey(item.key);
+    }
+  }, [selectionManager.focusedKey]);
+  useEffect(function () {
+    if (isTabSelected || isTabFocused) {
+      if (selectedItem) {
+        handleSelectedItem(selectedItem);
+      } else if (isListItemSelected && !selectedItem) {
+        setSelectedItem(state.selectedKey);
+      } else {
+        setFocusedItem(items[0].key);
+      }
+    } else if (!isListItemSelected && !isListItemFocused) {
+      setIsOpen(false);
+      setSelectedItem(null);
+      setFocusedItem(null);
+    }
+  }, [isTabSelected, isListItemSelected]);
+
+  var handleKeyNavigation = function handleKeyNavigation(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+        {
+          selectionManager.setFocusedKey(nextKey);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          selectionManager.setFocusedKey(prevKey);
+          break;
+        }
+
+      default:
+        break;
+    }
+  };
+
+  var tabProps = others;
+  delete tabProps.onPointerDown;
+  delete tabProps.onKeyDown;
+  return ___EmotionJSX(PopoverMenu, {
+    onOpenChange: setIsOpen,
+    isOpen: isOpen,
+    isContainFocus: true
+  }, ___EmotionJSX(Pressable, null, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    className: classNames,
+    variant: "menuTab",
+    onKeyDown: handleKeyNavigation,
+    role: "tablist"
+  }, ___EmotionJSX(Box, _extends({
+    className: classNames,
+    variant: "tab",
+    ref: ref
+  }, tabProps), ___EmotionJSX(Text, {
+    variant: "tabLabel"
+  }, item.props.name), selectedItem && ___EmotionJSX(TabLine, null)), ___EmotionJSX(Icon, {
+    color: isTabFocused || _includesInstanceProperty(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
+    icon: isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
+  }))), ___EmotionJSX(Menu, {
+    onAction: setSelectedItem,
+    selectionMode: "single",
+    selectedKeys: [selectionManager.focusedKey],
+    ref: menuRef
+  }, _mapInstanceProperty(items).call(items, function (tab) {
+    return ___EmotionJSX(Tab, {
+      key: tab.key
+    }, tab.name);
+  })));
+});
+TabPicker.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      name: PropTypes.string
+    })
+  }),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string
+  })),
+  state: PropTypes.shape({
+    collection: PropTypes.shape({}),
+    selectedKey: PropTypes.string,
+    setSelectedKey: PropTypes.func,
+    selectionManager: PropTypes.shape({
+      focusedKey: PropTypes.string,
+      setFocusedKey: PropTypes.func
+    })
+  })
+};
+export default TabPicker;

package/lib/components/TabPicker/index.js

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

package/lib/components/Table/Table.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Box from '../Box';
+/**
+ * Basic Table parent component.
+ *
+ * Renders an HTML `<table>`
+ *
+ * Accepts the `<TableBody>` component and/or the `<TableHead>` as children.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Table = function Table(props) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    as: "table",
+    variant: "table.table"
+  }, others), children);
+};
+
+export default Table;

package/lib/components/Table/Table.stories.js

@@ -0,0 +1,77 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Table from './Table';
+import TableBody from '../TableBody';
+import TableRow from '../TableRow';
+import TableCell from '../TableCell';
+import TableHead from '../TableHead';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Table',
+  component: Table
+};
+var headers = ['Country', 'Population', 'Continent'];
+var objects = [{
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'North America'
+}, {
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+export var Default = function Default() {
+  // const headers = [
+  //   'Country', 'Population', 'Continent',
+  // ];
+  //
+  // const objects = [
+  //   {
+  //     country: 'USA',
+  //     population: '320,000,000',
+  //     continent: 'North America',
+  //   },
+  //   {
+  //     country: 'Canada',
+  //     population: '37,000,000',
+  //     continent: 'North America',
+  //   },
+  //   {
+  //     country: 'China',
+  //     population: '1,398,000,000',
+  //     continent: 'Asia',
+  //   },
+  //   {
+  //     country: 'France',
+  //     population: '67,000,000',
+  //     continent: 'Europe',
+  //   },
+  // ];
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(headers).call(headers, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, null, _mapInstanceProperty(objects).call(objects, function (object) {
+    var _context;
+
+    return ___EmotionJSX(TableRow, {
+      key: object.country
+    }, _mapInstanceProperty(_context = _Object$values(object)).call(_context, function (value) {
+      return ___EmotionJSX(TableCell, {
+        key: value
+      }, value);
+    }));
+  })));
+};

package/lib/components/Table/Table.test.js

@@ -0,0 +1,63 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Table from './Table';
+import TableBody from '../TableBody';
+import TableRow from '../TableRow';
+import TableCell from '../TableCell';
+import TableHead from '../TableHead';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-table';
+var defaultProps = {
+  'data-testid': testId
+};
+var headers = ['Country', 'Population', 'Continent'];
+var objects = [{
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'North America'
+}, {
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(Table, defaultProps, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(headers).call(headers, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, null, _mapInstanceProperty(objects).call(objects, function (object) {
+    var _context;
+
+    return ___EmotionJSX(TableRow, {
+      key: object.country
+    }, _mapInstanceProperty(_context = _Object$values(object)).call(_context, function (value) {
+      return ___EmotionJSX(TableCell, {
+        key: value
+      }, value);
+    }));
+  }))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default table', function () {
+  getComponent();
+  var table = screen.getByTestId(testId);
+  expect(table).toBeInstanceOf(HTMLTableElement);
+  expect(table).toBeInTheDocument();
+});

package/lib/components/Table/index.js

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

package/lib/components/TableBody/TableBody.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Box from '../Box';
+/**
+ * Basic TableBody component.
+ *
+ * Renders HTML `<tbody>`
+ *
+ * Needs to be a child of the `<Table>` component. Accepts `<TableRow>` as children.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TableBody = function TableBody(props) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    variant: "table.tableBody",
+    as: "tbody"
+  }, others), children);
+};
+
+export default TableBody;

package/lib/components/TableBody/index.js

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

package/lib/components/TableCell/TableCell.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "isHeading"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '../Box';
+/**
+ * TableCell component.
+ *
+ * Renders either an `<th>` or a `<td>` HTML element, depending on the isHeading prop.
+ *
+ * Accepts text as children, and needs to have a `<TableRow>` as a parent.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TableCell = function TableCell(props) {
+  var children = props.children,
+      isHeading = props.isHeading,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    variant: isHeading ? 'table.tableHead' : 'table.tableData',
+    as: isHeading ? 'th' : 'td'
+  }, others), children);
+};
+
+TableCell.propTypes = {
+  /** Determines whether or not the html rendered is a th or td element. */
+  isHeading: PropTypes.bool
+};
+export default TableCell;

package/lib/components/TableCell/TableCell.test.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TableCell from './TableCell';
+import Table from '../Table';
+import TableBody from '../TableBody';
+import TableRow from '../TableRow';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-cell';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Table, null, ___EmotionJSX(TableBody, null, ___EmotionJSX(TableRow, null, ___EmotionJSX(TableCell, _extends({}, props, defaultProps), "Here is text.")))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('isHeading = true', function () {
+  var props = {
+    isHeading: true
+  };
+  getComponent(props);
+  var header = screen.getByRole('columnheader');
+  expect(header).toBeInTheDocument();
+});
+test('isHeading = false', function () {
+  var props = {
+    isHeading: false
+  };
+  getComponent(props);
+  var cell = screen.getByRole('cell');
+  expect(cell).toBeInTheDocument();
+});

package/lib/components/TableCell/index.js

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

package/lib/components/TableHead/TableHead.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Box from '../Box';
+/**
+ * TableHead component.
+ *
+ * Renders a `<thead>` html element.
+ *
+ * Accepts `<TableRow>` as children. Needs to be wrapped within a `<Table>` component.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TableHead = function TableHead(props) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    as: "thead"
+  }, others), children);
+};
+
+export default TableHead;

package/lib/components/TableHead/index.js

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

package/lib/components/TableRow/TableRow.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Box from '../Box';
+/**
+ * TableRow component.
+ *
+ * Renders a `<tr>` html element.
+ *
+ * Accepts `<TableCell>` as children. Needs to be wrapped within a `<TableHead>` or a `<TableBody>`.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TableRow = function TableRow(props) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    variant: "table.tableRow",
+    as: "tr"
+  }, others), children);
+};
+
+export default TableRow;

package/lib/components/TableRow/index.js

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