@channel.io/bezier-react 1.6.1 → 1.7.0

package/dist/cjs/components/LegacyTooltip/LegacyTooltip.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var React = require('react');
+var domUtils = require('../../utils/domUtils.js');
+var LegacyTooltip_types = require('./LegacyTooltip.types.js');
+var LegacyTooltipContent = require('./LegacyTooltipContent.js');
+var LegacyTooltip_styled = require('./LegacyTooltip.styled.js');
+
+const TOOLTIP_TEST_ID = 'bezier-react-tooltip';
+const TOOLTIP_CONTENT_TEST_ID = 'bezier-react-tooltip-content';
+const LegacyTooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LegacyTooltip({
+  as,
+  testId = TOOLTIP_TEST_ID,
+  contentTestId = TOOLTIP_CONTENT_TEST_ID,
+  className,
+  contentClassName,
+  contentInterpolation,
+  contentWrapperStyle,
+  content = null,
+  lazy = false,
+  // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정
+  placement = LegacyTooltip_types.LegacyTooltipPosition.BottomCenter,
+  disabled = false,
+  offset = 4,
+  keepInContainer = false,
+  allowHover = false,
+  delayShow = 0,
+  delayHide = 0,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const [show, setShow] = React.useState(false);
+  const [didMount, setDidMount] = React.useState(show);
+  const tooltipContainerRef = React.useRef(null);
+  const timerRef = React.useRef();
+  React.useEffect(function hideTooltipContentWhenDisabled() {
+    if (disabled) {
+      setShow(false);
+    }
+  }, [disabled]);
+  React.useEffect(function updateDidMount() {
+    setDidMount(prev => prev || show);
+  }, [show]);
+  const handleMouseEnter = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = domUtils.window.setTimeout(() => {
+      setShow(true);
+    }, delayShow);
+  }, [delayShow, disabled]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = domUtils.window.setTimeout(() => {
+      setShow(false);
+    }, delayHide);
+  }, [delayHide, disabled]);
+  const TooltipComponent = React.useMemo(() => {
+    if (!lazy || didMount) {
+      return /*#__PURE__*/React.createElement(LegacyTooltipContent.LegacyTooltipContent, {
+        as: as,
+        content: content,
+        contentClassName: contentClassName,
+        contentInterpolation: contentInterpolation,
+        contentWrapperStyle: contentWrapperStyle,
+        disabled: disabled,
+        placement: placement,
+        offset: offset,
+        allowHover: allowHover,
+        keepInContainer: keepInContainer,
+        tooltipContainer: tooltipContainerRef.current,
+        forwardedRef: forwardedRef,
+        testId: contentTestId
+      });
+    }
+    return null;
+  }, [lazy, didMount, as, content, contentClassName, contentInterpolation, contentWrapperStyle, disabled, placement, offset, allowHover, keepInContainer, forwardedRef, contentTestId]);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(LegacyTooltip_styled.Container, Object.assign({
+    ref: tooltipContainerRef,
+    "data-testid": testId,
+    className: className,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, otherProps), children, show && TooltipComponent);
+}));
+
+exports.LegacyTooltip = LegacyTooltip;
+exports.TOOLTIP_CONTENT_TEST_ID = TOOLTIP_CONTENT_TEST_ID;
+exports.TOOLTIP_TEST_ID = TOOLTIP_TEST_ID;
+//# sourceMappingURL=LegacyTooltip.js.map

