@channel.io/bezier-react 1.6.2 → 1.7.0

package/dist/cjs/components/Tooltip/Tooltip.styled.js

@@ -1,41 +1,112 @@
 'use strict';
 
 var ZIndex = require('../../constants/ZIndex.js');
-var Typography = require('../../foundation/Typography.js');
+var Text = require('../Text/Text.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+var AlphaStack = require('../AlphaStack/AlphaStack.js');
+var Typography = require('../../foundation/Typography.js');
+var Icon$1 = require('../Icon/Icon.js');
+var Icon_types = require('../Icon/Icon.types.js');
+var index = require('../../foundation/Transition/index.js');
+var styled = require('styled-components');
 var Mixins = require('../../foundation/Mixins.js');
 
-const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__Container",
+const fadeIn = styled.keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+const SLIDE_OFFSET = 2;
+const slideUp = styled.keyframes`
+  from {
+    transform: translateY(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`;
+const slideRight = styled.keyframes`
+  from {
+    transform: translateX(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+const slideDown = styled.keyframes`
+  from {
+    transform: translateY(-${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`;
+const slideLeft = styled.keyframes`
+  from {
+    transform: translateX(${SLIDE_OFFSET}px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+const getSlideAnimation = frames => FoundationStyledComponent.css`
+  animation-name: ${() => frames}, ${() => fadeIn};
+  animation-duration: ${index.TransitionDuration.M}ms;
+  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
+`;
+const TooltipContent = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).attrs({
+  direction: 'horizontal',
+  spacing: 4
+}).withConfig({
+  displayName: "Tooltipstyled__TooltipContent",
   componentId: "sc-51cb65-0"
-})(["position:relative;"]);
-const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__ContentWrapper",
+})(["z-index:", ";box-sizing:border-box;width:max-content;max-width:260px;height:max-content;padding:5px 8px;word-break:normal;word-wrap:break-word;", ";", ";&[data-side=\"top\"]{", "}&[data-side=\"right\"]{", "}&[data-side=\"bottom\"]{", "}&[data-side=\"left\"]{", "}", ""], ZIndex.ZIndex.Tooltip, ({
+  foundation
+}) => foundation?.elevation?.ev3(true), ({
+  foundation
+}) => foundation?.rounding?.round8, getSlideAnimation(slideUp), getSlideAnimation(slideRight), getSlideAnimation(slideDown), getSlideAnimation(slideLeft), ({
+  interpolation
+}) => interpolation);
+const TextContainer = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Tooltipstyled__TextContainer",
   componentId: "sc-51cb65-1"
-})(["position:absolute;top:0;left:0;z-index:", ";", ""], ZIndex.ZIndex.Tooltip, ({
-  disabled
-}) => disabled && FoundationStyledComponent.css`
-    display: none;
-  `);
-const Content = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+})(["overflow:hidden;"]);
+const Content = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  typo: Typography.Typography.Size13
+}).withConfig({
   displayName: "Tooltipstyled__Content",
   componentId: "sc-51cb65-2"
-})(["box-sizing:border-box;width:max-content;max-width:260px;height:max-content;padding:8px 14px;color:", ";word-break:normal;word-wrap:break-word;", ";", ";", ""], ({
+})(["color:", ";", " white-space:pre-wrap;"], ({
   foundation
-}) => foundation?.subTheme?.['txt-black-darkest'], ({
+}) => foundation?.subTheme?.['txt-black-darkest'], Mixins.ellipsis(20, Typography.LineHeightAbsoluteNumber.Lh18));
+const Description = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).attrs({
+  typo: Typography.Typography.Size12
+}).withConfig({
+  displayName: "Tooltipstyled__Description",
+  componentId: "sc-51cb65-3"
+})(["color:", ";"], ({
   foundation
-}) => foundation?.elevation?.ev2(true), ({
+}) => foundation?.subTheme?.['txt-black-dark']);
+const Icon = /*#__PURE__*/FoundationStyledComponent.styled(Icon$1.Icon).attrs({
+  size: Icon_types.IconSize.XS
+}).withConfig({
+  displayName: "Tooltipstyled__Icon",
+  componentId: "sc-51cb65-4"
+})(["padding:1px;color:", ";"], ({
   foundation
-}) => foundation?.rounding?.round8, ({
-  interpolation
-}) => interpolation);
-const EllipsisableContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
-  displayName: "Tooltipstyled__EllipsisableContent",
-  componentId: "sc-51cb65-3"
-})(["", ""], Mixins.ellipsis(20, Typography.LineHeightAbsoluteNumber.Lh18));
+}) => foundation?.subTheme?.['txt-black-darkest']);
 
