@m4l/components 0.2.35 → 0.2.36

package/components/mui_extended/MenuActions/{index.90f53670.js → index.d92ed0d6.js}

@@ -1,17 +1,15 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default, { useState, useEffect, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { styled, IconButton, generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
-import { P as Popover } from "../Popover/index.d85de73b.js";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
+import { P as Popover } from "../Popover/index.4e7340b4.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
 import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { B as Badge } from "../Badge/index.09f5aee5.js";
-import { I as IconButton$1 } from "../IconButton/index.f8a3021b.js";
+import { B as Badge } from "../Badge/index.2a3aef2c.js";
+import { I as IconButton$1 } from "../IconButton/index.b0ee4965.js";
 styled(IconButton)(() => ({}));
-const LabelMemuItem = styled("div")(({
-  theme
-}) => ({
+const LabelMemuItem = styled("div")(({ theme }) => ({
   height: "22px",
   overflow: "hidden",
   wordBreak: "break-all",
@@ -62,13 +60,8 @@ function MenuActions(props) {
     externalClose,
     ...other
   } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
   const [open, setOpen] = useState(null);
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
@@ -108,68 +101,75 @@ function MenuActions(props) {
     }
     return ret;
   }, [menuActions, objItem]);
-  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, {
-    children: withBadge ? /* @__PURE__ */ jsx(Badge, {
-      badgeContent,
-      children: /* @__PURE__ */ jsx(IconButton$1, {
-        src: urlFinalIcon,
-        onClick: handleOpen,
-        tooltip: toolTip,
-        className: iconButtonClassName
-      })
-    }) : /* @__PURE__ */ jsx(IconButton$1, {
+  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, { children: withBadge ? /* @__PURE__ */ jsx(Badge, { badgeContent, children: /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
       src: urlFinalIcon,
       onClick: handleOpen,
       tooltip: toolTip,
       className: iconButtonClassName
-    })
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [IconButtonElement, /* @__PURE__ */ jsxs(Popover, {
-      id: "Popover",
-      open: Boolean(open),
-      anchorEl: open,
-      onClose: handleClose,
-      arrowType,
-      className: clsx(classes.root, className),
-      sx: {
-        marginTop,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        width,
-        maxWidth: 300,
-        "& .MuiMenuItem-root": {
-          px: 1,
-          typography: "body2",
-          borderRadius: 0.75
-        },
-        ...theme.components?.M4LMenuActions?.styleOverrides,
-        ...menuActionSx
-      },
-      ...other,
-      children: [finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
-        dense: true,
-        onClick: (e) => {
-          handleClick(e, menuAction);
-        },
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      src: urlFinalIcon,
+      onClick: handleOpen,
+      tooltip: toolTip,
+      className: iconButtonClassName
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    IconButtonElement,
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        id: "Popover",
+        open: Boolean(open),
+        anchorEl: open,
+        onClose: handleClose,
+        arrowType,
+        className: clsx(classes.root, className),
         sx: {
-          color: menuAction.color ?? "text.main"
+          marginTop,
+          marginBottom,
+          marginLeft,
+          marginRight,
+          width,
+          maxWidth: 300,
+          "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 },
+          ...theme.components?.M4LMenuActions?.styleOverrides,
+          ...menuActionSx
         },
-        disabled: menuAction.disabled,
-        className: clsx(menuAction?.className, menuAction.variant === "delete" && classes.itemDelete),
-        children: [menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, {
-          src: menuAction.urlIcon
-        }) : null, /* @__PURE__ */ jsx(LabelMemuItem, {
-          children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId)
-        })]
-      }, `menu_action_${index}`)), endListElement ? endListElement : null]
-    })]
-  });
+        ...other,
+        children: [
+          finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              dense: true,
+              onClick: (e) => {
+                handleClick(e, menuAction);
+              },
+              sx: { color: menuAction.color ?? "text.main" },
+              disabled: menuAction.disabled,
+              className: clsx(
+                menuAction?.className,
+                menuAction.variant === "delete" && classes.itemDelete
+              ),
+              children: [
+                menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, { src: menuAction.urlIcon }) : null,
+                /* @__PURE__ */ jsx(LabelMemuItem, { children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId) })
+              ]
+            },
+            `menu_action_${index}`
+          )),
+          endListElement ? endListElement : null
+        ]
+      }
+    )
+  ] });
 }
 const MemonizedMenuActions = React__default.memo(MenuActions);
 export {
-  LabelMemuItem as L,
   MenuActions as M,
   MemonizedMenuActions as a
 };

