@pingux/astro 1.27.0-alpha.15 → 1.27.0-alpha.16

package/lib/components/DataTable/DataTableChip.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-nested-ternary */
+import React, { forwardRef } from 'react';
+import AlertIcon from 'mdi-react/AlertIcon';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import CheckIcon from 'mdi-react/CheckIcon';
+import PropTypes from 'prop-types';
+import { Chip, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
+  return ___EmotionJSX(Chip, {
+    label: cell,
+    bg: "white",
+    ref: ref,
+    textColor: cell === 'Pending' || cell === 'Failed' ? 'text.primary' : color,
+    sx: {
+      border: '1px',
+      borderStyle: 'solid',
+      borderColor: color,
+      flexDirection: 'row-reverse !important'
+    }
+  }, cell !== 'Pending' && ___EmotionJSX(Icon, {
+    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : null,
+    mr: "xs",
+    size: "14px",
+    color: color
+  }));
+});
+DataTableChip.propTypes = {
+  cell: PropTypes.string
+};
+export default DataTableChip;

package/lib/components/DataTable/DataTableChip.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableChip } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableChip, props));
+};
+
+test('renders component with rejected label', function () {
+  var cell = 'Rejected';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Rejected')).toBeInTheDocument();
+});
+test('renders component with pending label', function () {
+  var cell = 'Pending';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Pending')).toBeInTheDocument();
+});
+test('renders component with failed label', function () {
+  var cell = 'Failed';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Failed')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMenu.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMenu = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(Box, {
+    ref: ref,
+    variant: "dataTable.tableMenu"
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "row menu"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVerticalIcon
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))))));
+});
+export default DataTableMenu;

package/lib/components/DataTable/DataTableMenu.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(DataTableMenu, null));
+};
+
+test('renders component with menu', function () {
+  getComponent();
+  expect(screen.getByLabelText('row menu')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMultiLine.js

@@ -0,0 +1,46 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMultiLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(cell).call(cell, function (item) {
+    var _context;
+
+    return ___EmotionJSX(Box, {
+      key: _concatInstanceProperty(_context = "".concat(cell.key, "_")).call(_context, item.accountId),
+      ref: ref
+    }, ___EmotionJSX(Box, {
+      sx: {
+        flexDirection: 'row !important'
+      }
+    }, ___EmotionJSX(Box, {
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        mx: '18px'
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: item.icon,
+      color: "accent.40",
+      size: "18.75"
+    })), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+      sx: {
+        fontWeight: 500,
+        fontSize: '15px'
+      }
+    }, item.name), ___EmotionJSX(Box, {
+      sx: {
+        color: 'neutral.40',
+        fontWeight: 400,
+        fontSize: '13px'
+      }
+    }, "Account ID: ", item.accountId))));
+  }));
+});
+DataTableMultiLine.propTypes = {
+  cell: PropTypes.arrayOf(PropTypes.shape({}))
+};
+export default DataTableMultiLine;

