@m4l/components 0.2.35 → 0.2.36

package/components/GridLayout/subcomponents/Griditem/index.30016fc1.js

@@ -1,366 +0,0 @@
-import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { D as DraggableCore_1 } from "../../../../react-draggable.e4725f3a.js";
-import { R as Resizable } from "../../../../react-resizable.c07d63fb.js";
-import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.65470f01.js";
-import clsx from "clsx";
-import { deepEqual } from "fast-equals";
-import { jsx, Fragment } from "react/jsx-runtime";
-function GridItem(props) {
-  const {
-    layoutItemRender: ComponentItemRender,
-    type,
-    i,
-    x,
-    y,
-    w,
-    h,
-    cols = DEFAULT_COLS,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    containerWidth = DEFAULT_CONTAINER_WIDTH,
-    containerHeight = DEFAULT_CONTAINER_HEIGHT,
-    margin = DEFAULT_MARGIN,
-    containerPadding = DEFAULT_CONTAINER_PADDING,
-    transformScale = DEFAULT_TRANSFORM_SCALE,
-    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
-    isBounded,
-    maxRows = Infinity,
-    className = "",
-    draggableCancel = "",
-    draggableHandle = "",
-    minH = 1,
-    minW = 1,
-    maxH = Infinity,
-    maxW = Infinity,
-    isResizable = true,
-    isDraggable = true,
-    resizeHandles,
-    resizeHandle,
-    useCSSTransforms = true,
-    usePercentages,
-    style,
-    freeMove,
-    maximize = "none",
-    colapsed,
-    visible = true,
-    onDragStart,
-    onDrag,
-    onDragStop,
-    onFreeMoveClick
-  } = props;
-  const refProps = useRef({
-    cols,
-    x,
-    y,
-    w,
-    h: getH(h, colapsedHeight, rowHeight, colapsed),
-    minW,
-    maxW,
-    minH,
-    maxH,
-    containerWidth,
-    containerHeight,
-    margin,
-    containerPadding,
-    rowHeight,
-    maxRows,
-    colapsed
-  });
-  useEffect(() => {
-    refProps.current = {
-      cols,
-      x,
-      y,
-      w,
-      h: getH(h, colapsedHeight, rowHeight, colapsed),
-      minW,
-      maxW,
-      minH,
-      maxH,
-      containerWidth,
-      containerHeight,
-      margin,
-      containerPadding,
-      rowHeight,
-      maxRows,
-      colapsed
-    };
-  }, [cols, x, y, w, h, minW, maxW, minH, maxH, containerWidth, containerHeight, margin, containerPadding, rowHeight, maxRows, colapsed, colapsedHeight]);
-  const [currentState, setCurrentState] = useState({
-    resizing: void 0,
-    dragging: void 0
-  });
-  const refState = useRef({
-    resizing: void 0,
-    dragging: void 0
-  });
-  const elementRef = useRef(null);
-  const getPositionParams = useCallback((preferContainerWidth, preferContainerHeight) => {
-    return {
-      cols: refProps.current.cols,
-      containerPadding: refProps.current.containerPadding,
-      containerWidth: preferContainerWidth || refProps.current.containerWidth,
-      containerHeight: preferContainerHeight || refProps.current.containerHeight,
-      containerMargin: refProps.current.margin,
-      maxRows: refProps.current.maxRows,
-      rowHeight: refProps.current.rowHeight
-    };
-  }, []);
-  const createStyle = (pos2) => {
-    let newStyle;
-    if (useCSSTransforms) {
-      newStyle = setTransform(pos2);
-    } else {
-      newStyle = setTopLeft(pos2);
-      if (usePercentages) {
-        newStyle.left = perc(pos2.left / containerWidth);
-        newStyle.width = perc(pos2.width / containerWidth);
-      }
-    }
-    return newStyle;
-  };
-  const gridItemOnDragStart = useCallback((e, {
-    node
-  }) => {
-    if (!onDragStart)
-      return;
-    const newPosition = {
-      top: 0,
-      left: 0
-    };
-    const {
-      offsetParent
-    } = node;
-    if (!offsetParent)
-      return;
-    const parentRect = offsetParent.getBoundingClientRect();
-    const clientRect = node.getBoundingClientRect();
-    const cLeft = clientRect.left / transformScale;
-    const pLeft = parentRect.left / transformScale;
-    const cTop = clientRect.top / transformScale;
-    const pTop = parentRect.top / transformScale;
-    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
-    newPosition.top = cTop - pTop + offsetParent.scrollTop;
-    refState.current.dragging = newPosition;
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: newPosition
-    }));
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(getPositionParams(), newPosition.top, newPosition.left, refProps.current.w, refProps.current.h);
-    onDragStart(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-  }, []);
-  const gridItemOnDrag = useCallback((e, {
-    node,
-    deltaX,
-    deltaY
-  }) => {
-    if (!onDrag)
-      return;
-    if (!refState.current.dragging) {
-      return;
-    }
-    let top = refState.current.dragging.top + deltaY;
-    let left = refState.current.dragging.left + deltaX;
-    const positionParams = getPositionParams();
-    if (isBounded) {
-      const {
-        offsetParent
-      } = node;
-      if (offsetParent) {
-        const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(refProps.current.h, refProps.current.rowHeight, refProps.current.margin[1]);
-        top = clamp(top, 0, bottomBoundary);
-        const colWidth = calcGridColWidth(positionParams);
-        const rightBoundary = containerWidth - calcGridItemWHPx(refProps.current.w, colWidth, refProps.current.margin[0]);
-        left = clamp(left, 0, rightBoundary);
-      }
-    }
-    const newPosition = {
-      top,
-      left
-    };
-    refState.current.dragging = newPosition;
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: newPosition
-    }));
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(positionParams, top, left, refProps.current.w, refProps.current.h);
-    onDrag(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-  }, []);
-  const gridItemOnDragStop = useCallback((e, {
-    node
-  }) => {
-    if (!onDragStop)
-      return;
-    if (!refState.current.dragging) {
-      return;
-    }
-    const {
-      left,
-      top
-    } = refState.current.dragging;
-    const newPosition = {
-      top,
-      left
-    };
-    refState.current.dragging = void 0;
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: void 0
-    }));
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(getPositionParams(), top, left, refProps.current.w, refProps.current.h);
-    return onDragStop(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-  }, []);
-  const onResizeHandler = useCallback((e, {
-    node,
-    size
-  }, handlerName) => {
-    const handler = props[handlerName];
-    if (!handler) {
-      return;
-    }
-    if (refProps.current.colapsed) {
-      return;
-    }
-    let {
-      w: newW,
-      h: newH
-    } = calcWH(getPositionParams(), size.width, size.height, refProps.current.x, refProps.current.y);
-    const newMinW = Math.max(refProps.current.minW, 1);
-    const newMaxW = Math.min(refProps.current.maxW, refProps.current.cols - refProps.current.x);
-    newW = clamp(newW, newMinW, newMaxW);
-    newH = clamp(newH, refProps.current.minH, refProps.current.maxH);
-    const resizing = handlerName === "onResizeStop" ? void 0 : size;
-    setCurrentState((prev) => ({
-      ...prev,
-      resizing
-    }));
-    refState.current.resizing = resizing;
-    handler(i, newW, newH, {
-      e,
-      node,
-      size
-    });
-  }, []);
-  const localOnResizeStop = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResizeStop");
-  }, []);
-  const localOnResizeStart = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResizeStart");
-  }, []);
-  const localFreeMoveOnClick = useCallback(() => {
-    if (!onFreeMoveClick)
-      return;
-    onFreeMoveClick(i);
-  }, []);
-  const mixinResizable = useCallback((child, position, positionParams) => {
-    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0, maximize).width;
-    const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH, maximize);
-    const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH, maximize);
-    const minConstraints = [mins.width, mins.height];
-    const maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
-    return /* @__PURE__ */ jsx(
-      Resizable,
-      {
-        draggableOpts: {
-          disabled: !isResizable || maximize !== "none" || colapsed
-        },
-        className: isResizable ? void 0 : "react-resizable-hide",
-        width: position.width,
-        height: position.height,
-        minConstraints,
-        maxConstraints,
-        onResizeStop: localOnResizeStop,
-        onResizeStart: localOnResizeStart,
-        onResize: localOnResize,
-        transformScale,
-        resizeHandles,
-        handle: resizeHandle,
-        children: child
-      }
-    );
-  }, [cols, x, minW, minH, maxW, maxH, isResizable, transformScale, resizeHandles, resizeHandle, maximize, colapsed]);
-  const mixinDraggable = useCallback((child) => {
-    return /* @__PURE__ */ jsx(
-      DraggableCore_1,
-      {
-        disabled: !isDraggable || maximize !== "none",
-        onStart: gridItemOnDragStart,
-        onDrag: gridItemOnDrag,
-        onStop: gridItemOnDragStop,
-        handle: draggableHandle,
-        cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
-        scale: transformScale,
-        nodeRef: elementRef,
-        children: child
-      }
-    );
-  }, [isDraggable, draggableHandle, transformScale, draggableCancel, maximize]);
-  const localOnResize = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResize");
-  }, []);
-  const positionParms = getPositionParams(containerWidth, containerHeight);
-  const pos = calcGridItemPosition(positionParms, x, y, w, getH(h, colapsedHeight, rowHeight, colapsed), maximize, currentState);
-  const classNameFinal = clsx(gridLayoutClasses.gridItemRoot, className, {
-    [`${gridLayoutClasses.gridItemType}-${type}`]: true,
-    [gridLayoutClasses.static]: props.static,
-    [gridLayoutClasses.resizing]: Boolean(currentState.resizing),
-    [gridLayoutClasses.dragging]: Boolean(currentState.dragging),
-    [gridLayoutClasses.maximizeMe]: maximize === "maximize_me",
-    [gridLayoutClasses.maximizeOther]: maximize === "maximize_other",
-    [gridLayoutClasses.colapsed]: colapsed,
-    [`${gridLayoutClasses.colapsed}-${colapsedHeight}`]: colapsed,
-    [gridLayoutClasses.gridItemFreeMove]: freeMove,
-    [gridLayoutClasses.resizeHide]: colapsed,
-    [gridLayoutClasses.invisible]: !visible,
-    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
-    "react-draggable": isDraggable
-  });
-  const styleFinal = {
-    ...style,
-    ...createStyle(pos)
-  };
-  const memoLayouItemRender = useMemo(() => {
-    return /* @__PURE__ */ jsx(ComponentItemRender, {
-      type,
-      i
-    });
-  }, [type, i]);
-  const gridItemRoot = /* @__PURE__ */ jsx("div", {
-    className: classNameFinal,
-    ref: elementRef,
-    style: styleFinal,
-    role: "none",
-    onClick: localFreeMoveOnClick,
-    children: memoLayouItemRender
-  });
-  const gridItem = mixinDraggable(mixinResizable(gridItemRoot, pos, getPositionParams()));
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: gridItem
-  });
-}
-const MemonizedGridItem = React__default.memo(GridItem, (prevProps, nextProps) => {
-  return deepEqual(prevProps, nextProps);
-});
-export {
-  MemonizedGridItem as M
-};

