@pingux/astro 2.65.0 → 2.65.1-alpha.0

package/lib/components/DataTable/DataTableBadge.js

@@ -3,7 +3,6 @@ import React, { forwardRef } from 'react';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import AlertIcon from '@pingux/mdi-react/AlertIcon';
 import CheckIcon from '@pingux/mdi-react/CheckIcon';
-import PropTypes from 'prop-types';
 import { Badge, Icon } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -21,16 +20,13 @@ var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
       flexDirection: 'row-reverse !important'
     }
   }, cell && cell !== 'Pending' && ___EmotionJSX(Icon, {
-    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : null,
+    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : undefined,
     title: {
-      name: cell === 'Approved' ? 'Check Icon' : cell === 'Rejected' ? 'Alert Circle Icon' : cell === 'Failed' ? 'Alert Icon' : null
+      name: cell === 'Approved' ? 'Check Icon' : cell === 'Rejected' ? 'Alert Circle Icon' : cell === 'Failed' ? 'Alert Icon' : ''
     },
     mr: "xs",
     size: "14px",
     color: color
   }));
 });
-DataTableBadge.propTypes = {
-  cell: PropTypes.string
-};
 export default DataTableBadge;

package/lib/components/DataTable/DataTableMultiLine.js

@@ -9,7 +9,7 @@ var DataTableMultiLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(cell).call(cell, function (item) {
     var _context;
     return ___EmotionJSX(Box, {
-      key: _concatInstanceProperty(_context = "".concat(cell.key, "_")).call(_context, item.accountId),
+      key: _concatInstanceProperty(_context = "".concat(item.key, "_")).call(_context, item.accountId),
       ref: ref
     }, ___EmotionJSX(Box, {
       sx: {
@@ -24,7 +24,7 @@ var DataTableMultiLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, ___EmotionJSX(Icon, {
       icon: item.icon,
       color: "accent.40",
-      size: "18.75",
+      size: "18.75px",
       title: {
         name: "Icon for ".concat(item.name)
       }

package/lib/components/DataTable/DataTableMultiLine.test.js

@@ -10,8 +10,7 @@ var cell = [{
   icon: ApplicationIcon,
   accountId: 123
 }];
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+var getComponent = function getComponent(props) {
   return render(___EmotionJSX(DataTableMultiLine, props));
 };
 

package/lib/components/DataTable/DataTableVirtualizer.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["layout", "collection", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
-import React, { forwardRef, useCallback, useRef } from 'react';
+var _excluded = ["layout", "collection", "renderView", "renderWrapper", "domRef", "bodyRef", "onVisibleRectChange"];
+import React, { forwardRef, useCallback } from 'react';
 import { chain, mergeProps, useLayoutEffect } from '@react-aria/utils';
 import { ScrollView, setScrollLeft, useVirtualizer } from '@react-aria/virtualizer';
 import { useVirtualizerState } from '@react-stately/virtualizer';
-import PropTypes from 'prop-types';
+import { useLocalOrForwardRef } from '../../hooks';
 import { Box } from '../../index';
 
 /**
@@ -21,12 +21,11 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderWrapper = _ref.renderWrapper,
     domRef = _ref.domRef,
     bodyRef = _ref.bodyRef,
-    setTableWidth = _ref.setTableWidth,
-    getColumnWidth = _ref.getColumnWidth,
     onVisibleRectChangeProp = _ref.onVisibleRectChange,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var direction = 'ltr'; // useLocale override
-  var headerRef = useRef(ref);
+
+  var headerRef = useLocalOrForwardRef(ref);
   var loadingState = collection.body.props.loadingState;
   var isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   var onLoadMore = collection.body.props.onLoadMore;
@@ -37,9 +36,11 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderView: renderView,
     renderWrapper: renderWrapper,
     onVisibleRectChange: function onVisibleRectChange(rect) {
-      // eslint-disable-next-line no-param-reassign
-      bodyRef.current.scrollTop = rect.y;
-      setScrollLeft(bodyRef.current, direction, rect.x);
+      if (bodyRef.current) {
+        // eslint-disable-next-line no-param-reassign
+        bodyRef.current.scrollTop = rect.y;
+        setScrollLeft(bodyRef.current, direction, rect.x);
+      }
     },
     transitionDuration: isLoading ? 160 : 220
   });
@@ -69,7 +70,9 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Sync the scroll position from the table body to the header container.
   var onScroll = useCallback(function () {
-    headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+    if (headerRef.current && bodyRef.current) {
+      headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+    }
   }, [bodyRef]);
   var onVisibleRectChange = useCallback(function (rect) {
     state.setVisibleRect(rect);
@@ -103,7 +106,6 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     ref: headerRef
   }, state.visibleViews[0]), ___EmotionJSX(ScrollView, {
-    variant: "dataTable.tableBody",
     style: {
       flex: 1
     },
@@ -120,30 +122,4 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex: 0
   }, state.visibleViews[1]));
 });
-DataTableVirtualizer.propTypes = {
-  bodyRef: PropTypes.shape({
-    current: PropTypes.shape({
-      scrollLeft: PropTypes.number,
-      scrollTop: PropTypes.number
-    })
-  }),
-  collection: PropTypes.shape({
-    body: PropTypes.shape({
-      props: PropTypes.shape({
-        loadingState: PropTypes.string,
-        onLoadMore: PropTypes.func
-      })
-    }),
-    getItem: PropTypes.func
-  }),
-  domRef: PropTypes.shape({}),
-  getColumnWidth: PropTypes.func,
-  layout: PropTypes.shape({
-    getLayoutInfo: PropTypes.func
-  }),
-  onVisibleRectChange: PropTypes.func,
-  renderView: PropTypes.func,
-  renderWrapper: PropTypes.func,
-  setTableWidth: PropTypes.func
-};
 export default DataTableVirtualizer;

package/lib/types/dataTable.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -8,6 +8,7 @@ export * from './buttonBar';
 export * from './calendar';
 export * from './card';
 export * from './copyText';
+export * from './dataTable';
 export * from './environmentBreadcrumb';
 export * from './fieldHelperText';
 export * from './helpHint';

package/lib/types/shared/index.js

@@ -1,5 +1,6 @@
 export * from './dom';
 export * from './events';
+export * from './loadingState';
 export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/types/shared/loadingState.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.65.0",
+  "version": "2.65.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -87,9 +87,10 @@
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
     "@react-types/accordion": "^3.0.0-alpha.18",
-    "@react-types/grid": "^3.2.3",
+    "@react-types/grid": "^3.2.4",
     "@react-types/select": "^3.9.1",
     "@react-types/shared": "^3.22.0",
+    "@react-types/table": "^3.9.3",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",
     "@storybook/components": "^7.1.0",