package/components/mui_extended/MenuActions/styles.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "error" | "default" | "inherit" | "warning" | "info" | "success" | "primary" | "secondary" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "children" | "tabIndex" | "color" | "size" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/Pager/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { pagerUtilityClasses } from ".";
+import { pagerUtilityClasses } from '.';
 export interface PagerClassesType {
     root: string;
     labelRowsPerPageContainer: string;

package/components/mui_extended/Pager/{index.ea2a4f3e.js → index.1ba2d52b.js}

@@ -1,13 +1,13 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.f8a3021b.js";
+import { I as IconButton } from "../IconButton/index.b0ee4965.js";
 import { useEnvironment } from "@m4l/core";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { T as Typography } from "../Typography/index.379dd374.js";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
+import { T as Typography } from "../Typography/index.a1e774a2.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
 const PagerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPager?.styleOverrides
 }));
@@ -60,17 +60,8 @@ const pagerUtilityClasses = () => {
   };
 };
 function PagerActions(props) {
-  const {
-    count,
-    page,
-    rowsPerPage,
-    onPageChange,
-    classes
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
+  const { count, page, rowsPerPage, onPageChange, classes } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
   };
@@ -83,38 +74,52 @@ function PagerActions(props) {
   const handleLastPageButtonClick = (event) => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.pagerActions,
-    children: [/* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.first",
-      onClick: handleFirstPageButtonClick,
-      disabled: page === 0,
-      "aria-label": "first page",
-      className: classes.actionIconFirstPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.previous",
-      onClick: handleBackButtonClick,
-      disabled: page === 0,
-      "aria-label": "first page",
-      className: classes.actionIconPrevious,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.next",
-      onClick: handleNextButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-      "aria-label": "next page",
-      className: classes.actionIconNextPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.last",
-      onClick: handleLastPageButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-      "aria-label": "last page",
-      className: classes.actionIconLastPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { className: classes.pagerActions, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.first",
+        onClick: handleFirstPageButtonClick,
+        disabled: page === 0,
+        "aria-label": "first page",
+        className: classes.actionIconFirstPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.previous",
+        onClick: handleBackButtonClick,
+        disabled: page === 0,
+        "aria-label": "first page",
+        className: classes.actionIconPrevious,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.next",
+        onClick: handleNextButtonClick,
+        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        "aria-label": "next page",
+        className: classes.actionIconNextPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.last",
+        onClick: handleLastPageButtonClick,
+        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        "aria-label": "last page",
+        className: classes.actionIconLastPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
+      }
+    )
+  ] });
 }
 const CustomTablePagination = (props) => {
   const {
@@ -129,10 +134,7 @@ const CustomTablePagination = (props) => {
     SelectProps,
     labelDisplayedRows = defaultLabelDisplayedRows
   } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const isUpSm = useResponsiveContainerStore((state) => state.isUpSm, shallow);
   const theme = useTheme();
   function defaultLabelDisplayedRows({
@@ -148,57 +150,61 @@ const CustomTablePagination = (props) => {
     }
     return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
   };
-  const CustomIconComponent = (props2) => /* @__PURE__ */ jsx(Icon, {
-    src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/chevronDown.svg`,
-    ...props2
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", {
-      className: classes.labelRowsPerPageContainer,
-      children: [isUpSm ? /* @__PURE__ */ jsx(Typography, {
-        variant: "body",
-        children: labelRowsPerPage
-      }) : null, /* @__PURE__ */ jsx(Select, {
-        variant: "standard",
-        ...!SelectProps?.variant && {
-          input: /* @__PURE__ */ jsx(InputBase, {})
-        },
-        value: rowsPerPage,
-        onChange: (e) => {
-          onRowsPerPageChange(e);
-        },
-        className: classes.select,
-        MenuProps: {
-          className: classes.selectMenuPopover,
-          sx: {
-            ...theme.components?.M4LPagerMenuPopover?.styleOverrides
-          }
-        },
-        IconComponent: CustomIconComponent,
-        ...SelectProps,
-        children: rowsPerPageOptions.map((item, idx) => /* @__PURE__ */ jsx(MenuItem, {
-          className: classes.selectMenuItem,
-          value: item,
-          children: item
-        }, `${classes.selectMenuItem}-${idx}`))
-      })]
-    }) : null, /* @__PURE__ */ jsx(Typography, {
-      variant: "body",
-      className: classes.labelDisplayRows,
-      children: labelDisplayedRows({
-        from: count === 0 ? 0 : page * rowsPerPage + 1,
-        to: getLabelDisplayedRowsTo(),
-        count: count === -1 ? -1 : count,
-        page
-      })
-    }), /* @__PURE__ */ jsx(PagerActions, {
-      count,
-      page,
-      rowsPerPage,
-      onPageChange,
-      classes
-    })]
-  });
+  const CustomIconComponent = (props2) => /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/chevronDown.svg`,
+      ...props2
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", { className: classes.labelRowsPerPageContainer, children: [
+      isUpSm ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: labelRowsPerPage }) : null,
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          variant: "standard",
+          ...!SelectProps?.variant && { input: /* @__PURE__ */ jsx(InputBase, {}) },
+          value: rowsPerPage,
+          onChange: (e) => {
+            onRowsPerPageChange(e);
+          },
+          className: classes.select,
+          MenuProps: {
+            className: classes.selectMenuPopover,
+            sx: { ...theme.components?.M4LPagerMenuPopover?.styleOverrides }
+          },
+          IconComponent: CustomIconComponent,
+          ...SelectProps,
+          children: rowsPerPageOptions.map((item, idx) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              className: classes.selectMenuItem,
+              value: item,
+              children: item
+            },
+            `${classes.selectMenuItem}-${idx}`
+          ))
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes.labelDisplayRows, children: labelDisplayedRows({
+      from: count === 0 ? 0 : page * rowsPerPage + 1,
+      to: getLabelDisplayedRowsTo(),
+      count: count === -1 ? -1 : count,
+      page
+    }) }),
+    /* @__PURE__ */ jsx(
+      PagerActions,
+      {
+        count,
+        page,
+        rowsPerPage,
+        onPageChange,
+        classes
+      }
+    )
+  ] });
 };
 function Pager(props) {
   const {
@@ -226,9 +232,9 @@ function Pager(props) {
     onPageChange(newPage);
   };
   const classes = pagerUtilityClasses();
-  return /* @__PURE__ */ jsx(PagerRoot, {
-    className: classes.root,
-    children: /* @__PURE__ */ jsx(CustomTablePagination, {
+  return /* @__PURE__ */ jsx(PagerRoot, { className: classes.root, children: /* @__PURE__ */ jsx(
+    CustomTablePagination,
+    {
       rowsPerPageOptions,
       count: totalRecords,
       rowsPerPage,
@@ -237,13 +243,9 @@ function Pager(props) {
       page: currentPage,
       onPageChange: handleChangePage,
       onRowsPerPageChange: handleChangeRowsPerPage,
-      labelDisplayedRows: !isXs ? ({
-        from,
-        to,
-        count
-      }) => `${from}-${to} ${labelOf} ${count}` : () => ``
-    })
-  });
+      labelDisplayedRows: !isXs ? ({ from, to, count }) => `${from}-${to} ${labelOf} ${count}` : () => ``
+    }
+  ) });
 }
 function getPagerComponentsDictionary() {
   return ["pager"];

package/components/mui_extended/Pager/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PagerRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/Pager/subcomponents/CustomTablePagination/types.d.ts

@@ -1,5 +1,5 @@
-import { SelectChangeEvent, TablePaginationProps } from "@mui/material";
-import { Classes } from "../../classes/types";
+import { SelectChangeEvent, TablePaginationProps } from '@mui/material';
+import { Classes } from '../../classes/types';
 export declare type CustomTablePaginationProps = {
     rowsPerPageOptions: number[];
     onPageChange: (_event: unknown, newPage: number) => void;

package/components/mui_extended/Pager/subcomponents/PagerActions/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Classes } from "../../classes/types";
+import { Classes } from '../../classes/types';
 export interface PagerActionsProps {
     count: number;
     page: number;

package/components/mui_extended/Popover/index.4e7340b4.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, Popover as Popover$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+const PopoverRoot = styled(Popover$1)(({ theme }) => ({
+  ...theme.components?.M4LPopover?.styleOverrides
+}));
+generateUtilityClasses("M4LPopover", [
+  "root",
+  "arrowStyle",
+  "noArrow",
+  "topLeft",
+  "topCenter",
+  "topRight",
+  "bottomLeft",
+  "bottomCenter",
+  "bottomRight",
+  "leftTop",
+  "leftCenter",
+  "leftBottom",
+  "rightTop",
+  "rightCenter",
+  "rightBottom"
+]);
+function getPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LPopover", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    arrowStyle: [
+      "arrowStyle",
+      ownerState.arrowType === "top-left" && "topLeft",
+      ownerState.arrowType === "top-center" && "topCenter",
+      ownerState.arrowType === "top-right" && "topRight",
+      ownerState.arrowType === "bottom-left" && "bottomLeft",
+      ownerState.arrowType === "bottom-center" && "bottomCenter",
+      ownerState.arrowType === "bottom-right" && "bottomRight",
+      ownerState.arrowType === "left-top" && "leftTop",
+      ownerState.arrowType === "left-center" && "leftCenter",
+      ownerState.arrowType === "left-bottom" && "leftBottom",
+      ownerState.arrowType === "right-top" && "rightTop",
+      ownerState.arrowType === "right-center" && "rightCenter",
+      ownerState.arrowType === "right-bottom" && "rightBottom"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ArrowStyle = styled("span")(({ arrowType, theme }) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.palette.grey[50012]}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.palette.background.default
+    },
+    ...arrowType === "top-left" && { ...topStyle, left: 20 },
+    ...arrowType === "top-center" && { ...topStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "top-right" && { ...topStyle, right: 20 },
+    ...arrowType === "bottom-left" && { ...bottomStyle, left: 20 },
+    ...arrowType === "bottom-center" && { ...bottomStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "bottom-right" && { ...bottomStyle, right: 20 },
+    ...arrowType === "left-top" && { ...leftStyle, top: 20 },
+    ...arrowType === "left-center" && { ...leftStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "left-bottom" && { ...leftStyle, bottom: 20 },
+    ...arrowType === "right-top" && { ...rightStyle, top: 20 },
+    ...arrowType === "right-center" && { ...rightStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "right-bottom" && { ...rightStyle, bottom: 20 }
+  };
+});
+const Popover = (props) => {
+  const { children, arrowType = "top-right", className, ...other } = props;
+  const ownerState = {
+    arrowType
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(
+    PopoverRoot,
+    {
+      className: clsx(classes.root, className),
+      "data-testid": "PopoverRoot",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      transitionDuration: 0,
+      PaperProps: {
+        sx: {
+          p: 1,
+          overflow: "inherit"
+        }
+      },
+      ...other,
+      children: [
+        /* @__PURE__ */ jsx(
+          ArrowStyle,
+          {
+            className: classes.arrowStyle,
+            "data-testid": "ArrowStyle",
+            arrowType
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  Popover as P
+};

package/components/mui_extended/Popover/styles.d.ts

@@ -0,0 +1 @@
+export declare const PopoverRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/mui_extended/Popover/subcomponts/ArrowIcon/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ArrowStyleProps } from '../../types';
+export declare const ArrowStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ArrowStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;