visits-style 1.4.11 → 1.4.13

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/forms/Select/index.d.ts

@@ -22,6 +22,8 @@ export interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
     optional?: boolean;
     /** エラーが発生しても、エラーメッセージを出さないようにする */
     noErrorMessage?: boolean;
+    /** 矢印をカスタムしたい場合 */
+    arrow?: ReactNode;
 }
 declare const Select: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/dist/index.cjs.js

@@ -336,6 +336,7 @@ const Select = React.forwardRef(({
   outline,
   optional,
   noErrorMessage,
+  arrow,
   ...rest
 }, ref) => {
   const list = React.useMemo(() => options.map((item) => typeof item === "string" ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: item, children: render ? render(item) : item }, item) : /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.id, children: render ? render(item.name) : item.name }, item.id)), [options, render]);
@@ -344,7 +345,7 @@ const Select = React.forwardRef(({
       placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: !optional, children: placeholder }),
       list
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}),
+    arrow || /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}),
     /* @__PURE__ */ jsxRuntime.jsx(HelpMessage, { help, error, noErrorMessage })
   ] });
 });
@@ -674,7 +675,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 +687,7 @@ function Tooltip$1({
   },
   clientPoint = false,
   disabled
-}) {
+}, ref) => {
   const [open, setOpen] = React.useState(false);
   const nodeId = react.useId();
   const {
@@ -711,6 +712,12 @@ 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), {
@@ -719,7 +726,8 @@ function Tooltip$1({
     }),
     /* @__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"
@@ -1540,7 +1548,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

@@ -328,6 +328,7 @@ const Select = forwardRef(({
   outline,
   optional,
   noErrorMessage,
+  arrow,
   ...rest
 }, ref) => {
   const list = useMemo(() => options.map((item) => typeof item === "string" ? /* @__PURE__ */ jsx("option", { value: item, children: render ? render(item) : item }, item) : /* @__PURE__ */ jsx("option", { value: item.id, children: render ? render(item.name) : item.name }, item.id)), [options, render]);
@@ -336,7 +337,7 @@ const Select = forwardRef(({
       placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: !optional, children: placeholder }),
       list
     ] }),
-    /* @__PURE__ */ jsx(ChevronDown, {}),
+    arrow || /* @__PURE__ */ jsx(ChevronDown, {}),
     /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
   ] });
 });
@@ -666,7 +667,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 +679,7 @@ function Tooltip$1({
   },
   clientPoint = false,
   disabled
-}) {
+}, ref) => {
   const [open, setOpen] = useState(false);
   const nodeId = useId();
   const {
@@ -703,6 +704,12 @@ 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), {
@@ -711,7 +718,8 @@ function Tooltip$1({
     }),
     /* @__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"
@@ -1494,4 +1502,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.11",
+  "version": "1.4.13",
   "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.6",
     "eslint-config-react-app": "^7.0.1",
     "polished": "^4.2.2"
   }