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

package/lib/components/AIComponents/Response/ResponseToolbarIcon.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "icon", "className", "parentIndex", "animationIndex", "setAnimationIndex", "delay", "iconProps"];
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import React, { useEffect, useRef } from 'react';
+import { useStatusClasses } from '../../../hooks';
+import { Icon, IconButton } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
+  var title = props.title,
+    icon = props.icon,
+    className = props.className,
+    parentIndex = props.parentIndex,
+    animationIndex = props.animationIndex,
+    setAnimationIndex = props.setAnimationIndex,
+    delay = props.delay,
+    iconProps = props.iconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var isLoaded = useRef(false);
+  useEffect(function () {
+    if (parentIndex === animationIndex && setAnimationIndex && parentIndex !== undefined) {
+      _setTimeout(function () {
+        isLoaded.current = true;
+        setAnimationIndex(parentIndex + 1);
+      }, delay);
+    }
+  }, [parentIndex, animationIndex, setAnimationIndex, delay]);
+  var _useStatusClasses = useStatusClasses(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(IconButton, _extends({
+    title: title,
+    className: classNames,
+    variant: "responseToolbar"
+  }, others), ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    title: {
+      name: title
+    }
+  }, iconProps)));
+};
+export default ResponseToolbarIcon;

package/lib/components/AIComponents/Response/index.js

@@ -2,4 +2,5 @@ export { default } from './Response';
 export { default as ResponseAttachment } from './ResponseAttachment';
 export { default as ResponseList } from './ResponseList';
 export { default as ResponseText } from './ResponseText';
-export { default as ResponseToolbar } from './ResponseToolbar';
+export { default as ResponseToolbar } from './ResponseToolbar';
+export { default as ResponseToolbarIcon } from './ResponseToolbarIcon';

package/lib/components/DataTable/DataTable.js

@@ -192,7 +192,15 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'loader':
         return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
           color: "accent.70",
-          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading',
+          sx: {
+            gap: '9px'
+          },
+          dotProps: {
+            sx: {
+              m: 0
+            }
+          }
         }));
       default:
         return undefined;

package/lib/components/DataTable/DataTable.stories.js

@@ -142,6 +142,13 @@ export default {
     overflowMode: 'truncate'
   }
 };
+var getHeaderProps = function getHeaderProps() {
+  return {
+    sx: {
+      fontWeight: '3'
+    }
+  };
+};
 var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
