@pingux/astro 2.91.0 → 2.92.0-alpha.1

package/lib/cjs/components/Card/Card.stories.js

@@ -50,7 +50,8 @@ exports.Default = Default;
 var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
-    fontWeight: 600
+    fontWeight: 600,
+    color: 'text.secondary'
   };
   return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
     variant: "cards.flat",

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

@@ -1,3 +1,15 @@
+export declare const flat: {
+    p: number;
+    boxShadow: string;
+    border: string;
+    borderColor: string;
+    borderRadius: string;
+    display: string;
+    color: string;
+    fontSize: string;
+    fontWeight: number;
+    flex: string;
+};
 declare const _default: {
     container: {
         display: string;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.flat = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _images = require("../../utils/devUtils/constants/images");
 var _Buttons = require("../Button/Buttons.styles");
@@ -56,6 +56,7 @@ var flat = _objectSpread(_objectSpread({}, container), {}, {
   borderColor: 'neutral.90',
   borderRadius: '16px'
 });
+exports.flat = flat;
 var header = {
   p: 24,
   borderBottom: '1px solid',

package/lib/cjs/components/CodeView/CodeView.js

@@ -27,10 +27,11 @@ var _utils = require("@react-aria/utils");
 var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _useGetTheme = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _codeView = _interopRequireDefault(require("../../styles/themes/next-gen/codeView/codeView"));
 var _CodeView = _interopRequireDefault(require("./CodeView.styles"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "isNextGen", "Prism", "stylesProp"];
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "Prism", "stylesProp"];
 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; }
 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; }
@@ -41,7 +42,6 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasLineNumbers = props.hasLineNumbers,
     hasNoCopyButton = props.hasNoCopyButton,
     language = props.language,
-    isNextGen = props.isNextGen,
     customPrism = props.Prism,
     stylesProp = props.stylesProp,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -51,11 +51,15 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useHover = (0, _interactions.useHover)(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+  var theme = (0, _useGetTheme["default"])();
+  var themeState = theme.themeState;
+  var isNextGen = themeState.isNextGen;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(outerClassName, {
       isFocused: isFocusVisible,
       isHovered: isHovered,
       hasLineNumbers: hasLineNumbers,
-      hasNoCopyButton: hasNoCopyButton
+      hasNoCopyButton: hasNoCopyButton,
+      isNextGen: isNextGen
     }),
     classNames = _useStatusClasses.classNames;
 

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

@@ -25,6 +25,7 @@ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _ = require("../..");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _react2 = require("@emotion/react");
@@ -34,13 +35,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var testId = 'test-code-sample';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  theme: _theme["default"]
 };
 var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
 };
+var getComponentNextGen = function getComponentNextGen() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue), {
+    providerTheme: _.NextGenTheme
+  });
+};
 beforeEach(function () {
   var mockClipboard = {
     writeText: jest.fn()
@@ -204,11 +212,10 @@ test('renders CodeView component with highlighted code', function () {
 });
 test('isNextGen prop renders CodeView component with next-gen theme', function () {
   var children = ' ';
-  getComponent({
+  getComponentNextGen({
     children: children,
-    isNextGen: true,
     language: 'json'
   });
   var codeViewElement = _testWrapper.screen.getByTestId(testId);
-  expect(codeViewElement).toHaveTextContent('JSON');
+  expect(codeViewElement).toHaveClass('is-next-gen');
 });

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -23,11 +23,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -63,6 +63,9 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isReadOnly: isReadOnly,
     containerProps: containerProps
   }, (0, _reactAria.mergeProps)(inputProps, others));
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown;
 
   // istanbul ignore next
   (0, _react.useImperativeHandle)(ref, function () {
@@ -124,7 +127,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDisabled: isDisabled || isReadOnly,
     tabIndex: -1
   }), (0, _react2.jsx)(_.Icon, {
-    icon: _MenuDownIcon["default"],
+    icon: MenuDown,
     size: "md",
     sx: isOpen ? {
       transform: 'rotate(180deg)'

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

@@ -16,26 +16,27 @@ _Object$defineProperty(exports, "__esModule", {
 });
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 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 _interactions = require("@react-aria/interactions");
 var _table = require("@react-aria/table");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
 var _table2 = require("@react-stately/table");
 var _DataTableContext = require("../../context/DataTableContext");
 var _hooks = require("../../hooks");
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 var _DataTableVirtualizer = _interopRequireDefault(require("./DataTableVirtualizer"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children"],
+var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys"],
   _excluded2 = ["children"],
-  _excluded3 = ["item", "children", "hasActions"];
+  _excluded3 = ["children"],
+  _excluded4 = ["item", "children", "hasActions"];
 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; }
 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; }
@@ -64,6 +65,11 @@ var ROW_HEIGHTS = {
   }
 };
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$defaultSelecte = props.defaultSelectedKeys,
+    defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
+    selectionMode = props.selectionMode,
+    selectedKeys = props.selectedKeys,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var direction = 'ltr';
   var onAction = props.onAction,
     _props$scale = props.scale,
@@ -91,7 +97,14 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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));
+
+  // there appears to be a quirky feature in useTableState where uncontrolled selection
+  // will not work unless the defaultSelectedKeys array is supplied.
+  var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, others), {}, {
+    selectionMode: selectionMode,
+    selectedKeys: selectedKeys,
+    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+  }));
   var domRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var headerRef = (0, _react.useRef)(null);
   var bodyRef = (0, _react.useRef)(null);
