visits-style 1.4.14 → 1.4.15

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

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { type ReferenceType } from '@floating-ui/react';
 import type { Placement } from '@floating-ui/core';
 export interface Props extends HTMLAttributes<HTMLDivElement> {
     /** ボタンの内容 */
@@ -24,9 +25,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
         y: number;
     };
     /** 閉じた場合のコールバック */
-    onClose?: () => void;
+    onClose?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
     /** 開けた場合のコールバック */
-    onOpen?: () => void;
+    onOpen?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
     /** popoverを閉じる処理を手動に設定します */
     onManualClose?: () => void;
     /** コンテンツを出さない */

package/dist/index.cjs.js

@@ -802,7 +802,14 @@ const Popover = React.forwardRef(({
       crossAxis: offset.x
     })],
     open,
-    onOpenChange: setOpen,
+    onOpenChange: (value) => {
+      if (value) {
+        openRef.current?.(refs.reference.current, refs.floating.current);
+      } else {
+        closeRef.current?.(refs.reference.current, refs.floating.current);
+      }
+      setOpen(value);
+    },
     whileElementsMounted: react.autoUpdate
   });
   const handleBlur = React.useCallback((e) => {
@@ -810,21 +817,23 @@ const Popover = React.forwardRef(({
     if (onManualClose)
       return onManualClose();
     setOpen(false);
+    closeRef.current?.(refs.reference.current, refs.floating.current);
   }, [onManualClose]);
   React.useEffect(() => {
     if (disabled && open) {
       setOpen(false);
     }
   }, [disabled, open]);
-  React.useEffect(() => {
-    if (!open)
-      return;
-    openRef.current?.();
-    return () => closeRef.current?.();
-  }, [open]);
   React.useImperativeHandle(ref, () => ({
-    open: () => setOpen(true),
-    close: () => setOpen(false)
+    open: () => {
+      setOpen(true);
+      openRef.current?.(refs.reference.current, refs.floating.current);
+    },
+    close: () => {
+      setOpen(false);
+      closeRef.current?.(refs.reference.current, refs.floating.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
   const {
     getFloatingProps,
@@ -835,15 +844,13 @@ const Popover = React.forwardRef(({
   openRef.current = onOpen;
   closeRef.current = onClose;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    React.cloneElement(React.Children.only(label), {
+    React.cloneElement(React.Children.only(label), getReferenceProps({
       ref: refs.setReference,
-      ...getReferenceProps({
-        tabIndex: 0,
-        role: "button",
-        disabled,
-        onClick: stopPropagation$1
-      })
-    }),
+      tabIndex: 0,
+      role: "button",
+      disabled,
+      onClick: stopPropagation$1
+    })),
     /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
       zIndex
     }, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { role: "tooltip", ref: refs.setFloating, color, style: floatingStyles, ...getFloatingProps({

package/dist/index.es.js

@@ -794,7 +794,14 @@ const Popover = forwardRef(({
       crossAxis: offset$1.x
     })],
     open,
-    onOpenChange: setOpen,
+    onOpenChange: (value) => {
+      if (value) {
+        openRef.current?.(refs.reference.current, refs.floating.current);
+      } else {
+        closeRef.current?.(refs.reference.current, refs.floating.current);
+      }
+      setOpen(value);
+    },
     whileElementsMounted: autoUpdate
   });
   const handleBlur = useCallback((e) => {
@@ -802,21 +809,23 @@ const Popover = forwardRef(({
     if (onManualClose)
       return onManualClose();
     setOpen(false);
+    closeRef.current?.(refs.reference.current, refs.floating.current);
   }, [onManualClose]);
   useEffect(() => {
     if (disabled && open) {
       setOpen(false);
     }
   }, [disabled, open]);
-  useEffect(() => {
-    if (!open)
-      return;
-    openRef.current?.();
-    return () => closeRef.current?.();
-  }, [open]);
   useImperativeHandle(ref, () => ({
-    open: () => setOpen(true),
-    close: () => setOpen(false)
+    open: () => {
+      setOpen(true);
+      openRef.current?.(refs.reference.current, refs.floating.current);
+    },
+    close: () => {
+      setOpen(false);
+      closeRef.current?.(refs.reference.current, refs.floating.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
   const {
     getFloatingProps,
@@ -827,15 +836,13 @@ const Popover = forwardRef(({
   openRef.current = onOpen;
   closeRef.current = onClose;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    cloneElement(Children.only(label), {
+    cloneElement(Children.only(label), getReferenceProps({
       ref: refs.setReference,
-      ...getReferenceProps({
-        tabIndex: 0,
-        role: "button",
-        disabled,
-        onClick: stopPropagation$1
-      })
-    }),
+      tabIndex: 0,
+      role: "button",
+      disabled,
+      onClick: stopPropagation$1
+    })),
     /* @__PURE__ */ jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsx(FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
       zIndex
     }, children: /* @__PURE__ */ jsx(Tooltip, { role: "tooltip", ref: refs.setFloating, color, style: floatingStyles, ...getFloatingProps({

package/package.json

@@ -2,7 +2,7 @@
   "name": "visits-style",
   "repository": "https://github.com/visits-works/visits-style",
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "1.4.14",
+  "version": "1.4.15",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -27,7 +27,7 @@
     "styled-components": ">=6.0.5"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react": "^0.26.13",
     "eslint-config-react-app": "^7.0.1",
     "polished": "^4.3.1"
   }