@oliasoft-open-source/react-ui-library 2.4.3 → 2.4.5

package/package.json

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

package/src/components/drawer/drawer-resize-wrapper.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { FaGripLinesVertical } from 'react-icons/fa';
 import { Resizable } from 'react-resizable';
 import PropTypes from 'prop-types';
 import styles from './drawer.module.less';
@@ -10,7 +11,9 @@ const ResizeHandle = React.forwardRef((props, ref) => {
       ref={ref}
       className={styles.resizeHandle}
       {...rest} // eslint-disable-line react/jsx-props-no-spreading
-    />
+    >
+      <FaGripLinesVertical />
+    </div>
   );
 });
 

package/src/components/drawer/drawer.module.less

@@ -1,7 +1,7 @@
 @import '../../style/variables.less';
 
 :root {
-  --color-background-drawer-tabs: var(--color-neutral-100);
+  --color-background-drawer-tabs: var(--color-neutral-50);
   --color-background-drawer-tab: #fff9f4;
   --color-background-drawer-tab-hover: white;
   --color-border-drawer-tab: #e4cbb7;
@@ -188,16 +188,23 @@ html[data-theme='dark'] {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 4px;
+  width: 10px;
   z-index: @zindex_drawer + 2;
   cursor: ew-resize;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-faint);
+  font-size: 12px;
+  transition: all 0.2s;
 
   &:hover {
-    background: rgba(@colorPrimary, 0.25);
+    background: rgba(@colorPrimary, 0.15);
+    color: var(--color-text-primary);
   }
 
   &:active {
-    background: @colorPrimary;
+    background: var(--color-text-primary);
+    color: white;
   }
 
   .left & {

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,