@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.1

package/esm/TagsInput/TagsInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NormalTypes } from '../utils/prop-types';
+interface Props {
+    value?: Array<string>;
+    initialValue?: Array<string>;
+    onChange?: (tags: Array<string>) => void;
+    max?: number;
+    allowDuplicates?: boolean;
+    type?: NormalTypes;
+    rounded?: boolean;
+    filled?: boolean;
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props | 'defaultValue' | 'type'>;
+export type TagsInputProps = Props & NativeAttrs;
+declare const TagsInput: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TagsInput;

package/esm/TagsInput/index.d.ts

@@ -0,0 +1,3 @@
+import TagsInput from './TagsInput';
+export type { TagsInputProps } from './TagsInput';
+export default TagsInput;

package/esm/TagsInput/index.js

@@ -0,0 +1,17 @@
+'use client';
+import {
+  TagsInput_default
+} from "../chunk-G4KB56RO.js";
+import "../chunk-UOGCO6CV.js";
+import "../chunk-KBZEYKCZ.js";
+import "../chunk-GJZT47MP.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  TagsInput_default as default
+};

package/esm/Tree/Tree.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+export type { TreeNodeData } from './TreeContext';
+interface Props {
+    data: Array<TreeNodeData>;
+    value?: string | null;
+    initialValue?: string | null;
+    onChange?: (value: string, node: TreeNodeData) => void;
+    expanded?: Array<string>;
+    initialExpanded?: Array<string>;
+    onExpandedChange?: (expanded: Array<string>) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLUListElement>, keyof Props | 'defaultValue'>;
+export type TreeProps = Props & NativeAttrs;
+declare const Tree: import("../use-scale/with-scale").ScaleComponent<HTMLUListElement, Props & NativeAttrs & React.RefAttributes<HTMLUListElement>>;
+export default Tree;

package/esm/Tree/TreeContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TreeNodeData {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    children?: Array<TreeNodeData>;
+}
+export interface TreeConfig {
+    selected: string | null;
+    expanded: Array<string>;
+    tabbable: string | undefined;
+    activate: (node: TreeNodeData) => void;
+    register: (value: string, element: HTMLLIElement | null) => void;
+}
+export declare const TreeContext: React.Context<TreeConfig>;
+export declare const useTreeContext: () => TreeConfig;

package/esm/Tree/TreeNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+interface Props {
+    node: TreeNodeData;
+    level: number;
+}
+declare function TreeNode({ node, level }: Props): React.JSX.Element;
+export default TreeNode;

package/esm/Tree/index.d.ts

@@ -0,0 +1,3 @@
+import Tree from './Tree';
+export type { TreeProps, TreeNodeData } from './Tree';
+export default Tree;

package/esm/Tree/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Tree_default
+} from "../chunk-K6UULETP.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Tree_default as default
+};

package/esm/chunk-2A4BSQ66.js

@@ -0,0 +1,130 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/SegmentedControl/SegmentedControl.tsx
+import React2, { useId, useMemo, useState } from "react";
+
+// core/SegmentedControl/SegmentedControlContext.ts
+import React from "react";
+var SegmentedControlContext = React.createContext({ disabled: false });
+var useSegmentedControlContext = () => React.useContext(SegmentedControlContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControl.module.css.bolio-css-module-source
+var SegmentedControl_module_css_default = { "segmented": "SegmentedControl-module_segmented__DCgXM" };
+
+// core/SegmentedControl/SegmentedControl.tsx
+import { jsx } from "react/jsx-runtime";
+var SegmentedControlComponent = React2.forwardRef(
+  ({
+    value,
+    initialValue,
+    onChange,
+    disabled = false,
+    fullWidth = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const name = useId();
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const current = value !== void 0 ? value : selfValue;
+    const providerValue = useMemo(
+      () => ({
+        name,
+        value: current,
+        disabled,
+        select: (next) => {
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, current, disabled, onChange]
+    );
+    const groupStyle = {
+      width: SCALES.width(1, fullWidth ? "100%" : "fit-content"),
+      height: SCALES.height(2.25),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--segmented-bg": theme.palette.accents_1,
+      "--segmented-border": theme.palette.border,
+      "--segmented-color": theme.palette.accents_5,
+      "--segmented-hover-color": theme.palette.foreground,
+      "--segmented-active-bg": theme.palette.background,
+      "--segmented-active-color": theme.palette.foreground,
+      "--segmented-shadow": theme.expressiveness.shadowSmall,
+      "--segmented-focus": theme.palette.primary,
+      "--segmented-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        className: use_classes_default(SegmentedControl_module_css_default.segmented, className),
+        ...props,
+        style: groupStyle,
+        children
+      }
+    ) });
+  }
+);
+SegmentedControlComponent.displayName = "BolioUISegmentedControl";
+var SegmentedControl = with_scale_default(SegmentedControlComponent);
+var SegmentedControl_default = SegmentedControl;
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+import React3 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControlItem.module.css.bolio-css-module-source
+var SegmentedControlItem_module_css_default = { "item": "SegmentedControlItem-module_item__R48V1", "input": "SegmentedControlItem-module_input__Q8UWL", "text": "SegmentedControlItem-module_text__7YVZC" };
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SegmentedControlItem = React3.forwardRef(
+  ({ value, disabled = false, className = "", children, style, ...props }, ref) => {
+    const group = useSegmentedControlContext();
+    return /* @__PURE__ */ jsxs("label", { className: use_classes_default(SegmentedControlItem_module_css_default.item, className), style, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref,
+          type: "radio",
+          className: SegmentedControlItem_module_css_default.input,
+          name: group.name,
+          value,
+          checked: group.value === value,
+          disabled: disabled || group.disabled,
+          onChange: () => {
+            var _a;
+            return (_a = group.select) == null ? void 0 : _a.call(group, value);
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: SegmentedControlItem_module_css_default.text, children })
+    ] });
+  }
+);
+SegmentedControlItem.displayName = "BolioUISegmentedControlItem";
+var SegmentedControlItem_default = SegmentedControlItem;
+
+// core/SegmentedControl/index.ts
+SegmentedControl_default.Item = SegmentedControlItem_default;
+var SegmentedControl_default2 = SegmentedControl_default;
+
+export {
+  SegmentedControl_default2 as SegmentedControl_default
+};