package/components/LanguagePopover/index.93c48ec5.js

@@ -1,196 +0,0 @@
-import { useState, useEffect } from "react";
-import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.b799c514.js";
-import { useLocales } from "@m4l/graphics";
-import { I as ImageButton } from "../mui_extended/Button/index.c3084916.js";
-import { useEnvironment, useNetwork } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
-import { P as Popover } from "../mui_extended/Popover/index.d85de73b.js";
-const LanguagePopoverRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LanguagePopover?.styleOverrides
-}));
-const LabelItem = styled("div")(({
-  theme
-}) => ({
-  marginLeft: theme.spacing(1)
-}));
-const ContainerProgress = styled("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(0.75, 0),
-  margin: theme.spacing(0, 1.25)
-}));
-const ContainerMenuItems = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column"
-}));
-const ContainerImage = styled("div")(() => ({
-  display: "flex",
-  gap: "4px",
-  width: "16px",
-  height: "16px"
-}));
-const componentName = "M4LanguagePopover";
-generateUtilityClasses(componentName, [
-  "root",
-  "containerItems",
-  "containerProgress",
-  "labelItem",
-  "imageButton"
-]);
-function getM4LanguagePopoverClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    containerItems: ["containerItems"],
-    containerProgress: ["containerProgress"],
-    labelItem: ["labelItem"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";
-const getNameDataTestId = (KEY) => {
-  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
-};
-function LanguagePopover(props) {
-  const {
-    testingProps
-  } = props;
-  const {
-    currentLocale,
-    onChangeLocale
-  } = useLocales();
-  const {
-    domain_token
-  } = useEnvironment();
-  const {
-    networkOperation
-  } = useNetwork();
-  const [open, setOpen] = useState(testingProps?.open || null);
-  const [loading, setLoading] = useState(testingProps?.loading || false);
-  const [allLocales, setAllLocales] = useState(testingProps?.allLocales || []);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const handleClose = () => {
-    setOpen(null);
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (open === null || loading || allLocales.length > 0) {
-      return;
-    }
-    setLoading(true);
-    networkOperation({
-      method: "GET",
-      endPoint: `na/locales`,
-      parms: {
-        domain_token
-      }
-    }).then((response) => {
-      if (mounted) {
-        !testingProps && setAllLocales(response.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [open]);
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsxs(LanguagePopoverRoot, {
-    className: classes.root,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
-    } : {},
-    children: [/* @__PURE__ */ jsx(ImageButton, {
-      className: classes.imageButton,
-      onClick: handleOpen,
-      sx: {
-        width: 28,
-        height: 28,
-        ...open && {
-          bgcolor: "action.selected"
-        }
-      },
-      src: currentLocale?.url_icon || "",
-      alt: currentLocale?.name,
-      width: "24px",
-      height: "24px",
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("imageButton")
-      } : {}
-    }), /* @__PURE__ */ jsx(Popover, {
-      arrowType: "top-right",
-      open: Boolean(open),
-      anchorEl: open,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      onClose: handleClose,
-      sx: {
-        mt: 1.5,
-        ml: 0.75,
-        width: 180,
-        rowGap: "100px",
-        "& .MuiMenuItem-root": {
-          px: 1,
-          typography: "body2",
-          borderRadius: 0.75
-        }
-      },
-      children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
-        className: classes.containerItems,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId("containerItems")
-        } : {},
-        children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
-          className: classes.containerProgress,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId("containerProgress")
-          } : {},
-          children: /* @__PURE__ */ jsx(CircularProgress, {
-            size: "20px"
-          })
-        }), allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, {
-          spacing: 0.75,
-          children: allLocales.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
-            selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
-            onClick: () => {
-              onChangeLocale(option);
-              handleClose();
-            },
-            children: [/* @__PURE__ */ jsx(ContainerImage, {
-              children: /* @__PURE__ */ jsx(Image, {
-                alt: option.name,
-                src: option.url_icon,
-                ratio: "1:1"
-              })
-            }), /* @__PURE__ */ jsx(LabelItem, {
-              className: classes.labelItem,
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId("labelItem")
-              } : {},
-              children: option.name
-            })]
-          }, option.lang || option.script || option.region))
-        })]
-      })
-    })]
-  });
-}
-export {
-  LanguagePopover as L
-};

