@m4l/components 7.0.0 → 7.1.2

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { InputBase } from "@mui/material";
+import { useDrag, useDrop } from "react-dnd";
+import { HeaderRenderer } from "react-data-grid";
+import { a as filterHeight } from "./SelectColumn.js";
+import { u as useFocusRef } from "../hooks/useFocusRef.js";
+import { u as useFilters } from "../../../hooks/useFilters.js";
+function DraggableHeaderRenderer(props) {
+  const { onColumnsReorder, column, isCellSelected, ...others } = props;
+  const { ref, tabIndex } = useFocusRef(isCellSelected);
+  const { getLabel } = useModuleDictionary();
+  const { activeFilters, filters, onChangeFilter } = useFilters();
+  const [filter, setFilter] = useState(filters?.get(column.key) || "");
+  const [{ isDragging }, drag] = useDrag({
+    type: "COLUMN_DRAG",
+    item: { key: column.key },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+  const [{ isOver }, drop] = useDrop({
+    accept: "COLUMN_DRAG",
+    drop({ key }) {
+      onColumnsReorder(key, column.key);
+    },
+    /**
+     * collect, es una función que recibe un objeto monitor y devuelve un objeto que contiene información sobre el estado del arrastre.
+     */
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  const handleChange = (e) => {
+    if (activeFilters) {
+      if (onChangeFilter) {
+        onChangeFilter(column, e.target.value);
+      }
+    }
+    setFilter(e.target.value);
+  };
+  useEffect(() => {
+    if (!activeFilters) {
+      setFilter("");
+    }
+  }, [activeFilters]);
+  const newColumn = { ...column };
+  if (newColumn.withinHeaderRenderer) {
+    newColumn.name = newColumn.withinHeaderRenderer(props);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (newRef) => {
+        drag(newRef);
+        drop(newRef);
+      },
+      style: {
+        opacity: isDragging ? 0.5 : 1,
+        backgroundColor: isOver ? "#ececec" : void 0,
+        cursor: "move",
+        display: "flex",
+        flexDirection: "column",
+        lineHeight: "1",
+        // activeFilters && column.withFilter ? '30px' : '60px',
+        height: "100%",
+        justifyContent: "center",
+        textAlign: "center"
+        // alignItems: 'center',
+        // justifyContent: 'space-evenly'
+      },
+      children: [
+        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
+        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "filter_cell_div",
+            style: {
+              borderTop: "1px solid var(--rdg-border-color)",
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              // flexGrow: 1,
+              height: `${filterHeight}px`
+              // paddingLeft: '2px', paddingRight: '2px'
+            },
+            children: /* @__PURE__ */ jsx(
+              InputBase,
+              {
+                inputRef: ref,
+                placeholder: getLabel("data_grid.filter_holder"),
+                style: {
+                  width: "100%",
+                  paddingBottom: "2px",
+                  border: "1px solid var(--rdg-border-color)"
+                },
+                tabIndex,
+                type: "text",
+                onChange: handleChange,
+                value: filter
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DraggableHeaderRenderer as D
+};

package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { useRowSelection, SelectCellFormatter } from "react-data-grid";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+const filterColumnClassName = "filter-cell";
+const filterHeight = 35;
+function SelectGroupFormatter(props) {
+  const [isRowSelected, onRowSelectionChange] = useRowSelection();
+  const onChange = (checked) => {
+    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
+  };
+  const cellFormater = SelectCellFormatter({
+    value: isRowSelected,
+    isCellSelected: props.isCellSelected,
+    onChange,
+    "aria-label": "Select Group"
+  });
+  return cellFormater;
+}
+function SelectFormatter(props) {
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
+  const onChange = (checked, _isShiftClick) => {
+    const newCheckedRows = new Set(checkedRows);
+    if (checked) {
+      newCheckedRows.add(rowKeyGetter(props.row));
+    } else {
+      newCheckedRows.delete(rowKeyGetter(props.row));
+    }
+    onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
+  };
+  return /* @__PURE__ */ jsx(
+    SelectCellFormatter,
+    {
+      value: checkedRows?.has(rowKeyGetter(props.row)) || false,
+      isCellSelected: props.isCellSelected,
+      onChange,
+      "aria-label": "Select"
+    }
+  );
+}
+const SelectColumnHeaderRenderer = (props) => {
+  const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
+  const onAllRowsCheckedChange = (checked) => {
+    if (!onCheckedRowsChange) {
+      return;
+    }
+    if (checked) {
+      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
+    } else {
+      onCheckedRowsChange(/* @__PURE__ */ new Set());
+    }
+  };
+  const allRowsChecked = rows.length === checkedRows?.size;
+  return SelectCellFormatter({
+    "aria-label": "Select All",
+    isCellSelected: props.isCellSelected,
+    value: allRowsChecked,
+    onChange: onAllRowsCheckedChange
+  });
+};
+const SelectColumn = {
+  key: DATAGRID_SELECT_COLUMN_KEY,
+  name: "",
+  width: 32,
+  minWidth: 32,
+  isDraggable: false,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "boolean",
+  headerRenderer: SelectColumnHeaderRenderer,
+  formatter: SelectFormatter,
+  groupFormatter: SelectGroupFormatter
+};
+export {
+  SelectColumn as S,
+  filterHeight as a,
+  filterColumnClassName as f
+};

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare function SkeletonFormatter(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+import { W as WrapperSkeleton } from "./styles.js";
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+function SkeletonFormatter() {
+  const { classes } = useDataGrid();
+  return /* @__PURE__ */ jsx(WrapperSkeleton, { className: classes.skeletonFormatter, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
+}
+export {
+  SkeletonFormatter as S
+};

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.d.ts

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

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.js

@@ -0,0 +1,10 @@
+import { styled } from "@mui/material";
+const WrapperSkeleton = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  alignItems: "center"
+}));
+export {
+  WrapperSkeleton as W
+};

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/types.d.ts

@@ -0,0 +1,2 @@
+export interface SkeletonFormatterProps {
+}

package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts

@@ -1,6 +1,11 @@
-/// <reference types="react" />
 import { EditorProps } from 'react-data-grid';
-export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Input: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+/**
+ * TODO: Documentar
+ */
 export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TODO: Documentar
+ */
 export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 export default TextEditor;

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material";
+const Input = styled("input")(() => ({
+  appearance: "none",
+  boxSizing: "border-box",
+  inlineSize: "100%",
+  blockSize: "100%",
+  paddingBlock: "0",
+  /* padding-inline: 6px; */
+  /* border: 2px solid #ccc; */
+  verticalAlign: "top",
+  textAlign: "right",
+  color: "var(--rdg-color)",
+  backgroundColor: "var(--rdg-background-color)",
+  fontFamily: "inherit",
+  // fontSize: 'var(--rdg-font-size)',
+  "&:focus": {
+    // borderColor: 'var(--rdg-selection-color)',
+    outline: "none"
+  },
+  "&::placeholder": {
+    color: "#999",
+    opacity: "1"
+  }
+}));
+function autoFocusAndSelect(input) {
+  input?.focus();
+  input?.select();
+}
+function TextEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "rdg-text-editor",
+      ref: autoFocusAndSelect,
+      value: row[column.key],
+      onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
+      onBlur: () => onClose(true)
+    }
+  );
+}
+function NumberEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      onClose(true);
+    }
+    if (event.key === "Enter") {
+      onClose(true);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "rdg-text-editor",
+      ref: autoFocusAndSelect,
+      type: "number",
+      value: row[column.key],
+      onKeyDown: handleKeyDown,
+      onChange: (event) => onRowChange({
+        ...row,
+        [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
+      }),
+      onBlur: () => onClose(true)
+    }
+  );
+}
+export {
+  NumberEditor as N,
+  TextEditor as T
+};

package/components/DataGrid/types.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { Maybe } from '@m4l/core';
-import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
-import type { MenuAction } from '../mui_extended/MenuActions/types';
+import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
+import { MenuAction } from '../mui_extended/MenuActions/types';
 import { ActionsProps } from './subcomponents/Actions/types';
-export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
@@ -58,7 +57,7 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
-export declare const TEST_PROP_COLUMNS: string;
+export declare const TEST_PROP_COLUMNS = "data-testid-m4ldatagrid-columns";
 export declare interface DataGridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends GridProps<TRow, TSummaryRow, TKey> {
     actionsProps: ActionsProps;
     dataTestId?: string;

package/components/DataGrid/types.js

@@ -0,0 +1,6 @@
+const DATAGRID_TEST_ID = "m4ldatagrid";
+const PREFIX_TEST_ATTRIBUTE = "data-testid";
+const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
+export {
+  TEST_PROP_COLUMNS as T
+};

package/components/DataGrid/utils/getDataGridRowsFromSet.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare const getDataGridRowsFromSet: <TRow, RowKey>(set: ReadonlySet<RowKey>, rows: TRow[], rowKeyGetter: (row: TRow) => RowKey) => TRow[];

package/components/DataGrid/utils/getDataGridRowsFromSet.js

@@ -0,0 +1,21 @@
+const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
+  const rowsFinded = [];
+  if (set && set.size > 0) {
+    const iterator = set.entries();
+    for (let i = 0; i < set.size; i++) {
+      const entry = iterator.next().value;
+      if (!entry) {
+        continue;
+      }
+      const key = entry[1];
+      const row = rows.find((frow) => rowKeyGetter(frow) === key);
+      if (row) {
+        rowsFinded.push(row);
+      }
+    }
+  }
+  return rowsFinded;
+};
+export {
+  getDataGridRowsFromSet as g
+};

package/components/DragResizeWindow/DragResizeWindow.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { DraggableWindowProps } from './types';
+import { default as React } from 'react';
+import { DraggableWindowProps } from './types';
 /**
  * Este component es un wrapper o ventana draggable y resizeable al children.
  * Caracteristicas

package/components/DragResizeWindow/DragResizeWindow.js

@@ -0,0 +1,167 @@
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import { DraggableCore } from "react-draggable";
+import clsx from "clsx";
+import { d as dragResizeWindowClasses } from "./classes/index.js";
+import { D as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
+import { s as setTransform } from "./utils.js";
+import { Resizable } from "../extended/react-resizable/Resizable";
+import { useForkRef } from "@mui/material";
+import { g as getInitialSize } from "./helpers/index.js";
+import { u as useDragOptions } from "./hooks/useDragOptions.js";
+import { u as useResizeOptions } from "./hooks/useResizeOptions.js";
+import { u as useDimensionEffects } from "./hooks/useDimensionEffects.js";
+import { R as RootStyled } from "./slots/DragResizeWindowSlots.js";
+const DragResizeWindow = forwardRef((props, ref) => {
+  const {
+    //Comunes
+    style,
+    className,
+    children,
+    defaultPosition = { vertical: { top: 0, height: 100 }, horizontal: { left: 0, width: 100 } },
+    containerElement,
+    containerSize,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    bounds = { left: 5, top: 5, right: -5, bottom: -5 },
+    minWindowWidth = 200,
+    minWindowHeight = 100,
+    //Draggable
+    draggableHandle = `.${dragResizeWindowClasses.draggableHandle}`,
+    draggableCancel = `.${dragResizeWindowClasses.draggableCancel}`,
+    draggable = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onMouseDown,
+    //ResizeAble
+    resizeable = true,
+    resizeHandles = ["se", "nw"],
+    resizeHandle,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    hidden,
+    //Otras
+    ...others
+  } = props;
+  const [currentState, setCurrentState] = useState(
+    getInitialSize(containerSize, defaultPosition)
+  );
+  const stateRef = useRef({
+    bounds,
+    data: void 0,
+    dragging: void 0,
+    containerSize: containerSize ? { ...containerSize } : void 0,
+    left: currentState.left,
+    top: currentState.top,
+    width: currentState.width,
+    height: currentState.height
+  });
+  const wrapperRef = useRef(null);
+  const handleAllRefs = useForkRef(wrapperRef, ref);
+  const { localOnDragStart, localOnDrag, localOnDragStop } = useDragOptions({
+    containerElement,
+    transformScale,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    stateRef,
+    setCurrentState
+  });
+  const { localOnResize, localOnResizeStart, localOnResizeStop } = useResizeOptions({
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    stateRef,
+    setCurrentState
+  });
+  useDimensionEffects({
+    containerElement,
+    containerSize,
+    setCurrentState,
+    stateRef,
+    minWindowWidth,
+    minWindowHeight,
+    wrapperRef,
+    currentState
+  });
+  const mixinResizable = useCallback(
+    (child, position) => {
+      const minConstraints = [minWindowWidth, minWindowHeight];
+      return /* @__PURE__ */ jsx(
+        Resizable,
+        {
+          draggableOpts: {
+            disabled: !resizeable
+          },
+          className: resizeable ? void 0 : "react-resizable-hide",
+          width: position.width,
+          height: position.height,
+          minConstraints,
+          onResizeStop: localOnResizeStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          transformScale,
+          resizeHandles,
+          handle: resizeHandle,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resizeable, transformScale]
+  );
+  const mixinDraggable = useCallback(
+    (child) => {
+      return /* @__PURE__ */ jsx(
+        DraggableCore,
+        {
+          onStart: localOnDragStart,
+          onDrag: localOnDrag,
+          onStop: localOnDragStop,
+          handle: draggableHandle,
+          cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+          scale: transformScale,
+          nodeRef: wrapperRef,
+          onMouseDown,
+          ...others,
+          children: child
+        }
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [wrapperRef, transformScale, draggableHandle, draggableCancel, localOnDragStart]
+  );
+  const classNameFinal = clsx(className, {
+    "react-draggable": draggable,
+    //Requerido para el componente Draggable
+    [dragResizeWindowClasses.hidden]: hidden
+    // dropping: Boolean(droppingPosition),
+  });
+  const styleFinal = {
+    ...style,
+    ...setTransform(currentState)
+  };
+  const memoChildren = useMemo(() => {
+    return children;
+  }, [children]);
+  const wrapperRoot = /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { hidden },
+      className: classNameFinal,
+      ref: handleAllRefs,
+      style: styleFinal,
+      role: "none",
+      children: memoChildren
+    }
+  );
+  if (!containerElement) {
+    return null;
+  }
+  const dragResizeWindow = mixinDraggable(mixinResizable(wrapperRoot, currentState));
+  return /* @__PURE__ */ jsx(React.Fragment, { children: dragResizeWindow });
+});
+export {
+  DragResizeWindow as D
+};

package/components/DragResizeWindow/DragResizeWindow.styles.d.ts

@@ -1,2 +1,2 @@
-import type { DragResizeWindowStyles } from '../DragResizeWindow/types';
+import { DragResizeWindowStyles } from '../DragResizeWindow/types';
 export declare const dragResizeWindowStyles: DragResizeWindowStyles;

package/components/DragResizeWindow/DragResizeWindow.styles.js

@@ -0,0 +1,40 @@
+const CONTAINER_QUERY_NAME = "window_root";
+const dragResizeWindowStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ theme, ownerState }) => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: theme.vars.palette.background.default,
+    prop2: 1,
+    ...ownerState?.hidden ? {
+      visibility: "hidden",
+      pointerEvents: "none"
+    } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  iconResizeFormatterRoot: () => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    backgroundColor: "gray",
+    prop2: 1,
+    cursor: "default"
+    // zIndex: ownerState.baseZindex || 0,
+  })
+};
+export {
+  dragResizeWindowStyles as d
+};

