@pingux/astro 2.25.0-alpha.1 → 2.25.0-alpha.3

package/lib/cjs/components/Button/Buttons.styles.js

@@ -262,6 +262,13 @@ var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   }),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var exampleText = _objectSpread(_objectSpread({}, base), {}, {
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  background: 'none',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
 var _default = {
   critical: critical,
   "default": _objectSpread(_objectSpread({}, base), {}, {
@@ -281,6 +288,7 @@ var _default = {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,
   inlinePrimaryWithIcon: inlinePrimaryWithIcon

package/lib/cjs/components/DataTable/DataTable.js

@@ -15,16 +15,19 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
+var _table = require("@react-aria/table");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
-var _table = require("@react-stately/table");
+var _table2 = require("@react-stately/table");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DataTableContext = require("../../context/DataTableContext");
 var _hooks = require("../../hooks");
@@ -40,7 +43,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { (0, _defineProperty2["default"])(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; }
 var DEFAULT_HEADER_HEIGHT = {
   medium: 34,
-  large: 37.5
+  large: 40
+};
+var DEFAULT_HIDE_HEADER_CELL_WIDTH = {
+  medium: 38,
+  large: 46
 };
 var ROW_HEIGHTS = {
   compact: {
@@ -52,43 +59,70 @@ var ROW_HEIGHTS = {
     large: 50
   },
   spacious: {
-    medium: 48,
-    large: 75
+    medium: 48
   }
 };
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var width = props.width,
-    height = props.height,
-    onAction = props.onAction;
-  var direction = 'ltr'; // useLocale override
-  var scale = 'large'; // useProvider override
-
+  var scale = 'large';
+  var direction = 'ltr';
+  var onAction = props.onAction;
   var getDefaultWidth = (0, _react.useCallback)();
-  var state = (0, _table.useTableState)(_objectSpread({}, props));
-  var columnState = (0, _table.useTableColumnResizeState)(_objectSpread(_objectSpread({}, props), {}, {
-    getDefaultWidth: getDefaultWidth
-  }), state.collection);
+  var getDefaultMinWidth = (0, _react.useCallback)(function (_ref) {
+    var _ref$props = _ref.props,
+      hideHeader = _ref$props.hideHeader,
+      showDivider = _ref$props.showDivider;
+    if (hideHeader) {
+      var width = DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+      /* istanbul ignore next */
+      return showDivider ? width + 1 : width;
+    }
+    return 75;
+  }, [scale]);
+
+  // Starts when the user selects resize from the menu, ends when resizing ends
+  // used to control the visibility of the resizer Nubbin
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isInResizeMode = _useState2[0],
+    setIsInResizeMode = _useState2[1];
+  // entering resizing/exiting resizing doesn't trigger a render
+  // with table layout, so we need to track it here
+  var state = (0, _table2.useTableState)(_objectSpread({}, props));
   var domRef = (0, _react.useRef)(ref);
+  var headerRef = (0, _react.useRef)();
   var bodyRef = (0, _react.useRef)();
   var density = props.density || 'regular';
+  var columnLayout = (0, _react.useMemo)(function () {
+    return new _table2.TableColumnLayout({
+      getDefaultWidth: getDefaultWidth,
+      getDefaultMinWidth: getDefaultMinWidth
+    });
+  }, [getDefaultWidth, getDefaultMinWidth]);
   var layout = (0, _react.useMemo)(function () {
     return new _layout.TableLayout({
-      // If props.rowHeight is auto, then use estimated heights based on scale,
-      // otherwise use fixed heights.
+      // 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
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null,
+      columnLayout: columnLayout,
+      initialCollection: state.collection
     });
-  }, [props.overflowMode, scale, density]);
-  layout.collection = state.collection;
-  layout.getColumnWidth = columnState.getColumnWidth;
-  var _useTable = (0, _reactAria.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+  },
+  // don't recompute when state.collection changes, only used for initial value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.overflowMode, scale, density, columnLayout]);
+  var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
       isVirtualized: true,
       layout: layout,
       onRowAction: onAction
     }), state, domRef),
     gridProps = _useTable.gridProps;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    headerMenuOpen = _useState4[0],
+    setHeaderMenuOpen = _useState4[1];
 
   // This overrides collection view's renderWrapper to support DOM hierarchy.
   var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
@@ -130,7 +164,12 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       parent: parent
     });
   };
+
+  // Overrides default renderView
   var renderView = function renderView(type, item) {
+    var _item$column, _item$column2;
+    var isFirstColumn = (item === null || item === void 0 || (_item$column = item.column) === null || _item$column === void 0 ? void 0 : _item$column.index) === 0;
+    var isLastColumn = (item === null || item === void 0 || (_item$column2 = item.column) === null || _item$column2 === void 0 ? void 0 : _item$column2.index) === state.collection.columnCount - 1;
     switch (type) {
       case 'header':
       case 'rowgroup':
@@ -145,7 +184,9 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       case 'column':
         return (0, _react2.jsx)(TableColumnHeader, {
-          column: item
+          column: item,
+          isFirst: isFirstColumn,
+          isLast: isLastColumn
         });
       case 'loader':
         return (0, _react2.jsx)(CenteredWrapper, null, (0, _react2.jsx)(_index.Loader, {
@@ -168,29 +209,40 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
     viewport.current = e;
   }, []);
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+  var isEmpty = state.collection.size === 0;
+  var onFocusedResizer = function onFocusedResizer() {
+    /* istanbul ignore next */
+    bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+  };
+  var mergedProps = (0, _reactAria.mergeProps)(gridProps, focusProps);
   return (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
     value: {
       state: state,
       layout: layout,
-      columnState: columnState
+      isInResizeMode: isInResizeMode,
+      setIsInResizeMode: setIsInResizeMode,
+      isEmpty: isEmpty,
+      onFocusedResizer: onFocusedResizer,
+      headerMenuOpen: headerMenuOpen,
+      setHeaderMenuOpen: setHeaderMenuOpen
     }
-  }, (0, _react2.jsx)(_DataTableVirtualizer["default"], (0, _extends2["default"])({
-    style: {
-      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
-    }
-  }, gridProps, {
-    width: width,
-    height: height,
+  }, (0, _react2.jsx)(_DataTableVirtualizer["default"], (0, _extends2["default"])({}, mergedProps, {
     layout: layout,
     collection: state.collection,
-    focusedKey: state.selectionManager.focusedKey,
     renderView: renderView,
     renderWrapper: renderWrapper,
-    setTableWidth: columnState.setTableWidth,
     onVisibleRectChange: onVisibleRectChange,
     domRef: domRef,
+    headerRef: headerRef,
     bodyRef: bodyRef,
-    getColumnWidth: columnState.getColumnWidth
+    isFocusVisible: isFocusVisible,
+    height: props.height,
+    style: {
+      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
+    }
   })));
 });
 DataTable.propTypes = {
@@ -223,7 +275,10 @@ DataTable.propTypes = {
   /** Callback function that fires when sortable column header is pressed. */
   onSortChange: _propTypes["default"].func,
   /** Defines the current column key to sort by and the sort direction. */
-  sortDescriptor: _propTypes["default"].oneOf(['ascending', 'descending']),
+  sortDescriptor: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    column: _propTypes["default"].string,
+    direction: _propTypes["default"].oneOf(['ascending', 'descending'])
+  }), _propTypes["default"].string]),
   /** Sets the width of table. */
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 };
@@ -231,31 +286,35 @@ DataTable.defaultProps = {
   width: '100%',
   height: 565
 };
-function TableHeader(_ref) {
-  var children = _ref.children,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useTableRowGroup = (0, _reactAria.useTableRowGroup)(),
+var TableHeader = function TableHeader(_ref2) {
+  var children = _ref2.children,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
-}
-function TableColumnHeader(props) {
-  var _state$sortDescriptor, _state$sortDescriptor2;
-  var column = props.column;
+};
+var TableColumnHeader = function TableColumnHeader(props) {
+  var _state$sortDescriptor, _state$sortDescriptor2, _useStatusClasses2, _state$sortDescriptor3;
+  var column = props.column,
+    isFirst = props.isFirst,
+    isLast = props.isLast;
   var ref = (0, _react.useRef)(null);
   var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext.state;
-  var _useTableColumnHeader = (0, _reactAria.useTableColumnHeader)({
+  var _useTableColumnHeader = (0, _table.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) ? (0, _react2.jsx)(_index.Icon, {
+    size: 24,
     icon: _MenuUpIcon["default"],
     title: {
       name: 'Menu Up Icon'
     }
   }) : (0, _react2.jsx)(_index.Icon, {
+    size: 24,
     icon: _MenuDownIcon["default"],
     color: "active",
     title: {
@@ -263,47 +322,48 @@ function TableColumnHeader(props) {
     }
   });
   var allProps = [columnHeaderProps];
-  var _useStatusClasses = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({
+  var _useStatusClasses = (0, _hooks.useStatusClasses)((_useStatusClasses2 = {
       'is-column-sortable': columnProps.allowsSorting
-    }, "is-align-".concat(columnProps.align), columnProps.align)),
+    }, (0, _defineProperty2["default"])(_useStatusClasses2, "is-align-".concat(columnProps.align), columnProps.align), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-first-column', isFirst), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-last-column', isLast), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_reactAria.FocusRing, {
     focusRingClass: "is-key-focused",
     focusClass: "is-click-focused"
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _reactAria.mergeProps.apply(void 0, allProps), {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    pl: column.index === 0 ? 0 : 'lg',
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
-}
-function TableRowGroup(_ref2) {
-  var children = _ref2.children,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var _useTableRowGroup2 = (0, _reactAria.useTableRowGroup)(),
+  }, _reactAria.mergeProps.apply(void 0, (0, _concat["default"])(allProps).call(allProps, [column.props.cellProps]))), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && ((_state$sortDescriptor3 = state.sortDescriptor) === null || _state$sortDescriptor3 === void 0 ? void 0 : _state$sortDescriptor3.column) === column.key && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
+};
+var TableRowGroup = function TableRowGroup(_ref3) {
+  var children = _ref3.children,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  var _useTableRowGroup2 = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup2.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
-}
-function TableRow(_ref3) {
-  var item = _ref3.item,
-    children = _ref3.children,
-    hasActions = _ref3.hasActions,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+};
+var TableRow = function TableRow(_ref4) {
+  var item = _ref4.item,
+    children = _ref4.children,
+    hasActions = _ref4.hasActions,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
   var ref = (0, _react.useRef)();
   var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext2.state;
-  var _useTableRow = (0, _reactAria.useTableRow)({
+  var _useTableRow = (0, _table.useTableRow)({
       node: item,
       isVirtualized: true
     }, state, ref),
     rowProps = _useTableRow.rowProps;
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)({
       within: true
     }),
-    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-    focusWithinProps = _useFocusRing.focusProps;
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
-    isFocusVisible = _useFocusRing2.isFocusVisible,
-    focusProps = _useFocusRing2.focusProps;
+    isFocusVisibleWithin = _useFocusRing2.isFocusVisible,
+    focusWithinProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = (0, _reactAria.useFocusRing)(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
   var props = (0, _reactAria.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
   var _useStatusClasses3 = (0, _hooks.useStatusClasses)({
       'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
@@ -314,15 +374,15 @@ function TableRow(_ref3) {
     variant: "dataTable.tableRow",
     className: classNames
   }), children);
-}
-function TableHeaderRow(_ref4) {
-  var item = _ref4.item,
-    children = _ref4.children,
-    style = _ref4.style;
+};
+var TableHeaderRow = function TableHeaderRow(_ref5) {
+  var item = _ref5.item,
+    children = _ref5.children,
+    style = _ref5.style;
   var _useDataTableContext3 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext3.state;
   var ref = (0, _react.useRef)();
-  var _useTableHeaderRow = (0, _reactAria.useTableHeaderRow)({
+  var _useTableHeaderRow = (0, _table.useTableHeaderRow)({
       node: item,
       isVirtualized: true
     }, state, ref),
@@ -331,14 +391,14 @@ function TableHeaderRow(_ref4) {
     ref: ref,
     style: style
   }), children);
-}
-function TableCell(_ref5) {
-  var cell = _ref5.cell;
+};
+var TableCell = function TableCell(_ref6) {
+  var cell = _ref6.cell;
   var _useDataTableContext4 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext4.state;
   var ref = (0, _react.useRef)();
   var columnProps = cell.column.props;
-  var _useTableCell = (0, _reactAria.useTableCell)({
+  var _useTableCell = (0, _table.useTableCell)({
       node: cell,
       isVirtualized: true
     }, state, ref),
@@ -347,16 +407,17 @@ function TableCell(_ref5) {
     classNames = _useStatusClasses4.classNames;
   return (0, _react2.jsx)(_reactAria.FocusRing, {
     focusRingClass: "is-key-focused"
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    pl: cell.index === 0 ? 0 : 'lg',
     ref: ref,
     variant: "dataTable.tableCell",
     className: classNames
-  }), (0, _react2.jsx)(_index.Box, {
+  }, (0, _reactAria.mergeProps)(gridCellProps, cell.props.cellProps)), (0, _react2.jsx)(_index.Box, {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
-}
-function CenteredWrapper(_ref6) {
-  var children = _ref6.children;
+};
+var CenteredWrapper = function CenteredWrapper(_ref7) {
+  var children = _ref7.children;
   var _useDataTableContext5 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext5.state;
   return (0, _react2.jsx)(_index.Box, {
@@ -367,7 +428,7 @@ function CenteredWrapper(_ref6) {
     role: "rowheader",
     "aria-colspan": state.collection.columns.length
   }, children));
-}
+};
 TableCell.propTypes = {
   cell: _propTypes["default"].shape({
     column: _propTypes["default"].shape({
@@ -375,7 +436,11 @@ TableCell.propTypes = {
         align: _propTypes["default"].string
       })
     }),
+    index: _propTypes["default"].number,
     parentKey: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+    props: _propTypes["default"].shape({
+      cellProps: _propTypes["default"].shape({})
+    }),
     rendered: _propTypes["default"].node
   })
 };
@@ -391,14 +456,18 @@ TableRow.propTypes = {
 };
 TableColumnHeader.propTypes = {
   column: _propTypes["default"].shape({
+    index: _propTypes["default"].number,
     key: _propTypes["default"].string,
     props: _propTypes["default"].shape({
       align: _propTypes["default"].string,
       allowsSorting: _propTypes["default"].bool,
+      cellProps: _propTypes["default"].shape({}),
       hideHeader: _propTypes["default"].bool
     }),
     rendered: _propTypes["default"].node
-  })
+  }),
+  isFirst: _propTypes["default"].bool,
+  isLast: _propTypes["default"].bool
 };
 var _default = DataTable;
 exports["default"] = _default;