package/components/ModalDialog/index.78c9650a.js

@@ -1,92 +0,0 @@
-import { useTheme, Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.e4725f3a.js";
-import { u as useModal } from "../../hooks/useModal/index.f73d7e42.js";
-import { R as ResizeableWindow } from "../Resizeable/index.cb5aad75.js";
-import { useIsMobile } from "@m4l/graphics";
-import { m as modalUtilityClasses } from "../modal/index.61389369.js";
-import { useState, useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.fa7ab18c.js";
-const DragabblePaperComponent = (props) => {
-  return /* @__PURE__ */ jsx(cjs.exports, {
-    handle: ".m4l_draggable_handle",
-    cancel: '[class*="MuiDialogContent-root"]',
-    children: /* @__PURE__ */ jsx(Paper, {
-      sx: {
-        maxHeight: "unset",
-        maxWidth: "unset"
-      },
-      ...props
-    })
-  });
-};
-function PaperComponent(props) {
-  return /* @__PURE__ */ jsx(Paper, {
-    sx: {
-      maxHeight: "unset",
-      maxWidth: "unset",
-      height: "100%"
-    },
-    ...props
-  });
-}
-const ModalDialog = () => {
-  const {
-    open,
-    initialWidth = 600,
-    initialHeigth = 400,
-    maxWidth,
-    maxHeigth,
-    window,
-    fullScreen,
-    variant
-  } = useModal();
-  const isMobile = useIsMobile();
-  const [fullScreenState, setFullScreenState] = useState(fullScreen);
-  useEffect(() => {
-    setFullScreenState(isMobile);
-  }, [isMobile]);
-  const theme = useTheme();
-  const classes = modalUtilityClasses({
-    variant
-  });
-  const contentComnponent = /* @__PURE__ */ jsx("div", {
-    className: classes.containerWindow,
-    children: typeof window === "function" ? window() : window
-  });
-  console.log("fullScreen test", fullScreen);
-  return /* @__PURE__ */ jsx(Dialog, {
-    open,
-    className: classes.root,
-    sx: {
-      ...theme.components?.M4LModalDialog?.styleOverrides
-    },
-    "aria-labelledby": "child-modal-title",
-    "aria-describedby": "child-modal-description",
-    PaperComponent: !isMobile ? DragabblePaperComponent : PaperComponent,
-    fullScreen: fullScreenState,
-    disableEnforceFocus: true,
-    children: !isMobile ? /* @__PURE__ */ jsx(ResizeableWindow, {
-      width: initialWidth,
-      height: initialHeigth,
-      maxWidth,
-      maxHeigth,
-      handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", {
-        ref,
-        className: `custom-handle custom-handle-${resizeHandle}`
-      }, resizeHandle),
-      children: contentComnponent
-    }) : contentComnponent
-  });
-};
-function getModalDialogComponentsDictionary() {
-  return ["modal_dialog"].concat(getCommonActionsDictionary());
-}
-const defaultModalDialogDictionary = {
-  modal_dialog: {}
-};
-export {
-  ModalDialog as M,
-  defaultModalDialogDictionary as d,
-  getModalDialogComponentsDictionary as g
-};