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

package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js

@@ -40,6 +40,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'
+  }
+};
 
 var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
@@ -88,24 +111,22 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.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'
     }
@@ -115,10 +136,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -148,35 +166,29 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -196,10 +208,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -229,24 +238,20 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

package/lib/cjs/styles/variants/variants.js

@@ -76,6 +76,8 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 
 var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
 
+var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -107,7 +109,8 @@ var _default = _objectSpread(_objectSpread({
   stepper: _stepper["default"],
   table: _table["default"]
 }, tabs), {}, {
-  tooltip: _tooltip["default"]
+  tooltip: _tooltip["default"],
+  dataTable: _DataTable["default"]
 });
 
 exports["default"] = _default;

package/lib/components/DataTable/DataTable.js

@@ -0,0 +1,431 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["children"],
+    _excluded2 = ["children"],
+    _excluded3 = ["item", "children", "hasActions"];
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { FocusRing, useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
+import { useTableColumnResizeState, useTableState } from '@react-stately/table';
+import { useStyleProps } from '@react-spectrum/utils';
+import { TableLayout } from '@react-stately/layout';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
+import PropTypes from 'prop-types';
+import MenuDownIcon from 'mdi-react/MenuDownIcon';
+import MenuUpIcon from 'mdi-react/MenuUpIcon';
+import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
+import DataTableVirtualizer from './DataTableVirtualizer';
+import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Loader } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DEFAULT_HEADER_HEIGHT = {
+  medium: 34,
+  large: 37.5
+};
+var ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40
+  },
+  regular: {
+    medium: 40,
+    large: 50
+  },
+  spacious: {
+    medium: 48,
+    large: 75
+  }
+};
+/**
+ * DataTable component using react aria Spectrum TableView
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+ * Cross platform state management react hook for DataTable
+ * Primarily utilizes [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+*/
+
+var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  var onAction = props.onAction;
+
+  var _useStyleProps = useStyleProps(props),
+      styleProps = _useStyleProps.styleProps;
+
+  var direction = 'ltr'; // useLocale override
+
+  var scale = 'large'; // useProvider override
+
+  var getDefaultWidth = useCallback();
+  var state = useTableState(_objectSpread({}, props));
+  var columnState = useTableColumnResizeState(_objectSpread(_objectSpread({}, props), {}, {
+    getDefaultWidth: getDefaultWidth
+  }), state.collection);
+  var domRef = useRef(ref);
+  var bodyRef = useRef();
+  var density = props.density || 'regular';
+  var layout = useMemo(function () {
+    return new TableLayout({
+      // If props.rowHeight is auto, then use estimated heights based on scale,
+      // otherwise use fixed heights.
+      rowHeight: props.overflowMode === 'wrap' ? null : ROW_HEIGHTS[density][scale],
+      estimatedRowHeight: props.overflowMode === 'wrap' ? ROW_HEIGHTS[density][scale] : null,
+      headingHeight: props.overflowMode === 'wrap' ? null : DEFAULT_HEADER_HEIGHT[scale],
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null
+    });
+  }, [props.overflowMode, scale, density]);
+  layout.collection = state.collection;
+  layout.getColumnWidth = columnState.getColumnWidth;
+
+  var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
+    isVirtualized: true,
+    layout: layout,
+    onRowAction: onAction
+  }), state, domRef),
+      gridProps = _useTable.gridProps; // This overrides collection view's renderWrapper to support DOM hierarchy.
+
+
+  var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
+    var style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
+
+    if (style.overflow === 'hidden') {
+      style.overflow = 'visible'; // needed to support position: sticky
+    }
+
+    if (reusableView.viewType === 'rowgroup') {
+      return ___EmotionJSX(TableRowGroup, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'header') {
+      return ___EmotionJSX(TableHeader, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'row') {
+      return ___EmotionJSX(TableRow, {
+        key: reusableView.key,
+        item: reusableView.content,
+        style: style,
+        hasActions: onAction
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'headerrow') {
+      return ___EmotionJSX(TableHeaderRow, {
+        key: reusableView.key,
+        style: style,
+        item: reusableView.content
+      }, renderChildren(children));
+    }
+
+    return ___EmotionJSX(VirtualizerItem, {
+      key: reusableView.key,
+      reusableView: reusableView,
+      parent: parent
+    });
+  };
+
+  var renderView = function renderView(type, item) {
+    switch (type) {
+      case 'header':
+      case 'rowgroup':
+      case 'row':
+      case 'headerrow':
+        return null;
+
+      case 'cell':
+        {
+          return ___EmotionJSX(TableCell, {
+            cell: item
+          });
+        }
+
+      case 'column':
+        return ___EmotionJSX(TableColumnHeader, {
+          column: item
+        });
+
+      case 'loader':
+        return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
+          color: "accent.70",
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var viewport = useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  var onVisibleRectChange = useCallback(function (e) {
+    if (viewport.current.width === e.width && viewport.current.height === e.height) {
+      return;
+    }
+
+    viewport.current = e;
+  }, []);
+  return ___EmotionJSX(DataTableContext.Provider, {
+    value: {
+      state: state,
+      layout: layout,
+      columnState: columnState
+    }
+  }, ___EmotionJSX(DataTableVirtualizer, _extends({
+    style: {
+      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
+    }
+  }, gridProps, styleProps, {
+    layout: layout,
+    collection: state.collection,
+    focusedKey: state.selectionManager.focusedKey,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    setTableWidth: columnState.setTableWidth,
+    onVisibleRectChange: onVisibleRectChange,
+    domRef: domRef,
+    bodyRef: bodyRef,
+    getColumnWidth: columnState.getColumnWidth
+  })));
+});
+
+function TableHeader(_ref) {
+  var children = _ref.children,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useTableRowGroup = useTableRowGroup(),
+      rowGroupProps = _useTableRowGroup.rowGroupProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
+}
+
+function TableColumnHeader(props) {
+  var _state$sortDescriptor, _state$sortDescriptor2;
+
+  var column = props.column;
+  var ref = useRef(null);
+
+  var _useDataTableContext = useDataTableContext(),
+      state = _useDataTableContext.state;
+
+  var _useTableColumnHeader = useTableColumnHeader({
+    node: column,
+    isVirtualized: true
+  }, state, ref),
+      columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+
+  var columnProps = column.props;
+  var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
+    icon: MenuUpIcon
+  }) : ___EmotionJSX(Icon, {
+    icon: MenuDownIcon,
+    color: "active"
+  });
+  var allProps = [columnHeaderProps];
+
+  var _useStatusClasses = useStatusClasses(_defineProperty({
+    'is-column-sortable': columnProps.allowsSorting
+  }, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-key-focused",
+    focusClass: "is-click-focused"
+  }, ___EmotionJSX(Box, _extends({}, mergeProps.apply(void 0, allProps), {
+    ref: ref,
+    variant: "dataTable.tableHeadCell",
+    className: classNames
+  }), columnProps.hideHeader ? ___EmotionJSX(VisuallyHidden, null, column.rendered) : ___EmotionJSX(Box, null, column.rendered), columnProps.allowsSorting && ___EmotionJSX(Box, null, arrowIcon)));
+}
+
+function TableRowGroup(_ref2) {
+  var children = _ref2.children,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  var _useTableRowGroup2 = useTableRowGroup(),
+      rowGroupProps = _useTableRowGroup2.rowGroupProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
+}
+
+function TableRow(_ref3) {
+  var item = _ref3.item,
+      children = _ref3.children,
+      hasActions = _ref3.hasActions,
+      otherProps = _objectWithoutProperties(_ref3, _excluded3);
+
+  var ref = useRef();
+
+  var _useDataTableContext2 = useDataTableContext(),
+      state = _useDataTableContext2.state;
+
+  var _useTableRow = useTableRow({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableRow.rowProps;
+
+  var _useFocusRing = useFocusRing({
+    within: true
+  }),
+      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+      focusWithinProps = _useFocusRing.focusProps;
+
+  var _useFocusRing2 = useFocusRing(),
+      isFocusVisible = _useFocusRing2.isFocusVisible,
+      focusProps = _useFocusRing2.focusProps;
+
+  var props = mergeProps(rowProps, otherProps, focusWithinProps, focusProps);
+
+  var _useStatusClasses3 = useStatusClasses({
+    'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+  }),
+      classNames = _useStatusClasses3.classNames;
+
+  return ___EmotionJSX(Box, _extends({}, props, {
+    ref: ref,
+    variant: "dataTable.tableRow",
+    className: classNames
+  }), children);
+}
+
+function TableHeaderRow(_ref4) {
+  var item = _ref4.item,
+      children = _ref4.children,
+      style = _ref4.style;
+
+  var _useDataTableContext3 = useDataTableContext(),
+      state = _useDataTableContext3.state;
+
+  var ref = useRef();
+
+  var _useTableHeaderRow = useTableHeaderRow({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableHeaderRow.rowProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowProps, {
+    ref: ref,
+    style: style
+  }), children);
+}
+
+function TableCell(_ref5) {
+  var cell = _ref5.cell;
+
+  var _useDataTableContext4 = useDataTableContext(),
+      state = _useDataTableContext4.state;
+
+  var ref = useRef();
+  var columnProps = cell.column.props;
+
+  var _useTableCell = useTableCell({
+    node: cell,
+    isVirtualized: true
+  }, state, ref),
+      gridCellProps = _useTableCell.gridCellProps;
+
+  var _useStatusClasses4 = useStatusClasses(_defineProperty({}, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses4.classNames;
+
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-key-focused"
+  }, ___EmotionJSX(Box, _extends({}, gridCellProps, {
+    ref: ref,
+    variant: "dataTable.tableCell",
+    className: classNames
+  }), ___EmotionJSX(Box, {
+    variant: "dataTable.tableCellContents"
+  }, cell.rendered)));
+}
+
+function CenteredWrapper(_ref6) {
+  var children = _ref6.children;
+
+  var _useDataTableContext5 = useDataTableContext(),
+      state = _useDataTableContext5.state;
+
+  return ___EmotionJSX(Box, {
+    role: "row",
+    "aria-rowindex": state.collection.headerRows.length + state.collection.size + 1,
+    variant: "dataTable.tableCenteredWrapper"
+  }, ___EmotionJSX(Box, {
+    role: "rowheader",
+    "aria-colspan": state.collection.columns.length
+  }, children));
+}
+
+DataTable.propTypes = {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * density: 'compact' | 'regular' | 'spacious'
+   * @default 'regular'
+   */
+  density: PropTypes.string,
+
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * overflowMode: 'wrap' | 'truncate'
+   * @default 'truncate'
+   */
+  overflowMode: PropTypes.string,
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: PropTypes.func
+};
+TableCell.propTypes = {
+  cell: PropTypes.shape({
+    column: PropTypes.shape({
+      props: PropTypes.shape({
+        align: PropTypes.string
+      })
+    }),
+    parentKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    rendered: PropTypes.node
+  })
+};
+TableHeaderRow.propTypes = {
+  children: PropTypes.node,
+  item: PropTypes.shape({}),
+  style: PropTypes.shape({})
+};
+TableRow.propTypes = {
+  children: PropTypes.node,
+  hasActions: PropTypes.func,
+  item: PropTypes.shape({})
+};
+TableColumnHeader.propTypes = {
+  column: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      align: PropTypes.string,
+      allowsSorting: PropTypes.bool,
+      hideHeader: PropTypes.bool
+    }),
+    rendered: PropTypes.node
+  })
+};
+export default DataTable;