visits-style 1.4.10 → 1.4.12

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

@@ -1,6 +1,12 @@
-import React from 'react';
-import type { Placement } from '@floating-ui/core';
+import React, { MutableRefObject } from 'react';
+import type { Placement, ReferenceElement } from '@floating-ui/core';
 import { ColorType } from '../../types';
+export interface TooltipRef {
+    floating: MutableRefObject<HTMLElement | null>;
+    reference: MutableRefObject<ReferenceElement | null>;
+    open: () => void;
+    close: () => void;
+}
 export interface TooltipProps {
     /** 吹き出しとして表示したい内容 */
     label: React.ReactNode;
@@ -27,4 +33,5 @@ export interface TooltipProps {
     disabled?: boolean;
     className?: string;
 }
-export default function Tooltip({ children, position, label, color, className, offset, clientPoint, disabled, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
+export default Tooltip;

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export * from '../forms';
 export { default as Accordion, type Props as AccordionProps } from './Accordion';
 export { default as AppBar, type Props as AppBarProps } from './AppBar';
-export { default as Tooltip, type TooltipProps } from './Tooltip';
+export { default as Tooltip, type TooltipProps, type TooltipRef } from './Tooltip';
 export { default as Popover, type Props as PopoverProps, type PopoverRef } from './Popover';
 export { default as Portal, type Props as PortalProps } from './Portal';
 export { default as Modal, type Props as ModalProps } from './Modal';

package/dist/index.cjs.js

@@ -674,7 +674,7 @@ const Portal = React__default.default.forwardRef(({
 Portal.displayName = "Portal";
 const Portal$1 = Portal;
 
-function Tooltip$1({
+const Tooltip$1 = React.forwardRef(({
   children,
   position = "bottom",
   label,
@@ -686,7 +686,7 @@ function Tooltip$1({
   },
   clientPoint = false,
   disabled
-}) {
+}, ref) => {
   const [open, setOpen] = React.useState(false);
   const nodeId = react.useId();
   const {
@@ -711,15 +711,22 @@ function Tooltip$1({
   }), react.useClientPoint(context, {
     enabled: clientPoint
   })]);
+  React.useImperativeHandle(ref, () => ({
+    floating: refs.floating,
+    reference: refs.reference,
+    open: () => setOpen(true),
+    close: () => setOpen(false)
+  }));
   const child = typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     React.cloneElement(React.Children.only(child), {
       ref: refs.setReference,
       ...getReferenceProps()
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: open ? /* @__PURE__ */ jsxRuntime.jsx(TooltipWrapper, { className, ref: refs.setFloating, role: "tooltip", $color: color, style: floatingStyles, ...getFloatingProps(), children: label }) : null })
+    /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(TooltipWrapper, { className, ref: refs.setFloating, role: "tooltip", $color: color, style: floatingStyles, ...getFloatingProps(), children: label }) : null })
   ] });
-}
+});
+const Tooltip$2 = Tooltip$1;
 const TooltipWrapper = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Tooltip__TooltipWrapper",
   componentId: "sc-1xyhucq-0"
@@ -835,7 +842,7 @@ const Popover = React.forwardRef(({
         onClick: stopPropagation$1
       })
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: open ? /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
+    /* @__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({
       ...rest,
@@ -1540,7 +1547,7 @@ exports.TextButton = TextButton;
 exports.TextInput = TextInput$1;
 exports.Textarea = Textarea$1;
 exports.Toast = Toast;
-exports.Tooltip = Tooltip$1;
+exports.Tooltip = Tooltip$2;
 exports.arrow = Arrow;
 exports.boxShadow = boxShadow;
 exports.defaultTheme = theme$1;

package/dist/index.es.js

@@ -666,7 +666,7 @@ const Portal = React.forwardRef(({
 Portal.displayName = "Portal";
 const Portal$1 = Portal;
 
-function Tooltip$1({
+const Tooltip$1 = forwardRef(({
   children,
   position = "bottom",
   label,
@@ -678,7 +678,7 @@ function Tooltip$1({
   },
   clientPoint = false,
   disabled
-}) {
+}, ref) => {
   const [open, setOpen] = useState(false);
   const nodeId = useId();
   const {
@@ -703,15 +703,22 @@ function Tooltip$1({
   }), useClientPoint(context, {
     enabled: clientPoint
   })]);
+  useImperativeHandle(ref, () => ({
+    floating: refs.floating,
+    reference: refs.reference,
+    open: () => setOpen(true),
+    close: () => setOpen(false)
+  }));
   const child = typeof children === "string" ? /* @__PURE__ */ jsx("span", { children }) : children;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     cloneElement(Children.only(child), {
       ref: refs.setReference,
       ...getReferenceProps()
     }),
-    /* @__PURE__ */ jsx(Portal$1, { children: open ? /* @__PURE__ */ jsx(TooltipWrapper, { className, ref: refs.setFloating, role: "tooltip", $color: color, style: floatingStyles, ...getFloatingProps(), children: label }) : null })
+    /* @__PURE__ */ jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsx(TooltipWrapper, { className, ref: refs.setFloating, role: "tooltip", $color: color, style: floatingStyles, ...getFloatingProps(), children: label }) : null })
   ] });
