@pingux/astro 2.139.0 → 2.140.0-alpha.0

package/lib/cjs/components/GridList/GridList.d.ts

@@ -1,3 +1,17 @@
-import React from 'react';
-declare const GridList: (props: any) => React.JSX.Element;
+import React, { Key } from 'react';
+import { Collection } from 'react-stately';
+import type { Node } from '@react-types/shared';
+type GridListProps = {
+    containerProps: object;
+    rowProps: object;
+    cellProps: object;
+    children?: React.ReactNode;
+    isReorderable?: boolean;
+    items: Iterable<object>;
+    keyboardNavigationBehavior?: 'arrow' | 'tab';
+    onAction?: (key: Key) => void;
+    onSelectionChange?: (keys: Selection) => void;
+    collection: Collection<Node<object>>;
+};
+declare const GridList: (props: GridListProps) => React.JSX.Element;
 export default GridList;

package/lib/cjs/components/GridList/GridList.js

@@ -20,12 +20,14 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _useGridList2 = _interopRequireDefault(require("../../hooks/useGridList"));
 var _index = require("../../index");
 var _GridListRow = _interopRequireDefault(require("./GridListRow"));
 var _react2 = require("@emotion/react");
+var _excluded = ["containerProps", "rowProps", "cellProps"];
 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; }
@@ -33,14 +35,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var GridList = function GridList(props) {
   var _context, _context2;
   var ref = (0, _react.useRef)(null);
-  var _useGridList = (0, _useGridList2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+  var containerProps = props.containerProps,
+    rowProps = props.rowProps,
+    cellProps = props.cellProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGridList = (0, _useGridList2["default"])(_objectSpread(_objectSpread({}, others), {}, {
       ref: ref
     })),
     collectionProps = _useGridList.collectionProps,
     gridListItemProps = _useGridList.gridListItemProps,
     gridProps = _useGridList.gridProps,
     state = _useGridList.state;
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, collectionProps), {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, collectionProps, containerProps), {
     ref: ref,
     className: "list",
     variant: "gridList.container",
@@ -48,7 +54,9 @@ var GridList = function GridList(props) {
   }), (0, _map["default"])(_context = (0, _concat["default"])(_context2 = []).call(_context2, (0, _from["default"])(state.collection))).call(_context, function (item) {
     return (0, _react2.jsx)(_GridListRow["default"], (0, _extends2["default"])({
       key: item.key,
-      item: item
+      item: item,
+      rowProps: rowProps,
+      cellProps: cellProps
     }, gridListItemProps));
   }));
 };

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

@@ -1,7 +1,18 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: (props: any) => React.JSX.Element;
+    component: (props: {
+        containerProps: object;
+        rowProps: object;
+        cellProps: object;
+        children?: React.ReactNode;
+        isReorderable?: boolean | undefined;
+        items: Iterable<object>;
+        keyboardNavigationBehavior?: "tab" | "arrow" | undefined;
+        onAction?: ((key: React.Key) => void) | undefined;
+        onSelectionChange?: ((keys: Selection) => void) | undefined;
+        collection: import("react-stately").Collection<import("@react-types/shared").Node<object>>;
+    }) => React.JSX.Element;
     argTypes: {
         isReorderable: {
             description: string;

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

@@ -69,12 +69,14 @@ var ExampleComponent = function ExampleComponent(_ref) {
     sx: {
       alignItems: 'center'
     },
-    gap: "sm"
+    gap: "sm",
+    flexGrow: "1"
   }, (0, _react2.jsx)(_index.TextField, {
     "aria-label": label,
     ref: ref,
     defaultValue: label,
-    "data-testid": "".concat(label, "-text-field")
+    "data-testid": "".concat(label, "-text-field"),
+    flexGrow: "1"
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -122,7 +124,17 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.GridList, (0, _extends2["default"])({
     items: items,
     isReorderable: true,
-    keyboardNavigationBehavior: "tab"
+    keyboardNavigationBehavior: "tab",
+    rowProps: {
+      sx: {
+        flexGrow: 1
+      }
+    },
+    cellProps: {
+      sx: {
+        flexGrow: 1
+      }
+    }
   }, args), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       textValue: item.name,

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

@@ -53,12 +53,12 @@ describe('GridList Component', function () {
     });
   });
   test('renders GridListRow for each item', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = _testWrapper.screen.getAllByRole('row');
     expect(rows).toHaveLength(items.length);
   });
   test('handles keyboard navigation', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = _testWrapper.screen.getAllByRole('row');
     _userEvent["default"].tab();
     expect(rows[0]).toHaveClass('is-focused');
@@ -150,4 +150,37 @@ describe('GridList Component', function () {
       }
     }, _callee2);
   })));
