@e1011/es-kit 1.1.56 → 1.1.60

package/dist/types/src/core/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useApi';
 export * from './useToggle';
+export * from './useToggle2';
 export * from './useOutsideClick';
 export * from './useResize';
 export * from './useClassNames';

package/dist/types/src/core/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/types/src/core/hooks/useToggle2.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Type definition for the return value of the `useToggle` hook.
+ * @typedef {Array} useToggleReturnType
+ * @property {boolean} 0 - The current toggled state.
+ * @property {(value?: any | boolean) => void} 1 - Function to toggle the state.
+ * @property {(value?: any | boolean) => void} 2 - Function to forcefully set the state to true.
+ * @property {(value?: any | boolean) => void} 3 - Function to forcefully set the state to false.
+ */
+export type useToggleReturnType2 = [
+    boolean,
+    (value?: any | boolean) => void,
+    (value?: any | boolean) => void,
+    (value?: any | boolean) => void
+];
+/**
+ * Custom hook to manage a boolean state with toggle functionality.
+ * @param {boolean} defaultValue - The initial value of the toggled state.
+  * @returns {useToggleReturnType2} An array containing the current state, a toggle function,
+ * and functions to set the state to true or false.
+ */
+export declare const useToggle2: (defaultValue: boolean) => useToggleReturnType2;
+//# sourceMappingURL=useToggle2.d.ts.map

package/dist/types/src/core/hooks/useToggle2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle2.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/useToggle2.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO;IACP,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,OAAO,KAAK,IAAI;IAC/B,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,OAAO,KAAK,IAAI;IAC/B,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,OAAO,KAAK,IAAI;CAChC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,iBAAkB,OAAO,KAAG,oBA8BlD,CAAA"}

package/dist/types/src/core/ui/components/molecules/popover/Popover.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,SAAS,EAC8B,MAAM,OAAO,CAAA;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAOvC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;wBAO3D,IAAI;AAHT,wBAGS;AAkCT,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,KAAK,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,CAAA;AAErD,eAAO,MAAM,cAAc;wBAAuB,KAAK,GAAG,SAAS;;;;;;;;;;;CASlE,CAAA;AAoBD,eAAO,MAAM,qBAAqB;wBAAuB,KAAK,GAAG,SAAS;;;;;;;;;;;CAiBzE,CAAA;AAoBD,eAAO,MAAM,kBAAkB;WAAU,KAAK,GAAG,SAAS;;;;;;CAOzD,CAAA;AA6CD,KAAK,MAAM,GAAG,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE3E,eAAO,MAAM,oBAAoB;4CAA2C,MAAM,GAAG,SAAS;;;;;;;;CAiD7F,CAAA;AAUD,eAAO,MAAM,+BAA+B;+BAA8B,MAAM,GAAG,SAAS;;;;;;;CAU3F,CAAA"}
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,SAAS,EAC8B,MAAM,OAAO,CAAA;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAOvC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;wBAQ3D,IAAI;AAHT,wBAGS;AAkCT,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,KAAK,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,CAAA;AAErD,eAAO,MAAM,cAAc;wBAAuB,KAAK,GAAG,SAAS;;;;;;;;;;;CASlE,CAAA;AAoBD,eAAO,MAAM,qBAAqB;wBAAuB,KAAK,GAAG,SAAS;;;;;;;;;;;CAsBzE,CAAA;AAoBD,eAAO,MAAM,kBAAkB;WAAU,KAAK,GAAG,SAAS;;;;;;CAOzD,CAAA;AA6CD,KAAK,MAAM,GAAG,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE3E,eAAO,MAAM,oBAAoB;4CAA2C,MAAM,GAAG,SAAS;;;;;;;;CAiD7F,CAAA;AAUD,eAAO,MAAM,+BAA+B;+BAA8B,MAAM,GAAG,SAAS;;;;;;;CAU3F,CAAA"}

package/dist/types/src/core/ui/components/molecules/popover/Tooltip.d.ts

@@ -1,13 +1,33 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { PopoverProps } from './popover.types';
 /**
 
+Props for the TooltipContent component.
+@typedef {Object} TooltipContentProps
+@property {ForwardedRef} forwardedRef - Forwarded ref of the TooltipContent component.
+@property {string} title - Title of the tooltip.
+@property {string} text - Text content of the tooltip.
+@property {Function} hide - Function to hide the tooltip.
+@property {boolean} showClose - Determines whether to show a close button in the tooltip.
+@extends PropsWithChildren
+*/
+type TooltipContentProps = PropsWithChildren<any> & {
+    forwardedRef: ForwardedRef;
+    closeIconUrl?: string;
+    className?: string;
+    title?: string;
+    text?: string;
+    hide: () => void;
+    showClose?: boolean;
+};
+/**
+
 Props for the Tooltip component, extends PopoverProps.
 @typedef {Object} TooltipProps
 @property {Record<string, unknown>} [tooltipProps] - Additional props to be passed to the underlying Popover component.
 @extends PopoverProps
 */
