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

package/lib/cjs/components/AIComponents/Response/Response.stories.js

@@ -7,6 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
 var _ContentCopyIcon = _interopRequireDefault(require("@pingux/mdi-react/ContentCopyIcon"));
 var _TextIcon = _interopRequireDefault(require("@pingux/mdi-react/TextIcon"));
@@ -19,6 +20,7 @@ var _ResponseAttachment = _interopRequireDefault(require("./ResponseAttachment")
 var _ResponseList = _interopRequireDefault(require("./ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./ResponseText"));
 var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbarIcon = _interopRequireDefault(require("./ResponseToolbarIcon"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Ai Components/Response',
@@ -27,28 +29,22 @@ var _default = {
 exports["default"] = _default;
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 var Default = function Default(args) {
-  var toolBarProps = {
-    readButtonProps: {
-      title: 'Read aloud',
-      icon: _VolumeHighIcon["default"]
-    },
-    copyButtonProps: {
-      title: 'Copy',
-      icon: _ContentCopyIcon["default"]
-    },
-    goodButtonProps: {
-      title: 'Good Response',
-      icon: _ThumbUpOutlineIcon["default"]
-    },
-    badButtonProps: {
-      title: 'Bad Response',
-      icon: _ThumbDownOutlineIcon["default"]
-    },
-    rephraseButtonProps: {
-      title: 'Rephrase Answer',
-      icon: _TextIcon["default"]
-    }
-  };
+  var icons = [{
+    title: 'Read aloud',
+    icon: _VolumeHighIcon["default"]
+  }, {
+    title: 'Copy',
+    icon: _ContentCopyIcon["default"]
+  }, {
+    title: 'Good Response',
+    icon: _ThumbUpOutlineIcon["default"]
+  }, {
+    title: 'Bad Response',
+    icon: _ThumbDownOutlineIcon["default"]
+  }, {
+    title: 'Rephrase Answer',
+    icon: _TextIcon["default"]
+  }];
   var delay = 20;
   return (0, _react2.jsx)(_.AstroWrapper, (0, _extends2["default"])({}, args, {
     themeOverrides: [_.NextGenTheme]
@@ -56,7 +52,9 @@ var Default = function Default(args) {
     delay: delay
   }, (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
-  }), (0, _react2.jsx)(_ResponseAttachment["default"], null), (0, _react2.jsx)(_ResponseText["default"], {
+  }), (0, _react2.jsx)(_ResponseAttachment["default"], {
+    text: "Attachment Text"
+  }), (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
   }), (0, _react2.jsx)(_ResponseText["default"], {
     text: testText
@@ -77,6 +75,8 @@ var Default = function Default(args) {
     text: "list item 3"
   })), (0, _react2.jsx)(_ResponseText["default"], {
     text: "follow up text"
-  }), (0, _react2.jsx)(_ResponseToolbar["default"], toolBarProps)));
+  }), (0, _react2.jsx)(_ResponseToolbar["default"], null, (0, _map["default"])(icons).call(icons, function (icon) {
+    return (0, _react2.jsx)(_ResponseToolbarIcon["default"], icon);
+  }))));
 };
 exports.Default = Default;

package/lib/cjs/components/AIComponents/Response/Response.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import LockIcon from '@pingux/mdi-react/LockIcon';
-import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import TagIcon from '@pingux/mdi-react/TagIcon';
+import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
+import TextIcon from '@pingux/mdi-react/TextIcon';
+import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
+import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
+import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
 
 import { act, render, screen } from '../../../utils/testUtils/testWrapper';
 
@@ -12,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolBarIcon from './ResponseToolbarIcon';
 
 const delay = 100;
 
@@ -24,28 +25,24 @@ const nextText = 'nextText';
 const attachmentWrapperId = 'wrapper-id';
 const toolbarId = 'id';
 
