@axinom/mosaic-ui 0.35.0-rc.1 → 0.35.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.35.0-rc.1",
+  "version": "0.35.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.8-rc.1",
+    "@axinom/mosaic-core": "^0.4.8-rc.2",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c774f9f3f90455bf9387003daa587158ba751e2"
+  "gitHead": "4cb507987eae6659d8b5c829c21322f84c0b1159"
 }

package/src/components/List/ListRow/ListRow.tsx

@@ -249,58 +249,64 @@ export const ListRow = <T extends Data>({
           {generateCells}
         </div>
       )}
-      <div className={classes.actions}>
-        {inlineMenuActions &&
-          inlineActionMenuData &&
-          inlineActionMenuData.length > 0 && (
-            <InlineMenu
-              actions={inlineActionMenuData}
-              showArrow={false}
-              placement="bottom-end"
-            />
+      {(inlineMenuActions ||
+        showActionButton ||
+        showCheckMark ||
+        showItemCheckbox) && (
+        <div className={classes.actions}>
+          {inlineMenuActions &&
+            inlineActionMenuData &&
+            inlineActionMenuData.length > 0 && (
+              <InlineMenu
+                actions={inlineActionMenuData}
+                showArrow={false}
+                placement="bottom-end"
+              />
+            )}
+          {showActionButton && selectionMode === ListSelectMode.None && (
+            <>
+              {showActionButton &&
+                (typeof onItemClicked !== 'function' ? (
+                  <Button
+                    icon={IconName.ChevronRight}
+                    height={actionSize}
+                    width={actionSize}
+                    path={onItemClicked}
+                    dataTestId="list-entry-action"
+                  />
+                ) : (
+                  <Button
+                    icon={IconName.ChevronRight}
+                    height={actionSize}
+                    width={actionSize}
+                    onButtonClicked={() => onItemClickedHandler(data)}
+                    dataTestId="list-entry-action"
+                  />
+                ))}
+            </>
           )}
-        {showActionButton && selectionMode === ListSelectMode.None && (
-          <>
-            {showActionButton &&
-              (typeof onItemClicked !== 'function' ? (
-                <Button
-                  icon={IconName.ChevronRight}
-                  height={actionSize}
-                  width={actionSize}
-                  path={onItemClicked}
-                  dataTestId="list-entry-action"
-                />
-              ) : (
-                <Button
-                  icon={IconName.ChevronRight}
-                  height={actionSize}
-                  width={actionSize}
-                  dataTestId="list-entry-action"
-                />
-              ))}
-          </>
-        )}
 
-        {showCheckMark && (
-          <Button
-            icon={IconName.Checkmark}
-            height={actionSize}
-            width={actionSize}
-            dataTestId="list-entry-select-button"
-            className={classes.selectionCheckMark}
-            onButtonClicked={() => onItemClickedHandler(data)}
-          />
-        )}
-        {showItemCheckbox && (
-          <ListCheckBox
-            height={actionSize}
-            width={actionSize}
-            onCheckBoxToggled={() => onItemClickedHandler(data)}
-            isChecked={itemSelected}
-            isDisabled={isRowDisabled}
-          />
-        )}
-      </div>
+          {showCheckMark && (
+            <Button
+              icon={IconName.Checkmark}
+              height={actionSize}
+              width={actionSize}
+              dataTestId="list-entry-select-button"
+              className={classes.selectionCheckMark}
+              onButtonClicked={() => onItemClickedHandler(data)}
+            />
+          )}
+          {showItemCheckbox && (
+            <ListCheckBox
+              height={actionSize}
+              width={actionSize}
+              onCheckBoxToggled={() => onItemClickedHandler(data)}
+              isChecked={itemSelected}
+              isDisabled={isRowDisabled}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 

package/src/components/List/useColumnsSize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { SetStateAction, useEffect, useState } from 'react';
 import { Data } from '../../types';
 import { Column, ListSelectMode } from './List.model';
 
@@ -73,6 +73,8 @@ export const useColumnsSize = <T extends Data>(
   setColumnSizes: React.Dispatch<React.SetStateAction<string>>;
   hasActionColumn: boolean;
 } => {
+  const [isResized, setIsResized] = useState<boolean>(false);
+
   const [orgColumnSizes, setOrgColumnSizes] = useState<string>(
     getColumnsSizeDefinition(
       columns,
@@ -81,6 +83,7 @@ export const useColumnsSize = <T extends Data>(
       showInlineMenu,
     ),
   );
+
   const [columnSizes, setColumnSizes] = useState<string>(orgColumnSizes);
 
   useEffect(() => {
@@ -92,16 +95,30 @@ export const useColumnsSize = <T extends Data>(
         showInlineMenu,
       ),
     );
-  }, [columns, selectMode, showActionButton, showInlineMenu]);
+    if (!isResized) {
+      setColumnSizes(orgColumnSizes);
+    }
+  }, [
+    columns,
+    isResized,
+    orgColumnSizes,
+    selectMode,
+    showActionButton,
+    showInlineMenu,
+  ]);
 
   const resetColumnSizes = (): void => {
     setColumnSizes(orgColumnSizes);
+    setIsResized(false);
   };
 
   return {
     columnSizes,
     resetColumnSizes,
-    setColumnSizes,
+    setColumnSizes: (newColumnSizes: SetStateAction<string>) => {
+      setIsResized(true);
+      setColumnSizes(newColumnSizes);
+    },
     hasActionColumn: hasActionColumn(
       selectMode,
       showActionButton,