@remember-web/primitive 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/src/Floating/Tooltip/index.cjs.js +4 -1
  2. package/dist/src/Floating/Tooltip/index.cjs.js.map +1 -1
  3. package/dist/src/Floating/Tooltip/index.d.ts +1 -1
  4. package/dist/src/Floating/Tooltip/index.d.ts.map +1 -1
  5. package/dist/src/Floating/Tooltip/index.esm.js +4 -1
  6. package/dist/src/Floating/Tooltip/index.esm.js.map +1 -1
  7. package/dist/src/Floating/Tooltip/types.cjs.js.map +1 -1
  8. package/dist/src/Floating/Tooltip/types.d.ts +1 -0
  9. package/dist/src/Floating/Tooltip/types.d.ts.map +1 -1
  10. package/dist/src/Floating/Tooltip/types.esm.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/Floating/Tooltip/Tooltip.stories.tsx +6 -2
  13. package/src/Floating/Tooltip/index.tsx +2 -0
  14. package/src/Floating/Tooltip/types.ts +1 -0
package/dist/src/Floating/Tooltip/index.cjs.js CHANGED
@@ -36,7 +36,7 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
36
36
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
37
37
  var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
38
38
 
39
- var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
39
+ var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
40
40
  var hoverable = shared.isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
41
41
  function Tooltip(_ref) {
42
42
  var children = _ref.children,
@@ -47,6 +47,8 @@ function Tooltip(_ref) {
47
47
  side = _ref$side === void 0 ? 'top' : _ref$side,
48
48
  _ref$gap = _ref.gap,
49
49
  gap = _ref$gap === void 0 ? 4 : _ref$gap,
50
+ _ref$avoidCollisions = _ref.avoidCollisions,
51
+ avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
50
52
  onOpenChange = _ref.onOpenChange,
51
53
  onClickOutside = _ref.onClickOutside,
52
54
  props = _objectWithoutProperties__default.default(_ref, _excluded);
@@ -113,6 +115,7 @@ function Tooltip(_ref) {
113
115
  }
114
116
  onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
115
117
  },
118
+ avoidCollisions: avoidCollisions,
116
119
  collisionPadding: 20,
117
120
  onClick: function onClick(e) {
118
121
  _onClick === null || _onClick === void 0 || _onClick(e);
package/dist/src/Floating/Tooltip/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n avoidCollisions = true,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n avoidCollisions={avoidCollisions}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
package/dist/src/Floating/Tooltip/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { type PropsWithChildren } from 'react';
2
2
  import { type TooltipProps, type TooltipSize, type TooltipType } from './types';
3
- export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
3
+ export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, avoidCollisions, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
4
4
  //# sourceMappingURL=index.d.ts.map
package/dist/src/Floating/Tooltip/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAuF7C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,eAAsB,EACtB,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAwF7C"}
package/dist/src/Floating/Tooltip/index.esm.js CHANGED
@@ -10,7 +10,7 @@ import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButt
10
10
  import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
11
11
  import { jsx, jsxs } from 'react/jsx-runtime';
12
12
 
13
- var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
13
+ var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
14
14
  var hoverable = isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
15
15
  function Tooltip(_ref) {
16
16
  var children = _ref.children,
@@ -21,6 +21,8 @@ function Tooltip(_ref) {
21
21
  side = _ref$side === void 0 ? 'top' : _ref$side,
22
22
  _ref$gap = _ref.gap,
23
23
  gap = _ref$gap === void 0 ? 4 : _ref$gap,
24
+ _ref$avoidCollisions = _ref.avoidCollisions,
25
+ avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
24
26
  onOpenChange = _ref.onOpenChange,
25
27
  onClickOutside = _ref.onClickOutside,
26
28
  props = _objectWithoutProperties(_ref, _excluded);
@@ -87,6 +89,7 @@ function Tooltip(_ref) {
87
89
  }
88
90
  onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
89
91
  },
92
+ avoidCollisions: avoidCollisions,
90
93
  collisionPadding: 20,
91
94
  onClick: function onClick(e) {
92
95
  _onClick === null || _onClick === void 0 || _onClick(e);
package/dist/src/Floating/Tooltip/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n avoidCollisions = true,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n avoidCollisions={avoidCollisions}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
package/dist/src/Floating/Tooltip/types.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;;"}
1
+ {"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n avoidCollisions?: PopperContentProps['avoidCollisions'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;;"}
package/dist/src/Floating/Tooltip/types.d.ts CHANGED
@@ -8,6 +8,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
8
8
  defaultOpen?: boolean;
9
9
  gap?: 4 | 8 | (number & {});
10
10
  side?: PopperContentProps['side'];
11
+ avoidCollisions?: PopperContentProps['avoidCollisions'];
11
12
  type?: Type;
12
13
  size?: Size;
13
14
  contentOptions?: TooltipContentOptionProps;
package/dist/src/Floating/Tooltip/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}
package/dist/src/Floating/Tooltip/types.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;"}
1
+ {"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n avoidCollisions?: PopperContentProps['avoidCollisions'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remember-web/primitive",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "description": "Remember Web Primitive Components",
5
5
  "homepage": "https://dramancompany.github.io/remember-web-packages/",
6
6
  "author": "Remember",
package/src/Floating/Tooltip/Tooltip.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { IconAlarm } from '@remember-web/icon';
1
+ import { IconAlarmM } from '@remember-web/icon';
2
2
  import type { Meta, StoryObj } from '@storybook/react-vite';
3
3
 
4
4
  import { Button } from '@/Buttons';
@@ -28,6 +28,10 @@ const meta = {
28
28
  defaultValue: false,
29
29
  type: 'boolean',
30
30
  },
31
+ avoidCollisions: {
32
+ defaultValue: true,
33
+ type: 'boolean',
34
+ },
31
35
  },
32
36
  } satisfies Meta<typeof Tooltip>;
33
37
 
@@ -47,7 +51,7 @@ export const Default: Story = {
47
51
  render: ({ ...props }) => (
48
52
  <Flex gap={24}>
49
53
  <Tooltip {...props}>
50
- <IconAlarm size={24} />
54
+ <IconAlarmM />
51
55
  </Tooltip>
52
56
  <Tooltip {...props}>
53
57
  <Button>버튼</Button>
package/src/Floating/Tooltip/index.tsx CHANGED
@@ -29,6 +29,7 @@ export default function Tooltip<
29
29
  defaultOpen,
30
30
  side = 'top',
31
31
  gap = 4,
32
+ avoidCollisions = true,
32
33
  onOpenChange,
33
34
  onClickOutside,
34
35
  ...props
@@ -92,6 +93,7 @@ export default function Tooltip<
92
93
  }
93
94
  onClickOutside?.(e);
94
95
  }}
96
+ avoidCollisions={avoidCollisions}
95
97
  collisionPadding={20}
96
98
  onClick={(e) => {
97
99
  if (isClickType) {
package/src/Floating/Tooltip/types.ts CHANGED
@@ -14,6 +14,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
14
14
  defaultOpen?: boolean;
15
15
  gap?: 4 | 8 | (number & {});
16
16
  side?: PopperContentProps['side'];
17
+ avoidCollisions?: PopperContentProps['avoidCollisions'];
17
18
  type?: Type;
18
19
  size?: Size;
19
20
  contentOptions?: TooltipContentOptionProps;