@blockle/blocks-react 3.0.0 → 3.1.0

package/dist/components/form/Switch/Switch.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { classnames } from "@blockle/blocks-core";
-import { useState, useEffect, useCallback } from "react";
+import { composeRefs, classnames } from "@blockle/blocks-core";
+import { useRef, useState } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { input, container } from "./switch.css.js";
 const Switch = ({
@@ -9,55 +9,45 @@ const Switch = ({
   className,
   defaultChecked,
   onChange,
+  ref,
   ...restProps
 }) => {
-  const [isChecked, setIsChecked] = useState(
-    defaultChecked || checked || false
+  const inputRef = useRef(null);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(
+    defaultChecked ?? false
   );
+  const isControlled = checked !== void 0;
+  const isChecked = isControlled ? checked : uncontrolledChecked;
   const baseClassName = useComponentStyles("switch", { root: true });
   const thumbClassName = useComponentStyles("switch", { thumb: true }, false);
-  useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
+  const onChangeHandler = (event) => {
+    if (!isControlled) {
+      setUncontrolledChecked(event.target.checked);
     }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
+    onChange?.(event);
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(className, container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
+        if (event.target === inputRef.current) {
           return;
         }
-        toggle();
+        inputRef.current?.click();
       },
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
+            role: "switch",
             className: input,
-            checked: isChecked,
+            checked,
+            defaultChecked,
             onChange: onChangeHandler,
+            ref: composeRefs(ref, inputRef),
             ...restProps
           }
         ),

package/dist/components/form/Switch/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}

package/dist/components/form/Switch/switch.css.js

@@ -5,6 +5,7 @@ setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks-react"
 const container = style({
   "@layer": {
     [layers.molecule]: {
+      flexShrink: 0,
       cursor: "pointer",
       userSelect: "none",
       position: "relative"

package/dist/components/form/TextInput/TextInput.d.ts

@@ -2,7 +2,6 @@ import { HTMLElementProps, OptionalLiteral } from '@blockle/blocks-core';
 export type TextInputProps = {
     inputClassName?: string;
     endSlot?: React.ReactNode;
-    name: string;
     startSlot?: React.ReactNode;
     type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;

package/dist/components/form/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,CACpB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CACzD,CAAC;CAEH,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwC9C,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,CACpB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CACzD,CAAC;CAEH,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsC9C,CAAC"}

package/dist/components/form/TextInput/TextInput.js

@@ -8,7 +8,6 @@ const TextInput = ({
   className,
   inputClassName,
   endSlot,
-  name,
   placeholder,
   startSlot,
   type = "text",
@@ -31,7 +30,6 @@ const TextInput = ({
         /* @__PURE__ */ jsx(
           "input",
           {
-            name,
             type,
             placeholder,
             className: classnames(input, inputStyles, inputClassName),

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

@@ -1,8 +1,11 @@
 import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { RequestCloseReason } from '../requestCloseReason.js';
 type DialogTheme = ComponentThemes['dialog'];
 export type DialogProps = {
     open: boolean;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
+    /** Runs on a close request, before the component prevents it and asks to close */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
     className?: string;
     size?: DialogTheme['variants']['size'];
     'aria-label'?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAY9B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6FxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAInE,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkDxC,CAAC"}

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

@@ -1,21 +1,21 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
-import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { classnames, composeRefs } from "@blockle/blocks-core";
+import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
-import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
+import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
+import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
 import { dialog } from "./dialog.css.js";
-import { useNestedDialog, DialogContext } from "./dialogHelper.js";
 const Dialog = ({
   children,
   open,
   className,
   onRequestClose,
   size,
+  ref,
+  onKeyDown,
+  onKeyDownCapture,
+  onCancel,
   ...restProps
 }) => {
   const dialogRef = useRef(null);
@@ -23,55 +23,28 @@ const Dialog = ({
     dialog: true,
     variants: { size }
   });
-  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(() => {
-    if (open && visible) {
-      if (!dialogRef.current || !dialogRef.current.showModal) {
-        return;
-      }
-      dialogRef.current.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      if (dialogRef.current?.close) {
-        dialogRef.current.close();
-      }
-    }
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
+  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+    open,
+    onRequestClose,
+    onKeyDown,
+    onKeyDownCapture,
+    onCancel
+  });
+  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
   if (!visible) {
     return null;
   }
   const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "dialog",
     {
-      ref: dialogRef,
+      ref: composeRefs(ref, dialogRef),
       open: dataOpen,
       className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,
+      ...closeRequestProps,
       children
     }
   ) });

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

@@ -1,9 +1,16 @@
-import { HTMLElementProps } from '@blockle/blocks-core';
+import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { RequestCloseReason } from '../requestCloseReason.js';
 import * as styles from './drawer.css.js';
+type DrawerTheme = ComponentThemes['drawer'];
 export type DrawerProps = {
     open: boolean;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
+    /** Runs on a close request, before the component prevents it and asks to close */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    className?: string;
     placement?: keyof typeof styles.placement;
+    size?: DrawerTheme['variants']['size'];
 } & HTMLElementProps<HTMLDialogElement>;
 export declare const Drawer: React.FC<DrawerProps>;
+export {};
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/components/overlay/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC3C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;CACxC,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAC"}

package/dist/components/overlay/Drawer/Drawer.js

@@ -1,77 +1,59 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
-import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
-import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { classnames, composeRefs } from "@blockle/blocks-core";
+import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
+import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
 import { drawer, placement } from "./drawer.css.js";
 const Drawer = ({
   open,
   onRequestClose,
+  className,
   placement: placement$1 = "left",
+  size,
   children,
+  ref,
+  onKeyDown,
+  onKeyDownCapture,
+  onCancel,
   ...restProps
 }) => {
   const dialogRef = useRef(null);
-  const [visible, setVisible] = useState(open);
   const rootClassName = useComponentStyles("drawer", {
     root: true,
-    variants: { placement: placement$1 }
+    variants: { placement: placement$1, size }
   });
   const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  usePreventBodyScroll(open);
-  useClickOutside(dialogRef, onRequestClose, { enabled: open });
-  const onEscape = useCallback(
-    (event) => {
-      event.preventDefault();
-      onRequestClose();
-    },
-    [onRequestClose]
-  );
-  useKeyboard("Escape", onEscape, { enabled: open });
-  useIsomorphicLayoutEffect(() => {
-    if (open && visible) {
-      if (!dialogRef.current || !dialogRef.current.showModal) {
-        return;
-      }
-      dialogRef.current.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      if (dialogRef.current?.close) {
-        dialogRef.current.close();
-      }
-    }
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
+  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+    open,
+    onRequestClose,
+    onKeyDown,
+    onKeyDownCapture,
+    onCancel
+  });
+  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "dialog",
     {
-      ref: dialogRef,
+      ref: composeRefs(ref, dialogRef),
       open: dataOpen,
       className: classnames(
         drawer,
         placement[placement$1],
-        rootClassName
+        rootClassName,
+        className
       ),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,
+      ...closeRequestProps,
       children
     }
-  );
+  ) });
 };
 export {
   Drawer

package/dist/components/overlay/Drawer/drawer.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/drawer.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAmBjB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;CA2CrB,CAAC"}
+{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/drawer.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAmBjB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;CAuCrB,CAAC"}

package/dist/components/overlay/Drawer/drawer.css.js

@@ -29,8 +29,7 @@ const placement = {
         top: 0,
         bottom: 0,
         left: 0,
-        height: "100%",
-        width: "300px"
+        height: "100%"
       }
     }
   }),
@@ -40,8 +39,7 @@ const placement = {
         top: 0,
         right: 0,
         bottom: 0,
-        height: "100%",
-        width: "300px"
+        height: "100%"
       }
     }
   }),
@@ -50,8 +48,7 @@ const placement = {
       [layers.molecule]: {
         top: 0,
         left: 0,
-        width: "100%",
-        height: "300px"
+        width: "100%"
       }
     }
   }),
@@ -60,8 +57,7 @@ const placement = {
       [layers.molecule]: {
         bottom: 0,
         left: 0,
-        width: "100%",
-        height: "300px"
+        width: "100%"
       }
     }
   })

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