-exports.Container = Container;
 exports.Content = Content;
-exports.ContentWrapper = ContentWrapper;
-exports.EllipsisableContent = EllipsisableContent;
+exports.Description = Description;
+exports.Icon = Icon;
+exports.TextContainer = TextContainer;
+exports.TooltipContent = TooltipContent;
 //# sourceMappingURL=Tooltip.styled.js.map

package/dist/cjs/components/Tooltip/Tooltip.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styled.js","sources":["../../../../src/components/Tooltip/Tooltip.styled.ts"],"sourcesContent":["import {\n  LineHeightAbsoluteNumber,\n  css,\n  ellipsis,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\ninterface ContentWrapperProps {\n  disabled: boolean\n}\n\nexport const Container = styled.div`\n  position: relative;\n`\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: ${ZIndex.Tooltip};\n\n  ${({ disabled }) => disabled && css`\n    display: none;\n  `}\n`\n\nexport const Content = styled.div<InterpolationProps>`\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 260px;\n  height: max-content;\n  padding: 8px 14px;\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n  word-break: normal;\n  word-wrap: break-word;\n  ${({ foundation }) => foundation?.elevation?.ev2(true)};\n  ${({ foundation }) => foundation?.rounding?.round8};\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const EllipsisableContent = styled.div`\n  ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","ContentWrapper","ZIndex","Tooltip","disabled","css","Content","foundation","subTheme","elevation","ev2","rounding","round8","interpolation","EllipsisableContent","ellipsis","LineHeightAbsoluteNumber","Lh18"],"mappings":";;;;;;;MAcaA,SAAS,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAElC,CAAA,CAAA,CAAA,oBAAA,CAAA,EAAA;MACYC,cAAc,gBAAGL,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAI3BE,aAAM,CAACC,OAAO,EAEvB,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,6BAAI,CAAA;AACtC;AACA,EAAA,CAAG,EACF;MAEYC,OAAO,gBAAGV,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oGAAA,EAAA,0CAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAMtB,CAAC;AAAEO,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,QAAQ,GAAG,mBAAmB,CAAC,EAGtE,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEE,SAAS,EAAEC,GAAG,CAAC,IAAI,CAAC,EACpD,CAAC;AAAEH,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEI,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,mBAAmB,gBAAGlB,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACzCe,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EAAAA,eAAQ,CAAC,EAAE,EAAEC,mCAAwB,CAACC,IAAI,CAAC;;;;;;;"}
+{"version":3,"file":"Tooltip.styled.js","sources":["../../../../src/components/Tooltip/Tooltip.styled.ts"],"sourcesContent":["import {\n  LineHeightAbsoluteNumber,\n  TransitionDuration,\n  Typography,\n  css,\n  ellipsis,\n  keyframes,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\nimport {\n  Icon as BaseIcon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type TooltipProps } from './Tooltip.types'\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`\n\nconst SLIDE_OFFSET = 2\n\nconst slideUp = keyframes`\n  from {\n    transform: translateY(${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`\n\nconst slideRight = keyframes`\n  from {\n    transform: translateX(-${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideDown = keyframes`\n  from {\n    transform: translateY(-${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`\n\nconst slideLeft = keyframes`\n  from {\n    transform: translateX(${SLIDE_OFFSET}px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst getSlideAnimation = (frames: ReturnType<typeof keyframes>) => css`\n  animation-name: ${() => frames}, ${() => fadeIn};\n  animation-duration: ${TransitionDuration.M}ms;\n  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);\n`\n\nexport const TooltipContent = styled(AlphaStack).attrs({\n  direction: 'horizontal',\n  spacing: 4,\n})<TooltipProps>`\n  z-index: ${ZIndex.Tooltip};\n\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 260px;\n  height: max-content;\n  padding: 5px 8px;\n  word-break: normal;\n  word-wrap: break-word;\n\n  ${({ foundation }) => foundation?.elevation?.ev3(true)};\n  ${({ foundation }) => foundation?.rounding?.round8};\n\n  &[data-side=\"top\"] {\n    ${getSlideAnimation(slideUp)}\n  }\n\n  &[data-side=\"right\"] {\n    ${getSlideAnimation(slideRight)}\n  }\n\n  &[data-side=\"bottom\"] {\n    ${getSlideAnimation(slideDown)}\n  }\n\n  &[data-side=\"left\"] {\n    ${getSlideAnimation(slideLeft)}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const TextContainer = styled.div`\n  overflow: hidden;\n`\n\nexport const Content = styled(Text).attrs({ typo: Typography.Size13 })`\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n  /* NOTE: Line height of Typography.Size13  */\n  ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}\n  white-space: pre-wrap;\n`\n\nexport const Description = styled(Text).attrs({ typo: Typography.Size12 })`\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-dark']};\n`\n\nexport const Icon = styled(BaseIcon).attrs({\n  size: IconSize.XS,\n})`\n  padding: 1px;\n  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};\n`\n"],"names":["fadeIn","keyframes","SLIDE_OFFSET","slideUp","slideRight","slideDown","slideLeft","getSlideAnimation","frames","css","TransitionDuration","M","TooltipContent","styled","AlphaStack","attrs","direction","spacing","withConfig","displayName","componentId","ZIndex","Tooltip","foundation","elevation","ev3","rounding","round8","interpolation","TextContainer","div","Content","Text","typo","Typography","Size13","subTheme","ellipsis","LineHeightAbsoluteNumber","Lh18","Description","Size12","Icon","BaseIcon","size","IconSize","XS"],"mappings":";;;;;;;;;;;;;AAqBA,MAAMA,MAAM,GAAGC,gBAAU,CAAA;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,YAAY,GAAG,CAAC,CAAA;AAEtB,MAAMC,OAAO,GAAGF,gBAAU,CAAA;AAC1B;AACA,0BAAA,EAA4BC,YAAa,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAME,UAAU,GAAGH,gBAAU,CAAA;AAC7B;AACA,2BAAA,EAA6BC,YAAa,CAAA;AAC1C;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMG,SAAS,GAAGJ,gBAAU,CAAA;AAC5B;AACA,2BAAA,EAA6BC,YAAa,CAAA;AAC1C;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMI,SAAS,GAAGL,gBAAU,CAAA;AAC5B;AACA,0BAAA,EAA4BC,YAAa,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMK,iBAAiB,GAAIC,MAAoC,IAAKC,6BAAI,CAAA;AACxE,kBAAA,EAAoB,MAAMD,MAAO,CAAI,EAAA,EAAA,MAAMR,MAAO,CAAA;AAClD,sBAAwBU,EAAAA,wBAAkB,CAACC,CAAE,CAAA;AAC7C;AACA,CAAC,CAAA;AAEM,MAAMC,cAAc,gBAAGC,gCAAM,CAACC,qBAAU,CAAC,CAACC,KAAK,CAAC;AACrDC,EAAAA,SAAS,EAAE,YAAY;AACvBC,EAAAA,OAAO,EAAE,CAAA;AACX,CAAC,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,qIAAA,EAAA,GAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,yBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACWC,aAAM,CAACC,OAAO,EAUvB,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,CAAC,IAAI,CAAC,EACpD,CAAC;AAAEF,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEG,QAAQ,EAAEC,MAAM,EAG9CpB,iBAAiB,CAACJ,OAAO,CAAC,EAI1BI,iBAAiB,CAACH,UAAU,CAAC,EAI7BG,iBAAiB,CAACF,SAAS,CAAC,EAI5BE,iBAAiB,CAACD,SAAS,CAAC,EAG9B,CAAC;AAAEsB,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,aAAa,gBAAGhB,gCAAM,CAACiB,GAAG,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAEtC,CAAA,CAAA,CAAA,kBAAA,CAAA,EAAA;AAEM,MAAMW,OAAO,gBAAGlB,gCAAM,CAACmB,YAAI,CAAC,CAACjB,KAAK,CAAC;EAAEkB,IAAI,EAAEC,qBAAU,CAACC,MAAAA;AAAO,CAAC,CAAC,CAAAjB,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,EAC3D,CAAC;AAAEG,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEa,QAAQ,GAAG,mBAAmB,CAAC,EAEtEC,eAAQ,CAAC,EAAE,EAAEC,mCAAwB,CAACC,IAAI,CAAC,EAE9C;AAEM,MAAMC,WAAW,gBAAG3B,gCAAM,CAACmB,YAAI,CAAC,CAACjB,KAAK,CAAC;EAAEkB,IAAI,EAAEC,qBAAU,CAACO,MAAAA;AAAO,CAAC,CAAC,CAAAvB,UAAA,CAAA;EAAAC,WAAA,EAAA,4BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,GAAA,CAAA,EAC/D,CAAC;AAAEG,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEa,QAAQ,GAAG,gBAAgB,CAAC,EACtE;AAEM,MAAMM,IAAI,gBAAG7B,gCAAM,CAAC8B,WAAQ,CAAC,CAAC5B,KAAK,CAAC;EACzC6B,IAAI,EAAEC,mBAAQ,CAACC,EAAAA;AACjB,CAAC,CAAC,CAAA5B,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,GAAA,CAAA,EAES,CAAC;AAAEG,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEa,QAAQ,GAAG,mBAAmB,CAAC;;;;;;;;"}

package/dist/cjs/components/Tooltip/Tooltip.types.js

@@ -1,5 +1,8 @@
 'use strict';
 
+/**
+ * An enumeration that determines the position of `Tooltip`.
+ */
 let TooltipPosition = /*#__PURE__*/function (TooltipPosition) {
   TooltipPosition["TopCenter"] = "topCenter";
   TooltipPosition["TopLeft"] = "topLeft";

package/dist/cjs/components/Tooltip/Tooltip.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type Ref } from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n  type RenderConfigProps,\n} from '~/src/types/ComponentProps'\n\ninterface TooltipOptions {\n  placement?: TooltipPosition\n  offset?: number\n  keepInContainer?: boolean\n  allowHover?: boolean\n  delayShow?: number\n  delayHide?: number\n  contentTestId?: string\n  lazy?: boolean\n}\n\nexport default interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  ContentProps,\n  DisableProps,\n  AdditionalStylableProps<'content' | 'contentWrapper'>,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps>,\n  TooltipOptions {\n}\n\nexport interface TooltipContentProps extends Pick<\nTooltipOptions,\n'keepInContainer' |\n'placement' |\n'offset' |\n'allowHover'\n>,\n  RenderConfigProps,\n  ContentProps,\n  AdditionalStylableProps<'content' | 'contentWrapper'>,\n  DisableProps {\n  tooltipContainer: HTMLDivElement | null\n  forwardedRef: Ref<HTMLDivElement>\n}\n\nexport interface GetTooltipStyle extends Required<Pick<TooltipOptions, 'placement' | 'offset' | 'allowHover'>> {\n  tooltipContainer: HTMLDivElement\n}\n\nexport interface GetReplacement extends Required<Pick<TooltipOptions, 'placement' | 'keepInContainer'>> {\n  tooltip: HTMLDivElement\n}\n\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n"],"names":["TooltipPosition"],"mappings":";;AAuDYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n} from '~/src/types/ComponentProps'\n\n/**\n * An enumeration that determines the position of `Tooltip`.\n */\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n\ninterface TooltipProviderOptions {\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * @default 0\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @default 0\n   */\n  skipDelayShow?: number\n}\n\ninterface TooltipOptions {\n  /**\n   * The open state of the tooltip when it is initially rendered.\n   */\n  defaultShow?: boolean\n  /**\n   * An element that sits below the tooltip content.\n   */\n  description?: React.ReactNode\n  /**\n   * A decorative icon that sits right of the tooltip content.\n   */\n  icon?: BezierIcon\n  /**\n   * Options to determine the location from the trigger.\n   * @default TooltipPosition.BottomCenter\n   */\n  placement?: TooltipPosition\n  /**\n   * The distance in pixels from the trigger.\n   * @default 4\n   */\n  offset?: number\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  /**\n   * When `true`, overrides the `position` of the tooltip\n   * to prevent collisions with boundary edges.\n   * @default true\n   */\n  keepInContainer?: boolean\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * Callback function to be called when the tooltip is opened.\n   */\n  onShow?: () => void\n  /**\n   * Callback function to be called when the tooltip is closed.\n   */\n  onHide?: () => void\n  /**\n   * Event handler called when the escape key is down.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the component.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void\n}\n\nexport interface TooltipProviderProps extends\n  ChildrenProps,\n  TooltipProviderOptions {}\n\nexport interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps<React.ReactElement>,\n  ContentProps,\n  DisableProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps | keyof ChildrenProps>,\n  TooltipOptions {}\n"],"names":["TooltipPosition"],"mappings":";;AASA;AACA;AACA;AACYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/index.js

@@ -13,10 +13,6 @@ var stringUtils = require('./utils/stringUtils.js');
 var useFormControlContext = require('./components/Forms/useFormControlContext.js');
 var useFormFieldProps = require('./components/Forms/useFormFieldProps.js');
 var useKeyboardActionLockerWhileComposing = require('./components/Forms/useKeyboardActionLockerWhileComposing.js');
-var Help = require('./components/Help/Help.js');
-var ListMenuTitle = require('./components/ListMenuTitle/ListMenuTitle.js');
-var SectionLabel = require('./components/SectionLabel/SectionLabel.js');
-var Spinner = require('./components/Spinner/Spinner.js');
 var ToastProvider = require('./components/Toast/ToastProvider.js');
 var BaseFoundation = require('./foundation/BaseFoundation.js');
 var index = require('./foundation/Spacing/index.js');
@@ -67,12 +63,14 @@ var SegmentedControl_types = require('./components/Forms/SegmentedControl/Segmen
 var Slider = require('./components/Forms/Slider/Slider.js');
 var Switch = require('./components/Forms/Switch/Switch.js');
 var Switch_types = require('./components/Forms/Switch/Switch.types.js');
+var Help = require('./components/Help/Help.js');
 var Icon = require('./components/Icon/Icon.js');
 var Icon_types = require('./components/Icon/Icon.types.js');
 var KeyValueListItem = require('./components/KeyValueListItem/KeyValueListItem.js');
 var KeyValueMultiLineListItem = require('./components/KeyValueListItem/KeyValueMultiLineListItem.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var ListItem_types = require('./components/ListItem/ListItem.types.js');
+var ListMenuTitle = require('./components/ListMenuTitle/ListMenuTitle.js');
 var Modal = require('./components/Modals/Modal/Modal.js');
 var ModalContent = require('./components/Modals/Modal/ModalContent.js');
 var ModalHeader = require('./components/Modals/Modal/ModalHeader.js');
@@ -94,6 +92,8 @@ var Overlay = require('./components/Overlay/Overlay.js');
 var Overlay_types = require('./components/Overlay/Overlay.types.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var ProgressBar_types = require('./components/ProgressBar/ProgressBar.types.js');
+var SectionLabel = require('./components/SectionLabel/SectionLabel.js');
+var Spinner = require('./components/Spinner/Spinner.js');
 var Spinner_types = require('./components/Spinner/Spinner.types.js');
 var HStack = require('./components/Stack/HStack/HStack.js');
 var Spacer = require('./components/Stack/Spacer/Spacer.js');
@@ -125,6 +125,8 @@ var AlphaSmoothCornersBox = require('./components/AlphaSmoothCornersBox/AlphaSmo
 var LegacyIcon = require('./components/LegacyIcon/LegacyIcon.js');
 var utils = require('./components/LegacyIcon/utils.js');
 var LegacyRadio = require('./components/LegacyRadio/LegacyRadio.js');
+var LegacyTooltip = require('./components/LegacyTooltip/LegacyTooltip.js');
+var LegacyTooltip_types = require('./components/LegacyTooltip/LegacyTooltip.types.js');
 var LegacySegmentedControl = require('./components/LegacySegmentedControl/LegacySegmentedControl.js');
 var LegacySegmentedControl_types = require('./components/LegacySegmentedControl/LegacySegmentedControl.types.js');
 var Feature = require('./features/Feature.js');
@@ -150,11 +152,6 @@ exports.StringUtils = stringUtils;
 exports.useFormControlContext = useFormControlContext.default;
 exports.useFormFieldProps = useFormFieldProps.default;
 exports.useKeyboardActionLockerWhileComposing = useKeyboardActionLockerWhileComposing.default;
-exports.HELP_DISPLAY_NAME = Help.HELP_DISPLAY_NAME;
-exports.Help = Help.default;
-exports.ListMenuTitle = ListMenuTitle.default;
-exports.SectionLabel = SectionLabel.default;
-exports.Spinner = Spinner.default;
 exports.ToastProvider = ToastProvider.default;
 exports.DarkFoundation = BaseFoundation.DarkFoundation;
 exports.LightFoundation = BaseFoundation.LightFoundation;
@@ -235,6 +232,8 @@ exports.SegmentedControlSize = SegmentedControl_types.SegmentedControlSize;
 exports.Slider = Slider.Slider;
 exports.Switch = Switch.Switch;
 exports.SwitchSize = Switch_types.SwitchSize;
+exports.HELP_DISPLAY_NAME = Help.HELP_DISPLAY_NAME;
+exports.Help = Help.default;
 exports.Icon = Icon.Icon;
 exports.IconSize = Icon_types.IconSize;
 exports.KeyValueListItem = KeyValueListItem.default;
@@ -242,6 +241,7 @@ exports.KeyValueMultiLineListItem = KeyValueMultiLineListItem.default;
 exports.ListItem = ListItem.default;
 exports.ListItemSize = ListItem_types.ListItemSize;
 exports.ListItemVariant = ListItem_types.ListItemVariant;
+exports.ListMenuTitle = ListMenuTitle.default;
 exports.Modal = Modal.Modal;
 exports.ModalContent = ModalContent.ModalContent;
 exports.ModalHeader = ModalHeader.ModalHeader;
@@ -266,6 +266,8 @@ exports.OverlayPosition = Overlay_types.OverlayPosition;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressBarSize = ProgressBar_types.ProgressBarSize;
 exports.ProgressBarVariant = ProgressBar_types.ProgressBarVariant;
+exports.SectionLabel = SectionLabel.default;
+exports.Spinner = Spinner.default;
 exports.SpinnerSize = Spinner_types.SpinnerSize;
 exports.SpinnerThickness = Spinner_types.SpinnerThickness;
 exports.HStack = HStack.HStack;
@@ -295,7 +297,8 @@ exports.ToastAppearance = Toast_types.ToastAppearance;
 exports.ToastIconColor = Toast_types.ToastIconColor;
 exports.ToastPlacement = Toast_types.ToastPlacement;
 exports.ToastPreset = Toast_types.ToastPreset;
-exports.Tooltip = Tooltip.default;
+exports.Tooltip = Tooltip.Tooltip;
+exports.TooltipProvider = Tooltip.TooltipProvider;
 exports.TooltipPosition = Tooltip_types.TooltipPosition;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.AlphaCenter = AlphaCenter.AlphaCenter;
@@ -304,6 +307,8 @@ exports.AlphaSmoothCornersBox = AlphaSmoothCornersBox.AlphaSmoothCornersBox;
 exports.LegacyIcon = LegacyIcon.default;
 exports.isIconName = utils.isIconName;
 exports.LegacyRadio = LegacyRadio.LegacyRadio;
+exports.LegacyTooltip = LegacyTooltip.LegacyTooltip;
+exports.LegacyTooltipPosition = LegacyTooltip_types.LegacyTooltipPosition;
 exports.LegacySegmentedControl = LegacySegmentedControl.default;
 exports.LegacySegmentedControlSize = LegacySegmentedControl_types.LegacySegmentedControlSize;
 exports.FeatureType = Feature.FeatureType;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}