@@ -250,7 +263,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 var TableHeader = function TableHeader(_ref2) {
   var children = _ref2.children,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
   var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
@@ -263,6 +276,10 @@ var TableColumnHeader = function TableColumnHeader(props) {
   var ref = (0, _react.useRef)(null);
   var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext.state;
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  var MenuUp = icons.MenuUp,
+    MenuDown = icons.MenuDown;
   var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
       node: column,
       isVirtualized: true
@@ -271,13 +288,13 @@ var TableColumnHeader = function TableColumnHeader(props) {
   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"],
+    icon: MenuUp,
     title: {
       name: 'Menu Up Icon'
     }
   }) : (0, _react2.jsx)(_index.Icon, {
     size: 24,
-    icon: _MenuDownIcon["default"],
+    icon: MenuDown,
     color: "active",
     title: {
       name: 'Menu Down Icon'
@@ -300,7 +317,7 @@ var TableColumnHeader = function TableColumnHeader(props) {
 };
 var TableRowGroup = function TableRowGroup(_ref3) {
   var children = _ref3.children,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
   var _useTableRowGroup2 = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup2.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
@@ -309,7 +326,7 @@ var TableRow = function TableRow(_ref4) {
   var item = _ref4.item,
     children = _ref4.children,
     hasActions = _ref4.hasActions,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
   var ref = (0, _react.useRef)(null);
   var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext2.state;
@@ -318,6 +335,9 @@ var TableRow = function TableRow(_ref4) {
       isVirtualized: true
     }, state, ref),
     rowProps = _useTableRow.rowProps;
+  var isSelectable = state.selectionManager.selectionMode !== 'none';
+  var isSelected = state.selectionManager.isSelected(item.key);
+  var isDisabled = state.disabledKeys.has(item.key);
   var _useFocusRing2 = (0, _reactAria.useFocusRing)({
       within: true
     }),
@@ -326,14 +346,22 @@ var TableRow = function TableRow(_ref4) {
   var _useFocusRing3 = (0, _reactAria.useFocusRing)(),
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
-  var props = (0, _reactAria.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var props = (0, _reactAria.mergeProps)(otherProps, focusWithinProps, focusProps, rowProps, hoverProps);
   var _useStatusClasses3 = (0, _hooks.useStatusClasses)('', {
-      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin,
+      isSelectable: isSelectable,
+      isSelected: isSelected,
+      isHovered: isHovered,
+      isDisabled: isDisabled
     }),
     classNames = _useStatusClasses3.classNames;
+  var variant = isSelectable ? 'dataTable.selectableTableRow' : 'dataTable.tableRow';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, props, {
     ref: ref,
-    variant: "dataTable.tableRow",
+    variant: variant,
     className: classNames
   }), children);
 };

package/lib/cjs/components/DataTable/DataTable.stories.d.ts

@@ -93,6 +93,36 @@ declare const _default: {
                 disable: boolean;
             };
         };
+        selectedKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        disabledKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        defaultSelectedKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        onSelectionChange: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        selectionMode: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
         width: {
             description: string;
             control: {
@@ -187,6 +217,8 @@ export declare const Sortable: {
         };
     };
 };
+export declare const Selection: (args: any) => React.JSX.Element;
+export declare const ControlledSelection: (args: any) => React.JSX.Element;
 export declare const AsyncLoading: {
     (args: any): React.JSX.Element;
     parameters: {