-const customProps = {
-  readButtonProps: {
-    title: 'Read aloud test',
-    icon: AccountGroupIcon,
-  },
-  copyButtonProps: {
-    title: 'Copy test',
-    icon: AccountIcon,
-  },
-  goodButtonProps: {
-    title: 'Good Response test',
-    icon: LockIcon,
-  },
-  badButtonProps: {
-    title: 'Bad Response test',
-    icon: SearchIcon,
-  },
-  rephraseButtonProps: {
-    title: 'Rephrase Answer test',
-    icon: TagIcon,
-  },
-};
+const attachmentText = 'Attachment Text';
+
+const icons = [{
+  title: 'Read aloud test',
+  icon: VolumeHighIcon,
+}, {
+  title: 'Copy test',
+  icon: CopyIcon,
+}, {
+  title: 'Good Response test',
+  icon: ThumbUpOutlineIcon,
+}, {
+  title: 'Bad Response test',
+  icon: ThumbDownOutlineIcon,
+}, {
+  title: 'Rephrase Answer test',
+  icon: TextIcon,
+}];
 
 const defaultProps = {
   containerProps: {
@@ -80,25 +77,25 @@ const getComponentWithList = props => render(
 const getComponentWithToolbar = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} />
+    <ResponseToolbar data-testid={toolbarId}>
+      {icons.map(icon => {
+        return (
+          <ResponseToolBarIcon key={icon.title} {...icon} />
+        );
+      })}
+    </ResponseToolbar>
+    <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
 const getComponentWithAttachment = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseAttachment wrapperProps={{ 'data-testid': attachmentWrapperId }} />
+    <ResponseAttachment text={attachmentText} wrapperProps={{ 'data-testid': attachmentWrapperId }} />
     <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
-const getComponentWithToolbarCustomProps = props => render(
-  <Response {...defaultProps} {...props}>
-    <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} {...customProps} />
-  </Response>,
-);
-
 test('component renders', () => {
   getComponent();
   const container = screen.getByTestId('container');
@@ -166,13 +163,19 @@ test('ResponseToolbar renders correctly', async () => {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(toolbar).not.toHaveClass('is-not-loaded');
+  for (let i = 1; i < icons.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.getByTitle(icons[i - 1].title)).toBeInTheDocument();
+    expect(screen.getByTitle(icons[i - 1].title)).not.toHaveClass('is-not-loaded');
+  }
+  act(() => { jest.advanceTimersByTime(2000); });
 });
 
 test('ResponseAttachment renders correctly', async () => {
   getComponentWithAttachment();
   act(() => { jest.advanceTimersByTime(10); });
 
-  expect(screen.getByText('Attachment text')).toBeInTheDocument();
+  expect(screen.getByText(attachmentText)).toBeInTheDocument();
   const wrapper = screen.getByTestId(attachmentWrapperId);
   expect(wrapper).toHaveClass('is-not-loaded');
   for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
@@ -180,36 +183,3 @@ test('ResponseAttachment renders correctly', async () => {
   }
   expect(wrapper).not.toHaveClass('is-not-loaded');
 });
-
-test('ResponseAttachment renders correctly, with custom props', async () => {
-  getComponentWithToolbarCustomProps();
-  act(() => { jest.advanceTimersByTime(10); });
-
-  expect(screen.getByTitle('Read aloud test')).toBeInTheDocument();
-  expect(screen.getByTitle('Copy test')).toBeInTheDocument();
-  expect(screen.getByTitle('Good Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Bad Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer test')).toBeInTheDocument();
-});
-
-test('ResponseToolbar conditional rendering of IconButton based on title prop', async () => {
-  render(
-    <Response {...defaultProps}>
-      <ResponseText text={defaultProps.text} />
-      <ResponseToolbar
-        data-testid={toolbarId}
-        readButtonProps={{ title: 'Read aloud' }}
-        copyButtonProps={{ title: '' }}
-        goodButtonProps={{ title: 'Good Response' }}
-        badButtonProps={{ title: '' }}
-        rephraseButtonProps={{ title: 'Rephrase Answer' }}
-      />
-    </Response>,
-  );
-
-  expect(screen.getByTitle('Read aloud')).toBeInTheDocument();
-  expect(screen.queryByTitle('Copy')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Good Response')).toBeInTheDocument();
-  expect(screen.queryByTitle('Bad Response')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer')).toBeInTheDocument();
-});

package/lib/cjs/components/AIComponents/Response/ResponseAttachment.js

@@ -25,7 +25,8 @@ var ResponseAttachment = function ResponseAttachment(props) {
     iconProps = props.iconProps,
     className = props.className,
     animationIndex = props.animationIndex,
-    shouldStartAnimation = props.shouldStartAnimation;
+    shouldStartAnimation = props.shouldStartAnimation,
+    text = props.text;
   var isLoaded = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
@@ -48,7 +49,7 @@ var ResponseAttachment = function ResponseAttachment(props) {
     title: {
       name: 'attachment icon'
     }
-  }, iconProps)), (0, _react2.jsx)(_index.Text, textProps, "Attachment text"));
+  }, iconProps)), (0, _react2.jsx)(_index.Text, textProps, text));
 };
 var _default = ResponseAttachment;
 exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/ResponseToolbar.js

