@oliasoft-open-source/react-ui-library 2.4.4 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "2.4.4",
+  "version": "2.4.6",
   "description": "Reusable UI components for React projects",
   "main": "index.js",
   "scripts": {

package/src/components/dialog/dialog.jsx

@@ -2,9 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FaTimes } from 'react-icons/fa';
 import cx from 'classnames';
+import { isArray } from 'lodash';
 import { Heading } from '../heading/heading';
 import styles from './dialog.module.less';
 
+const convertStringToJsx = (children) => {
+  if (isArray(children)) {
+    return children.map((text) => (
+      <>
+        {text} <br />
+      </>
+    ));
+  }
+  return children;
+};
+
 export const Dialog = ({ dialog }) => {
   const {
     heading,
@@ -36,7 +48,7 @@ export const Dialog = ({ dialog }) => {
         ) : null}
       </div>
       <div className={styles.content} style={{ padding: contentPadding }}>
-        {content}
+        {convertStringToJsx(content)}
       </div>
       {footer && <div className={styles.footer}>{footer}</div>}
     </div>
@@ -49,6 +61,7 @@ const dialogShape = PropTypes.shape({
     PropTypes.string,
     PropTypes.number,
     PropTypes.node,
+    PropTypes.arrayOf(PropTypes.string),
   ]).isRequired,
   contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   footer: PropTypes.node,

package/src/components/modal/modal.module.less

@@ -33,3 +33,7 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+
+.newLine {
+  white-space: 'pre-wrap';
+}

package/src/components/modal/modal.stories.jsx

@@ -64,6 +64,9 @@ export const Default = Template.bind({});
 export const Centered = Template.bind({});
 Centered.args = { centered: true };
 
+export const LineBreak = Template.bind({});
+LineBreak.args = { content: ['This is a', 'new line!'] };
+
 export const Scroll = Template.bind({});
 Scroll.args = {
   scroll: true,

package/src/components/table/table-scroll-wrapper.jsx

@@ -23,20 +23,21 @@ export const TableScrollWrapper = ({ table, children }) => {
 
   return (
     <div
+      id="scrollWrapper"
       className={cx(
         styles.scrollWrapper,
         bordered ? styles.bordered : '',
         maxHeight ? styles.maxHeight : '',
       )}
-      style={{ maxHeight: !infiniteScroll ? maxHeight : 'none' }}
+      style={{ maxHeight }}
     >
       {infiniteScroll ? (
         <InfiniteScroll
           dataLength={Math.min(rows.length, visibleRows + pageSize)} // Doesn't work with rows.length for some reason
           next={loadMoreItems}
           hasMore={hasMore}
-          height={maxHeight}
-          style={{ overflowX: 'hidden' }}
+          scrollableTarget="scrollWrapper"
+          style={{ overflow: 'initial' }}
         >
           {children({ visibleRows })}
         </InfiniteScroll>

package/src/components/table/table.module.less

@@ -20,6 +20,7 @@ html[data-theme='dark'] {
   &.maxHeight {
     display: block;
     overflow-y: auto;
+    overflow-x: hidden;
 
     tfoot td {
       position: sticky;

package/src/components/table/table.stories-data.jsx

@@ -170,6 +170,23 @@ export const tableInfiniteScroll = {
   },
 };
 
+export const tableInfiniteScrollFullHeight = {
+  ...tableInfiniteScroll,
+  maxHeight: '100%',
+};
+
+export const tableInfiniteScrollShort = {
+  ...tableInfiniteScroll,
+  rows: Array.from({ length: 1 }, (_, index) => ({
+    cells: [
+      { type: 'Input', value: `Strawberry Letter ${index + 1}` },
+      { type: 'Input', value: 100 },
+      { type: 'Input', value: 361 },
+      { type: 'Input', value: 'Vietnam' },
+    ],
+  })),
+};
+
 export const tableInfiniteScrollDnD = {
   ...tableInfiniteScroll,
   draggable: true,
@@ -454,7 +471,6 @@ export const tableStickyHeaders = {
 };
 
 export const tableSort = {
-  fixedWidth: '100%',
   headers: [
     {
       cells: [

package/src/components/table/table.stories.jsx

@@ -78,11 +78,36 @@ StickyHeaders.args = {
   table: storyData.tableStickyHeaders,
 };
 
-export const InfiniteScroll = Template.bind({});
-InfiniteScroll.args = {
+export const InfiniteScrollFixedHeight = Template.bind({});
+InfiniteScrollFixedHeight.args = {
   table: storyData.tableInfiniteScroll,
 };
 
+export const InfiniteScrollFullHeight = Template.bind({});
+InfiniteScrollFullHeight.args = {
+  table: storyData.tableInfiniteScrollFullHeight,
+};
+InfiniteScrollFullHeight.decorators = [
+  (Story) => (
+    <div style={{ height: 800 }}>
+      <Story />
+    </div>
+  ),
+];
+
+export const InfiniteScrollShort = Template.bind({});
+InfiniteScrollShort.args = {
+  table: storyData.tableInfiniteScrollShort,
+};
+InfiniteScrollShort.parameters = {
+  docs: {
+    description: {
+      story:
+        'If a `maxHeight` is set, the table should only fill that height if it needs to.',
+    },
+  },
+};
+
 export const InfiniteScrollWithDragAndDrop = Template.bind({});
 InfiniteScrollWithDragAndDrop.args = {
   table: storyData.tableInfiniteScrollDnD,