@axinom/mosaic-ui 0.51.0-rc.11 → 0.51.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.51.0-rc.11",
+  "version": "0.51.0-rc.12",
   "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.24-rc.11",
+    "@axinom/mosaic-core": "^0.4.24-rc.12",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@popperjs/core": "^2.11.8",
@@ -106,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e3645d77a2b5805138621b56f4746bae31849395"
+  "gitHead": "0b88f693bb9e9b890a37c4bc976c980a43c9f197"
 }

package/src/components/Explorer/QuickEdit/useQuickEdit.tsx

@@ -138,7 +138,7 @@ export const useQuickEdit = <T extends Data>({
               actionType:
                 isQuickEditMode &&
                 currentRegistration?.component === registration.component
-                  ? PageHeaderActionType.Active
+                  ? PageHeaderActionType.Hightlight
                   : PageHeaderActionType.Context,
               onClick: async () => {
                 await saveCallbackRef.current?.();

package/src/components/PageHeader/PageHeader.scss

@@ -53,7 +53,6 @@
   .actions {
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: minmax(0, min-content);
     grid-gap: 1px;
   }
 

package/src/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
 import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
@@ -31,10 +31,9 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   useTabTitle(title, setTabTitle);
   const { width, ref } = useElementWidthObserver<HTMLDivElement>();
 
-  const [availableActionSpace, setAvailableActionSpace] =
-    React.useState<number>(0);
+  const [availableActionSpace, setAvailableActionSpace] = useState<number>(0);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Use up to 75% of the container width for actions
     const maxActionsWidth = width * 0.75;
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -5,6 +5,7 @@ import { ConfirmAction, DefaultHandler, LinkAction } from '../../models';
 export enum PageHeaderActionType {
   Active,
   Context,
+  Hightlight,
 }
 
 export type PageHeaderActionProps =

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -88,6 +88,13 @@
     }
   }
 
+  &.highlight {
+    background-color: var(
+      --page-header-action-context-hover-background-color,
+      $page-header-action-context-hover-background-color
+    );
+  }
+
   &.active {
     color: var(
       --page-header-action-context-background-color,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -119,6 +119,7 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
           {
             [classes.context]: actionType === PageHeaderActionType.Context,
             [classes.active]: actionType === PageHeaderActionType.Active,
+            [classes.highlight]: actionType === PageHeaderActionType.Hightlight,
             [classes.hasConfirm]: confirmation,
           },
           'page-header-action-container',

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx

@@ -112,10 +112,14 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
     }
   }, [isConfirmOpen, isMouseOverMore, moreCollapse, moreExpanded]);
 
-  const actionsSlice =
-    availableActionSpace < actions.length
-      ? availableActionSpace - 1
-      : availableActionSpace;
+  const showMore = actions.length > availableActionSpace && actions.length > 1;
+  const visibleActions = showMore
+    ? Math.max(availableActionSpace, 1)
+    : actions.length;
+
+  const actionsSlice = showMore
+    ? Math.max(availableActionSpace - 1, 0)
+    : actions.length;
 
   return (
     <div
@@ -150,9 +154,7 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
       />
       <div
         style={{
-          maxWidth: isExpanded
-            ? `${Math.min(availableActionSpace, actions.length) * 121}px`
-            : `0px`,
+          maxWidth: isExpanded ? `${visibleActions * 121}px` : `0px`,
           opacity: isExpanded ? 1 : 0,
         }}
         className={classes.actions}
@@ -178,7 +180,7 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
             <PageHeaderAction key={idx} {...action} />
           ),
         )}
-        {actions.length > availableActionSpace && (
+        {showMore && (
           <div onMouseEnter={() => setIsMouseOverMore(true)}>
             <PageHeaderAction
               label="More"