@@ -9,49 +9,40 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _ContentCopyIcon = _interopRequireDefault(require("@pingux/mdi-react/ContentCopyIcon"));
-var _TextIcon = _interopRequireDefault(require("@pingux/mdi-react/TextIcon"));
-var _ThumbDownOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ThumbDownOutlineIcon"));
-var _ThumbUpOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ThumbUpOutlineIcon"));
-var _VolumeHighIcon = _interopRequireDefault(require("@pingux/mdi-react/VolumeHighIcon"));
 var _hooks = require("../../../hooks");
 var _index = require("../../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["parentIndex", "setAnimationIndex", "readButtonProps", "copyButtonProps", "goodButtonProps", "badButtonProps", "rephraseButtonProps", "className", "shouldStartAnimation", "animationIndex"];
+var _excluded = ["parentIndex", "setAnimationIndex", "children", "className", "shouldStartAnimation", "animationIndex", "delay"];
 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; }
-var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
-  var title = props.title,
-    icon = props.icon;
-  return (0, _react2.jsx)(_index.IconButton, {
-    title: title
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: icon,
-    title: {
-      name: title
-    }
-  }));
-};
 var ResponseToolbar = function ResponseToolbar(props) {
   var parentIndex = props.parentIndex,
     setAnimationIndex = props.setAnimationIndex,
-    readButtonProps = props.readButtonProps,
-    copyButtonProps = props.copyButtonProps,
-    goodButtonProps = props.goodButtonProps,
-    badButtonProps = props.badButtonProps,
-    rephraseButtonProps = props.rephraseButtonProps,
+    children = props.children,
     className = props.className,
     shouldStartAnimation = props.shouldStartAnimation,
     animationIndex = props.animationIndex,
+    delay = props.delay,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isLoaded = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (index === (children === null || children === void 0 ? void 0 : children.length) && animationIndex !== undefined && setAnimationIndex) {
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, index, shouldStartAnimation, animationIndex, children === null || children === void 0 ? void 0 : children.length]);
   (0, _react.useEffect)(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
       isLoaded.current = true;
-      setAnimationIndex(animationIndex + 1);
+      setIndex(0);
     }
   }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
@@ -63,17 +54,14 @@ var ResponseToolbar = function ResponseToolbar(props) {
     gap: "sm",
     variant: "response.toolbar",
     className: classNames
-  }, others), (readButtonProps === null || readButtonProps === void 0 ? void 0 : readButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _VolumeHighIcon["default"]
-  }, readButtonProps)), (copyButtonProps === null || copyButtonProps === void 0 ? void 0 : copyButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ContentCopyIcon["default"]
-  }, copyButtonProps)), (goodButtonProps === null || goodButtonProps === void 0 ? void 0 : goodButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ThumbUpOutlineIcon["default"]
-  }, goodButtonProps)), (badButtonProps === null || badButtonProps === void 0 ? void 0 : badButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _ThumbDownOutlineIcon["default"]
-  }, badButtonProps)), (rephraseButtonProps === null || rephraseButtonProps === void 0 ? void 0 : rephraseButtonProps.title) && (0, _react2.jsx)(ResponseToolbarIcon, (0, _extends2["default"])({
-    icon: _TextIcon["default"]
-  }, rephraseButtonProps)));
+  }, others), (0, _map["default"])(_react.Children).call(_react.Children, children, function (child, i) {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].cloneElement(child, {
+      setAnimationIndex: setIndex,
+      animationIndex: i,
+      parentIndex: index,
+      delay: delay
+    }));
+  }));
 };
 var _default = ResponseToolbar;
 exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/ResponseToolbarIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ResponseToolbarIconProps } from '../../../types/response';
+declare const ResponseToolbarIcon: (props: ResponseToolbarIconProps) => React.JSX.Element;
+export default ResponseToolbarIcon;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "icon", "className", "parentIndex", "animationIndex", "setAnimationIndex", "delay", "iconProps"];
+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; }
+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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isLoaded = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (parentIndex === animationIndex && setAnimationIndex && parentIndex !== undefined) {
+      (0, _setTimeout2["default"])(function () {
+        isLoaded.current = true;
+        setAnimationIndex(parentIndex + 1);
+      }, delay);
+    }
+  }, [parentIndex, animationIndex, setAnimationIndex, delay]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isNotLoaded: !isLoaded.current
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    title: title,
+    className: classNames,
+    variant: "responseToolbar"
+  }, others), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: icon,
+    title: {
+      name: title
+    }
+  }, iconProps)));
+};
+var _default = ResponseToolbarIcon;
+exports["default"] = _default;

