@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

package/dist/components/other/BlocksProvider/context.cjs

@@ -1,6 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const BlocksProviderContext = react.createContext(null);
-exports.BlocksProviderContext = BlocksProviderContext;

package/dist/components/other/BlocksProvider/context.d.ts

@@ -1,4 +0,0 @@
-export type BlocksProviderContextProps = {
-    setAriaHidden: (value: boolean) => void;
-};
-export declare const BlocksProviderContext: import('react').Context<BlocksProviderContextProps | null>;

package/dist/components/other/BlocksProvider/context.js

@@ -1,6 +0,0 @@
-"use client";
-import { createContext } from "react";
-const BlocksProviderContext = createContext(null);
-export {
-  BlocksProviderContext
-};

package/dist/components/other/BlocksProvider/index.d.ts

@@ -1,2 +0,0 @@
-export { BlocksProvider } from './BlocksProvider';
-export type { BlocksProviderProps } from './BlocksProvider';

package/dist/components/other/Portal/Portal.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactDom = require("react-dom");
-const Portal = ({ children, container }) => {
-  return reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { children }), container || document.body);
-};
-exports.Portal = Portal;

package/dist/components/other/Portal/Portal.d.ts

@@ -1,5 +0,0 @@
-export type PortalProps = {
-    children: React.ReactNode;
-    container?: HTMLElement;
-};
-export declare const Portal: React.FC<PortalProps>;

package/dist/components/other/Portal/Portal.js

@@ -1,8 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-const Portal = ({ children, container }) => {
-  return createPortal(/* @__PURE__ */ jsx("div", { children }), container || document.body);
-};
-export {
-  Portal
-};

package/dist/components/other/Portal/index.d.ts

@@ -1 +0,0 @@
-export { Portal, type PortalProps } from './Portal';

package/dist/components/overlay/Dialog/Dialog.cjs

@@ -1,79 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const dom = require("../../../lib/utils/dom.cjs");
-const dialog_css = require("./dialog.css.cjs");
-const dialogHelper = require("./dialogHelper.cjs");
-const useRestoreFocus = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
-const usePreventBodyScroll = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
-const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
-const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
-const Dialog = ({
-  children,
-  open,
-  className,
-  onRequestClose,
-  size,
-  ...restProps
-}) => {
-  const dialogClassName = theme.getComponentStyles("dialog", {
-    dialog: true,
-    variants: { size }
-  });
-  const dialogRef = react.useRef(null);
-  const [enabled, setEnabled] = react.useState(true);
-  const [visible, setVisible] = react.useState(open);
-  useRestoreFocus.useRestoreFocus(open);
-  const isNested = dialogHelper.useNestedDialog(open);
-  usePreventBodyScroll.usePreventBodyScroll(open && !isNested);
-  const onEscape = react.useCallback(
-    (event) => {
-      event.preventDefault();
-      onRequestClose();
-    },
-    [onRequestClose]
-  );
-  useKeyboard.useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  useClickOutside.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (open && visible) {
-      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!dom.hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      (_b = dialogRef.current) == null ? void 0 : _b.close();
-    }
-  }, [open, visible]);
-  const onAnimationEnd = react.useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dialogHelper.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "dialog",
-    {
-      ref: dialogRef,
-      "aria-modal": "true",
-      open: dataOpen,
-      className: classnames.classnames(dialog_css.dialog, dialogClassName, className),
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      ...restProps,
-      children
-    }
-  ) }) });
-};
-exports.Dialog = Dialog;

package/dist/components/overlay/Dialog/Dialog.d.ts

@@ -1,10 +0,0 @@
-import { DialogTheme } from '../../../lib/theme/componentThemes';
-export type DialogProps = {
-    children?: React.ReactNode;
-    open: boolean;
-    onRequestClose: () => void;
-    className?: string;
-    size?: DialogTheme['variants']['size'];
-    'aria-label'?: string;
-};
-export declare const Dialog: React.FC<DialogProps>;

package/dist/components/overlay/Dialog/Dialog.js

