@pingux/astro 1.27.0-alpha.9 → 1.28.0

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/components/MultivaluesField/MultivaluesField.js

@@ -18,7 +18,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context10, _context11; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(source), !0)).call(_context10, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context11 = ownKeys(Object(source))).call(_context11, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -46,7 +46,7 @@ import FieldHelperText from '../FieldHelperText';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context6;
+  var _context7;
 
   var defaultSelectedKeys = props.defaultSelectedKeys,
       direction = props.direction,
@@ -228,7 +228,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               setFilterString('');
             }
           } else if (hasCustomValue) {
-            var _context3;
+            var _context3, _context4;
 
             var _key2 = e.target.value;
 
@@ -236,8 +236,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               return;
             }
 
-            selectionManager.toggleSelection(_key2);
-            setCustomItems(_concatInstanceProperty(_context3 = []).call(_context3, customItems, [{
+            selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [_key2]));
+            setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
               id: _key2,
               key: _key2,
               name: _key2
@@ -291,9 +291,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var readOnlyInputEntry = ___EmotionJSX(React.Fragment, null, isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context4, _context5;
+    var _context5, _context6;
 
-    var item = _findInstanceProperty(_context4 = _concatInstanceProperty(_context5 = []).call(_context5, initialItems, customItems)).call(_context4, function (el) {
+    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
       return el.key === key;
     });
 
@@ -329,10 +329,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context6 = _Array$from(selectionManager.selectedKeys)).call(_context6, function (key) {
-    var _context7, _context8;
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context7 = _Array$from(selectionManager.selectedKeys)).call(_context7, function (key) {
+    var _context8, _context9;
 
-    var item = _findInstanceProperty(_context7 = _concatInstanceProperty(_context8 = []).call(_context8, initialItems, customItems)).call(_context7, function (el) {
+    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
       return el.key === key;
     });
 

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/FlippableCaretMenuButton.stories.js

@@ -31,6 +31,40 @@ export default {
   title: 'Recipes/FlippableCaretMenuButton'
 };
 var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
+var sx = {
+  openButton: {
+    height: '30px',
+    borderRadius: 'md',
+    fontSize: '13px',
+    mb: 'sm'
+  },
+  closeIconButton: {
+    position: 'absolute',
+    top: '14px',
+    right: 'sm'
+  },
+  buttonsContainer: {
+    p: 'lg',
+    flexDirection: 'initial !important',
+    alignContent: 'space-between',
+    flexWrap: 'wrap'
+  },
+  selectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  },
+  unSelectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    borderColor: 'neutral.80',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  }
+};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -89,14 +123,9 @@ export var Default = function Default() {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
-    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: {
-      height: '30px',
-      borderRadius: '15px',
-      fontSize: '13px'
-    }
+    sx: sx.openButton
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
@@ -119,36 +148,15 @@ export var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: {
-      position: 'absolute',
-      top: 14,
-      right: 10
-    }
+    sx: sx.closeIconButton
   }, ___EmotionJSX(Icon, {
     icon: CloseIcon
   })), ___EmotionJSX(Box, {
-    sx: {
-      p: 'lg',
-      flexDirection: 'initial !important',
-      alignContent: 'space-between',
-      flexWrap: 'wrap'
-    }
+    sx: sx.buttonsContainer
   }, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
     return ___EmotionJSX(Button, {
-      mb: "sm",
       variant: "inline",
-      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? {
-        mr: '4px',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      } : {
-        mr: '4px',
-        borderColor: 'neutral.80',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      },
+      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

package/lib/recipes/MaskedValue.stories.js

@@ -23,6 +23,13 @@ export default {
     }
   }
 };
+var sx = {
+  showHideButton: {
+    width: 'fit-content',
+    marginLeft: 'sm',
+    alignSelf: 'auto'
+  }
+};
 export var Default = function Default(_ref) {
   var _context;
 
@@ -52,11 +59,7 @@ export var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: {
-      width: 'fit-content',
-      marginLeft: 10,
-      alignSelf: 'auto'
-    }
+    sx: sx.showHideButton
   }, ___EmotionJSX(Icon, {
     icon: isMasked ? EyeOffIcon : EyeIcon
   }))));