fix(striker-ui): break dialog action group

striker-ui/components/ActionGroup.tsx

@@ -0,0 +1,33 @@
+import { styled } from '@mui/material';
+import { FC, ReactElement, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import ContainedButton from './ContainedButton';
+import FlexBox from './FlexBox';
+
+const FlexEndBox = styled(FlexBox)({
+  justifyContent: 'flex-end',
+  width: '100%',
+});
+
+const ActionGroup: FC<ActionGroupProps> = (props) => {
+  const { actions = [] } = props;
+
+  const elements = useMemo(
+    () =>
+      actions.map<ReactElement>((actionProps) => (
+        <ContainedButton key={uuidv4()} {...actionProps}>
+          {actionProps.children}
+        </ContainedButton>
+      )),
+    [actions],
+  );
+
+  return (
+    <FlexEndBox row spacing=".5em">
+      {elements}
+    </FlexEndBox>
+  );
+};
+
+export default ActionGroup;

striker-ui/components/Dialog/DialogActionGroup.tsx

@@ -1,16 +1,9 @@
-import { styled } from '@mui/material';
 import { FC, useCallback, useContext, useMemo } from 'react';
 
-import ContainedButton from '../ContainedButton';
+import ActionGroup from '../ActionGroup';
 import { DialogContext } from './Dialog';
-import FlexBox from '../FlexBox';
 import Spinner from '../Spinner';
 
-const FlexEndBox = styled(FlexBox)({
-  justifyContent: 'flex-end',
-  width: '100%',
-});
-
 const handleAction: ExtendableEventHandler<ButtonClickEventHandler> = (
   { handlers: { base, origin } },
   ...args
@@ -19,7 +12,7 @@ const handleAction: ExtendableEventHandler<ButtonClickEventHandler> = (
   origin?.call(null, ...args);
 };
 
-const DialogActionArea: FC<DialogActionAreaProps> = (props) => {
+const DialogActionGroup: FC<DialogActionGroupProps> = (props) => {
   const {
     cancelProps,
     closeOnProceed,
@@ -69,44 +62,41 @@ const DialogActionArea: FC<DialogActionAreaProps> = (props) => {
     [closeOnProceed, dialogContext, onProceed, proceedProps?.onClick],
   );
 
-  const cancelButton = useMemo(
-    () => (
-      <ContainedButton {...cancelProps} onClick={cancelHandler}>
-        {cancelChildren}
-      </ContainedButton>
-    ),
-    [cancelChildren, cancelHandler, cancelProps],
-  );
-
-  const proceedButton = useMemo(
-    () => (
-      <ContainedButton
-        background={proceedColour}
-        {...proceedProps}
-        onClick={proceedHandler}
-      >
-        {proceedChildren}
-      </ContainedButton>
-    ),
-    [proceedChildren, proceedColour, proceedHandler, proceedProps],
-  );
-
   const actions = useMemo(
     () => (
-      <FlexEndBox row spacing=".5em">
+      <ActionGroup
-        {cancelButton}
+        actions={[
-        {proceedButton}
+          {
-      </FlexEndBox>
+            ...cancelProps,
+            children: cancelChildren,
+            onClick: cancelHandler,
+          },
+          {
+            background: proceedColour,
+            ...proceedProps,
+            children: proceedChildren,
+            onClick: proceedHandler,
+          },
+        ]}
+      />
     ),
-    [cancelButton, proceedButton],
+    [
+      cancelChildren,
+      cancelHandler,
+      cancelProps,
+      proceedChildren,
+      proceedColour,
+      proceedHandler,
+      proceedProps,
+    ],
   );
 
-  const actionArea = useMemo(
+  const result = useMemo(
     () => (loading ? <Spinner mt={0} /> : actions),
     [actions, loading],
   );
 
-  return actionArea;
+  return result;
 };
 
-export default DialogActionArea;
+export default DialogActionGroup;

striker-ui/components/Dialog/index.tsx

@@ -1,6 +1,11 @@
 import Dialog from './Dialog';
-import DialogActionArea from './DialogActionArea';
+import DialogActionGroup from './DialogActionGroup';
 import DialogHeader from './DialogHeader';
 import DialogScrollBox from './DialogScrollBox';
 
-export { Dialog, DialogActionArea, DialogHeader, DialogScrollBox };
+export {
+  Dialog,
+  DialogActionGroup as DialogActionArea,
+  DialogHeader,
+  DialogScrollBox,
+};

striker-ui/types/ActionGroup.d.ts

@@ -0,0 +1,5 @@
+type ActionGroupOptionalProps = {
+  actions?: ContainedButtonProps[];
+};
+
+type ActionGroupProps = ActionGroupOptionalProps;

striker-ui/types/Dialog.d.ts

@@ -21,14 +21,14 @@ type DialogHeaderOptionalProps = {
 
 type DialogHeaderProps = DialogHeaderOptionalProps;
 
-/** DialogActionArea */
+/** DialogActionGroup */
 
 type ButtonClickEventHandler = Exclude<
   ContainedButtonProps['onClick'],
   undefined
 >;
 
-type DialogActionAreaOptionalProps = {
+type DialogActionGroupOptionalProps = {
   cancelChildren?: ContainedButtonProps['children'];
   cancelProps?: Partial<ContainedButtonProps>;
   closeOnProceed?: boolean;
@@ -40,4 +40,4 @@ type DialogActionAreaOptionalProps = {
   proceedProps?: Partial<ContainedButtonProps>;
 };
 
-type DialogActionAreaProps = DialogActionAreaOptionalProps;
+type DialogActionGroupProps = DialogActionGroupOptionalProps;