@@ -177,7 +184,7 @@ export var Default = function Default(args) {
     id: 1,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -187,13 +194,10 @@ export var Default = function Default(args) {
     id: 2,
     timestamp: timestampCell,
     eventType: 'User Access Denied',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Control"), ___EmotionJSX(Box, {
-      display: "block"
-    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words")),
+    description: ___EmotionJSX(Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Passed Role Access Control Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Rejected"
     }),
@@ -203,7 +207,10 @@ export var Default = function Default(args) {
     id: 3,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: 'Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words',
+    description: ___EmotionJSX(Box, {
+      display: "-webkit-box",
+      variant: "dataTable.truncateText"
+    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -213,7 +220,7 @@ export var Default = function Default(args) {
     id: 4,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -223,7 +230,7 @@ export var Default = function Default(args) {
     id: 5,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, "Passed Role Access"), ___EmotionJSX(Box, null, "Control")),
+    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
     status: ___EmotionJSX(DataTableBadge, {
       cell: "Approved"
     }),
@@ -236,7 +243,7 @@ export var Default = function Default(args) {
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), getHeaderProps(), {
       minWidth: column.key !== 'menu' ? 175 : 32,
       width: column.key !== 'menu' ? '19.4%' : 32
     }), column.name);
@@ -295,7 +302,7 @@ export var Dynamic = function Dynamic(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -401,7 +408,7 @@ export var Sortable = function Sortable(args) {
     id: 6,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 7,
     country: 'USA',
@@ -535,7 +542,7 @@ export var Selection = function Selection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -619,7 +626,7 @@ export var ControlledSelection = function ControlledSelection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',

package/lib/components/DataTable/DataTable.styles.js

@@ -41,7 +41,7 @@ var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
 });
 var tableCellContents = {
   maxHeight: 80,
-  overflow: 'hidden',
+  // overflow: 'hidden',
   display: '-webkit-box !important',
   '-webkit-line-clamp': '4',
   '-webkit-box-orient': 'vertical'
@@ -152,6 +152,13 @@ var tableMenu = {
   borderRadius: '50px',
   mr: 'md'
 };
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '2',
+  overflow: 'hidden'
+};
 export default {
   selectableTableRow: selectableTableRow,
   tableBody: tableBody,
@@ -161,5 +168,6 @@ export default {
   tableCell: tableCell,
   tableRow: tableRow,
   tableHeadCell: tableHeadCell,
-  tableMenu: tableMenu
+  tableMenu: tableMenu,
+  truncateText: truncateText
 };

package/lib/components/DataTable/DataTableBadge.js

@@ -1,62 +1,35 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 /* eslint-disable no-nested-ternary */
 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 { Badge, Icon } from '../../index';
+import { Badge } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cell = _ref.cell;
   var componentProps = {
     'Pending': {
       badgeProps: {
-        variant: 'dataTable.pending'
-      },
-      iconProps: {
-        icon: CheckIcon
+        variant: 'activeStatusBadge'
       }
     },
     'Failed': {
       badgeProps: {
-        variant: 'dataTable.failed'
-      },
-      iconProps: {
-        icon: AlertIcon,
-        title: {
-          name: 'Alert Icon'
-        }
+        variant: 'warningStatusBadge'
       }
     },
     'Rejected': {
       badgeProps: {
-        variant: 'dataTable.rejected'
-      },
-      iconProps: {
-        icon: AlertCircleIcon,
-        title: {
-          name: 'Alert Circle Icon'
-        }
+        variant: 'criticalStatusBadge'
       }
     },
     'Approved': {
       badgeProps: {
-        variant: 'dataTable.approved'
-      },
-      iconProps: {
-        icon: CheckIcon,
-        title: {
-          name: 'Check Icon'
-        }
+        variant: 'healthyStatusBadge'
       }
     }
   };
   return ___EmotionJSX(Badge, _extends({
     label: cell,
     ref: ref
-  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && ___EmotionJSX(Icon, _extends({
-    mr: "xs",
-    size: "14px"
-  }, cell && componentProps[cell].iconProps)));
+  }, cell && componentProps[cell].badgeProps));
 });
 export default DataTableBadge;

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

@@ -20,7 +20,6 @@ test('renders component with rejected label', function () {
     cell: cell
   });
   expect(screen.queryByText('Rejected')).toBeInTheDocument();
-  expect(screen.queryByText('Alert Circle Icon')).toBeInTheDocument();
 });
 test('renders component with pending label', function () {
   var cell = 'Pending';
@@ -35,7 +34,6 @@ test('renders component with failed label', function () {
     cell: cell
   });
   expect(screen.queryByText('Failed')).toBeInTheDocument();
-  expect(screen.queryByText('Alert Icon')).toBeInTheDocument();
 });
 test('renders component with null cell', function () {
   var cell = null;

package/lib/components/Loader/Loader.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["size"];
+var _excluded = ["size", "dotProps"];
 import React, { forwardRef } from 'react';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
   var size = props.size,
+    dotProps = props.dotProps,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -15,12 +16,12 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "alert",
     "aria-live": "assertive",
     "aria-label": "Loading in progress"
-  }, others), ___EmotionJSX(Box, {
+  }, others), ___EmotionJSX(Box, _extends({
     variant: "loader.dotLeft"
-  }), ___EmotionJSX(Box, {
+  }, dotProps)), ___EmotionJSX(Box, _extends({
     variant: "loader.dotCenter"
-  }), ___EmotionJSX(Box, {
+  }, dotProps)), ___EmotionJSX(Box, _extends({
     variant: "loader.dotRight"
-  }));
+  }, dotProps)));
 });
 export default Loader;

package/lib/index.js

@@ -20,6 +20,7 @@ export { default as ResponseAttachment } from './components/AIComponents/Respons
 export { default as ResponseList } from './components/AIComponents/Response/ResponseList';
 export { default as ResponseText } from './components/AIComponents/Response/ResponseText';
 export { default as ResponseToolbar } from './components/AIComponents/Response/ResponseToolbar';
+export { default as ResponseToolbarIcon } from './components/AIComponents/Response/ResponseToolbarIcon';
 export { default as Suggestions } from './components/AIComponents/Suggestions';
 export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';

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

@@ -243,6 +243,12 @@ var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-not-loaded': {
+      display: 'none'
+    },
+    display: 'inline-flex'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

package/package.json

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