package/lib/cjs/components/AIComponents/Response/index.d.ts

@@ -3,3 +3,4 @@ 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 ResponseToolbarIcon } from './ResponseToolbarIcon';

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

@@ -29,6 +29,12 @@ _Object$defineProperty(exports, "ResponseToolbar", {
     return _ResponseToolbar["default"];
   }
 });
+_Object$defineProperty(exports, "ResponseToolbarIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ResponseToolbarIcon["default"];
+  }
+});
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -39,4 +45,5 @@ var _Response = _interopRequireDefault(require("./Response"));
 var _ResponseAttachment = _interopRequireDefault(require("./ResponseAttachment"));
 var _ResponseList = _interopRequireDefault(require("./ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./ResponseText"));
-var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbar = _interopRequireDefault(require("./ResponseToolbar"));
+var _ResponseToolbarIcon = _interopRequireDefault(require("./ResponseToolbarIcon"));

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

@@ -203,7 +203,15 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'loader':
         return (0, _react2.jsx)(CenteredWrapper, null, (0, _react2.jsx)(_index.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/cjs/components/DataTable/DataTable.stories.js

@@ -154,6 +154,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var getHeaderProps = function getHeaderProps() {
+  return {
+    sx: {
+      fontWeight: '3'
+    }
+  };
+};
 var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
@@ -189,7 +196,7 @@ var Default = function Default(args) {
     id: 1,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -199,13 +206,10 @@ var Default = function Default(args) {
     id: 2,
     timestamp: timestampCell,
     eventType: 'User Access Denied',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Passed Role Access"), (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Control"), (0, _react2.jsx)(_index.Box, {
-      display: "block"
-    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words")),
+    description: (0, _react2.jsx)(_index.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: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Rejected"
     }),
@@ -215,7 +219,10 @@ 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: (0, _react2.jsx)(_index.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: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -225,7 +232,7 @@ var Default = function Default(args) {
     id: 4,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -235,7 +242,7 @@ var Default = function Default(args) {
     id: 5,
     timestamp: timestampCell,
     eventType: 'User Access Allowed',
-    description: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, "Passed Role Access"), (0, _react2.jsx)(_index.Box, null, "Control")),
+    description: (0, _react2.jsx)(_index.Box, null, "Passed Role Access Control"),
     status: (0, _react2.jsx)(_index.DataTableBadge, {
       cell: "Approved"
     }),
@@ -248,7 +255,7 @@ var Default = function Default(args) {
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), getHeaderProps(), {
       minWidth: column.key !== 'menu' ? 175 : 32,
       width: column.key !== 'menu' ? '19.4%' : 32
     }), column.name);
@@ -308,7 +315,7 @@ var Dynamic = function Dynamic(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -415,7 +422,7 @@ var Sortable = function Sortable(args) {
     id: 6,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 7,
     country: 'USA',
@@ -550,7 +557,7 @@ var Selection = function Selection(args) {
     id: 5,
     country: 'Mexico',
     population: '126,000,000',
-    continent: 'South America'
+    continent: 'North America'
   }, {
     id: 6,
     country: 'Ethiopia',
@@ -635,7 +642,7 @@ 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/cjs/components/DataTable/DataTable.styles.d.ts

@@ -51,7 +51,6 @@ declare const _default: {
     };
     tableCellContents: {
         maxHeight: number;
-        overflow: string;
         display: string;
         '-webkit-line-clamp': string;
         '-webkit-box-orient': string;
@@ -167,5 +166,12 @@ declare const _default: {
         borderRadius: string;
         mr: string;
     };
+    truncateText: {
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
+    };
 };
 export default _default;

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

@@ -48,7 +48,7 @@ var tableCell = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
 });
 var tableCellContents = {
   maxHeight: 80,
-  overflow: 'hidden',
+  // overflow: 'hidden',
   display: '-webkit-box !important',
   '-webkit-line-clamp': '4',
   '-webkit-box-orient': 'vertical'
@@ -159,6 +159,13 @@ var tableMenu = {
   borderRadius: '50px',
   mr: 'md'
 };
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '2',
+  overflow: 'hidden'
+};
 var _default = {
   selectableTableRow: selectableTableRow,
   tableBody: tableBody,
@@ -168,6 +175,7 @@ var _default = {
   tableCell: tableCell,
   tableRow: tableRow,
   tableHeadCell: tableHeadCell,
-  tableMenu: tableMenu
+  tableMenu: tableMenu,
+  truncateText: truncateText
 };
 exports["default"] = _default;