+  test('renders GridList with containerProps', function () {
+    getDefaultComponent({
+      containerProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var list = _testWrapper.screen.getByRole('grid');
+    expect(list).toHaveStyle('background: red');
+  });
+  test('renders GridList with rowProps', function () {
+    getDefaultComponent({
+      rowProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var rows = _testWrapper.screen.getAllByRole('row');
+    expect(rows[0]).toHaveStyle('background: red');
+  });
+  test('renders GridList with cellProps', function () {
+    getDefaultComponent({
+      cellProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var gridCells = _testWrapper.screen.getAllByRole('gridcell');
+    expect(gridCells[0]).toHaveStyle('background: red');
+  });
 });

package/lib/cjs/components/GridList/GridListRow.js

@@ -24,7 +24,9 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var rowRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var buttonRef = _react["default"].useRef(null);
   var cellRef = _react["default"].useRef(null);
-  var dragState = props.dragState,
+  var customRowProps = props.rowProps,
+    cellProps = props.cellProps,
+    dragState = props.dragState,
     dropState = props.dropState,
     isReorderable = props.isReorderable,
     item = props.item,
@@ -54,6 +56,8 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "gridList.rowContainer",
     isRow: true,
     ref: rowRef
+  }, customRowProps, {
+    flexGrow: "1"
   }), isReorderable && (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -70,10 +74,8 @@ var GridListRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     icon: _DragVerticalIcon["default"]
   }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
     isRow: true,
-    sx: {
-      alignItems: 'center'
-    }
-  }), item.rendered)), state.collection.getKeyAfter(item.key) == null && (0, _react2.jsx)(_TreeView.InsertionIndicator, {
+    alignItems: "center"
+  }, cellProps), item.rendered)), state.collection.getKeyAfter(item.key) == null && (0, _react2.jsx)(_TreeView.InsertionIndicator, {
     key: "".concat(item.key, "-after"),
     target: {
       type: 'item',

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

@@ -54,6 +54,8 @@ export interface GridListRowProps {
     isReorderable?: boolean;
     item: Node<object>;
     state: ListState<object>;
+    rowProps?: object;
+    cellProps?: object;
 }
 export interface UseReorderableCollectionProps {
     draggableCollectionStateOptions: DraggableCollectionStateOptions;

package/lib/components/GridList/GridList.js

@@ -8,6 +8,8 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["containerProps", "rowProps", "cellProps"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -22,14 +24,18 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var GridList = function GridList(props) {
   var _context, _context2;
   var ref = useRef(null);
-  var _useGridList = useGridList(_objectSpread(_objectSpread({}, props), {}, {
+  var containerProps = props.containerProps,
+    rowProps = props.rowProps,
+    cellProps = props.cellProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useGridList = useGridList(_objectSpread(_objectSpread({}, others), {}, {
       ref: ref
     })),
     collectionProps = _useGridList.collectionProps,
     gridListItemProps = _useGridList.gridListItemProps,
     gridProps = _useGridList.gridProps,
     state = _useGridList.state;
-  return ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, collectionProps), {
+  return ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, collectionProps, containerProps), {
     ref: ref,
     className: "list",
     variant: "gridList.container",
@@ -37,7 +43,9 @@ var GridList = function GridList(props) {
   }), _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _Array$from(state.collection))).call(_context, function (item) {
     return ___EmotionJSX(GridListRow, _extends({
       key: item.key,
-      item: item
+      item: item,
+      rowProps: rowProps,
+      cellProps: cellProps
     }, gridListItemProps));
   }));
 };

package/lib/components/GridList/GridList.stories.js

@@ -57,12 +57,14 @@ var ExampleComponent = function ExampleComponent(_ref) {
     sx: {
       alignItems: 'center'
     },
-    gap: "sm"
+    gap: "sm",
+    flexGrow: "1"
   }, ___EmotionJSX(TextField, {
     "aria-label": label,
     ref: ref,
     defaultValue: label,
-    "data-testid": "".concat(label, "-text-field")
+    "data-testid": "".concat(label, "-text-field"),
+    flexGrow: "1"
   }), ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -110,7 +112,17 @@ export var Default = function Default(args) {
   return ___EmotionJSX(GridList, _extends({
     items: items,
     isReorderable: true,
-    keyboardNavigationBehavior: "tab"
+    keyboardNavigationBehavior: "tab",
+    rowProps: {
+      sx: {
+        flexGrow: 1
+      }
+    },
+    cellProps: {
+      sx: {
+        flexGrow: 1
+      }
+    }
   }, args), function (item) {
     return ___EmotionJSX(Item, {
       textValue: item.name,

package/lib/components/GridList/GridList.test.js

@@ -49,12 +49,12 @@ describe('GridList Component', function () {
     });
   });
   test('renders GridListRow for each item', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = screen.getAllByRole('row');
     expect(rows).toHaveLength(items.length);
   });
   test('handles keyboard navigation', function () {
-    getDefaultComponent();
+    getDefaultComponent({});
     var rows = screen.getAllByRole('row');
     userEvent.tab();
     expect(rows[0]).toHaveClass('is-focused');
@@ -146,4 +146,37 @@ describe('GridList Component', function () {
       }
     }, _callee2);
   })));
+  test('renders GridList with containerProps', function () {
+    getDefaultComponent({
+      containerProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var list = screen.getByRole('grid');
+    expect(list).toHaveStyle('background: red');
+  });
+  test('renders GridList with rowProps', function () {
+    getDefaultComponent({
+      rowProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var rows = screen.getAllByRole('row');
+    expect(rows[0]).toHaveStyle('background: red');
+  });
+  test('renders GridList with cellProps', function () {
+    getDefaultComponent({
+      cellProps: {
+        sx: {
+          background: 'red'
+        }
+      }
+    });
+    var gridCells = screen.getAllByRole('gridcell');
+    expect(gridCells[0]).toHaveStyle('background: red');
+  });
 });

package/lib/components/GridList/GridListRow.js

@@ -11,7 +11,9 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
   var rowRef = useLocalOrForwardRef(ref);
   var buttonRef = React.useRef(null);
   var cellRef = React.useRef(null);
-  var dragState = props.dragState,
+  var customRowProps = props.rowProps,
+    cellProps = props.cellProps,
+    dragState = props.dragState,
     dropState = props.dropState,
     isReorderable = props.isReorderable,
     item = props.item,
@@ -41,6 +43,8 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "gridList.rowContainer",
     isRow: true,
     ref: rowRef
+  }, customRowProps, {
+    flexGrow: "1"
   }), isReorderable && ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -57,10 +61,8 @@ var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: DragIcon
   }))), ___EmotionJSX(Box, _extends({}, gridCellProps, {
     isRow: true,
-    sx: {
-      alignItems: 'center'
-    }
-  }), item.rendered)), state.collection.getKeyAfter(item.key) == null && ___EmotionJSX(InsertionIndicator, {
+    alignItems: "center"
+  }, cellProps), item.rendered)), state.collection.getKeyAfter(item.key) == null && ___EmotionJSX(InsertionIndicator, {
     key: "".concat(item.key, "-after"),
     target: {
       type: 'item',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.139.0",
+  "version": "2.140.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",