@@ -1,79 +0,0 @@
-"use client";
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { hasAnimationDuration } from "../../../lib/utils/dom.js";
-import { dialog } from "./dialog.css.js";
-import { useNestedDialog, DialogContext } from "./dialogHelper.js";
-import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-const Dialog = ({
-  children,
-  open,
-  className,
-  onRequestClose,
-  size,
-  ...restProps
-}) => {
-  const dialogClassName = getComponentStyles("dialog", {
-    dialog: true,
-    variants: { size }
-  });
-  const dialogRef = useRef(null);
-  const [enabled, setEnabled] = useState(true);
-  const [visible, setVisible] = useState(open);
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(open);
-  usePreventBodyScroll(open && !isNested);
-  const onEscape = useCallback(
-    (event) => {
-      event.preventDefault();
-      onRequestClose();
-    },
-    [onRequestClose]
-  );
-  useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
-  useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (open && visible) {
-      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      (_b = dialogRef.current) == null ? void 0 : _b.close();
-    }
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref: dialogRef,
-      "aria-modal": "true",
-      open: dataOpen,
-      className: classnames(dialog, dialogClassName, className),
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      ...restProps,
-      children
-    }
-  ) }) });
-};
-export {
-  Dialog
-};

package/dist/components/overlay/Dialog/Dialog.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { DialogProps } from './Dialog';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<DialogProps>;
-export declare const WithAriaMarkup: StoryObj<DialogProps>;
-export declare const Play: StoryObj<DialogProps>;

package/dist/components/overlay/Dialog/dialog.css.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const dialog = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "fixed",
-      inset: 0,
-      border: "none",
-      "::backdrop": {
-        // Remove pointer event to prevent clicks on the backdrop
-        // and make it easier to check if the click was outside the dialog
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-fileScope.endFileScope();
-exports.dialog = dialog;

package/dist/components/overlay/Dialog/dialog.css.d.ts

@@ -1 +0,0 @@
-export declare const dialog: string;

package/dist/components/overlay/Dialog/dialog.css.js

@@ -1,22 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
-setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const dialog = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "fixed",
-      inset: 0,
-      border: "none",
-      "::backdrop": {
-        // Remove pointer event to prevent clicks on the backdrop
-        // and make it easier to check if the click was outside the dialog
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-endFileScope();
-export {
-  dialog
-};

package/dist/components/overlay/Dialog/dialogHelper.cjs

@@ -1,22 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const DialogContext = react.createContext(
-  void 0
-);
-const useNestedDialog = (open) => {
-  const parentDialog = react.useContext(DialogContext);
-  react.useEffect(() => {
-    if (!parentDialog || !open) {
-      return;
-    }
-    parentDialog.setEnabled(false);
-    return () => {
-      parentDialog.setEnabled(true);
-    };
-  }, [parentDialog, open]);
-  return !!parentDialog;
-};
-exports.DialogContext = DialogContext;
-exports.useNestedDialog = useNestedDialog;

package/dist/components/overlay/Dialog/dialogHelper.d.ts

@@ -1,6 +0,0 @@
-type DialogContextValue = {
-    setEnabled: (active: boolean) => void;
-};
-export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
-export declare const useNestedDialog: (open: boolean) => boolean;
-export {};

package/dist/components/overlay/Dialog/dialogHelper.js

@@ -1,22 +0,0 @@
-"use client";
-import { createContext, useContext, useEffect } from "react";
-const DialogContext = createContext(
-  void 0
-);
-const useNestedDialog = (open) => {
-  const parentDialog = useContext(DialogContext);
-  useEffect(() => {
-    if (!parentDialog || !open) {
-      return;
-    }
-    parentDialog.setEnabled(false);
-    return () => {
-      parentDialog.setEnabled(true);
-    };
-  }, [parentDialog, open]);
-  return !!parentDialog;
-};
-export {
-  DialogContext,
-  useNestedDialog
-};

package/dist/components/overlay/Dialog/index.d.ts

@@ -1 +0,0 @@
-export { Dialog, type DialogProps } from './Dialog';

package/dist/components/overlay/Popover/Popover.cjs

@@ -1,113 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const dom = require("../../../lib/utils/dom.cjs");
-const popoverUtils = require("./popover-utils.cjs");
-const useLayer = require("../../../hooks/useLayer/useLayer.cjs");
-const useVisibilityState = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
-const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
-const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
-const Portal = require("../../other/Portal/Portal.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Popover = ({
-  align = "bottom",
-  anchorElement,
-  children,
-  className,
-  onRequestClose,
-  open,
-  repositionOnScroll,
-  style,
-  ...restProps
-}) => {
-  const layer = useLayer.useLayer();
-  const [visible, hide] = useVisibilityState.useVisibilityState(open);
-  const [position, setPosition] = react.useState({ x: 0, y: 0 });
-  const popoverRef = react.useRef(null);
-  const containerClassName = theme.getComponentStyles(
-    "popover",
-    { base: true },
-    false
-  );
-  react.useLayoutEffect(() => {
-    if (!visible) {
-      return;
-    }
-    const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
-  react.useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
-    }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
-      return;
-    }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
-  }, [open, visible]);
-  const onAnimationEnd = react.useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  react.useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!dom.hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      ref: popoverRef,
-      "data-open": dataOpen,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      className: classnames.classnames(containerClassName, className),
-      position: "absolute",
-      style: {
-        ...style,
-        left: position.x,
-        top: position.y
-      },
-      ...restProps,
-      children
-    }
-  ) });
-};
-exports.Popover = Popover;

