@pautena/react-design-system 0.7.2 → 0.7.4

package/src/components/value-displays/value-text/value-text.tsx

@@ -1,14 +1,14 @@
-import { IconButton, TextField, Typography } from "@mui/material";
-import React from "react";
+import { Typography, TextField } from "@mui/material";
+import React, { useEffect, useRef } from "react";
 import {
   BaseValueProps,
   DefaultPlaceholder,
   EditableValueProps,
   useEditableValueDisplay,
+  ValueEditButton,
   ValueEditButtons,
 } from "../value-base";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import EditIcon from "@mui/icons-material/Edit";
 
 export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 
@@ -23,30 +23,43 @@ export const ValueText = ({
   dense,
   onEdit = () => null,
 }: ValueTextProps) => {
+  const editInputRef = useRef<HTMLInputElement>(null);
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(valueProp?.toString(), onEdit);
   const id = getValueContentLabelId(label);
   const value = valueProp?.toString() || placeholder;
 
+  const editKeyPressListener = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      onEdit((e.target as any).value);
+    }
+  };
+
+  useEffect(() => {
+    editInputRef.current?.addEventListener("keypress", editKeyPressListener);
+    return () => editInputRef.current?.removeEventListener("keypress", editKeyPressListener);
+  }, [editInputRef.current]);
+
   return (
-    <ValueContent label={label} tooltip={value} dense={dense}>
+    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <TextField
+          inputRef={editInputRef}
           value={editValue}
+          label={label}
           size="small"
           onChange={(e) => setEditValue(e.target.value)}
           InputProps={{
-            endAdornment: <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />,
+            endAdornment: (
+              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
+            ),
           }}
+          sx={{ marginY: !dense ? 1 : 0 }}
         />
       ) : (
         <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
           {value}
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Typography>
       )}
     </ValueContent>

package/src/generators/model-form/model-form.test.tsx

@@ -115,5 +115,5 @@ describe("ModelForm", () => {
       codes: ["foo", "bar"],
       identifiers: ["1", "2", "3"],
     });
-  });
+  }, 20000);
 });

package/src/generators/model-router/model-router.test.tsx

@@ -711,7 +711,7 @@ describe("ModelRouter", () => {
       const newInstance = await actions.fullfillModelForm({ model, submit: false });
 
       expectModelFieldInputValue(model.fields, newInstance);
-    });
+    }, 20000);
 
     it("would make a request when the form is submitted", async () => {
       const { onSubmitNewItem, model } = await renderComponent({ screen: "add" });
@@ -721,7 +721,7 @@ describe("ModelRouter", () => {
       expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, {
         ...newInstance,
       });
-    });
+    }, 20000);
 
     it("would show a loading indicator when the request is in progress", async () => {
       const { model } = await renderComponent({ screen: "add" });
@@ -729,7 +729,7 @@ describe("ModelRouter", () => {
       await actions.fullfillModelForm({ model, submit: true });
 
       expectProgressIndicator();
-    });
+    }, 20000);
 
     it("would show a success message if the request finish with a success", async () => {
       renderAddScreen();

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
-import { withMemoryRouter } from "~/storybook";
+import { withLocalizationProvider, withMemoryRouter } from "~/storybook";
 import { withFullHeight } from "../../storybook";
 import { Content, Header, HeaderProps, HeaderTab, SkeletonGrid, TabPanel } from "../../components";
 import { Box, Typography } from "@mui/material";
@@ -64,7 +64,7 @@ const DummyHeaderLayout = ({ headerProps, contentChildren, ...rest }: HeaderLayo
 export default {
   title: "Layouts/HeaderLayout",
   component: DummyHeaderLayout,
-  decorators: [withMemoryRouter(), withFullHeight],
+  decorators: [withMemoryRouter(), withFullHeight, withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },

package/src/layouts/header-layout/header-layout.tsx

@@ -1,12 +1,6 @@
 import { Box, LinearProgress } from "@mui/material";
 import React from "react";
-import {
-  ContentElement,
-  HeaderElement,
-  Placeholder,
-  PlaceholderIcon,
-  PlaceholderIconArgs,
-} from "../../components";
+import { ContentElement, HeaderElement, Placeholder, PlaceholderIcon } from "../../components";
 import { LoadingArea } from "../../components/feedback/loading-area";
 import { TabProvider } from "../../providers";
 import ReportProblemIcon from "@mui/icons-material/ReportProblem";