@axinom/mosaic-ui 0.32.0-rc.3 → 0.32.0-rc.4

package/src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx

@@ -4,12 +4,15 @@ import { noop } from '../../../helpers/utils';
 import { useExpand } from '../../../hooks/useExpand/useExpand';
 import { ConfirmationMode } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
-import { PageHeaderProps } from '../PageHeader';
+import { PageHeaderProps } from '../PageHeader.model';
 import {
+  isPageHeaderJsAction,
   PageHeaderAction,
+} from '../PageHeaderAction/PageHeaderAction';
+import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction';
+} from '../PageHeaderAction/PageHeaderAction.model';
 import classes from './PageHeaderBulkActions.scss';
 
 export interface PageHeaderBulkActionsProps
@@ -107,23 +110,27 @@ export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
         }}
       />
       {isExpanded &&
-        actions.slice(0, availableActionSpace).map((action, idx) => (
-          <PageHeaderAction
-            key={idx}
-            {...action}
-            disabled={bulkActionsDisabled}
-            confirmationConfig={{
-              ...action.confirmationConfig,
-              onConfirmOpen: (isOpen, args) => {
-                onConfirmToggled(
-                  isOpen,
-                  args as { id: string; mode: ConfirmationMode },
-                );
-                action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-              },
-            }}
-          />
-        ))}
+        actions.slice(0, availableActionSpace).map((action, idx) =>
+          isPageHeaderJsAction(action) ? (
+            <PageHeaderAction
+              key={idx}
+              {...action}
+              disabled={bulkActionsDisabled}
+              confirmationConfig={{
+                ...action.confirmationConfig,
+                onConfirmOpen: (isOpen, args) => {
+                  onConfirmToggled(
+                    isOpen,
+                    args as { id: string; mode: ConfirmationMode },
+                  );
+                  action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
+                },
+              }}
+            />
+          ) : (
+            <PageHeaderAction key={idx} {...action} />
+          ),
+        )}
       {isExpanded && actions.length > availableActionSpace && (
         <div
           className={clsx(classes.hasMore)}
@@ -142,30 +149,36 @@ export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
           />
           {isMoreExpanded && (
             <div className={clsx(classes.dropDownList)}>
-              {actions.slice(availableActionSpace).map((action, idx) => (
-                <PageHeaderAction
-                  key={idx}
-                  {...action}
-                  icon={action.icon}
-                  disabled={bulkActionsDisabled}
-                  onClick={() => {
-                    action.onClick();
-                    moreCollapse();
-                    setIsMouseOverMore(false);
-                  }}
-                  className={clsx(classes.dropDown)}
-                  confirmationConfig={{
-                    ...action.confirmationConfig,
-                    onConfirmOpen: (isOpen, args) => {
-                      onConfirmToggled(
-                        isOpen,
-                        args as { id: string; mode: ConfirmationMode },
-                      );
-                      action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-                    },
-                  }}
-                />
-              ))}
+              {actions.slice(availableActionSpace).map((action, idx) =>
+                isPageHeaderJsAction(action) ? (
+                  <PageHeaderAction
+                    key={idx}
+                    {...action}
+                    disabled={bulkActionsDisabled}
+                    onClick={() => {
+                      action.onClick();
+                      moreCollapse();
+                      setIsMouseOverMore(false);
+                    }}
+                    className={clsx(classes.dropDown)}
+                    confirmationConfig={{
+                      ...action.confirmationConfig,
+                      onConfirmOpen: (isOpen, args) => {
+                        onConfirmToggled(
+                          isOpen,
+                          args as { id: string; mode: ConfirmationMode },
+                        );
+                        action.confirmationConfig?.onConfirmOpen?.(
+                          isOpen,
+                          args,
+                        );
+                      },
+                    }}
+                  />
+                ) : (
+                  <PageHeaderAction key={idx} {...action} />
+                ),
+              )}
             </div>
           )}
         </div>

package/src/components/PageHeader/index.ts

@@ -1,6 +1,7 @@
-export { PageHeader, PageHeaderProps } from './PageHeader';
+export { PageHeader } from './PageHeader';
+export { PageHeaderProps } from './PageHeader.model';
 export {
   PageHeaderAction,
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction/PageHeaderAction';
+} from './PageHeaderAction';

package/src/components/models.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ConfirmationConfig, ConfirmationMode } from './ConfirmDialog';
 import { MessageBarProps } from './MessageBar';
 
 export type StationError = Pick<MessageBarProps, 'title'> & {
@@ -16,8 +17,34 @@ export type StationMessage = MessageBarProps & {
    */
   body?: string | React.ReactNode;
 };
+
 /**
  * Possible error options the engine will handle
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type ErrorType = StationError | string | Object | Error;
+
+/** Properties to generate a link */
+export interface LinkAction {
+  /** Path to navigate to when the action is clicked. */
+  path: string;
+}
+
+/**
+ * Properties for Action click confirmation
+ */
+export interface ConfirmAction {
+  /** If set to 'Simple', the action will require confirmation. If set to 'Advanced', action will require confirmation via a confirmation pop up. (default: 'None') */
+  confirmationMode?: ConfirmationMode;
+  /** Optional text overrides for the confirmation pop up. */
+  confirmationConfig?: ConfirmationConfig;
+}
+
+/**
+ * Default Action click event handler
+ */
+export type DefaultHandler = () =>
+  | Promise<ErrorType | undefined | void>
+  | ErrorType
+  | undefined
+  | void;