package/dist/components/overlay/Popover/Popover.d.ts

@@ -1,12 +0,0 @@
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type PopoverProps = {
-    align?: 'top' | 'bottom' | 'left' | 'right';
-    anchorElement: React.RefObject<HTMLElement | null>;
-    children: React.ReactNode;
-    className?: string;
-    onRequestClose: () => void;
-    open: boolean;
-    repositionOnScroll?: boolean;
-    style?: React.CSSProperties;
-} & HTMLElementProps<HTMLDivElement>;
-export declare const Popover: React.FC<PopoverProps>;

package/dist/components/overlay/Popover/Popover.js

@@ -1,113 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { hasAnimationDuration } from "../../../lib/utils/dom.js";
-import { getPopoverPosition } from "./popover-utils.js";
-import { useLayer } from "../../../hooks/useLayer/useLayer.js";
-import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { Portal } from "../../other/Portal/Portal.js";
-import { Box } from "../../layout/Box/Box.js";
-const Popover = ({
-  align = "bottom",
-  anchorElement,
-  children,
-  className,
-  onRequestClose,
-  open,
-  repositionOnScroll,
-  style,
-  ...restProps
-}) => {
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const popoverRef = useRef(null);
-  const containerClassName = getComponentStyles(
-    "popover",
-    { base: true },
-    false
-  );
-  useLayoutEffect(() => {
-    if (!visible) {
-      return;
-    }
-    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
-  useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
-    }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
-      return;
-    }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: popoverRef,
-      "data-open": dataOpen,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      className: classnames(containerClassName, className),
-      position: "absolute",
-      style: {
-        ...style,
-        left: position.x,
-        top: position.y
-      },
-      ...restProps,
-      children
-    }
-  ) });
-};
-export {
-  Popover
-};

package/dist/components/overlay/Popover/Popover.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { PopoverProps } from './Popover';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<PopoverProps>;

package/dist/components/overlay/Popover/popover-utils.cjs

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function getPopoverPosition(align, anchorRef, popoverRef) {
-  if (!anchorRef.current || !popoverRef.current) {
-    return [0, 0];
-  }
-  popoverRef.current.style.transform = "none";
-  popoverRef.current.style.transitionDuration = "0s";
-  const anchorRect = anchorRef.current.getBoundingClientRect();
-  const popoverRect = popoverRef.current.getBoundingClientRect();
-  let popoverStyles = getComputedStyle(popoverRef.current);
-  const top = popoverStyles.getPropertyValue("top");
-  const left = popoverStyles.getPropertyValue("left");
-  popoverRef.current.style.left = "0";
-  popoverRef.current.style.top = "0";
-  popoverStyles = getComputedStyle(popoverRef.current);
-  const marginTop = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-top")
-  );
-  const marginRight = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-right")
-  );
-  const marginBottom = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-bottom")
-  );
-  const marginLeft = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-left")
-  );
-  const marginY = marginTop + marginBottom;
-  const marginX = marginRight + marginLeft;
-  const docHeight = document.documentElement.clientHeight;
-  const docWidth = document.documentElement.clientWidth;
-  const docScrollTop = document.documentElement.scrollTop;
-  const docScrollLeft = document.documentElement.scrollLeft;
-  const anchorLeft = anchorRect.left + docScrollLeft;
-  const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
-  const leftPosition = anchorRect.left - popoverRect.width;
-  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
-  popoverRef.current.style.transform = "";
-  popoverRef.current.style.transitionDuration = "";
-  popoverRef.current.style.top = top;
-  popoverRef.current.style.left = left;
-  switch (align) {
-    case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
-    }
-    case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
-    }
-    case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
-    }
-    case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
-    }
-  }
-}
-exports.getPopoverPosition = getPopoverPosition;

package/dist/components/overlay/Popover/popover-utils.d.ts

@@ -1,2 +0,0 @@
-export type PopoverPositions = [x: number, y: number];
-export declare function getPopoverPosition(align: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;