package/components/DragResizeWindow/classes/index.js

@@ -0,0 +1,16 @@
+import { generateUtilityClasses } from "@mui/material";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+const dragResizeWindowClasses = generateUtilityClasses(
+  COMPONET_KEY_COMPONENT,
+  [
+    /* elements */
+    "draggableHandle",
+    "draggableCancel",
+    // state
+    "dragging",
+    "hidden"
+  ]
+);
+export {
+  dragResizeWindowClasses as d
+};

package/components/DragResizeWindow/classes/types.d.ts

@@ -4,4 +4,4 @@ export interface DraggableWindowClasses {
     dragging: string;
     hidden: string;
 }
-export declare type DraggableWindowClassesKey = keyof DraggableWindowClasses;
+export type DraggableWindowClassesKey = keyof DraggableWindowClasses;

package/components/DragResizeWindow/constants.js

@@ -0,0 +1,6 @@
+const COMPONET_KEY_COMPONENT = "M4LDragResizeWindow";
+const DEFAULT_TRANSFORM_SCALE = 1;
+export {
+  COMPONET_KEY_COMPONENT as C,
+  DEFAULT_TRANSFORM_SCALE as D
+};

package/components/DragResizeWindow/helpers/index.d.ts

@@ -1,3 +1,6 @@
 import { ContainerSize } from '../../../utils/types';
 import { CurrentState, DefaultPosition } from '../types';
+/**
+ * TODO: Documentar
+ */
 export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition) => CurrentState;