@@ -1,10 +1,22 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
-export type PopoverAlign = 'top' | 'bottom' | 'left' | 'right';
+import { RequestCloseReason } from '../requestCloseReason.js';
+import { PopoverPlacement } from './popover-utils.js';
+export type { PopoverPlacement };
 export type PopoverProps = {
     anchorElement: React.RefObject<HTMLElement | null>;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
     open: boolean;
-    position?: PopoverAlign;
+    /**
+     * Side of the anchor to open on, and which of its edges to line up with.
+     * Flips to the opposite side when there is no room, and shifts to stay
+     * inside the viewport.
+     * @default 'top'
+     */
+    placement?: PopoverPlacement;
+    /**
+     * @deprecated Use `placement`, which wins when both are passed
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
     sticky?: boolean;
 } & HTMLElementProps<HTMLDivElement>;
 export declare const Popover: React.FC<PopoverProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAU9B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAI/D,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAElB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqH1C,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE/E,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAIjC,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,OAAO,CAAC;IACd;;;;;OAKG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;CAElB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkJ1C,CAAC"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { hasAnimationDuration, classnames, composeRefs } from "@blockle/blocks-core";
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
@@ -14,17 +14,32 @@ const Popover = ({
   className,
   onRequestClose,
   open,
-  position = "top",
+  placement: placementProp,
+  position,
+  ref,
   sticky,
   style,
   ...restProps
 }) => {
+  const placement = placementProp ?? position ?? "top";
   const popoverRef = useRef(null);
   const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
   const [visible, setVisible] = useState(open);
   const popoverClassName = useComponentStyles("popover", { root: true }, false);
-  useKeyboard("Escape", onRequestClose, { enabled: open });
-  useClickOutside(popoverRef, onRequestClose, { enabled: open });
+  const onEscape = useCallback(
+    (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      onRequestClose("escape");
+    },
+    [onRequestClose]
+  );
+  useKeyboard("Escape", onEscape, { enabled: open });
+  useClickOutside(popoverRef, () => onRequestClose("outside-click"), {
+    enabled: open
+  });
   useIsomorphicLayoutEffect(() => {
     const element = popoverRef.current;
     if (open && visible) {
@@ -35,7 +50,7 @@ const Popover = ({
         return;
       }
       element.showPopover();
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition({ x, y });
     } else if (open) {
       setVisible(true);
@@ -43,21 +58,30 @@ const Popover = ({
       if (!hasAnimationDuration(popoverRef.current)) {
         setVisible(false);
       }
-      popoverRef.current?.hidePopover();
+      if (!element) {
+        return;
+      }
+      if (typeof element.hidePopover !== "function") {
+        console.warn(
+          "Popover: hidePopover method is not available on the element."
+        );
+        return;
+      }
+      element.hidePopover();
     }
   }, [open, visible]);
   useEffect(() => {
     if (open) {
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition({ x, y });
     }
-  }, [open, anchorElement, position]);
+  }, [open, anchorElement, placement]);
   useEffect(() => {
     if (!open || !sticky) {
       return;
     }
     function updatePopoverPosition() {
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition((prev) => {
         if (prev.x === x && prev.y === y) {
           return prev;
@@ -71,7 +95,7 @@ const Popover = ({
       window.removeEventListener("resize", updatePopoverPosition);
       window.removeEventListener("scroll", updatePopoverPosition);
     };
-  }, [position, anchorElement, open, sticky]);
+  }, [placement, anchorElement, open, sticky]);
   const onAnimationEnd = useCallback(() => {
     if (!open) {
       setVisible(false);
@@ -83,7 +107,7 @@ const Popover = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ref: composeRefs(restProps.ref, popoverRef),
+      ref: composeRefs(ref, popoverRef),
       "data-open": open ? "" : void 0,
       popover: "manual",
       className: classnames(popoverClassName, className),

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

@@ -1,3 +1,40 @@
 export type PopoverPositions = [x: number, y: number];
-export declare function getPopoverPosition(position: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverEdge = 'start' | 'end';
+export type PopoverPlacement = PopoverSide | `${PopoverSide}-${PopoverEdge}`;
+type Rect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type Margin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ComputePopoverPositionOptions = {
+    placement: PopoverPlacement;
+    /** The anchor's border box, relative to the viewport */
+    anchor: Rect;
+    /** The popover's untransformed border-box size and its margins */
+    popover: {
+        width: number;
+        height: number;
+        margin: Margin;
+    };
+    viewport: {
+        width: number;
+        height: number;
+        scrollX: number;
+        scrollY: number;
+    };
+};
+/**
+ * Returns the popover's `left` and `top`, relative to the document
+ */
+export declare function computePopoverPosition({ placement, anchor, popover, viewport, }: ComputePopoverPositionOptions): PopoverPositions;
+export declare function getPopoverPosition(placement: PopoverPlacement, anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;
+export {};
 //# sourceMappingURL=popover-utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/popover-utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC7C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC9C,gBAAgB,CAqElB"}
+{"version":3,"file":"popover-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/popover-utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvD,KAAK,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,GAAG,WAAW,IAAI,WAAW,EAAE,CAAC;AAE7E,KAAK,IAAI,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,KAAK,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,MAAM,6BAA6B,GAAG;IAC1C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,wDAAwD;IACxD,MAAM,EAAE,IAAI,CAAC;IACb,kEAAkE;IAClE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAEF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,6BAA6B,GAAG,gBAAgB,CAyClD;AAoED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC9C,gBAAgB,CAyClB"}