package/lib/components/DataTable/DataTableMultiLine.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
+import { DataTableMultiLine } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableMultiLine, props));
+};
+
+test('renders component with account name', function () {
+  var cell = [{
+    name: 'Acme',
+    icon: ApplicationIcon,
+    accountId: 123
+  }];
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Acme')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableVirtualizer.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["layout", "collection", "focusedKey", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { chain, mergeProps, useLayoutEffect } from '@react-aria/utils';
+import { ScrollView, setScrollLeft, useVirtualizer } from '@react-aria/virtualizer';
+import { useVirtualizerState } from '@react-stately/virtualizer';
+import { Box } from '../../index';
+/**
+ * Custom Virtualizer using react aria Spectrum TableView/TableVirtualizer
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _layout$getLayoutInfo;
+
+  var layout = _ref.layout,
+      collection = _ref.collection,
+      focusedKey = _ref.focusedKey,
+      renderView = _ref.renderView,
+      renderWrapper = _ref.renderWrapper,
+      domRef = _ref.domRef,
+      bodyRef = _ref.bodyRef,
+      setTableWidth = _ref.setTableWidth,
+      getColumnWidth = _ref.getColumnWidth,
+      onVisibleRectChangeProp = _ref.onVisibleRectChange,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var direction = 'ltr'; // useLocale override
+
+  var headerRef = useRef(ref);
+  var loadingState = collection.body.props.loadingState;
+  var isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  var onLoadMore = collection.body.props.onLoadMore;
+  var state = useVirtualizerState({
+    layout: layout,
+    collection: collection,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    onVisibleRectChange: function onVisibleRectChange(rect) {
+      // eslint-disable-next-line no-param-reassign
+      bodyRef.current.scrollTop = rect.y;
+      setScrollLeft(bodyRef.current, direction, rect.x);
+    },
+    transitionDuration: isLoading ? 160 : 220
+  });
+
+  var _useVirtualizer = useVirtualizer({
+    focusedKey: focusedKey,
+    scrollToItem: function scrollToItem(key) {
+      var item = collection.getItem(key);
+      state.virtualizer.scrollToItem(key, {
+        duration: 0,
+        // Prevent scrolling to the top when clicking on column headers.
+        shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !== 'column',
+        // Offset scroll position by width of selection cell
+        // (which is sticky and will overlap the cell we're scrolling to).
+        offsetX: 0
+      });
+    }
+  }, state, domRef),
+      virtualizerProps = _useVirtualizer.virtualizerProps; // If column widths change, need to relay out.
+
+
+  useLayoutEffect(function () {
+    state.virtualizer.relayoutNow({
+      sizeChanged: true
+    });
+  }, [state.virtualizer]);
+  var headerHeight = ((_layout$getLayoutInfo = layout.getLayoutInfo('header')) === null || _layout$getLayoutInfo === void 0 ? void 0 : _layout$getLayoutInfo.rect.height) || 0;
+  var visibleRect = state.virtualizer.visibleRect; // Sync the scroll position from the table body to the header container.
+
+  var onScroll = useCallback(function () {
+    headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+  }, [bodyRef]);
+  var onVisibleRectChange = useCallback(function (rect) {
+    setTableWidth(rect.width);
+    state.setVisibleRect(rect);
+
+    if (!isLoading && onLoadMore) {
+      var scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
+
+      if (rect.y > scrollOffset) {
+        onLoadMore();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
+  useLayoutEffect(function () {
+    if (!isLoading && onLoadMore && !state.isAnimating) {
+      if (state.contentSize.height <= state.virtualizer.visibleRect.height) {
+        onLoadMore();
+      }
+    }
+  }, [state.contentSize, state.virtualizer, state.isAnimating, onLoadMore, isLoading]);
+  return ___EmotionJSX(Box, _extends({}, mergeProps(otherProps, virtualizerProps), {
+    ref: domRef
+  }), ___EmotionJSX(Box, {
+    role: "presentation",
+    variant: "dataTable.tableHeadWrapper",
+    style: {
+      width: visibleRect.width,
+      height: headerHeight,
+      overflow: 'hidden',
+      position: 'relative',
+      willChange: state.isScrolling ? 'scroll-position' : '',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: headerRef
+  }, state.visibleViews[0]), ___EmotionJSX(ScrollView, {
+    role: "presentation",
+    variant: "dataTable.tableBody",
+    style: {
+      flex: 1
+    },
+    innerStyle: {
+      overflow: 'visible',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: bodyRef,
+    contentSize: state.contentSize,
+    onVisibleRectChange: chain(onVisibleRectChange, onVisibleRectChangeProp),
+    onScrollStart: state.startScrolling,
+    onScrollEnd: state.endScrolling,
+    onScroll: onScroll
+  }, state.visibleViews[1]));
+});
+DataTableVirtualizer.propTypes = {
+  bodyRef: PropTypes.shape({
+    current: PropTypes.shape({
+      scrollLeft: PropTypes.number,
+      scrollTop: PropTypes.number
+    })
+  }),
+  collection: PropTypes.shape({
+    body: PropTypes.shape({
+      props: PropTypes.shape({
+        loadingState: PropTypes.string,
+        onLoadMore: PropTypes.func
+      })
+    }),
+    getItem: PropTypes.func
+  }),
+  domRef: PropTypes.shape({}),
+  focusedKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  getColumnWidth: PropTypes.func,
+  layout: PropTypes.shape({
+    getLayoutInfo: PropTypes.func
+  }),
+  onVisibleRectChange: PropTypes.func,
+  renderView: PropTypes.func,
+  renderWrapper: PropTypes.func,
+  setTableWidth: PropTypes.func
+};
+export default DataTableVirtualizer;

package/lib/components/DataTable/index.js

@@ -0,0 +1,5 @@
+export { default } from './DataTable';
+export { default as DataTableChip } from './DataTableChip';
+export { default as DataTableMultiLine } from './DataTableMultiLine';
+export { default as DataTableVirtualize } from './DataTableVirtualizer';
+export { default as DataTableMenu } from './DataTableMenu';

package/lib/context/DataTableContext/index.js

@@ -0,0 +1,5 @@
+import React, { useContext } from 'react';
+export var DataTableContext = /*#__PURE__*/React.createContext(null);
+export var useDataTableContext = function useDataTableContext() {
+  return useContext(DataTableContext);
+};

package/lib/index.js

@@ -151,4 +151,7 @@ export * from './components/TooltipTrigger';
 
 export { Item, Section } from '@react-stately/collections';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-export { useOverlayTriggerState } from '@react-stately/overlays';
+export { useOverlayTriggerState } from '@react-stately/overlays';
+export { default as DataTable } from './components/DataTable';
+export * from './components/DataTable';
+export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-spectrum/table';

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -19,6 +19,29 @@ var items = [{
   name: 'Third Option',
   id: '3'
 }];
+var sx = {
+  actionIcon: {
+    color: 'neutral.30'
+  },
+  dragVerticalIcon: {
+    color: 'neutral.50'
+  },
+  iconButton: {
+    ml: 'xs'
+  },
+  iconButtonToggleContainer: {
+    mx: 'sm',
+    flexShrink: 0
+  },
+  iconContainer: {
+    alignItems: 'center',
+    ml: '12px',
+    mr: '12px'
+  },
+  outerContainer: {
+    alignItems: 'center'
+  }
+};
 export var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
     return ___EmotionJSX("svg", _extends({
@@ -66,24 +89,22 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
+    "aria-label": "Row one value",
     containerProps: {
       width: '275px'
     },
     labelProps: {
       mb: 0
     },
-    "aria-label": "Row one value",
     controlProps: {
       'aria-label': 'test'
     }
@@ -93,10 +114,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -126,35 +144,29 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -174,10 +186,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -207,24 +216,20 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

package/lib/styles/variants/variants.js

@@ -35,6 +35,7 @@ import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
 import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
@@ -58,5 +59,6 @@ export default _objectSpread(_objectSpread({
   stepper: stepper,
   table: table
 }, tabs), {}, {
-  tooltip: tooltip
+  tooltip: tooltip,
+  dataTable: dataTable
 });