package/dist/cjs/components/LegacyTooltip/LegacyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyTooltip.js","sources":["../../../../src/components/LegacyTooltip/LegacyTooltip.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { window } from '~/src/utils/domUtils'\n\nimport { type LegacyTooltipProps } from './LegacyTooltip.types'\nimport { LegacyTooltipPosition } from './LegacyTooltip.types'\nimport { LegacyTooltipContent } from './LegacyTooltipContent'\n\nimport { Container } from './LegacyTooltip.styled'\n\nexport const TOOLTIP_TEST_ID = 'bezier-react-tooltip'\nexport const TOOLTIP_CONTENT_TEST_ID = 'bezier-react-tooltip-content'\n\nexport const LegacyTooltip = memo(forwardRef(function LegacyTooltip(\n  {\n    as,\n    testId = TOOLTIP_TEST_ID,\n    contentTestId = TOOLTIP_CONTENT_TEST_ID,\n    className,\n    contentClassName,\n    contentInterpolation,\n    contentWrapperStyle,\n    content = null,\n    lazy = false, // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정\n    placement = LegacyTooltipPosition.BottomCenter,\n    disabled = false,\n    offset = 4,\n    keepInContainer = false,\n    allowHover = false,\n    delayShow = 0,\n    delayHide = 0,\n    children,\n    ...otherProps\n  }: LegacyTooltipProps,\n  forwardedRef: Ref<any>,\n) {\n  const [show, setShow] = useState(false)\n  const [didMount, setDidMount] = useState(show)\n\n  const tooltipContainerRef = useRef<HTMLDivElement>(null)\n  const timerRef = useRef<ReturnType<Window['setTimeout']>>()\n\n  useEffect(function hideTooltipContentWhenDisabled() {\n    if (disabled) {\n      setShow(false)\n    }\n  }, [disabled])\n\n  useEffect(function updateDidMount() {\n    setDidMount((prev) => prev || show)\n  }, [show])\n\n  const handleMouseEnter = useCallback(() => {\n    if (disabled) {\n      return\n    }\n\n    if (timerRef.current) {\n      clearTimeout(timerRef.current)\n    }\n\n    timerRef.current = window.setTimeout(() => {\n      setShow(true)\n    }, delayShow)\n  }, [\n    delayShow,\n    disabled,\n  ])\n\n  const handleMouseLeave = useCallback(() => {\n    if (disabled) {\n      return\n    }\n\n    if (timerRef.current) {\n      clearTimeout(timerRef.current)\n    }\n\n    timerRef.current = window.setTimeout(() => {\n      setShow(false)\n    }, delayHide)\n  }, [\n    delayHide,\n    disabled,\n  ])\n\n  const TooltipComponent = useMemo(() => {\n    if (!lazy || didMount) {\n      return (\n        <LegacyTooltipContent\n          as={as}\n          content={content}\n          contentClassName={contentClassName}\n          contentInterpolation={contentInterpolation}\n          contentWrapperStyle={contentWrapperStyle}\n          disabled={disabled}\n          placement={placement}\n          offset={offset}\n          allowHover={allowHover}\n          keepInContainer={keepInContainer}\n          tooltipContainer={tooltipContainerRef.current}\n          forwardedRef={forwardedRef}\n          testId={contentTestId}\n        />\n      )\n    }\n\n    return null\n  }, [\n    lazy,\n    didMount,\n    as,\n    content,\n    contentClassName,\n    contentInterpolation,\n    contentWrapperStyle,\n    disabled,\n    placement,\n    offset,\n    allowHover,\n    keepInContainer,\n    forwardedRef,\n    contentTestId,\n  ])\n\n  if (!children) {\n    return null\n  }\n\n  return (\n    <Container\n      ref={tooltipContainerRef}\n      data-testid={testId}\n      className={className}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...otherProps}\n    >\n      { children }\n      { show && TooltipComponent }\n    </Container>\n  )\n}))\n"],"names":["TOOLTIP_TEST_ID","TOOLTIP_CONTENT_TEST_ID","LegacyTooltip","memo","forwardRef","as","testId","contentTestId","className","contentClassName","contentInterpolation","contentWrapperStyle","content","lazy","placement","LegacyTooltipPosition","BottomCenter","disabled","offset","keepInContainer","allowHover","delayShow","delayHide","children","otherProps","forwardedRef","show","setShow","useState","didMount","setDidMount","tooltipContainerRef","useRef","timerRef","useEffect","hideTooltipContentWhenDisabled","updateDidMount","prev","handleMouseEnter","useCallback","current","clearTimeout","window","setTimeout","handleMouseLeave","TooltipComponent","useMemo","React","createElement","LegacyTooltipContent","tooltipContainer","Container","Object","assign","ref","onMouseEnter","onMouseLeave"],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var ZIndex = require('../../constants/ZIndex.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+var Mixins = require('../../foundation/Mixins.js');
+var Typography = require('../../foundation/Typography.js');
+
+const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "LegacyTooltipstyled__Container",
+  componentId: "sc-1fkdobk-0"
+})(["position:relative;"]);
+const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "LegacyTooltipstyled__ContentWrapper",
+  componentId: "sc-1fkdobk-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({
+  displayName: "LegacyTooltipstyled__Content",
+  componentId: "sc-1fkdobk-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;", ";", ";", ""], ({
+  foundation
+}) => foundation?.subTheme?.['txt-black-darkest'], ({
+  foundation
+}) => foundation?.elevation?.ev2(true), ({
+  foundation
+}) => foundation?.rounding?.round8, ({
+  interpolation
+}) => interpolation);
+const EllipsisableContent = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "LegacyTooltipstyled__EllipsisableContent",
+  componentId: "sc-1fkdobk-3"
+})(["", ""], Mixins.ellipsis(20, Typography.LineHeightAbsoluteNumber.Lh18));
+
+exports.Container = Container;
+exports.Content = Content;
+exports.ContentWrapper = ContentWrapper;
+exports.EllipsisableContent = EllipsisableContent;
+//# sourceMappingURL=LegacyTooltip.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyTooltip.styled.js","sources":["../../../../src/components/LegacyTooltip/LegacyTooltip.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,gCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAElC,CAAA,CAAA,CAAA,oBAAA,CAAA,EAAA;MACYC,cAAc,gBAAGL,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;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,8BAAA;EAAAC,WAAA,EAAA,cAAA;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,0CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACzCe,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,EAAAA,CAAAA,EAAAA,eAAQ,CAAC,EAAE,EAAEC,mCAAwB,CAACC,IAAI,CAAC;;;;;;;"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+let LegacyTooltipPosition = /*#__PURE__*/function (LegacyTooltipPosition) {
+  LegacyTooltipPosition["TopCenter"] = "topCenter";
+  LegacyTooltipPosition["TopLeft"] = "topLeft";
+  LegacyTooltipPosition["TopRight"] = "topRight";
+  LegacyTooltipPosition["RightCenter"] = "rightCenter";
+  LegacyTooltipPosition["RightTop"] = "rightTop";
+  LegacyTooltipPosition["RightBottom"] = "rightBottom";
+  LegacyTooltipPosition["BottomCenter"] = "bottomCenter";
+  LegacyTooltipPosition["BottomLeft"] = "bottomLeft";
+  LegacyTooltipPosition["BottomRight"] = "bottomRight";
+  LegacyTooltipPosition["LeftCenter"] = "leftCenter";
+  LegacyTooltipPosition["LeftTop"] = "leftTop";
+  LegacyTooltipPosition["LeftBottom"] = "leftBottom";
+  return LegacyTooltipPosition;
+}({});
+
+exports.LegacyTooltipPosition = LegacyTooltipPosition;
+//# sourceMappingURL=LegacyTooltip.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyTooltip.types.js","sources":["../../../../src/components/LegacyTooltip/LegacyTooltip.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 LegacyTooltipOptions {\n  placement?: LegacyTooltipPosition\n  offset?: number\n  keepInContainer?: boolean\n  allowHover?: boolean\n  delayShow?: number\n  delayHide?: number\n  contentTestId?: string\n  lazy?: boolean\n}\n\nexport interface LegacyTooltipProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  ContentProps,\n  DisableProps,\n  AdditionalStylableProps<'content' | 'contentWrapper'>,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps>,\n  LegacyTooltipOptions {\n}\n\nexport interface LegacyTooltipContentProps extends Pick<\nLegacyTooltipOptions,\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<LegacyTooltipOptions, 'placement' | 'offset' | 'allowHover'>> {\n  tooltipContainer: HTMLDivElement\n}\n\nexport interface GetReplacement extends Required<Pick<LegacyTooltipOptions, 'placement' | 'keepInContainer'>> {\n  tooltip: HTMLDivElement\n}\n\nexport enum LegacyTooltipPosition {\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":["LegacyTooltipPosition"],"mappings":";;AAuDYA,IAAAA,qBAAqB,0BAArBA,qBAAqB,EAAA;EAArBA,qBAAqB,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAArBA,qBAAqB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAArBA,qBAAqB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAArBA,qBAAqB,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAArBA,qBAAqB,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAArBA,qBAAqB,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAArBA,qBAAqB,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAArBA,qBAAqB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAArBA,qBAAqB,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAArBA,qBAAqB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAArBA,qBAAqB,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAArBA,qBAAqB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAArBA,qBAAqB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/{Tooltip/TooltipContent.js → LegacyTooltip/LegacyTooltipContent.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var ReactDOM = require('react-dom');
 var useEventHandler = require('../../hooks/useEventHandler.js');