-export type TooltipProps = PopoverProps & {
+export type TooltipProps = PopoverProps & TooltipContentProps & {
     tooltipProps?: Record<string, unknown>;
     infoIconUrl?: string;
 };
@@ -24,4 +44,5 @@ export type TooltipProps = PopoverProps & {
  * @param modifiers - Optional modifiers to be passed down to the `Popover` component.
  */
 export declare const Tooltip: FC<TooltipProps>;
+export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/types/src/core/ui/components/molecules/popover/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,EAAE,EAA8B,MAAM,OAAO,CAAA;AAY5D,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAIhE;;;;;;EAME;AACF,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAkFD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA0CnC,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,EAAE,EAAW,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAa5D,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAkBhE;;;;;;;;;;EAUE;AACF,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,GAAG,CAAC,GAAG;IAClD,YAAY,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAsDD;;;;;;EAME;AACF,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA0CnC,CAAA"}

package/dist/ui/esm/src/core/ui/components/molecules/popover/Tooltip.js

@@ -1,2 +1,2 @@
-import{extends as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as t,useMemo as o}from"react";import{infoIconJSX as r}from"../../atoms/icons.js";import{Popover as n}from"./PopoverLite.js";import{PopoverPlacement as a}from"./popover.types.js";import l from"./tooltip.module.scss.js";import{HeadlineTertiary as i}from"../../atoms/text/Headline.js";import{DividerHorizontal as c}from"../../dividers/DividerLine.js";import{ParagraphSmall as m}from"../../atoms/text/Paragraph.js";import{IconBase as s}from"../../icon/IconBase.js";import{LayoutBox as p}from"../../container/layoutBox/LayoutBox.js";const d=[{name:"offset",options:{offset:[0,10],placement:a.Top}}],f=e=>{let{forwardedRef:t,title:o,text:n,hide:a,showClose:d,closeIconUrl:f}=e;return React.createElement("div",{ref:t,className:l["popover-tooltip"]},React.createElement("div",{id:"arrow","data-popper-arrow":!0,className:l.arrow},React.createElement("div",{className:l["arrow-inner"]})),React.createElement(p,{padding:"1rem",direction:"column",width:"256px",height:"unset",flexGrow:"1"},o&&React.createElement(p,{justify:"space-between",align:"start",width:"100%",padding:"0"},React.createElement(i,null,o),d&&React.createElement("div",{onClick:a,onKeyDown:a,role:"button",tabIndex:-1,className:l["close-button"]},f&&React.createElement(s,{iconUrl:f}),!f&&React.createElement(s,null,r))),o&&React.createElement(c,{margin:"8px 0"}),n&&React.createElement(m,{element:"p"},n)))},u=t((t=>{let{tooltipProps:a,components:{ContentComponent:l}={ContentComponent:f},infoIconUrl:i,children:c,infoTip:m,clickable:p=!1,hoverable:u=!0,placement:R="top",modifiers:E,...h}=t;const v=o((()=>l?{ContentComponent:l}:void 0),[l]);let x;c&&(x=c),!c&&m&&(x=i?React.createElement(s,{iconUrl:i,size:"1rem",color:"#00336640",style:{lineHeight:"1px"}}):React.createElement(s,{size:"1rem",color:"#00336640",style:{lineHeight:"1px"}},r));const w=o((()=>[...d,...E||[]]),[E]);return React.createElement(n,e({},h,a,{hoverable:u,clickable:p,placement:R,modifiers:w,components:v,showClose:p}),x&&x)}));u.displayName="Tooltip";export{u as Tooltip};
+import{extends as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as t,useMemo as o}from"react";import{infoIconJSX as r}from"../../atoms/icons.js";import{Popover as a}from"./PopoverLite.js";import{PopoverPlacement as n}from"./popover.types.js";import l from"./tooltip.module.scss.js";import{HeadlineTertiary as i}from"../../atoms/text/Headline.js";import{DividerHorizontal as m}from"../../dividers/DividerLine.js";import{ParagraphSmall as c}from"../../atoms/text/Paragraph.js";import{IconBase as s}from"../../icon/IconBase.js";import{classNames as p}from"../../../../utils/helpers/ui.js";import{LayoutBox as d}from"../../container/layoutBox/LayoutBox.js";const f=[{name:"offset",options:{offset:[0,10],placement:n.Top}}],u=e=>{let{forwardedRef:t,title:o,text:a,hide:n,showClose:f,closeIconUrl:u,className:R=""}=e;return React.createElement("div",{ref:t,className:p(l["popover-tooltip"],R)},React.createElement("div",{id:"arrow","data-popper-arrow":!0,className:l.arrow},React.createElement("div",{className:l["arrow-inner"]})),React.createElement(d,{padding:"1rem",direction:"column",width:"256px",height:"unset",flexGrow:"1"},o&&React.createElement(d,{justify:"space-between",align:"start",width:"100%",padding:"0"},React.createElement(i,null,o),f&&React.createElement("div",{onClick:n,onKeyDown:n,role:"button",tabIndex:-1,className:l["close-button"]},u&&React.createElement(s,{iconUrl:u}),!u&&React.createElement(s,null,r))),o&&React.createElement(m,{margin:"8px 0"}),a&&React.createElement(c,{element:"p"},a)))},R=t((t=>{let{tooltipProps:n,components:{ContentComponent:l}={ContentComponent:u},infoIconUrl:i,children:m,infoTip:c,clickable:p=!1,hoverable:d=!0,placement:R="top",modifiers:h,...E}=t;const v=o((()=>l?{ContentComponent:l}:void 0),[l]);let x;m&&(x=m),!m&&c&&(x=i?React.createElement(s,{iconUrl:i,size:"1rem",color:"#00336640",style:{lineHeight:"1px"}}):React.createElement(s,{size:"1rem",color:"#00336640",style:{lineHeight:"1px"}},r));const j=o((()=>[...f,...h||[]]),[h]);return React.createElement(a,e({},E,n,{hoverable:d,clickable:p,placement:R,modifiers:j,components:v,showClose:p}),x&&x)}));R.displayName="Tooltip";export{R as Tooltip};
 //# sourceMappingURL=Tooltip.js.map

package/dist/ui/esm/src/core/ui/components/molecules/popover/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"sourcesContent":["import { memo, FC, useMemo, PropsWithChildren } from 'react'\n// import { DividerHorizontal, LayoutBox, IconBase } from '@e1011/es-kit'\n\n\n\nimport { HeadlineTertiary as H3, ParagraphSmall } from '../../atoms/text'\nimport { DividerHorizontal } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { IconBase } from '../../icon'\nimport { infoIconJSX } from '../../atoms/icons'\n\nimport { Popover } from './PopoverLite'\nimport { PopoverPlacement, PopoverProps } from './popover.types'\nimport classes from './tooltip.module.scss'\n\n\n/**\n\nProps for the Tooltip component, extends PopoverProps.\n@typedef {Object} TooltipProps\n@property {Record<string, unknown>} [tooltipProps] - Additional props to be passed to the underlying Popover component.\n@extends PopoverProps\n*/\nexport type TooltipProps = PopoverProps & {\n  tooltipProps?: Record<string, unknown>\n  infoIconUrl?: string\n}\n\n/**\n\nModifiers for the Popover component used in Tooltip.\n*/\nconst popoverModifiers = [\n  {\n    name: 'offset',\n    options: {\n      offset: [0, 10],\n      placement: PopoverPlacement.Top,\n    },\n  },\n]\n\n/**\n\nProps for the TooltipContent component.\n@typedef {Object} TooltipContentProps\n@property {ForwardedRef} forwardedRef - Forwarded ref of the TooltipContent component.\n@property {string} title - Title of the tooltip.\n@property {string} text - Text content of the tooltip.\n@property {Function} hide - Function to hide the tooltip.\n@property {boolean} showClose - Determines whether to show a close button in the tooltip.\n@extends PropsWithChildren\n*/\ntype TooltipContentProps = PropsWithChildren<any> & {\n  forwardedRef: ForwardedRef\n  closeIconUrl?: string\n}\n\n/**\n\n  Tooltip content component used by the Tooltip component.\n  @param {TooltipContentProps} props - Props for the TooltipContent component.\n  @returns {JSX.Element} - Returns the JSX element for the TooltipContent component.\n  */\nconst TooltipContent = ({\n  forwardedRef, title, text, hide, showClose, closeIconUrl,\n}: TooltipContentProps): JSX.Element => (\n  <div\n    ref={forwardedRef}\n    className={classes['popover-tooltip']}\n  >\n    <div id='arrow' data-popper-arrow className={classes.arrow}>\n      <div className={classes['arrow-inner']} />\n    </div>\n    <LayoutBox\n      padding='1rem'\n      direction='column'\n      width='256px'\n      height='unset'\n      flexGrow='1'\n    >\n      {title && (\n        <LayoutBox justify='space-between' align='start' width='100%' padding='0'>\n          <H3>{title}</H3>\n          {showClose && (\n            <div\n              onClick={hide}\n              onKeyDown={hide}\n              role='button'\n              tabIndex={-1}\n              className={classes['close-button']}\n            >\n              {closeIconUrl && <IconBase iconUrl={closeIconUrl} />}\n              {!closeIconUrl && (\n                <IconBase>\n                  {infoIconJSX}\n                </IconBase>\n              )}\n            </div>\n          )}\n        </LayoutBox>\n      )}\n      {title && <DividerHorizontal margin='8px 0' />}\n      {text && <ParagraphSmall element='p'>{text}</ParagraphSmall>}\n    </LayoutBox>\n  </div>\n)\n\n/**\n * A tooltip component that displays a short message when the user hovers or clicks on a target element.\n *\n * @param tooltipProps - Optional properties to be passed down to the `Popover` component.\n * @param components - Optional components that can be customized by the consumer.\n * @param children - The target element that the tooltip will be anchored to.\n * @param infoTip - If no `children` prop is passed in, an information icon will be used as the target element.\n * @param clickable - If `true`, the tooltip will be triggered by a click instead of a hover.\n * @param hoverable - If `true`, the tooltip will be triggered by a hover. Defaults to `true`.\n * @param placement - The placement of the tooltip relative to the target element.\n * @param modifiers - Optional modifiers to be passed down to the `Popover` component.\n */\nexport const Tooltip: FC<TooltipProps> = memo<TooltipProps>(({\n  tooltipProps, components: { ContentComponent } = { ContentComponent: TooltipContent },\n  infoIconUrl,\n  children, infoTip, clickable = false, hoverable = true, placement = 'top', modifiers, ...props\n}: TooltipProps) => {\n  const popoverComponents = useMemo(() => (ContentComponent ? {\n    ContentComponent,\n  } : undefined), [ContentComponent])\n\n  let TargetNode: typeof children\n\n  if (children) {\n    TargetNode = children\n  }\n  if (!children && infoTip) {\n    TargetNode = (\n      infoIconUrl\n        ? <IconBase iconUrl={infoIconUrl} size='1rem' color='#00336640' style={{ lineHeight: '1px' }} />\n        : (\n          <IconBase size='1rem' color='#00336640' style={{ lineHeight: '1px' }}>\n            {infoIconJSX}\n          </IconBase>\n        )\n    )\n  }\n\n  const mergedModifiers = useMemo(() => ([...popoverModifiers, ...(modifiers || [])]), [modifiers])\n\n  return (\n    <Popover\n      {...props}\n      {...tooltipProps}\n      hoverable={hoverable}\n      clickable={clickable}\n      placement={placement}\n      modifiers={mergedModifiers}\n      components={popoverComponents}\n      showClose={clickable}\n    >\n      {TargetNode && TargetNode}\n    </Popover>\n  )\n})\n\n/**\n * The display name of the Tooltip component.\n *\n * @type {string}\n */\nTooltip.displayName = 'Tooltip'\n\n"],"names":["popoverModifiers","name","options","offset","placement","PopoverPlacement","Top","TooltipContent","_ref","forwardedRef","title","text","hide","showClose","closeIconUrl","React","createElement","ref","className","classes","id","arrow","LayoutBox","padding","direction","width","height","flexGrow","justify","align","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","infoIconJSX","DividerHorizontal","margin","ParagraphSmall","element","Tooltip","memo","_ref2","tooltipProps","components","ContentComponent","infoIconUrl","children","infoTip","clickable","hoverable","modifiers","props","popoverComponents","useMemo","undefined","TargetNode","size","color","style","lineHeight","mergedModifiers","Popover","_extends","displayName"],"mappings":"8mBAgCA,MAAMA,EAAmB,CACvB,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,IACZC,UAAWC,EAAiBC,OA2B5BC,EAAiBC,IAAA,IAACC,aACtBA,EAAYC,MAAEA,EAAKC,KAAEA,EAAIC,KAAEA,EAAIC,UAAEA,EAASC,aAAEA,GACxBN,EAAA,OACpBO,MAAAC,cAAA,MAAA,CACEC,IAAKR,EACLS,UAAWC,EAAQ,oBAEnBJ,MAAAC,cAAA,MAAA,CAAKI,GAAG,QAAQ,qBAAiB,EAACF,UAAWC,EAAQE,OACnDN,MAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAQ,kBAE1BJ,MAAAC,cAACM,EAAS,CACRC,QAAQ,OACRC,UAAU,SACVC,MAAM,QACNC,OAAO,QACPC,SAAS,KAERjB,GACCK,MAAAC,cAACM,EAAS,CAACM,QAAQ,gBAAgBC,MAAM,QAAQJ,MAAM,OAAOF,QAAQ,KACpER,MAAAC,cAACc,EAAE,KAAEpB,GACJG,GACCE,MAAAC,cAAA,MAAA,CACEe,QAASnB,EACToB,UAAWpB,EACXqB,KAAK,SACLC,UAAW,EACXhB,UAAWC,EAAQ,iBAElBL,GAAgBC,MAAAC,cAACmB,EAAQ,CAACC,QAAStB,KAClCA,GACAC,MAAAC,cAACmB,EAAQ,KACNE,KAOZ3B,GAASK,MAAAC,cAACsB,EAAiB,CAACC,OAAO,UACnC5B,GAAQI,MAAAC,cAACwB,EAAc,CAACC,QAAQ,KAAK9B,IAEpC,EAeK+B,EAA4BC,GAAmBC,IAIxC,IAJyCC,aAC3DA,EAAcC,YAAYC,iBAAEA,GAAqB,CAAEA,iBAAkBxC,GAAgByC,YACrFA,EAAWC,SACXA,EAAQC,QAAEA,EAAOC,UAAEA,GAAY,EAAKC,UAAEA,GAAY,EAAIhD,UAAEA,EAAY,MAAKiD,UAAEA,KAAcC,GAC5EV,EACb,MAAMW,EAAoBC,GAAQ,IAAOT,EAAmB,CAC1DA,yBACEU,GAAY,CAACV,IAEjB,IAAIW,EAEAT,IACFS,EAAaT,IAEVA,GAAYC,IACfQ,EACEV,EACIjC,MAAAC,cAACmB,EAAQ,CAACC,QAASY,EAAaW,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,SAEnF/C,MAAAC,cAACmB,EAAQ,CAACwB,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,QAC1DzB,IAMX,MAAM0B,EAAkBP,GAAQ,IAAO,IAAIxD,KAAsBqD,GAAa,KAAO,CAACA,IAEtF,OACEtC,MAAAC,cAACgD,EAAOC,EAAA,CAAA,EACFX,EACAT,EAAY,CAChBO,UAAWA,EACXD,UAAWA,EACX/C,UAAWA,EACXiD,UAAWU,EACXjB,WAAYS,EACZ1C,UAAWsC,IAEVO,GAAcA,EACP,IASdhB,EAAQwB,YAAc"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"sourcesContent":["import { memo, FC, useMemo, PropsWithChildren } from 'react'\n// import { DividerHorizontal, LayoutBox, IconBase } from '@e1011/es-kit'\n\n\n\nimport { HeadlineTertiary as H3, ParagraphSmall } from '../../atoms/text'\nimport { DividerHorizontal } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { IconBase } from '../../icon'\nimport { infoIconJSX } from '../../atoms/icons'\nimport { classNames } from '../../../../utils'\n\nimport { Popover } from './PopoverLite'\nimport { PopoverPlacement, PopoverProps } from './popover.types'\nimport classes from './tooltip.module.scss'\n\n\n/**\n\nModifiers for the Popover component used in Tooltip.\n*/\nconst popoverModifiers = [\n  {\n    name: 'offset',\n    options: {\n      offset: [0, 10],\n      placement: PopoverPlacement.Top,\n    },\n  },\n]\n\n/**\n\nProps for the TooltipContent component.\n@typedef {Object} TooltipContentProps\n@property {ForwardedRef} forwardedRef - Forwarded ref of the TooltipContent component.\n@property {string} title - Title of the tooltip.\n@property {string} text - Text content of the tooltip.\n@property {Function} hide - Function to hide the tooltip.\n@property {boolean} showClose - Determines whether to show a close button in the tooltip.\n@extends PropsWithChildren\n*/\ntype TooltipContentProps = PropsWithChildren<any> & {\n  forwardedRef: ForwardedRef\n  closeIconUrl?: string\n  className?: string\n  title?: string\n  text?: string\n  hide: () => void\n  showClose?: boolean\n}\n\n/**\n\n  Tooltip content component used by the Tooltip component.\n  @param {TooltipContentProps} props - Props for the TooltipContent component.\n  @returns {JSX.Element} - Returns the JSX element for the TooltipContent component.\n  */\nconst TooltipContent = ({\n  forwardedRef, title, text, hide, showClose, closeIconUrl, className = '',\n}: TooltipContentProps): JSX.Element => (\n  <div\n    ref={forwardedRef}\n    className={classNames(classes['popover-tooltip'], className)}\n  >\n    <div id='arrow' data-popper-arrow className={classes.arrow}>\n      <div className={classes['arrow-inner']} />\n    </div>\n    <LayoutBox\n      padding='1rem'\n      direction='column'\n      width='256px'\n      height='unset'\n      flexGrow='1'\n    >\n      {title && (\n        <LayoutBox justify='space-between' align='start' width='100%' padding='0'>\n          <H3>{title}</H3>\n          {showClose && (\n            <div\n              onClick={hide}\n              onKeyDown={hide}\n              role='button'\n              tabIndex={-1}\n              className={classes['close-button']}\n            >\n              {closeIconUrl && <IconBase iconUrl={closeIconUrl} />}\n              {!closeIconUrl && (\n                <IconBase>\n                  {infoIconJSX}\n                </IconBase>\n              )}\n            </div>\n          )}\n        </LayoutBox>\n      )}\n      {title && <DividerHorizontal margin='8px 0' />}\n      {text && <ParagraphSmall element='p'>{text}</ParagraphSmall>}\n    </LayoutBox>\n  </div>\n)\n\n\n\n/**\n\nProps for the Tooltip component, extends PopoverProps.\n@typedef {Object} TooltipProps\n@property {Record<string, unknown>} [tooltipProps] - Additional props to be passed to the underlying Popover component.\n@extends PopoverProps\n*/\nexport type TooltipProps = PopoverProps & TooltipContentProps & {\n  tooltipProps?: Record<string, unknown>\n  infoIconUrl?: string\n}\n\n\n/**\n * A tooltip component that displays a short message when the user hovers or clicks on a target element.\n *\n * @param tooltipProps - Optional properties to be passed down to the `Popover` component.\n * @param components - Optional components that can be customized by the consumer.\n * @param children - The target element that the tooltip will be anchored to.\n * @param infoTip - If no `children` prop is passed in, an information icon will be used as the target element.\n * @param clickable - If `true`, the tooltip will be triggered by a click instead of a hover.\n * @param hoverable - If `true`, the tooltip will be triggered by a hover. Defaults to `true`.\n * @param placement - The placement of the tooltip relative to the target element.\n * @param modifiers - Optional modifiers to be passed down to the `Popover` component.\n */\nexport const Tooltip: FC<TooltipProps> = memo<TooltipProps>(({\n  tooltipProps, components: { ContentComponent } = { ContentComponent: TooltipContent },\n  infoIconUrl,\n  children, infoTip, clickable = false, hoverable = true, placement = 'top', modifiers, ...props\n}: TooltipProps) => {\n  const popoverComponents = useMemo(() => (ContentComponent ? {\n    ContentComponent,\n  } : undefined), [ContentComponent])\n\n  let TargetNode: typeof children\n\n  if (children) {\n    TargetNode = children\n  }\n  if (!children && infoTip) {\n    TargetNode = (\n      infoIconUrl\n        ? <IconBase iconUrl={infoIconUrl} size='1rem' color='#00336640' style={{ lineHeight: '1px' }} />\n        : (\n          <IconBase size='1rem' color='#00336640' style={{ lineHeight: '1px' }}>\n            {infoIconJSX}\n          </IconBase>\n        )\n    )\n  }\n\n  const mergedModifiers = useMemo(() => ([...popoverModifiers, ...(modifiers || [])]), [modifiers])\n\n  return (\n    <Popover\n      {...props}\n      {...tooltipProps}\n      hoverable={hoverable}\n      clickable={clickable}\n      placement={placement}\n      modifiers={mergedModifiers}\n      components={popoverComponents}\n      showClose={clickable}\n    >\n      {TargetNode && TargetNode}\n    </Popover>\n  )\n})\n\n/**\n * The display name of the Tooltip component.\n *\n * @type {string}\n */\nTooltip.displayName = 'Tooltip'\n\n"],"names":["popoverModifiers","name","options","offset","placement","PopoverPlacement","Top","TooltipContent","_ref","forwardedRef","title","text","hide","showClose","closeIconUrl","className","React","createElement","ref","classNames","classes","id","arrow","LayoutBox","padding","direction","width","height","flexGrow","justify","align","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","infoIconJSX","DividerHorizontal","margin","ParagraphSmall","element","Tooltip","memo","_ref2","tooltipProps","components","ContentComponent","infoIconUrl","children","infoTip","clickable","hoverable","modifiers","props","popoverComponents","useMemo","undefined","TargetNode","size","color","style","lineHeight","mergedModifiers","Popover","_extends","displayName"],"mappings":"2qBAqBA,MAAMA,EAAmB,CACvB,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,IACZC,UAAWC,EAAiBC,OAgC5BC,EAAiBC,IAAA,IAACC,aACtBA,EAAYC,MAAEA,EAAKC,KAAEA,EAAIC,KAAEA,EAAIC,UAAEA,EAASC,aAAEA,EAAYC,UAAEA,EAAY,IAClDP,EAAA,OACpBQ,MAAAC,cAAA,MAAA,CACEC,IAAKT,EACLM,UAAWI,EAAWC,EAAQ,mBAAoBL,IAElDC,MAAAC,cAAA,MAAA,CAAKI,GAAG,QAAQ,qBAAiB,EAACN,UAAWK,EAAQE,OACnDN,MAAAC,cAAA,MAAA,CAAKF,UAAWK,EAAQ,kBAE1BJ,MAAAC,cAACM,EAAS,CACRC,QAAQ,OACRC,UAAU,SACVC,MAAM,QACNC,OAAO,QACPC,SAAS,KAERlB,GACCM,MAAAC,cAACM,EAAS,CAACM,QAAQ,gBAAgBC,MAAM,QAAQJ,MAAM,OAAOF,QAAQ,KACpER,MAAAC,cAACc,EAAE,KAAErB,GACJG,GACCG,MAAAC,cAAA,MAAA,CACEe,QAASpB,EACTqB,UAAWrB,EACXsB,KAAK,SACLC,UAAW,EACXpB,UAAWK,EAAQ,iBAElBN,GAAgBE,MAAAC,cAACmB,EAAQ,CAACC,QAASvB,KAClCA,GACAE,MAAAC,cAACmB,EAAQ,KACNE,KAOZ5B,GAASM,MAAAC,cAACsB,EAAiB,CAACC,OAAO,UACnC7B,GAAQK,MAAAC,cAACwB,EAAc,CAACC,QAAQ,KAAK/B,IAEpC,EA8BKgC,EAA4BC,GAAmBC,IAIxC,IAJyCC,aAC3DA,EAAcC,YAAYC,iBAAEA,GAAqB,CAAEA,iBAAkBzC,GAAgB0C,YACrFA,EAAWC,SACXA,EAAQC,QAAEA,EAAOC,UAAEA,GAAY,EAAKC,UAAEA,GAAY,EAAIjD,UAAEA,EAAY,MAAKkD,UAAEA,KAAcC,GAC5EV,EACb,MAAMW,EAAoBC,GAAQ,IAAOT,EAAmB,CAC1DA,yBACEU,GAAY,CAACV,IAEjB,IAAIW,EAEAT,IACFS,EAAaT,IAEVA,GAAYC,IACfQ,EACEV,EACIjC,MAAAC,cAACmB,EAAQ,CAACC,QAASY,EAAaW,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,SAEnF/C,MAAAC,cAACmB,EAAQ,CAACwB,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,QAC1DzB,IAMX,MAAM0B,EAAkBP,GAAQ,IAAO,IAAIzD,KAAsBsD,GAAa,KAAO,CAACA,IAEtF,OACEtC,MAAAC,cAACgD,EAAOC,EAAA,CAAA,EACFX,EACAT,EAAY,CAChBO,UAAWA,EACXD,UAAWA,EACXhD,UAAWA,EACXkD,UAAWU,EACXjB,WAAYS,EACZ3C,UAAWuC,IAEVO,GAAcA,EACP,IASdhB,EAAQwB,YAAc"}

package/dist/ui/src/core/ui/components/molecules/popover/Tooltip.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../atoms/icons.js"),r=require("./PopoverLite.js"),a=require("./popover.types.js"),n=require("./tooltip.module.scss.js"),l=require("../../atoms/text/Headline.js"),i=require("../../dividers/DividerLine.js"),c=require("../../atoms/text/Paragraph.js"),s=require("../../icon/IconBase.js"),m=require("../../container/layoutBox/LayoutBox.js");const p=[{name:"offset",options:{offset:[0,10],placement:a.PopoverPlacement.Top}}],u=e=>{let{forwardedRef:t,title:r,text:a,hide:p,showClose:u,closeIconUrl:d}=e;return React.createElement("div",{ref:t,className:n.default["popover-tooltip"]},React.createElement("div",{id:"arrow","data-popper-arrow":!0,className:n.default.arrow},React.createElement("div",{className:n.default["arrow-inner"]})),React.createElement(m.LayoutBox,{padding:"1rem",direction:"column",width:"256px",height:"unset",flexGrow:"1"},r&&React.createElement(m.LayoutBox,{justify:"space-between",align:"start",width:"100%",padding:"0"},React.createElement(l.HeadlineTertiary,null,r),u&&React.createElement("div",{onClick:p,onKeyDown:p,role:"button",tabIndex:-1,className:n.default["close-button"]},d&&React.createElement(s.IconBase,{iconUrl:d}),!d&&React.createElement(s.IconBase,null,o.infoIconJSX))),r&&React.createElement(i.DividerHorizontal,{margin:"8px 0"}),a&&React.createElement(c.ParagraphSmall,{element:"p"},a)))},d=t.memo((a=>{let{tooltipProps:n,components:{ContentComponent:l}={ContentComponent:u},infoIconUrl:i,children:c,infoTip:m,clickable:d=!1,hoverable:f=!0,placement:v="top",modifiers:x,...R}=a;const h=t.useMemo((()=>l?{ContentComponent:l}:void 0),[l]);let E;c&&(E=c),!c&&m&&(E=i?React.createElement(s.IconBase,{iconUrl:i,size:"1rem",color:"#00336640",style:{lineHeight:"1px"}}):React.createElement(s.IconBase,{size:"1rem",color:"#00336640",style:{lineHeight:"1px"}},o.infoIconJSX));const w=t.useMemo((()=>[...p,...x||[]]),[x]);return React.createElement(r.Popover,e.extends({},R,n,{hoverable:f,clickable:d,placement:v,modifiers:w,components:h,showClose:d}),E&&E)}));d.displayName="Tooltip",exports.Tooltip=d;
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../atoms/icons.js"),r=require("./PopoverLite.js"),a=require("./popover.types.js"),n=require("./tooltip.module.scss.js"),l=require("../../atoms/text/Headline.js"),i=require("../../dividers/DividerLine.js"),c=require("../../atoms/text/Paragraph.js"),s=require("../../icon/IconBase.js"),m=require("../../../../utils/helpers/ui.js"),p=require("../../container/layoutBox/LayoutBox.js");const u=[{name:"offset",options:{offset:[0,10],placement:a.PopoverPlacement.Top}}],d=e=>{let{forwardedRef:t,title:r,text:a,hide:u,showClose:d,closeIconUrl:f,className:v=""}=e;return React.createElement("div",{ref:t,className:m.classNames(n.default["popover-tooltip"],v)},React.createElement("div",{id:"arrow","data-popper-arrow":!0,className:n.default.arrow},React.createElement("div",{className:n.default["arrow-inner"]})),React.createElement(p.LayoutBox,{padding:"1rem",direction:"column",width:"256px",height:"unset",flexGrow:"1"},r&&React.createElement(p.LayoutBox,{justify:"space-between",align:"start",width:"100%",padding:"0"},React.createElement(l.HeadlineTertiary,null,r),d&&React.createElement("div",{onClick:u,onKeyDown:u,role:"button",tabIndex:-1,className:n.default["close-button"]},f&&React.createElement(s.IconBase,{iconUrl:f}),!f&&React.createElement(s.IconBase,null,o.infoIconJSX))),r&&React.createElement(i.DividerHorizontal,{margin:"8px 0"}),a&&React.createElement(c.ParagraphSmall,{element:"p"},a)))},f=t.memo((a=>{let{tooltipProps:n,components:{ContentComponent:l}={ContentComponent:d},infoIconUrl:i,children:c,infoTip:m,clickable:p=!1,hoverable:f=!0,placement:v="top",modifiers:h,...x}=a;const R=t.useMemo((()=>l?{ContentComponent:l}:void 0),[l]);let E;c&&(E=c),!c&&m&&(E=i?React.createElement(s.IconBase,{iconUrl:i,size:"1rem",color:"#00336640",style:{lineHeight:"1px"}}):React.createElement(s.IconBase,{size:"1rem",color:"#00336640",style:{lineHeight:"1px"}},o.infoIconJSX));const j=t.useMemo((()=>[...u,...h||[]]),[h]);return React.createElement(r.Popover,e.extends({},x,n,{hoverable:f,clickable:p,placement:v,modifiers:j,components:R,showClose:p}),E&&E)}));f.displayName="Tooltip",exports.Tooltip=f;
 //# sourceMappingURL=Tooltip.js.map

package/dist/ui/src/core/ui/components/molecules/popover/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"sourcesContent":["import { memo, FC, useMemo, PropsWithChildren } from 'react'\n// import { DividerHorizontal, LayoutBox, IconBase } from '@e1011/es-kit'\n\n\n\nimport { HeadlineTertiary as H3, ParagraphSmall } from '../../atoms/text'\nimport { DividerHorizontal } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { IconBase } from '../../icon'\nimport { infoIconJSX } from '../../atoms/icons'\n\nimport { Popover } from './PopoverLite'\nimport { PopoverPlacement, PopoverProps } from './popover.types'\nimport classes from './tooltip.module.scss'\n\n\n/**\n\nProps for the Tooltip component, extends PopoverProps.\n@typedef {Object} TooltipProps\n@property {Record<string, unknown>} [tooltipProps] - Additional props to be passed to the underlying Popover component.\n@extends PopoverProps\n*/\nexport type TooltipProps = PopoverProps & {\n  tooltipProps?: Record<string, unknown>\n  infoIconUrl?: string\n}\n\n/**\n\nModifiers for the Popover component used in Tooltip.\n*/\nconst popoverModifiers = [\n  {\n    name: 'offset',\n    options: {\n      offset: [0, 10],\n      placement: PopoverPlacement.Top,\n    },\n  },\n]\n\n/**\n\nProps for the TooltipContent component.\n@typedef {Object} TooltipContentProps\n@property {ForwardedRef} forwardedRef - Forwarded ref of the TooltipContent component.\n@property {string} title - Title of the tooltip.\n@property {string} text - Text content of the tooltip.\n@property {Function} hide - Function to hide the tooltip.\n@property {boolean} showClose - Determines whether to show a close button in the tooltip.\n@extends PropsWithChildren\n*/\ntype TooltipContentProps = PropsWithChildren<any> & {\n  forwardedRef: ForwardedRef\n  closeIconUrl?: string\n}\n\n/**\n\n  Tooltip content component used by the Tooltip component.\n  @param {TooltipContentProps} props - Props for the TooltipContent component.\n  @returns {JSX.Element} - Returns the JSX element for the TooltipContent component.\n  */\nconst TooltipContent = ({\n  forwardedRef, title, text, hide, showClose, closeIconUrl,\n}: TooltipContentProps): JSX.Element => (\n  <div\n    ref={forwardedRef}\n    className={classes['popover-tooltip']}\n  >\n    <div id='arrow' data-popper-arrow className={classes.arrow}>\n      <div className={classes['arrow-inner']} />\n    </div>\n    <LayoutBox\n      padding='1rem'\n      direction='column'\n      width='256px'\n      height='unset'\n      flexGrow='1'\n    >\n      {title && (\n        <LayoutBox justify='space-between' align='start' width='100%' padding='0'>\n          <H3>{title}</H3>\n          {showClose && (\n            <div\n              onClick={hide}\n              onKeyDown={hide}\n              role='button'\n              tabIndex={-1}\n              className={classes['close-button']}\n            >\n              {closeIconUrl && <IconBase iconUrl={closeIconUrl} />}\n              {!closeIconUrl && (\n                <IconBase>\n                  {infoIconJSX}\n                </IconBase>\n              )}\n            </div>\n          )}\n        </LayoutBox>\n      )}\n      {title && <DividerHorizontal margin='8px 0' />}\n      {text && <ParagraphSmall element='p'>{text}</ParagraphSmall>}\n    </LayoutBox>\n  </div>\n)\n\n/**\n * A tooltip component that displays a short message when the user hovers or clicks on a target element.\n *\n * @param tooltipProps - Optional properties to be passed down to the `Popover` component.\n * @param components - Optional components that can be customized by the consumer.\n * @param children - The target element that the tooltip will be anchored to.\n * @param infoTip - If no `children` prop is passed in, an information icon will be used as the target element.\n * @param clickable - If `true`, the tooltip will be triggered by a click instead of a hover.\n * @param hoverable - If `true`, the tooltip will be triggered by a hover. Defaults to `true`.\n * @param placement - The placement of the tooltip relative to the target element.\n * @param modifiers - Optional modifiers to be passed down to the `Popover` component.\n */\nexport const Tooltip: FC<TooltipProps> = memo<TooltipProps>(({\n  tooltipProps, components: { ContentComponent } = { ContentComponent: TooltipContent },\n  infoIconUrl,\n  children, infoTip, clickable = false, hoverable = true, placement = 'top', modifiers, ...props\n}: TooltipProps) => {\n  const popoverComponents = useMemo(() => (ContentComponent ? {\n    ContentComponent,\n  } : undefined), [ContentComponent])\n\n  let TargetNode: typeof children\n\n  if (children) {\n    TargetNode = children\n  }\n  if (!children && infoTip) {\n    TargetNode = (\n      infoIconUrl\n        ? <IconBase iconUrl={infoIconUrl} size='1rem' color='#00336640' style={{ lineHeight: '1px' }} />\n        : (\n          <IconBase size='1rem' color='#00336640' style={{ lineHeight: '1px' }}>\n            {infoIconJSX}\n          </IconBase>\n        )\n    )\n  }\n\n  const mergedModifiers = useMemo(() => ([...popoverModifiers, ...(modifiers || [])]), [modifiers])\n\n  return (\n    <Popover\n      {...props}\n      {...tooltipProps}\n      hoverable={hoverable}\n      clickable={clickable}\n      placement={placement}\n      modifiers={mergedModifiers}\n      components={popoverComponents}\n      showClose={clickable}\n    >\n      {TargetNode && TargetNode}\n    </Popover>\n  )\n})\n\n/**\n * The display name of the Tooltip component.\n *\n * @type {string}\n */\nTooltip.displayName = 'Tooltip'\n\n"],"names":["popoverModifiers","name","options","offset","placement","PopoverPlacement","Top","TooltipContent","_ref","forwardedRef","title","text","hide","showClose","closeIconUrl","React","createElement","ref","className","classes","default","id","arrow","LayoutBox","padding","direction","width","height","flexGrow","justify","align","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","infoIconJSX","DividerHorizontal","margin","ParagraphSmall","element","Tooltip","memo","_ref2","tooltipProps","components","ContentComponent","infoIconUrl","children","infoTip","clickable","hoverable","modifiers","props","popoverComponents","useMemo","undefined","TargetNode","size","color","style","lineHeight","mergedModifiers","Popover","_extends","extends","displayName"],"mappings":"ucAgCA,MAAMA,EAAmB,CACvB,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,IACZC,UAAWC,EAAgBA,iBAACC,OA2B5BC,EAAiBC,IAAA,IAACC,aACtBA,EAAYC,MAAEA,EAAKC,KAAEA,EAAIC,KAAEA,EAAIC,UAAEA,EAASC,aAAEA,GACxBN,EAAA,OACpBO,MAAAC,cAAA,MAAA,CACEC,IAAKR,EACLS,UAAWC,EAAOC,QAAC,oBAEnBL,MAAAC,cAAA,MAAA,CAAKK,GAAG,QAAQ,qBAAiB,EAACH,UAAWC,EAAOC,QAACE,OACnDP,MAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAOC,QAAC,kBAE1BL,MAAAC,cAACO,YAAS,CACRC,QAAQ,OACRC,UAAU,SACVC,MAAM,QACNC,OAAO,QACPC,SAAS,KAERlB,GACCK,MAAAC,cAACO,YAAS,CAACM,QAAQ,gBAAgBC,MAAM,QAAQJ,MAAM,OAAOF,QAAQ,KACpET,MAAAC,cAACe,EAAAA,iBAAE,KAAErB,GACJG,GACCE,MAAAC,cAAA,MAAA,CACEgB,QAASpB,EACTqB,UAAWrB,EACXsB,KAAK,SACLC,UAAW,EACXjB,UAAWC,EAAOC,QAAC,iBAElBN,GAAgBC,MAAAC,cAACoB,WAAQ,CAACC,QAASvB,KAClCA,GACAC,MAAAC,cAACoB,EAAAA,SAAQ,KACNE,EACOA,eAMnB5B,GAASK,MAAAC,cAACuB,EAAAA,kBAAiB,CAACC,OAAO,UACnC7B,GAAQI,MAAAC,cAACyB,EAAAA,eAAc,CAACC,QAAQ,KAAK/B,IAEpC,EAeKgC,EAA4BC,EAAIA,MAAeC,IAIxC,IAJyCC,aAC3DA,EAAcC,YAAYC,iBAAEA,GAAqB,CAAEA,iBAAkBzC,GAAgB0C,YACrFA,EAAWC,SACXA,EAAQC,QAAEA,EAAOC,UAAEA,GAAY,EAAKC,UAAEA,GAAY,EAAIjD,UAAEA,EAAY,MAAKkD,UAAEA,KAAcC,GAC5EV,EACb,MAAMW,EAAoBC,WAAQ,IAAOT,EAAmB,CAC1DA,yBACEU,GAAY,CAACV,IAEjB,IAAIW,EAEAT,IACFS,EAAaT,IAEVA,GAAYC,IACfQ,EACEV,EACIlC,MAAAC,cAACoB,EAAAA,SAAQ,CAACC,QAASY,EAAaW,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,SAEnFhD,MAAAC,cAACoB,WAAQ,CAACwB,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,QAC1DzB,EACOA,cAKlB,MAAM0B,EAAkBP,EAAAA,SAAQ,IAAO,IAAIzD,KAAsBsD,GAAa,KAAO,CAACA,IAEtF,OACEvC,MAAAC,cAACiD,EAAOA,QAAAC,EAAAC,QAAA,CAAA,EACFZ,EACAT,EAAY,CAChBO,UAAWA,EACXD,UAAWA,EACXhD,UAAWA,EACXkD,UAAWU,EACXjB,WAAYS,EACZ3C,UAAWuC,IAEVO,GAAcA,EACP,IASdhB,EAAQyB,YAAc"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../../src/core/ui/components/molecules/popover/Tooltip.tsx"],"sourcesContent":["import { memo, FC, useMemo, PropsWithChildren } from 'react'\n// import { DividerHorizontal, LayoutBox, IconBase } from '@e1011/es-kit'\n\n\n\nimport { HeadlineTertiary as H3, ParagraphSmall } from '../../atoms/text'\nimport { DividerHorizontal } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { IconBase } from '../../icon'\nimport { infoIconJSX } from '../../atoms/icons'\nimport { classNames } from '../../../../utils'\n\nimport { Popover } from './PopoverLite'\nimport { PopoverPlacement, PopoverProps } from './popover.types'\nimport classes from './tooltip.module.scss'\n\n\n/**\n\nModifiers for the Popover component used in Tooltip.\n*/\nconst popoverModifiers = [\n  {\n    name: 'offset',\n    options: {\n      offset: [0, 10],\n      placement: PopoverPlacement.Top,\n    },\n  },\n]\n\n/**\n\nProps for the TooltipContent component.\n@typedef {Object} TooltipContentProps\n@property {ForwardedRef} forwardedRef - Forwarded ref of the TooltipContent component.\n@property {string} title - Title of the tooltip.\n@property {string} text - Text content of the tooltip.\n@property {Function} hide - Function to hide the tooltip.\n@property {boolean} showClose - Determines whether to show a close button in the tooltip.\n@extends PropsWithChildren\n*/\ntype TooltipContentProps = PropsWithChildren<any> & {\n  forwardedRef: ForwardedRef\n  closeIconUrl?: string\n  className?: string\n  title?: string\n  text?: string\n  hide: () => void\n  showClose?: boolean\n}\n\n/**\n\n  Tooltip content component used by the Tooltip component.\n  @param {TooltipContentProps} props - Props for the TooltipContent component.\n  @returns {JSX.Element} - Returns the JSX element for the TooltipContent component.\n  */\nconst TooltipContent = ({\n  forwardedRef, title, text, hide, showClose, closeIconUrl, className = '',\n}: TooltipContentProps): JSX.Element => (\n  <div\n    ref={forwardedRef}\n    className={classNames(classes['popover-tooltip'], className)}\n  >\n    <div id='arrow' data-popper-arrow className={classes.arrow}>\n      <div className={classes['arrow-inner']} />\n    </div>\n    <LayoutBox\n      padding='1rem'\n      direction='column'\n      width='256px'\n      height='unset'\n      flexGrow='1'\n    >\n      {title && (\n        <LayoutBox justify='space-between' align='start' width='100%' padding='0'>\n          <H3>{title}</H3>\n          {showClose && (\n            <div\n              onClick={hide}\n              onKeyDown={hide}\n              role='button'\n              tabIndex={-1}\n              className={classes['close-button']}\n            >\n              {closeIconUrl && <IconBase iconUrl={closeIconUrl} />}\n              {!closeIconUrl && (\n                <IconBase>\n                  {infoIconJSX}\n                </IconBase>\n              )}\n            </div>\n          )}\n        </LayoutBox>\n      )}\n      {title && <DividerHorizontal margin='8px 0' />}\n      {text && <ParagraphSmall element='p'>{text}</ParagraphSmall>}\n    </LayoutBox>\n  </div>\n)\n\n\n\n/**\n\nProps for the Tooltip component, extends PopoverProps.\n@typedef {Object} TooltipProps\n@property {Record<string, unknown>} [tooltipProps] - Additional props to be passed to the underlying Popover component.\n@extends PopoverProps\n*/\nexport type TooltipProps = PopoverProps & TooltipContentProps & {\n  tooltipProps?: Record<string, unknown>\n  infoIconUrl?: string\n}\n\n\n/**\n * A tooltip component that displays a short message when the user hovers or clicks on a target element.\n *\n * @param tooltipProps - Optional properties to be passed down to the `Popover` component.\n * @param components - Optional components that can be customized by the consumer.\n * @param children - The target element that the tooltip will be anchored to.\n * @param infoTip - If no `children` prop is passed in, an information icon will be used as the target element.\n * @param clickable - If `true`, the tooltip will be triggered by a click instead of a hover.\n * @param hoverable - If `true`, the tooltip will be triggered by a hover. Defaults to `true`.\n * @param placement - The placement of the tooltip relative to the target element.\n * @param modifiers - Optional modifiers to be passed down to the `Popover` component.\n */\nexport const Tooltip: FC<TooltipProps> = memo<TooltipProps>(({\n  tooltipProps, components: { ContentComponent } = { ContentComponent: TooltipContent },\n  infoIconUrl,\n  children, infoTip, clickable = false, hoverable = true, placement = 'top', modifiers, ...props\n}: TooltipProps) => {\n  const popoverComponents = useMemo(() => (ContentComponent ? {\n    ContentComponent,\n  } : undefined), [ContentComponent])\n\n  let TargetNode: typeof children\n\n  if (children) {\n    TargetNode = children\n  }\n  if (!children && infoTip) {\n    TargetNode = (\n      infoIconUrl\n        ? <IconBase iconUrl={infoIconUrl} size='1rem' color='#00336640' style={{ lineHeight: '1px' }} />\n        : (\n          <IconBase size='1rem' color='#00336640' style={{ lineHeight: '1px' }}>\n            {infoIconJSX}\n          </IconBase>\n        )\n    )\n  }\n\n  const mergedModifiers = useMemo(() => ([...popoverModifiers, ...(modifiers || [])]), [modifiers])\n\n  return (\n    <Popover\n      {...props}\n      {...tooltipProps}\n      hoverable={hoverable}\n      clickable={clickable}\n      placement={placement}\n      modifiers={mergedModifiers}\n      components={popoverComponents}\n      showClose={clickable}\n    >\n      {TargetNode && TargetNode}\n    </Popover>\n  )\n})\n\n/**\n * The display name of the Tooltip component.\n *\n * @type {string}\n */\nTooltip.displayName = 'Tooltip'\n\n"],"names":["popoverModifiers","name","options","offset","placement","PopoverPlacement","Top","TooltipContent","_ref","forwardedRef","title","text","hide","showClose","closeIconUrl","className","React","createElement","ref","classNames","classes","id","default","arrow","LayoutBox","padding","direction","width","height","flexGrow","justify","align","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","infoIconJSX","DividerHorizontal","margin","ParagraphSmall","element","Tooltip","memo","_ref2","tooltipProps","components","ContentComponent","infoIconUrl","children","infoTip","clickable","hoverable","modifiers","props","popoverComponents","useMemo","undefined","TargetNode","size","color","style","lineHeight","mergedModifiers","Popover","_extends","extends","displayName"],"mappings":"ofAqBA,MAAMA,EAAmB,CACvB,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,IACZC,UAAWC,EAAgBA,iBAACC,OAgC5BC,EAAiBC,IAAA,IAACC,aACtBA,EAAYC,MAAEA,EAAKC,KAAEA,EAAIC,KAAEA,EAAIC,UAAEA,EAASC,aAAEA,EAAYC,UAAEA,EAAY,IAClDP,EAAA,OACpBQ,MAAAC,cAAA,MAAA,CACEC,IAAKT,EACLM,UAAWI,EAAAA,WAAWC,EAAAA,QAAQ,mBAAoBL,IAElDC,MAAAC,cAAA,MAAA,CAAKI,GAAG,QAAQ,qBAAiB,EAACN,UAAWK,EAAOE,QAACC,OACnDP,MAAAC,cAAA,MAAA,CAAKF,UAAWK,EAAOE,QAAC,kBAE1BN,MAAAC,cAACO,YAAS,CACRC,QAAQ,OACRC,UAAU,SACVC,MAAM,QACNC,OAAO,QACPC,SAAS,KAERnB,GACCM,MAAAC,cAACO,YAAS,CAACM,QAAQ,gBAAgBC,MAAM,QAAQJ,MAAM,OAAOF,QAAQ,KACpET,MAAAC,cAACe,EAAAA,iBAAE,KAAEtB,GACJG,GACCG,MAAAC,cAAA,MAAA,CACEgB,QAASrB,EACTsB,UAAWtB,EACXuB,KAAK,SACLC,UAAW,EACXrB,UAAWK,EAAOE,QAAC,iBAElBR,GAAgBE,MAAAC,cAACoB,WAAQ,CAACC,QAASxB,KAClCA,GACAE,MAAAC,cAACoB,EAAAA,SAAQ,KACNE,EACOA,eAMnB7B,GAASM,MAAAC,cAACuB,EAAAA,kBAAiB,CAACC,OAAO,UACnC9B,GAAQK,MAAAC,cAACyB,EAAAA,eAAc,CAACC,QAAQ,KAAKhC,IAEpC,EA8BKiC,EAA4BC,EAAIA,MAAeC,IAIxC,IAJyCC,aAC3DA,EAAcC,YAAYC,iBAAEA,GAAqB,CAAEA,iBAAkB1C,GAAgB2C,YACrFA,EAAWC,SACXA,EAAQC,QAAEA,EAAOC,UAAEA,GAAY,EAAKC,UAAEA,GAAY,EAAIlD,UAAEA,EAAY,MAAKmD,UAAEA,KAAcC,GAC5EV,EACb,MAAMW,EAAoBC,WAAQ,IAAOT,EAAmB,CAC1DA,yBACEU,GAAY,CAACV,IAEjB,IAAIW,EAEAT,IACFS,EAAaT,IAEVA,GAAYC,IACfQ,EACEV,EACIlC,MAAAC,cAACoB,EAAAA,SAAQ,CAACC,QAASY,EAAaW,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,SAEnFhD,MAAAC,cAACoB,WAAQ,CAACwB,KAAK,OAAOC,MAAM,YAAYC,MAAO,CAAEC,WAAY,QAC1DzB,EACOA,cAKlB,MAAM0B,EAAkBP,EAAAA,SAAQ,IAAO,IAAI1D,KAAsBuD,GAAa,KAAO,CAACA,IAEtF,OACEvC,MAAAC,cAACiD,EAAOA,QAAAC,EAAAC,QAAA,CAAA,EACFZ,EACAT,EAAY,CAChBO,UAAWA,EACXD,UAAWA,EACXjD,UAAWA,EACXmD,UAAWU,EACXjB,WAAYS,EACZ5C,UAAWwC,IAEVO,GAAcA,EACP,IASdhB,EAAQyB,YAAc"}