@pingux/astro 2.131.0-alpha.1 → 2.131.0

package/lib/cjs/components/TableBase/TableBase.styles.d.ts

@@ -1,10 +1,18 @@
 declare const _default: {
-    thead: {};
+    thead: {
+        borderBottom: string;
+        backgroundColor: string;
+        borderBottomColor: string;
+        '&.is-sticky': {
+            position: string;
+            top: number;
+            zIndex: number;
+        };
+    };
     tbody: {
-        borderTop: string;
-        borderTopColor: string;
         borderBottom: string;
         borderBottomColor: string;
+        overflow: string;
     };
     caption: {
         fontFamily: string;
@@ -17,12 +25,10 @@ declare const _default: {
         width: string;
         borderSpacing: string;
         borderCollapse: string;
+        position: string;
     };
     data: {
         p: string;
-        '&.no-wrap': {
-            whiteSpace: string;
-        };
         '&.is-focused': {
             outline: string;
             outlineStyle: string;

package/lib/cjs/components/TableBase/TableBase.styles.js

@@ -26,7 +26,8 @@ var defaultFocus = {
 var container = {
   width: '100%',
   borderSpacing: '0',
-  borderCollapse: 'collapse'
+  borderCollapse: 'collapse',
+  position: 'relative'
 };
 var caption = {
   fontFamily: 'standard',
@@ -35,7 +36,16 @@ var caption = {
   p: 'sm',
   textAlign: 'left'
 };
-var thead = {};
+var thead = {
+  borderBottom: '1px solid',
+  backgroundColor: 'white',
+  borderBottomColor: 'neutral.40',
+  '&.is-sticky': {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1
+  }
+};
 var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   fontWeight: 500,
   textAlign: 'left',
@@ -44,10 +54,9 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var tbody = {
-  borderTop: '1px solid',
-  borderTopColor: 'neutral.40',
   borderBottom: '1px solid',
-  borderBottomColor: 'neutral.80'
+  borderBottomColor: 'neutral.80',
+  overflow: 'auto'
 };
 var row = {
   '&:nth-of-type(odd) ': {
@@ -63,9 +72,6 @@ var row = {
 };
 var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
   p: 'sm',
-  '&.no-wrap': {
-    whiteSpace: 'nowrap'
-  },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var _default = {

package/lib/cjs/components/TableBase/TableBase.test.js

@@ -5,6 +5,7 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _TableBase = _interopRequireDefault(require("./TableBase"));
@@ -29,10 +30,7 @@ var objects = [{
   key: '1',
   country: 'USA',
   population: '320,000,000',
-  continent: 'South America',
-  cellProps: {
-    noWrap: true
-  }
+  continent: 'South America'
 }, {
   key: '2',
   country: 'Canada',
@@ -50,7 +48,8 @@ var objects = [{
   continent: 'Europe'
 }];
 var getComponent = function getComponent() {
-  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], defaultProps, (0, _react3.jsx)(_index.THead, {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_index.THead, {
     columns: headers
   }, function (head) {
     return (0, _react3.jsx)(_index.Column, {
@@ -62,7 +61,7 @@ var getComponent = function getComponent() {
     return (0, _react3.jsx)(_index.Row, {
       key: row.key
     }, function (columnKey) {
-      return (0, _react3.jsx)(_index.Cell, row.cellProps || {}, row[columnKey]);
+      return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
     });
   })));
 };
@@ -115,8 +114,158 @@ test('renders table rows', function () {
     expect(_react2.screen.getByText(object.continent)).toBeInTheDocument();
   });
 });
-test('renders cell with noWrap prop', function () {
+test('renders checkbox in case of multi selection', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var checkboxes = _react2.screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(objects.length + 1);
+});
+test('should change selection on mouse press', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = _react2.screen.getAllByRole('row');
+  expect(rows[1]).not.toHaveClass('is-selected');
+  _userEvent["default"].click(rows[1]);
+  expect(rows[1]).toHaveClass('is-selected');
+});
+test('should change select all checkbox on mouse press', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = _react2.screen.getAllByRole('row');
+  (0, _forEach["default"])(rows).call(rows, function (element) {
+    _userEvent["default"].click(element);
+  });
+  var headerCheckbox = _react2.screen.getByTestId('select-all-checkbox');
+  expect(headerCheckbox).toBeChecked();
+});
+test('should checked checkboxes if selected keys are provided', function () {
+  getComponent({
+    selectionMode: 'multiple',
+    selectedKeys: ['1', '3']
+  });
+  var checkboxes = _react2.screen.getAllByRole('checkbox');
+  var rows = _react2.screen.getAllByRole('row');
+  expect(checkboxes[1]).toBeChecked();
+  expect(rows[1]).toHaveClass('is-selected');
+  expect(checkboxes[2]).not.toBeChecked();
+  expect(rows[2]).not.toHaveClass('is-selected');
+  expect(checkboxes[3]).toBeChecked();
+  expect(rows[3]).toHaveClass('is-selected');
+  var headerCheckbox = _react2.screen.getByTestId('select-all-checkbox');
+  expect(headerCheckbox).toBePartiallyChecked();
+});
+test('tab key should focus on the first cell of the first row', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  _userEvent["default"].tab();
+  expect(rows[1]).toHaveFocus();
+});
+test('Arrow Down key should focus the next row', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  _userEvent["default"].tab();
+  expect(rows[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(rows[1], {
+    key: 'ArrowDown'
+  });
+  _react2.fireEvent.keyUp(rows[1], {
+    key: 'ArrowDown'
+  });
+  expect(rows[2]).toHaveFocus();
+  _react2.fireEvent.keyDown(rows[2], {
+    key: 'ArrowDown'
+  });
+  _react2.fireEvent.keyUp(rows[2], {
+    key: 'ArrowDown'
+  });
+  expect(rows[3]).toHaveFocus();
+});
+test('Arrow Up key should focus the next row', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  _userEvent["default"].tab();
+  expect(rows[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(rows[1], {
+    key: 'ArrowUp'
+  });
+  _react2.fireEvent.keyUp(rows[1], {
+    key: 'ArrowUp'
+  });
+  var columnheader = _react2.screen.getAllByRole('columnheader');
+  expect(columnheader[0]).toHaveFocus();
+});
+test('Arrow Right move the focus to next cell', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  var firstRow = _react2.screen.getAllByRole('row')[1];
+  var tableCells = firstRow.querySelectorAll('td');
+  _userEvent["default"].tab();
+  expect(rows[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(rows[1], {
+    key: 'ArrowRight'
+  });
+  _react2.fireEvent.keyUp(rows[1], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[0]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[0], {
+    key: 'ArrowRight'
+  });
+  _react2.fireEvent.keyUp(tableCells[0], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[1], {
+    key: 'ArrowRight'
+  });
+  _react2.fireEvent.keyUp(tableCells[1], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[2]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[2], {
+    key: 'ArrowRight'
+  });
+  _react2.fireEvent.keyUp(tableCells[2], {
+    key: 'ArrowRight'
+  });
+  expect(rows[1]).toHaveFocus();
+});
+test('Arrow Left move the focus to next cell', function () {
   getComponent();
-  var cell = _react2.screen.getByText('South America');
-  expect(cell).toHaveClass('no-wrap');
+  var rows = _react2.screen.getAllByRole('row');
+  var firstRow = _react2.screen.getAllByRole('row')[1];
+  var tableCells = firstRow.querySelectorAll('td');
+  _userEvent["default"].tab();
+  expect(rows[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(rows[1], {
+    key: 'ArrowLeft'
+  });
+  _react2.fireEvent.keyUp(rows[1], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[2]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[2], {
+    key: 'ArrowLeft'
+  });
+  _react2.fireEvent.keyUp(tableCells[2], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[1]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[1], {
+    key: 'ArrowLeft'
+  });
+  _react2.fireEvent.keyUp(tableCells[1], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[0]).toHaveFocus();
+  _react2.fireEvent.keyDown(tableCells[0], {
+    key: 'ArrowLeft'
+  });
+  _react2.fireEvent.keyUp(tableCells[0], {
+    key: 'ArrowLeft'
+  });
+  expect(rows[1]).toHaveFocus();
 });

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -3830,6 +3830,7 @@ declare const _default: {
                 };
             };
             thead: {
+                borderBottomColor: string;
                 backgroundColor: string;
                 '&:not(.has-caption)': {
                     '& > tr:first-child': {
@@ -3887,6 +3888,18 @@ declare const _default: {
                 };
             };
         };
+        box: {
+            indeterminateCheckboxIcon: {
+                height: string;
+                width: string;
+                '&.is-disabled': {
+                    '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+                        fill: string;
+                        stroke: string;
+                    };
+                };
+            };
+        };
     };
     images: {
         avatar: {};

package/lib/cjs/styles/themes/next-gen/variants/tableBase.d.ts

@@ -27,6 +27,7 @@ export declare const tableBase: {
         };
     };
     thead: {
+        borderBottomColor: string;
         backgroundColor: string;
         '&:not(.has-caption)': {
             '& > tr:first-child': {

package/lib/cjs/styles/themes/next-gen/variants/tableBase.js

@@ -45,6 +45,7 @@ var row = {
   }
 };
 var thead = {
+  borderBottomColor: 'border.base',
   backgroundColor: 'background.base',
   '&:not(.has-caption)': {
     '& > tr:first-child': {

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1429,6 +1429,7 @@ declare const _default: {
             };
         };
         thead: {
+            borderBottomColor: string;
             backgroundColor: string;
             '&:not(.has-caption)': {
                 '& > tr:first-child': {
@@ -1486,5 +1487,17 @@ declare const _default: {
             };
         };
     };
+    box: {
+        indeterminateCheckboxIcon: {
+            height: string;
+            width: string;
+            '&.is-disabled': {
+                '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+                    fill: string;
+                    stroke: string;
+                };
+            };
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -389,6 +389,18 @@ var _default = {
   loader: loader,
   callout: _callout["default"],
   table: _table.table,
-  tableBase: _tableBase.tableBase
+  tableBase: _tableBase.tableBase,
+  box: {
+    indeterminateCheckboxIcon: {
+      height: '19.25px',
+      width: '19.25px',
+      '&.is-disabled': {
+        '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+          fill: 'gray-500',
+          stroke: 'gray-500'
+        }
+      }
+    }
+  }
 };
 exports["default"] = _default;

package/lib/cjs/types/checkboxField.d.ts

@@ -1,10 +1,6 @@
 import { UseFieldProps } from '../hooks/useField/useField';
 import { HelpHintProps } from './helpHint';
-export interface CheckboxFieldProps extends Omit<UseFieldProps<HTMLInputElement>, 'onChange'> {
-    /** Handler that is called when a key is pressed. */
-    onKeyDown?: () => void;
-    /** Handler that is called when a key is released. */
-    onKeyUp?: () => void;
+export interface CheckboxFieldProps extends Omit<UseFieldProps<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onKeyUp'> {
     /** Handler that is called when the element's selection state changes. */
     onChange?: (isSelected: boolean) => void;
     /** props that are spread directly into the checkbox component */

package/lib/cjs/types/tableBase.d.ts

@@ -1,45 +1,61 @@
-import { Key, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type { TableState } from '@react-stately/table';
+import { TableColumnResizeState } from '@react-stately/table';
 import type { GridNode } from '@react-types/grid';
 import type { Node } from '@react-types/shared';
+import type { TableProps } from '@react-types/table';
 import { TestingAttributes } from './shared/test';
 import { BoxProps } from './box';
 import { DOMAttributes } from './shared';
-export interface TableBaseProp extends BoxProps, TestingAttributes, DOMAttributes {
+export interface BaseProp extends BoxProps, TestingAttributes, DOMAttributes {
 }
-export interface TableBaseProps extends TableBaseProp {
+export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<BaseProp, 'children'> {
     'aria-label'?: string;
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    selectionMode?: 'single' | 'none';
+    selectionMode?: 'none' | 'single' | 'multiple';
+    selectionBehavior?: 'replace' | 'toggle';
+    showSelectionCheckboxes?: boolean;
     'data-testid'?: string;
     caption?: ReactNode | string;
     tableBodyProps?: Record<string, unknown>;
+    isStickyHeader?: boolean;
 }
-export interface TableRowGroupProps extends TableBaseProp {
+export interface TableRowGroupProps extends BaseProp {
     type: 'thead' | 'tbody' | 'tfoot';
     children: ReactNode;
     hasCaption?: boolean;
+    isSticky?: boolean;
 }
-export interface TableHeaderRowProps extends TableBaseProp {
-    item: Node<object>;
-    state: TableState<object>;
+export interface TableHeaderRowProps<T> extends BaseProp {
+    item: Node<T>;
+    state: TableState<T>;
     children: ReactNode;
     className?: string;
 }
-export interface TableColumnHeaderProps extends TableBaseProp {
-    column: GridNode<object>;
-    state: TableState<object>;
+export interface TableColumnHeaderProps<T> extends BaseProp {
+    column: GridNode<T>;
+    state: TableState<T>;
     className?: string;
+    layoutState: TableColumnResizeState<T>;
 }
-export interface TableRowProps extends TableBaseProp {
-    item: Node<object>;
-    state: TableState<object>;
+export interface TableRowProps<T> extends BaseProp {
+    item: Node<T>;
+    state: TableState<T>;
     children: ReactNode;
     className?: string;
 }
-export interface TableCellProps extends TableBaseProp {
-    cell: GridNode<object>;
-    state: TableState<object>;
+export interface TableCellProps<T> extends BaseProp {
+    cell: GridNode<T>;
+    state: TableState<T>;
     className?: string;
+    layoutState: TableColumnResizeState<T>;
+}
+export interface TableCheckboxCellProps<T> extends BaseProp {
+    cell: GridNode<T>;
+    state: TableState<T>;
+    layoutState: TableColumnResizeState<T>;
+}
+export interface TableSelectAllCellProps<T> extends BaseProp {
+    column: GridNode<T>;
+    state: TableState<T>;
+    layoutState: TableColumnResizeState<T>;
 }

package/lib/components/Box/Box.styles.js

@@ -1,6 +1,21 @@
 var base = {
   display: 'flex'
 };
+var indeterminateCheckboxIcon = {
+  width: '24px',
+  height: '24px',
+  '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+    fill: 'active',
+    stroke: 'active'
+  },
+  '&.is-disabled': {
+    '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+      fill: 'neutral.80',
+      stroke: 'neutral.80'
+    }
+  }
+};
 export default {
-  base: base
+  base: base,
+  indeterminateCheckboxIcon: indeterminateCheckboxIcon
 };

package/lib/components/Checkbox/CheckboxBase.js

@@ -4,7 +4,6 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { omit } from 'lodash';
 import PropTypes from 'prop-types';
 import { Checkbox as ThemeUICheckbox } from 'theme-ui';
-import { active, neutral } from '../../styles/colors';
 import Box from '../Box';
 
 /**
@@ -22,10 +21,7 @@ var DefaultCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
-  var color = props.disabled ? neutral[80] : active;
   return ___EmotionJSX("svg", _extends({
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -39,8 +35,7 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     width: "17",
     height: "17",
     rx: "1.5",
-    fill: color,
-    stroke: color
+    id: "indeterminate-checkbox-icon-wrapper"
   }), ___EmotionJSX("rect", {
     x: "6.5",
     y: "11",
@@ -65,6 +60,7 @@ var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref
   }, props))), ___EmotionJSX(Box, _extends({
     as: IndeterminateCheckboxIcon,
+    variant: "variants.box.indeterminateCheckboxIcon",
     mr: 2
   }, props, {
     opacity: 1

package/lib/components/MenuItem/MenuItem.styles.js

@@ -3,6 +3,7 @@ var item = {
   padding: '10px 10px',
   outline: 'none',
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&.is-focused, &.is-selected, &.is-pressed': {
     color: 'white',
     bg: 'active',