package/esm/{chunk-HIFS4JIO.js → chunk-2EYJZXS4.js}

@@ -1,12 +1,12 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
 import {
   Calendar_default,
   fromISO,
   startOfDay,
   toISO
-} from "./chunk-IBC5BABS.js";
-import {
-  getColors
-} from "./chunk-KBZEYKCZ.js";
+} from "./chunk-P245HSVB.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";

package/esm/chunk-4X4ELIMQ.js

@@ -0,0 +1,231 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Dropzone/Dropzone.tsx
+import React2, { useState as useState2 } from "react";
+
+// core/Dropzone/DropzoneThumbnail.tsx
+import { useEffect, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Dropzone/Dropzone.module.css.bolio-css-module-source
+var Dropzone_module_css_default = { "dropzone": "Dropzone-module_dropzone__-6nFN", "input": "Dropzone-module_input__-FpKo", "content": "Dropzone-module_content__Uafwo", "dragging": "Dropzone-module_dragging__z9VG8", "disabled": "Dropzone-module_disabled__rvXlc", "thumbnails": "Dropzone-module_thumbnails__x67bm", "thumbnail": "Dropzone-module_thumbnail__-ke6R", "tile": "Dropzone-module_tile__o-TLL", "preview": "Dropzone-module_preview__pQ3gz", "fileIcon": "Dropzone-module_fileIcon__hnpZV", "format": "Dropzone-module_format__oEMEw", "remove": "Dropzone-module_remove__pjfHy", "name": "Dropzone-module_name__OAPKM" };
+
+// core/Dropzone/DropzoneThumbnail.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var formatOf = (file) => {
+  const extension = file.name.includes(".") ? file.name.split(".").pop() : file.type.split("/")[1];
+  return (extension || "file").slice(0, 4).toUpperCase();
+};
+function DropzoneThumbnail({ file, removeLabel, disabled, onRemove }) {
+  const previewable = file.type.startsWith("image/");
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    if (!previewable) return;
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file, previewable]);
+  return /* @__PURE__ */ jsxs("li", { className: Dropzone_module_css_default.thumbnail, children: [
+    /* @__PURE__ */ jsxs("div", { className: Dropzone_module_css_default.tile, children: [
+      previewable ? (
+        // the name below the tile describes the file
+        url && /* @__PURE__ */ jsx("img", { src: url, alt: "", className: Dropzone_module_css_default.preview })
+      ) : /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          width: "2.5em",
+          height: "2.5em",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: Dropzone_module_css_default.fileIcon,
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+            /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: Dropzone_module_css_default.format, children: formatOf(file) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: Dropzone_module_css_default.remove,
+          "aria-label": removeLabel,
+          disabled,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M6 6l12 12M18 6L6 18",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: Dropzone_module_css_default.name, title: file.name, children: file.name })
+  ] });
+}
+var DropzoneThumbnail_default = DropzoneThumbnail;
+
+// core/Dropzone/Dropzone.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var matchesAccept = (file, accept) => {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  return accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean).some(
+    (token) => token.startsWith(".") ? name.endsWith(token) : token.endsWith("/*") ? file.type.toLowerCase().startsWith(token.slice(0, -1)) : file.type.toLowerCase() === token
+  );
+};
+var DropzoneComponent = React2.forwardRef(
+  ({
+    accept,
+    multiple = false,
+    maxSize,
+    maxFiles,
+    onDrop,
+    thumbnails = false,
+    value,
+    onChange,
+    removeLabel = (file) => `Remove ${file.name}`,
+    disabled = false,
+    className = "",
+    children = "Drag files here or click to choose them",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [dragging, setDragging] = useState2(false);
+    const [selfFiles, setSelfFiles] = useState2([]);
+    const files = value !== void 0 ? value : selfFiles;
+    const updateFiles = (next) => {
+      if (value === void 0) setSelfFiles(next);
+      if (onChange) onChange(next);
+    };
+    const receive = (list) => {
+      if (disabled || !list) return;
+      const kept = thumbnails && multiple ? files : [];
+      const limit = multiple ? (maxFiles != null ? maxFiles : Infinity) - kept.length : 1;
+      const accepted = [];
+      const rejected = [];
+      Array.from(list).forEach((file) => {
+        if (!matchesAccept(file, accept))
+          rejected.push({ file, reason: "file-type" });
+        else if (maxSize !== void 0 && file.size > maxSize)
+          rejected.push({ file, reason: "file-too-large" });
+        else if (accepted.length >= limit)
+          rejected.push({ file, reason: "too-many-files" });
+        else accepted.push(file);
+      });
+      if (thumbnails && accepted.length)
+        updateFiles(multiple ? [...kept, ...accepted] : accepted);
+      if (onDrop) onDrop(accepted, rejected);
+    };
+    const dragHandler = (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      if (event.type === "dragleave" && event.currentTarget.contains(event.relatedTarget))
+        return;
+      setDragging(event.type !== "dragleave");
+    };
+    const dropHandler = (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      setDragging(false);
+      receive(event.dataTransfer.files);
+    };
+    const changeHandler = (event) => {
+      receive(event.target.files);
+      event.target.value = "";
+    };
+    const dropzoneStyle = {
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--dropzone-color": theme.palette.accents_6,
+      "--dropzone-bg": theme.palette.background,
+      "--dropzone-border": theme.palette.accents_3,
+      "--dropzone-hover-border": theme.palette.accents_5,
+      "--dropzone-active": theme.palette.primary,
+      "--dropzone-radius": theme.layout.radius,
+      "--dropzone-tile-bg": theme.palette.accents_1,
+      "--dropzone-tile-color": theme.palette.accents_4,
+      "--dropzone-name-color": theme.palette.accents_6,
+      "--dropzone-badge-bg": theme.palette.foreground,
+      "--dropzone-badge-color": theme.palette.background,
+      "--dropzone-remove-bg": theme.palette.background,
+      "--dropzone-remove-color": theme.palette.accents_6,
+      "--dropzone-remove-hover-color": theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs2("div", { className, style: dropzoneStyle, children: [
+      /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          className: use_classes_default(Dropzone_module_css_default.dropzone, {
+            [Dropzone_module_css_default.dragging]: dragging,
+            [Dropzone_module_css_default.disabled]: disabled
+          }),
+          onDragEnter: dragHandler,
+          onDragOver: dragHandler,
+          onDragLeave: dragHandler,
+          onDrop: dropHandler,
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref,
+                type: "file",
+                className: Dropzone_module_css_default.input,
+                accept,
+                multiple,
+                disabled,
+                onChange: changeHandler,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: Dropzone_module_css_default.content, children })
+          ]
+        }
+      ),
+      thumbnails && files.length > 0 && /* @__PURE__ */ jsx2("ul", { className: Dropzone_module_css_default.thumbnails, children: files.map((file, index) => /* @__PURE__ */ jsx2(
+        DropzoneThumbnail_default,
+        {
+          file,
+          removeLabel: removeLabel(file),
+          disabled,
+          onRemove: () => updateFiles(files.filter((_, i) => i !== index))
+        },
+        `${file.name}-${file.size}-${file.lastModified}-${index}`
+      )) })
+    ] });
+  }
+);
+DropzoneComponent.displayName = "BolioUIDropzone";
+var Dropzone = with_scale_default(DropzoneComponent);
+var Dropzone_default = Dropzone;
+
+// core/Dropzone/index.ts
+var Dropzone_default2 = Dropzone_default;
+
+export {
+  Dropzone_default2 as Dropzone_default
+};