-}
+});
+const Tooltip$2 = Tooltip$1;
 const TooltipWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tooltip__TooltipWrapper",
   componentId: "sc-1xyhucq-0"
@@ -827,7 +834,7 @@ const Popover = forwardRef(({
         onClick: stopPropagation$1
       })
     }),
-    /* @__PURE__ */ jsx(Portal$1, { children: open ? /* @__PURE__ */ jsx(FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
+    /* @__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({
       ...rest,
@@ -1494,4 +1501,4 @@ const normalized = /* @__PURE__ */ css(["*,::after,::before{box-sizing:border-bo
 }) => theme.link);
 const normalized$1 = normalized;
 
-export { Accordion, AppBar, Box, Button, ButtonGroup, Checkbox$1 as Checkbox, Col$1 as Col, Container, index$3 as Content, index as Divider, Field, Approved as IconApproved, ChevronDown as IconArrowDown, ChevronLeftRound as IconChevronLeftRound, ChevronRightRound as IconChevronRightRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, PencilSimple as IconPencilSimple, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Modal, index$2 as Placeholder, Popover$1 as Popover, Portal$1 as Portal, Progress, Radio$1 as Radio, Row, Select$1 as Select, Spinner$1 as Spinner, Switch$1 as Switch, index$1 as Table, Tag, TextButton, TextInput$1 as TextInput, Textarea$1 as Textarea, Toast, Tooltip$1 as Tooltip, Arrow as arrow, boxShadow, theme$1 as defaultTheme, findColorInvert, hamburger as hambuger, mediaDesktop, mediaFullHD, mediaMobile, mediaTablet, mediaUntilFullHD, normalized$1 as normalizeStyle, setSize };
+export { Accordion, AppBar, Box, Button, ButtonGroup, Checkbox$1 as Checkbox, Col$1 as Col, Container, index$3 as Content, index as Divider, Field, Approved as IconApproved, ChevronDown as IconArrowDown, ChevronLeftRound as IconChevronLeftRound, ChevronRightRound as IconChevronRightRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, PencilSimple as IconPencilSimple, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Modal, index$2 as Placeholder, Popover$1 as Popover, Portal$1 as Portal, Progress, Radio$1 as Radio, Row, Select$1 as Select, Spinner$1 as Spinner, Switch$1 as Switch, index$1 as Table, Tag, TextButton, TextInput$1 as TextInput, Textarea$1 as Textarea, Toast, Tooltip$2 as Tooltip, Arrow as arrow, boxShadow, theme$1 as defaultTheme, findColorInvert, hamburger as hambuger, mediaDesktop, mediaFullHD, mediaMobile, mediaTablet, mediaUntilFullHD, normalized$1 as normalizeStyle, setSize };

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.10",
+  "version": "1.4.12",
   "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.25.0",
+    "@floating-ui/react": "^0.26.4",
     "eslint-config-react-app": "^7.0.1",
     "polished": "^4.2.2"
   }