@@ -9,9 +7,9 @@ var useMergeRefs = require('../../hooks/useMergeRefs.js');
 var domUtils = require('../../utils/domUtils.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var Text = require('../Text/Text.js');
-var Tooltip_types = require('./Tooltip.types.js');
+var LegacyTooltip_types = require('./LegacyTooltip.types.js');
 var utils = require('./utils.js');
-var Tooltip_styled = require('./Tooltip.styled.js');
+var LegacyTooltip_styled = require('./LegacyTooltip.styled.js');
 var Typography = require('../../foundation/Typography.js');
 
 function getNewLineComponent(strContent) {
@@ -43,7 +41,7 @@ function getContentComponent(content) {
   }
   return content;
 }
-const TooltipContent = ({
+const LegacyTooltipContent = ({
   as,
   content,
   contentClassName,
@@ -51,7 +49,7 @@ const TooltipContent = ({
   contentWrapperStyle: givenContentWrapperStyle,
   disabled = false,
   keepInContainer = false,
-  placement = Tooltip_types.TooltipPosition.BottomCenter,
+  placement = LegacyTooltip_types.LegacyTooltipPosition.BottomCenter,
   tooltipContainer,
   offset = 4,
   allowHover = false,
@@ -92,19 +90,18 @@ const TooltipContent = ({
     }
     return {};
   }, [tooltipContainer, givenContentWrapperStyle, replacement, offset, allowHover]);
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Tooltip_styled.ContentWrapper, {
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(LegacyTooltip_styled.ContentWrapper, {
     ref: tooltipWrapperRef,
     disabled: disabled || typeUtils.isEmpty(content),
     style: contentWrapperStyle
-  }, /*#__PURE__*/React.createElement(Tooltip_styled.Content, {
+  }, /*#__PURE__*/React.createElement(LegacyTooltip_styled.Content, {
     as: as,
     "data-testid": testId,
     className: contentClassName,
     interpolation: contentInterpolation,
     ref: mergedRef
-  }, /*#__PURE__*/React.createElement(Tooltip_styled.EllipsisableContent, null, ContentComponent))), domUtils.getRootElement());
+  }, /*#__PURE__*/React.createElement(LegacyTooltip_styled.EllipsisableContent, null, ContentComponent))), domUtils.getRootElement());
 };
-var TooltipContent$1 = TooltipContent;
 
-exports.default = TooltipContent$1;
-//# sourceMappingURL=TooltipContent.js.map
+exports.LegacyTooltipContent = LegacyTooltipContent;
+//# sourceMappingURL=LegacyTooltipContent.js.map

package/dist/cjs/components/LegacyTooltip/LegacyTooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyTooltipContent.js","sources":["../../../../src/components/LegacyTooltip/LegacyTooltipContent.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport { Typography } from '~/src/foundation'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getRootElement } from '~/src/utils/domUtils'\nimport {\n  isArray,\n  isEmpty,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type LegacyTooltipContentProps,\n  LegacyTooltipPosition,\n} from './LegacyTooltip.types'\nimport {\n  getReplacement,\n  getTooltipStyle,\n} from './utils'\n\nimport {\n  Content,\n  ContentWrapper,\n  EllipsisableContent,\n} from './LegacyTooltip.styled'\n\nfunction getNewLineComponent(strContent: string) {\n  return (\n    strContent.split('\\n').map((str, index) => {\n      if (index === 0) {\n        return (\n          <Text key={str} typo={Typography.Size14}>\n            { str }\n          </Text>\n        )\n      }\n\n      return (\n        <React.Fragment key={str}>\n          <br />\n          <Text typo={Typography.Size14}>\n            { str }\n          </Text>\n        </React.Fragment>\n      )\n    })\n  )\n}\n\nfunction getContentComponent(content?: React.ReactNode) {\n  if (isArray(content)) {\n    return content.map(item => {\n      if (isString(item)) {\n        return getNewLineComponent(item)\n      }\n\n      return item\n    })\n  }\n\n  if (isString(content)) {\n    return getNewLineComponent(content)\n  }\n\n  return content\n}\n\nexport const LegacyTooltipContent: React.FC<LegacyTooltipContentProps> = ({\n  as,\n  content,\n  contentClassName,\n  contentInterpolation,\n  contentWrapperStyle: givenContentWrapperStyle,\n  disabled = false,\n  keepInContainer = false,\n  placement = LegacyTooltipPosition.BottomCenter,\n  tooltipContainer,\n  offset = 4,\n  allowHover = false,\n  testId,\n  forwardedRef,\n}) => {\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(tooltipRef, forwardedRef)\n  const [replacement, setReplacement] = useState(placement)\n\n  const handleClickTooltip = useCallback((event: HTMLElementEventMap['click']) => {\n    event.stopPropagation()\n  }, [])\n\n  useEventHandler(tooltipRef.current, 'click', handleClickTooltip)\n\n  useEffect(() => {\n    if (!tooltipRef.current) { return }\n    const newPlacement = getReplacement({\n      tooltip: tooltipRef.current,\n      keepInContainer,\n      placement,\n    })\n    setReplacement(newPlacement)\n  }, [\n    keepInContainer,\n    placement,\n  ])\n\n  const ContentComponent = useMemo(() => getContentComponent(content), [content])\n\n  const contentWrapperStyle = useMemo(() => {\n    if (tooltipContainer) {\n      return {\n        ...givenContentWrapperStyle,\n        ...getTooltipStyle({\n          tooltipContainer,\n          placement: replacement,\n          offset,\n          allowHover,\n        }),\n      }\n    }\n\n    return {}\n  }, [\n    tooltipContainer,\n    givenContentWrapperStyle,\n    replacement,\n    offset,\n    allowHover,\n  ])\n\n  return (\n    ReactDOM.createPortal(\n      <ContentWrapper\n        ref={tooltipWrapperRef}\n        disabled={disabled || isEmpty(content)}\n        style={contentWrapperStyle}\n      >\n        <Content\n          as={as}\n          data-testid={testId}\n          className={contentClassName}\n          interpolation={contentInterpolation}\n          ref={mergedRef}\n        >\n          <EllipsisableContent>\n            { ContentComponent }\n          </EllipsisableContent>\n        </Content>\n      </ContentWrapper>,\n      getRootElement(),\n    )\n  )\n}\n\n"],"names":["getNewLineComponent","strContent","split","map","str","index","React","createElement","Text","key","typo","Typography","Size14","Fragment","getContentComponent","content","isArray","item","isString","LegacyTooltipContent","as","contentClassName","contentInterpolation","contentWrapperStyle","givenContentWrapperStyle","disabled","keepInContainer","placement","LegacyTooltipPosition","BottomCenter","tooltipContainer","offset","allowHover","testId","forwardedRef","tooltipRef","useRef","tooltipWrapperRef","mergedRef","useMergeRefs","replacement","setReplacement","useState","handleClickTooltip","useCallback","event","stopPropagation","useEventHandler","current","useEffect","newPlacement","getReplacement","tooltip","ContentComponent","useMemo","getTooltipStyle","ReactDOM","createPortal","ContentWrapper","ref","isEmpty","style","Content","className","interpolation","EllipsisableContent","getRootElement"],"mappings":"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"}

package/dist/cjs/components/{Tooltip → LegacyTooltip}/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var domUtils = require('../../utils/domUtils.js');
-var Tooltip_types = require('./Tooltip.types.js');
+var LegacyTooltip_types = require('./LegacyTooltip.types.js');
 
 function getReplacement({
   tooltip,
@@ -29,39 +29,39 @@ function getReplacement({
   const isOverRight = tooltipLeft + tooltipWidth > rootLeft + rootWidth;
   if (isOverTop) {
     if (isOverLeft) {
-      return Tooltip_types.TooltipPosition.BottomLeft;
+      return LegacyTooltip_types.LegacyTooltipPosition.BottomLeft;
     }
     if (isOverRight) {
-      return Tooltip_types.TooltipPosition.BottomRight;
+      return LegacyTooltip_types.LegacyTooltipPosition.BottomRight;
     }
-    return Tooltip_types.TooltipPosition.BottomCenter;
+    return LegacyTooltip_types.LegacyTooltipPosition.BottomCenter;
   }
   if (isOverBottom) {
     if (isOverLeft) {
-      return Tooltip_types.TooltipPosition.TopLeft;
+      return LegacyTooltip_types.LegacyTooltipPosition.TopLeft;
     }
     if (isOverRight) {
-      return Tooltip_types.TooltipPosition.TopRight;
+      return LegacyTooltip_types.LegacyTooltipPosition.TopRight;
     }
-    return Tooltip_types.TooltipPosition.TopCenter;
+    return LegacyTooltip_types.LegacyTooltipPosition.TopCenter;
   }
   if (isOverLeft) {
     if (isOverTop) {
-      return Tooltip_types.TooltipPosition.RightTop;
+      return LegacyTooltip_types.LegacyTooltipPosition.RightTop;
     }
     if (isOverBottom) {
-      return Tooltip_types.TooltipPosition.RightBottom;
+      return LegacyTooltip_types.LegacyTooltipPosition.RightBottom;
     }
-    return Tooltip_types.TooltipPosition.RightCenter;
+    return LegacyTooltip_types.LegacyTooltipPosition.RightCenter;
   }
   if (isOverRight) {
     if (isOverTop) {
-      return Tooltip_types.TooltipPosition.LeftTop;
+      return LegacyTooltip_types.LegacyTooltipPosition.LeftTop;
     }
     if (isOverBottom) {
-      return Tooltip_types.TooltipPosition.LeftBottom;
+      return LegacyTooltip_types.LegacyTooltipPosition.LeftBottom;
     }
-    return Tooltip_types.TooltipPosition.LeftCenter;
+    return LegacyTooltip_types.LegacyTooltipPosition.LeftCenter;
   }
   return placement;
 }
@@ -87,49 +87,49 @@ function getTooltipStyle({
   let offsetLeft = 0;
   let offsetStyle = {};
   switch (placement) {
-    case Tooltip_types.TooltipPosition.TopCenter:
-    case Tooltip_types.TooltipPosition.TopLeft:
-    case Tooltip_types.TooltipPosition.TopRight:
+    case LegacyTooltip_types.LegacyTooltipPosition.TopCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.TopLeft:
+    case LegacyTooltip_types.LegacyTooltipPosition.TopRight:
       translateY = -100;
       offsetBottom = offset;
       break;
-    case Tooltip_types.TooltipPosition.RightCenter:
-    case Tooltip_types.TooltipPosition.RightTop:
-    case Tooltip_types.TooltipPosition.RightBottom:
+    case LegacyTooltip_types.LegacyTooltipPosition.RightCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.RightTop:
+    case LegacyTooltip_types.LegacyTooltipPosition.RightBottom:
       left += containerWidth;
       offsetLeft = offset;
       break;
-    case Tooltip_types.TooltipPosition.BottomCenter:
-    case Tooltip_types.TooltipPosition.BottomLeft:
-    case Tooltip_types.TooltipPosition.BottomRight:
+    case LegacyTooltip_types.LegacyTooltipPosition.BottomCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.BottomLeft:
+    case LegacyTooltip_types.LegacyTooltipPosition.BottomRight:
       top += containerHeight;
       offsetTop = offset;
       break;
-    case Tooltip_types.TooltipPosition.LeftCenter:
-    case Tooltip_types.TooltipPosition.LeftTop:
-    case Tooltip_types.TooltipPosition.LeftBottom:
+    case LegacyTooltip_types.LegacyTooltipPosition.LeftCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.LeftTop:
+    case LegacyTooltip_types.LegacyTooltipPosition.LeftBottom:
       translateX = -100;
       offsetRight = offset;
       break;
   }
   switch (placement) {
-    case Tooltip_types.TooltipPosition.TopCenter:
-    case Tooltip_types.TooltipPosition.BottomCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.TopCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.BottomCenter:
       translateX = -50;
       left += containerWidth / 2;
       break;
-    case Tooltip_types.TooltipPosition.TopRight:
-    case Tooltip_types.TooltipPosition.BottomRight:
+    case LegacyTooltip_types.LegacyTooltipPosition.TopRight:
+    case LegacyTooltip_types.LegacyTooltipPosition.BottomRight:
       translateX = -100;
       left += containerWidth;
       break;
-    case Tooltip_types.TooltipPosition.RightCenter:
-    case Tooltip_types.TooltipPosition.LeftCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.RightCenter:
+    case LegacyTooltip_types.LegacyTooltipPosition.LeftCenter:
       translateY = -50;
       top += containerHeight / 2;
       break;
-    case Tooltip_types.TooltipPosition.RightBottom:
-    case Tooltip_types.TooltipPosition.LeftBottom:
+    case LegacyTooltip_types.LegacyTooltipPosition.RightBottom:
+    case LegacyTooltip_types.LegacyTooltipPosition.LeftBottom:
       translateY = -100;
       top += containerHeight;
       break;

package/dist/cjs/components/LegacyTooltip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/LegacyTooltip/utils.ts"],"sourcesContent":["import { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  type GetReplacement,\n  type GetTooltipStyle,\n  LegacyTooltipPosition,\n} from './LegacyTooltip.types'\n\nexport function getReplacement({\n  tooltip,\n  keepInContainer,\n  placement,\n}: GetReplacement): LegacyTooltipPosition {\n  if (!keepInContainer) {\n    return placement\n  }\n\n  const {\n    width: tooltipWidth,\n    height: tooltipHeight,\n    top: tooltipTop,\n    left: tooltipLeft,\n  } = tooltip.getBoundingClientRect()\n\n  const {\n    width: rootWidth,\n    height: rootHeight,\n    top: rootTop,\n    left: rootLeft,\n  } = getRootElement().getBoundingClientRect()\n\n  const isOverTop = tooltipTop < rootTop\n  const isOverBottom = tooltipTop + tooltipHeight > rootTop + rootHeight\n  const isOverLeft = tooltipLeft < rootLeft\n  const isOverRight = tooltipLeft + tooltipWidth > rootLeft + rootWidth\n\n  if (isOverTop) {\n    if (isOverLeft) {\n      return LegacyTooltipPosition.BottomLeft\n    }\n    if (isOverRight) {\n      return LegacyTooltipPosition.BottomRight\n    }\n    return LegacyTooltipPosition.BottomCenter\n  }\n\n  if (isOverBottom) {\n    if (isOverLeft) {\n      return LegacyTooltipPosition.TopLeft\n    }\n    if (isOverRight) {\n      return LegacyTooltipPosition.TopRight\n    }\n    return LegacyTooltipPosition.TopCenter\n  }\n\n  if (isOverLeft) {\n    if (isOverTop) {\n      return LegacyTooltipPosition.RightTop\n    }\n    if (isOverBottom) {\n      return LegacyTooltipPosition.RightBottom\n    }\n    return LegacyTooltipPosition.RightCenter\n  }\n\n  if (isOverRight) {\n    if (isOverTop) {\n      return LegacyTooltipPosition.LeftTop\n    }\n    if (isOverBottom) {\n      return LegacyTooltipPosition.LeftBottom\n    }\n    return LegacyTooltipPosition.LeftCenter\n  }\n\n  return placement\n}\n\nexport function getTooltipStyle({\n  tooltipContainer,\n  placement,\n  offset,\n  allowHover,\n}: GetTooltipStyle) {\n  const {\n    top: containerTop,\n    left: containerLeft,\n    width: containerWidth,\n    height: containerHeight,\n  } = tooltipContainer.getBoundingClientRect()\n\n  let top = containerTop\n  let left = containerLeft\n  let translateX = 0\n  let translateY = 0\n\n  let offsetTop = 0\n  let offsetRight = 0\n  let offsetBottom = 0\n  let offsetLeft = 0\n  let offsetStyle = {}\n\n  switch (placement) {\n    case LegacyTooltipPosition.TopCenter:\n    case LegacyTooltipPosition.TopLeft:\n    case LegacyTooltipPosition.TopRight:\n      translateY = -100\n      offsetBottom = offset\n      break\n    case LegacyTooltipPosition.RightCenter:\n    case LegacyTooltipPosition.RightTop:\n    case LegacyTooltipPosition.RightBottom:\n      left += containerWidth\n      offsetLeft = offset\n      break\n    case LegacyTooltipPosition.BottomCenter:\n    case LegacyTooltipPosition.BottomLeft:\n    case LegacyTooltipPosition.BottomRight:\n      top += containerHeight\n      offsetTop = offset\n      break\n    case LegacyTooltipPosition.LeftCenter:\n    case LegacyTooltipPosition.LeftTop:\n    case LegacyTooltipPosition.LeftBottom:\n      translateX = -100\n      offsetRight = offset\n      break\n  }\n\n  switch (placement) {\n    case LegacyTooltipPosition.TopCenter:\n    case LegacyTooltipPosition.BottomCenter:\n      translateX = -50\n      left += (containerWidth / 2)\n      break\n    case LegacyTooltipPosition.TopRight:\n    case LegacyTooltipPosition.BottomRight:\n      translateX = -100\n      left += containerWidth\n      break\n    case LegacyTooltipPosition.RightCenter:\n    case LegacyTooltipPosition.LeftCenter:\n      translateY = -50\n      top += (containerHeight / 2)\n      break\n    case LegacyTooltipPosition.RightBottom:\n    case LegacyTooltipPosition.LeftBottom:\n      translateY = -100\n      top += containerHeight\n      break\n  }\n\n  if (allowHover) {\n    offsetStyle = {\n      paddingTop: offsetTop,\n      paddingRight: offsetRight,\n      paddingBottom: offsetBottom,\n      paddingLeft: offsetLeft,\n    }\n  } else {\n    top += (offsetTop - offsetBottom)\n    left += (offsetLeft - offsetRight)\n  }\n\n  return {\n    position: 'fixed',\n    top,\n    left,\n    transform: `translate(${translateX}%, ${translateY}%)`,\n    ...offsetStyle,\n  }\n}\n"],"names":["getReplacement","tooltip","keepInContainer","placement","width","tooltipWidth","height","tooltipHeight","top","tooltipTop","left","tooltipLeft","getBoundingClientRect","rootWidth","rootHeight","rootTop","rootLeft","getRootElement","isOverTop","isOverBottom","isOverLeft","isOverRight","LegacyTooltipPosition","BottomLeft","BottomRight","BottomCenter","TopLeft","TopRight","TopCenter","RightTop","RightBottom","RightCenter","LeftTop","LeftBottom","LeftCenter","getTooltipStyle","tooltipContainer","offset","allowHover","containerTop","containerLeft","containerWidth","containerHeight","translateX","translateY","offsetTop","offsetRight","offsetBottom","offsetLeft","offsetStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","position","transform"],"mappings":"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"}

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

@@ -3,11 +3,11 @@
 var DisabledOpacity = require('../../constants/DisabledOpacity.js');
 var ListItem_types = require('./ListItem.types.js');
 var utils = require('./utils.js');
-var index = require('../../foundation/Transition/index.js');
 var Icon = require('../Icon/Icon.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
 var Typography = require('../../foundation/Typography.js');
+var index = require('../../foundation/Transition/index.js');
 
 const getColorFromColorVariantWithDefaultValue = (variant, defaultValue) => {
   switch (variant) {

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js

@@ -8,17 +8,17 @@ var typeUtils = require('../../utils/typeUtils.js');
 var ListMenuTitle_styled = require('./ListMenuTitle.styled.js');
 
 const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title';
-function ListMenuTitle({
+const ListMenuTitle = /*#__PURE__*/React.forwardRef(function ListMenuTitle({
   as,
   testId = SIDEBAR_MENU_TITLE_TEST_ID,
   content,
   hide = false,
   rightAction = null,
-  onClick = functionUtils.noop,
   onClickAction = functionUtils.noop,
   style,
-  className
-}) {
+  className,
+  ...rest
+}, forwardedRef) {
   const handleClickAction = React.useCallback(ev => {
     ev.stopPropagation();
     onClickAction();
@@ -26,17 +26,18 @@ function ListMenuTitle({
   if (hide) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ListMenuTitle_styled.Wrapper, {
+  return /*#__PURE__*/React.createElement(ListMenuTitle_styled.Wrapper, Object.assign({}, rest, {
+    ref: forwardedRef,
     "data-testid": testId,
     as: as,
     style: style,
-    className: className,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(ListMenuTitle_styled.TitleWrapper, null, content), !typeUtils.isNil(rightAction) && /*#__PURE__*/React.createElement("div", {
+    className: className
+  }), /*#__PURE__*/React.createElement(ListMenuTitle_styled.TitleWrapper, null, content), !typeUtils.isNil(rightAction) && /*#__PURE__*/React.createElement("div", {
     onClick: handleClickAction
   }, rightAction));
-}
+});
+var ListMenuTitle$1 = ListMenuTitle;
 
 exports.SIDEBAR_MENU_TITLE_TEST_ID = SIDEBAR_MENU_TITLE_TEST_ID;
-exports.default = ListMenuTitle;
+exports.default = ListMenuTitle$1;
 //# sourceMappingURL=ListMenuTitle.js.map

package/dist/cjs/components/ListMenuTitle/ListMenuTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenuTitle.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport type ListMenuTitleProps from './ListMenuTitle.types'\n\nimport {\n  TitleWrapper,\n  Wrapper,\n} from './ListMenuTitle.styled'\n\nexport const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'\n\nfunction ListMenuTitle({\n  as,\n  testId = SIDEBAR_MENU_TITLE_TEST_ID,\n  content,\n  hide = false,\n  rightAction = null,\n  onClick = noop,\n  onClickAction = noop,\n  style,\n  className,\n}: ListMenuTitleProps) {\n  const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {\n    ev.stopPropagation()\n    onClickAction()\n  }, [onClickAction])\n\n  if (hide) {\n    return null\n  }\n\n  return (\n    <Wrapper\n      data-testid={testId}\n      as={as}\n      style={style}\n      className={className}\n      onClick={onClick}\n    >\n      <TitleWrapper>\n        { content }\n      </TitleWrapper>\n      {\n        !isNil(rightAction) && (\n          <div\n            onClick={handleClickAction}\n          >\n            { rightAction }\n          </div>\n        )\n      }\n    </Wrapper>\n  )\n}\n\nexport default ListMenuTitle\n"],"names":["SIDEBAR_MENU_TITLE_TEST_ID","ListMenuTitle","as","testId","content","hide","rightAction","onClick","noop","onClickAction","style","className","handleClickAction","useCallback","ev","stopPropagation","React","createElement","Wrapper","TitleWrapper","isNil"],"mappings":";;;;;;;;;AAYO,MAAMA,0BAA0B,GAAG,kCAAiC;AAE3E,SAASC,aAAaA,CAAC;EACrBC,EAAE;AACFC,EAAAA,MAAM,GAAGH,0BAA0B;EACnCI,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,OAAO,GAAGC,kBAAI;AACdC,EAAAA,aAAa,GAAGD,kBAAI;EACpBE,KAAK;AACLC,EAAAA,SAAAA;AACkB,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAEC,EAAoC,IAAK;IAC9EA,EAAE,CAACC,eAAe,EAAE,CAAA;AACpBN,IAAAA,aAAa,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,IAAIJ,IAAI,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,oBACEW,KAAA,CAAAC,aAAA,CAACC,4BAAO,EAAA;AACN,IAAA,aAAA,EAAaf,MAAO;AACpBD,IAAAA,EAAE,EAAEA,EAAG;AACPQ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBJ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eAEjBS,KAAA,CAAAC,aAAA,CAACE,iCAAY,QACTf,OACU,CAAC,EAEb,CAACgB,eAAK,CAACd,WAAW,CAAC,iBACjBU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEV,IAAAA,OAAO,EAAEK,iBAAAA;GAEPN,EAAAA,WACC,CAGF,CAAC,CAAA;AAEd;;;;;"}
+{"version":3,"file":"ListMenuTitle.js","sources":["../../../../src/components/ListMenuTitle/ListMenuTitle.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport type ListMenuTitleProps from './ListMenuTitle.types'\n\nimport {\n  TitleWrapper,\n  Wrapper,\n} from './ListMenuTitle.styled'\n\nexport const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'\n\nconst ListMenuTitle = forwardRef<HTMLDivElement, ListMenuTitleProps>(function ListMenuTitle({\n  as,\n  testId = SIDEBAR_MENU_TITLE_TEST_ID,\n  content,\n  hide = false,\n  rightAction = null,\n  onClickAction = noop,\n  style,\n  className,\n  ...rest\n}, forwardedRef) {\n  const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {\n    ev.stopPropagation()\n    onClickAction()\n  }, [onClickAction])\n\n  if (hide) {\n    return null\n  }\n\n  return (\n    <Wrapper\n      {...rest}\n      ref={forwardedRef}\n      data-testid={testId}\n      as={as}\n      style={style}\n      className={className}\n    >\n      <TitleWrapper>\n        { content }\n      </TitleWrapper>\n      {\n        !isNil(rightAction) && (\n          <div\n            onClick={handleClickAction}\n          >\n            { rightAction }\n          </div>\n        )\n      }\n    </Wrapper>\n  )\n})\n\nexport default ListMenuTitle\n"],"names":["SIDEBAR_MENU_TITLE_TEST_ID","ListMenuTitle","forwardRef","as","testId","content","hide","rightAction","onClickAction","noop","style","className","rest","forwardedRef","handleClickAction","useCallback","ev","stopPropagation","React","createElement","Wrapper","Object","assign","ref","TitleWrapper","isNil","onClick"],"mappings":";;;;;;;;;AAeO,MAAMA,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,aAAa,gBAAGC,gBAAU,CAAqC,SAASD,aAAaA,CAAC;EAC1FE,EAAE;AACFC,EAAAA,MAAM,GAAGJ,0BAA0B;EACnCK,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,WAAW,GAAG,IAAI;AAClBC,EAAAA,aAAa,GAAGC,kBAAI;EACpBC,KAAK;EACLC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAEC,EAAoC,IAAK;IAC9EA,EAAE,CAACC,eAAe,EAAE,CAAA;AACpBT,IAAAA,aAAa,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,IAAIF,IAAI,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,oBACEY,KAAA,CAAAC,aAAA,CAACC,4BAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFV,IAAI,EAAA;AACRW,IAAAA,GAAG,EAAEV,YAAa;AAClB,IAAA,aAAA,EAAaT,MAAO;AACpBD,IAAAA,EAAE,EAAEA,EAAG;AACPO,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,CAAA,eAErBO,KAAA,CAAAC,aAAA,CAACK,iCAAY,QACTnB,OACU,CAAC,EAEb,CAACoB,eAAK,CAAClB,WAAW,CAAC,iBACjBW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEO,IAAAA,OAAO,EAAEZ,iBAAAA;GAEPP,EAAAA,WACC,CAGF,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEF,sBAAeN,aAAa;;;;;"}

package/dist/cjs/components/Modals/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps {}\n\nexport interface ModalContentContextValue extends\n  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Navigator/NavGroup/NavGroup.js

@@ -8,15 +8,13 @@ var functionUtils = require('../../../utils/functionUtils.js');
 var typeUtils = require('../../../utils/typeUtils.js');
 var Text = require('../../Text/Text.js');
 var NavGroup_styled = require('./NavGroup.styled.js');
-var LegacyIcon = require('../../LegacyIcon/LegacyIcon.js');
-var Icon_types = require('../../Icon/Icon.types.js');
 var Icon = require('../../Icon/Icon.js');
-var utils = require('../../LegacyIcon/utils.js');
+var Icon_types = require('../../Icon/Icon.types.js');
 var Typography = require('../../../foundation/Typography.js');
 
 const NAV_GROUP_TEST_ID = 'bezier-react-nav-group';
 const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon';
-function NavGroup({
+const NavGroup = /*#__PURE__*/React.forwardRef(function NavGroup({
   as,
   testId = NAV_GROUP_TEST_ID,
   name,
@@ -29,18 +27,19 @@ function NavGroup({
   leftIcon,
   open,
   active,
-  onClick = functionUtils.noop
-}) {
+  onClick = functionUtils.noop,
+  ...rest
+}, forwardedRef) {
   const handleClickItem = React.useCallback(e => {
     onClick(e, name);
   }, [name, onClick]);
   const hasChildren = !typeUtils.isNil(children);
   const chevronIconSource = open ? bezierIcons.ChevronSmallDownIcon : bezierIcons.ChevronSmallRightIcon;
-  const showLeftIcon = utils.isIconName(leftIcon);
   const ariaName = `${name}Menu`;
   return /*#__PURE__*/React.createElement(NavGroup_styled.Wrapper, {
     role: "none"
-  }, /*#__PURE__*/React.createElement(NavGroup_styled.Item, {
+  }, /*#__PURE__*/React.createElement(NavGroup_styled.Item, Object.assign({}, rest, {
+    ref: forwardedRef,
     as: as,
     active: active,
     style: style,
@@ -52,9 +51,9 @@ function NavGroup({
     "aria-haspopup": hasChildren,
     "aria-expanded": open,
     "aria-controls": ariaName
-  }, /*#__PURE__*/React.createElement(NavGroup_styled.LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React.createElement(LegacyIcon.default, {
+  }), /*#__PURE__*/React.createElement(NavGroup_styled.LeftIconWrapper, null, /*#__PURE__*/React.createElement(Icon.Icon, {
     testId: NAV_GROUP_LEFT_ICON_TEST_ID,
-    name: leftIcon,
+    source: leftIcon,
     size: Icon_types.IconSize.S,
     color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
   })), /*#__PURE__*/React.createElement(Text.default, {
@@ -68,7 +67,7 @@ function NavGroup({
     role: "menu",
     id: ariaName
   }, open && children));
-}
+});
 var NavGroup$1 = /*#__PURE__*/React.memo(NavGroup);
 
 exports.NAV_GROUP_LEFT_ICON_TEST_ID = NAV_GROUP_LEFT_ICON_TEST_ID;