package/esm/{chunk-UVVBMWR4.js → chunk-AG2NWQYL.js}

@@ -53,12 +53,16 @@ var defaultRect = {
   top: -1e3,
   left: -1e3,
   right: -1e3,
-  width: 0
+  width: 0,
+  elementTop: -1e3
 };
+var GAP = 2;
 var Dropdown = React.memo(
   ({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {
     const el = use_portal_default("dropdown", getPopupContainer);
     const [rect, setRect] = useState(defaultRect);
+    const [menu, setMenu] = useState(null);
+    const [flipHeight, setFlipHeight] = useState(null);
     if (parent && process.env.NODE_ENV !== "production") {
       if (getPopupContainer && getPopupContainer()) {
         const el2 = getPopupContainer();
@@ -76,9 +80,10 @@ var Dropdown = React.memo(
         top,
         left,
         right,
-        width: nativeWidth
+        width: nativeWidth,
+        elementTop
       } = getRefRect(parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth });
+      setRect({ top, left, right, width: nativeWidth, elementTop });
     };
     use_resize_default(updateRect);
     use_click_anywhere_default(() => {
@@ -106,10 +111,18 @@ var Dropdown = React.memo(
     const mouseDownHandler = (event) => {
       event.preventDefault();
     };
+    useEffect2(() => {
+      const trigger = parent == null ? void 0 : parent.current;
+      if (!visible || !trigger || !menu) return setFlipHeight(null);
+      const { top, bottom } = trigger.getBoundingClientRect();
+      const height = menu.offsetHeight;
+      const below = window.innerHeight - bottom;
+      setFlipHeight(height + GAP > below && top > below ? height : null);
+    }, [visible, parent, menu, rect]);
     if (!parent || !el) return null;
     const dropdownStyle = {
       position: "absolute",
-      top: rect.top + 2,
+      top: flipHeight === null ? rect.top + GAP : rect.elementTop - flipHeight - GAP,
       left: rect.left,
       zIndex: 1100,
       ...disableMatchWidth ? { minWidth: rect.width } : { width: rect.width }
@@ -118,6 +131,7 @@ var Dropdown = React.memo(
       /* @__PURE__ */ jsx(css_transition_default, { visible, children: /* @__PURE__ */ jsx(
         "div",
         {
+          ref: setMenu,
           className: "",
           onClick: clickHandler,
           onMouseDown: mouseDownHandler,

package/esm/chunk-AVO2SK2I.js

@@ -0,0 +1,109 @@
+import {
+  Menu_default
+} from "./chunk-XLPOECCE.js";
+import {
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ContextMenu/ContextMenu.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ContextMenu/ContextMenu.module.css.bolio-css-module-source
+var ContextMenu_module_css_default = { "area": "ContextMenu-module_area__IAOF5", "trigger": "ContextMenu-module_trigger__OY2LR" };
+
+// core/ContextMenu/ContextMenu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContextMenuComponent = React.forwardRef(
+  ({
+    content,
+    disabled = false,
+    onVisibleChange,
+    className = "",
+    children,
+    onContextMenu,
+    ...props
+  }, ref) => {
+    const [point, setPoint] = useState(null);
+    const area = useRef(null);
+    const setRefs = (element) => {
+      area.current = element;
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    };
+    const change = (visible, next = null) => {
+      setPoint(visible ? next : null);
+      if (onVisibleChange) onVisibleChange(visible);
+    };
+    const contextMenuHandler = (event) => {
+      if (onContextMenu) onContextMenu(event);
+      if (disabled || event.defaultPrevented) return;
+      event.preventDefault();
+      change(true, { x: event.clientX, y: event.clientY });
+    };
+    const open = point !== null;
+    useEffect(() => {
+      if (!open) return;
+      const close = () => {
+        setPoint(null);
+        if (onVisibleChange) onVisibleChange(false);
+      };
+      window.addEventListener("scroll", close, { capture: true, once: true });
+      return () => window.removeEventListener("scroll", close, true);
+    }, [open, onVisibleChange]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRefs,
+        className: use_classes_default(ContextMenu_module_css_default.area, className),
+        ...props,
+        onContextMenu: contextMenuHandler,
+        children: [
+          children,
+          point && // a new point opens a new menu, so it is placed there
+          /* @__PURE__ */ jsx(
+            Menu_default,
+            {
+              visible: true,
+              onVisibleChange: (visible) => change(visible),
+              style: {
+                position: "fixed",
+                left: point.x,
+                top: point.y,
+                width: 0,
+                height: 0
+              },
+              trigger: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  className: ContextMenu_module_css_default.trigger,
+                  onFocus: () => {
+                    var _a;
+                    return (_a = area.current) == null ? void 0 : _a.focus();
+                  }
+                }
+              ),
+              children: content
+            },
+            `${point.x}:${point.y}`
+          )
+        ]
+      }
+    );
+  }
+);
+ContextMenuComponent.displayName = "BolioUIContextMenu";
+var ContextMenu = with_scale_default(ContextMenuComponent);
+var ContextMenu_default = ContextMenu;
+
+// core/ContextMenu/index.ts
+var ContextMenu_default2 = ContextMenu_default;
+
+export {
+  ContextMenu_default2 as ContextMenu_default
+};