@m4l/components 0.2.35 → 1.0.0

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/GridLayout/subcomponents/SizeProvider/index.0328ad0a.js

@@ -1,62 +0,0 @@
-import { useRef, useState, useMemo, useCallback, useEffect } from "react";
-import clsx from "clsx";
-import { throttle } from "lodash";
-import { useResizeObserver } from "@m4l/graphics";
-import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index.65470f01.js";
-import { jsx } from "react/jsx-runtime";
-function withSizeProvider(ComposedComponent) {
-  return (props) => {
-    const {
-      measureBeforeMount = true,
-      ...rest
-    } = props;
-    const refMounted = useRef(false);
-    const [currentState, setCurrentState] = useState({
-      mounted: false,
-      width: DEFAULT_CONTAINER_WIDTH,
-      height: DEFAULT_CONTAINER_HEIGHT
-    });
-    const onWindowResizeMemo = useMemo(() => () => {
-      const node = elementRef.current;
-      if (node instanceof HTMLElement && node.clientWidth) {
-        setCurrentState((prev) => ({
-          ...prev,
-          width: node.clientWidth,
-          height: node.offsetHeight
-        }));
-      }
-    }, []);
-    const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
-      leading: false,
-      trailing: true
-    });
-    const onResize = useCallback((_target) => {
-      throttleResize();
-    }, []);
-    const elementRef = useResizeObserver(onResize);
-    useEffect(() => {
-      setCurrentState((prev) => ({
-        ...prev,
-        mounted: true
-      }));
-      refMounted.current = true;
-      onWindowResizeMemo();
-    }, []);
-    if (measureBeforeMount && !currentState.mounted) {
-      return /* @__PURE__ */ jsx("div", {
-        className: clsx(props.className, COMPONENT_CLASS_NAME),
-        style: props.style,
-        ref: elementRef
-      });
-    }
-    return /* @__PURE__ */ jsx(ComposedComponent, {
-      innerRef: elementRef,
-      containerWidth: currentState.width,
-      containerHeight: currentState.height,
-      ...rest
-    });
-  };
-}
-export {
-  withSizeProvider as w
-};

package/components/Icon/index.ad330e78.js

@@ -1,184 +0,0 @@
-import { Marker } from "react-leaflet";
-import L__default from "leaflet";
-import { m as mapClasses, L as LABEL_BK_COLOR_DEFAULT, a as LABEL_COLOR_DEFAULT } from "../maps/components/Map/index.accb1f77.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.b0359a2b.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { unstable_composeClasses } from "@mui/base";
-import { useResponsiveDesktop } from "@m4l/graphics";
-const IconRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LIcon?.styleOverrides
-}));
-const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
-})(({
-  src,
-  rotationAngle
-}) => ({
-  maskPosition: "center",
-  maskRepeat: "no-repeat",
-  maskSize: "cover",
-  WebkitMaskRepeat: "no-repeat",
-  mask: `url(${src})`,
-  WebkitMask: `url(${src})`,
-  WebkitMaskSize: "cover",
-  ...rotationAngle && {
-    transform: `rotate(${rotationAngle}deg)`
-  }
-}));
-const componentName = "M4LIcon";
-generateUtilityClasses(componentName, [
-  "root",
-  "icon",
-  "variantSkeleton",
-  "sizeExtraSmall",
-  "sizeSmall",
-  "sizeMedium",
-  "sizeLarge",
-  "sizeExtraLarge",
-  "rotationAngle"
-]);
-function getIconClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    icon: ["icon", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge", ownerState.rotationAngle ? "rotationAngle" : ""],
-    variantSkeleton: ["variantSkeleton", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const ICON_PREFIX = "Icon";
-const getNameDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-function Icon(props) {
-  const {
-    src,
-    size = "small",
-    rotationAngle,
-    className
-  } = props;
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    size: isDesktop ? size : "medium",
-    rotationAngle
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(IconRoot, {
-    className: clsx(classes.root, className),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
-    } : {},
-    children: /* @__PURE__ */ jsx(DivIcon, {
-      className: classes.icon,
-      src,
-      rotationAngle,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("icon")
-      } : {}
-    })
-  });
-}
-const FeatureDivIconLabel = (props) => {
-  const {
-    label,
-    iconSrc,
-    iconScale: scale = 1,
-    iconRotate,
-    labelBkColor: bkColor = LABEL_BK_COLOR_DEFAULT,
-    labelColor: color = LABEL_COLOR_DEFAULT,
-    iconWidth = 24,
-    iconHeight = 24,
-    offsetLeftTop = [24, 0]
-  } = props;
-  let html = label ? `<div class="${mapClasses.featureLabel}" 
-                style="background-color:${bkColor}; color:${color};left:${offsetLeftTop[0]}px;top:${offsetLeftTop[1]}px;">${label}</div>` : "";
-  if (iconSrc) {
-    html = `<div class="${mapClasses.markerLayerIcon}" style="transform: rotate(${iconRotate}deg) scale(${scale}); transform-origin: center center;">
-                    <img src=${iconSrc}></img>
-                </div>` + html;
-  }
-  return L__default.divIcon({
-    className: clsx(mapClasses.markerLayerRoot, ""),
-    iconSize: [iconWidth, iconHeight],
-    html
-  });
-};
-const MarkerIconLabel = (props) => {
-  const {
-    position,
-    draggable = true,
-    iconSrc,
-    iconRotate,
-    iconScale: scale,
-    className,
-    label,
-    markerColor,
-    labelBkColor: bkColor,
-    labelColor: color,
-    iconWidth,
-    iconHeight,
-    offsetLeftTop,
-    ...properties
-  } = props;
-  const makerIcon = FeatureDivIconLabel({
-    iconSrc,
-    iconRotate,
-    iconScale: scale,
-    label,
-    iconWidth,
-    iconHeight,
-    labelBkColor: bkColor,
-    labelColor: color,
-    offsetLeftTop
-  });
-  return /* @__PURE__ */ jsx(Marker, {
-    position,
-    draggable,
-    riseOnHover: true,
-    icon: makerIcon,
-    ...properties
-  }, Math.random());
-};
-const ArrowIconRoot = styled("div")(() => ({
-  display: "flex",
-  alignSelf: "center",
-  lineHeight: 0
-}));
-function ArrowIcon(props) {
-  const {
-    openState
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    classes
-  } = useSideBar();
-  return /* @__PURE__ */ jsx(ArrowIconRoot, {
-    className: classes.arrowIconRoot,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId$1("arrowIconRoot")
-    } : {},
-    children: /* @__PURE__ */ jsx(Icon, {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
-      rotationAngle: openState ? 90 : 0
-    })
-  });
-}
-export {
-  ArrowIcon as A,
-  Icon as I,
-  MarkerIconLabel as M
-};