@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.5

package/src/components/Tooltip/Tooltip.scss

@@ -1,133 +1,130 @@
-.tooltip-custom-wrapper {
-  display: flex;
-}
-[data-tippy-root] {
-  z-index: 2 !important;
-}
-.tippy-box {
-  background-color: #202f5b;
-  font-size: 0.875rem;
-  border-radius: 0.3125rem;
-  width: max-content;
-  max-width: 100%;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  position: relative;
-  border: 1px solid #d8dae5;
-  z-index: 2;
-
-  &.function {
-    .tippy-content {
-      background-color: #fff !important;
-      color: #000 !important;
-    }
-
-    &[data-placement] > .tippy-arrow:before {
-      color: #fff !important;
-    }
-  }
-
-  &.info {
-    .tippy-arrow {
-      color: #202f5b;
-    }
-  }
-
-  &.success {
-    border-radius: 1.875rem;
-    background-color: #3aaa35;
-    padding-inline: 0.625rem;
-  }
-
-  .tippy-content {
-    text-align: justify;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding: 0.625rem;
-  }
-
-  .tippy-arrow {
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-  }
-
-  &[data-placement^='top'] {
-    .tippy-arrow:before {
-      bottom: -0.4375rem;
-      border-width: 0.5rem 0.5rem 0 !important;
-    }
-  }
-
-  &[data-placement^='right'] {
-    .tippy-arrow:before {
-      left: -0.4375rem;
-      border-width: 0.5rem 0.5rem 0.5rem 0 !important;
-    }
-  }
-
-  &[data-placement^='bottom'] {
-    .tippy-arrow:before {
-      top: -0.4375rem;
-      border-width: 0 0.5rem 0.5rem !important;
-    }
-  }
-
-  &[data-placement^='left'] {
-    .tippy-arrow:before {
-      right: -0.4375rem;
-      border-width: 0.5rem 0 0.5rem 0.5rem !important;
-    }
-  }
-
-  &[data-placement^='bottom-start'] {
-    .tippy-arrow {
-      transform: translate(0.937rem, 0) !important;
-    }
-  }
-
-  &[data-placement^='bottom-end'] {
-    .tippy-arrow {
-      margin-left: calc(100% - 1.937rem);
-      transform: translate(0, 0) !important;
-    }
-  }
-
-  &[data-placement^='top-start'] {
-    .tippy-arrow {
-      transform: translate(0.937rem, 0) !important;
-    }
-  }
-
-  &[data-placement^='top-end'] {
-    .tippy-arrow {
-      transform: translate(0.937rem, 0) !important;
-    }
-  }
-
-  &.arrow-with-border {
-    border: 1px solid #d8dae5;
-
-    &[data-placement] {
-      .tippy-arrow {
-        top: 1px;
-        background-color: white;
-        z-index: 2;
-        height: 1px;
-
-        &:before {
-          width: 0.625rem;
-          height: 0.625rem;
-          background-color: white;
-          transform: rotate(45deg);
-          border: none;
-          border-left: 1px solid #d8dae5 !important;
-          border-top: 1px solid #d8dae5 !important;
-          z-index: 2;
-          top: -0.45rem;
-          transform-origin: center !important;
-        }
-      }
-    }
-  }
-}
+.tooltip-custom-wrapper {
+  display: flex;
+}
+
+.tippy-box {
+  background-color: #202f5b;
+  font-size: 0.875rem;
+  border-radius: 0.3125rem;
+  width: max-content;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  position: relative;
+  border: 1px solid #d8dae5;
+
+  &.function {
+    .tippy-content {
+      background-color: #fff !important;
+      color: #000 !important;
+    }
+  }
+
+  &[data-placement] > .tippy-arrow:before {
+    color: #fff !important;
+  }
+
+  &.info {
+    .tippy-arrow {
+      color: #202f5b;
+    }
+  }
+
+  &.success {
+    border-radius: 1.875rem;
+    background-color: #3aaa35;
+    padding-inline: 0.625rem;
+  }
+
+  .tippy-content {
+    text-align: justify;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.625rem;
+  }
+
+  .tippy-arrow {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-placement^='top'] {
+    .tippy-arrow:before {
+      bottom: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='right'] {
+    .tippy-arrow:before {
+      left: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    .tippy-arrow:before {
+      top: -0.4375rem;
+      border-width: 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='left'] {
+    .tippy-arrow:before {
+      right: -0.4375rem;
+      border-width: 0.5rem 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='bottom-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='bottom-end'] {
+    .tippy-arrow {
+      margin-left: calc(100% - 1.937rem);
+      transform: translate(0, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-end'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &.arrow-with-border {
+    border: 1px solid #d8dae5;
+
+    &[data-placement] {
+      .tippy-arrow {
+        top: 1px;
+        background-color: white;
+        z-index: 9999;
+        height: 1px;
+
+        &:before {
+          width: 1rem;
+          height: 1rem;
+          background-color: white;
+          transform: rotate(45deg);
+          border: none;
+          border-left: 1px solid #d8dae5 !important;
+          border-top: 1px solid #d8dae5 !important;
+          z-index: 20000000000;
+          top: -0.6rem;
+          transform-origin: center !important;
+        }
+      }
+    }
+  }
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,85 +1,86 @@
-import React, { useState, useEffect, ReactNode } from 'react'
-import Tippy, { TippyProps } from '@tippyjs/react'
-import 'tippy.js/dist/tippy.css'
-import './Tooltip.scss'
-
-interface TooltipProps extends TippyProps {
-  content: ReactNode
-  success?: boolean
-  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void
-  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void
-  visible?: boolean
-  delay?: [number, number]
-  type?: 'info' | 'function'
-  maxWidth?: number
-  className?: string
-  arrowWithBorder?: boolean
-  disabled?: boolean
-}
-
-const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  content,
-  success,
-  onMouseEnter,
-  onMouseLeave,
-  visible,
-  delay = [200, 400],
-  type = 'info',
-  maxWidth = 390,
-  className,
-  arrowWithBorder,
-  disabled,
-  ...props
-}) => {
-  const [rootFontSize, setRootFontSize] = useState(16)
-
-  useEffect(() => {
-    const handleFontSizeChange = (fontSize: number) => {
-      setRootFontSize((prev) => (prev !== fontSize ? fontSize : prev))
-    }
-
-    if (
-      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
-      window.applicationUIScaling &&
-      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
-      typeof window.applicationUIScaling.addEventHandler === 'function'
-    ) {
-      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
-      window.applicationUIScaling.addEventHandler(handleFontSizeChange)
-    }
-  }, [])
-
-  return (
-    <Tippy
-      visible={visible}
-      allowHTML={typeof content !== 'string'}
-      interactive
-      maxWidth={(maxWidth / 16) * rootFontSize}
-      delay={delay}
-      content={content}
-      placement="bottom-start"
-      className={`${success ? 'success' : ''} ${type} ${className || ''} ${
-        arrowWithBorder ? 'arrow-with-border' : ''
-      }`}
-      disabled={disabled}
-      {...props}
-    >
-      <div
-        className="tooltip-custom-wrapper"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        <div
-          className="tooltip-custom-wrapper"
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-        >
-          {children}
-        </div>
-      </div>
-    </Tippy>
-  )
-}
-
-export default Tooltip
+import React, { useState, useEffect, ReactNode } from 'react'
+import Tippy from '@tippyjs/react'
+import 'tippy.js/dist/tippy.css'
+import './Tooltip.scss'
+
+interface TooltipProps {
+  children: ReactNode
+  content: ReactNode
+  success?: boolean
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void
+  visible?: boolean
+  delay?: [number, number]
+  type?: 'info' | 'function'
+  maxWidth?: number
+  className?: string
+  arrowWithBorder?: boolean
+  disabled?: boolean
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  success,
+  onMouseEnter,
+  onMouseLeave,
+  visible,
+  delay = [200, 400],
+  type = 'info',
+  maxWidth = 390,
+  className,
+  arrowWithBorder,
+  disabled,
+  ...props
+}) => {
+  const [rootFontSize, setRootFontSize] = useState(16)
+
+  useEffect(() => {
+    const handleFontSizeChange = (fontSize: number) => {
+      setRootFontSize((prev) => (prev !== fontSize ? fontSize : prev))
+    }
+
+    if (
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      window.applicationUIScaling &&
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      typeof window.applicationUIScaling.addEventHandler === 'function'
+    ) {
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      window.applicationUIScaling.addEventHandler(handleFontSizeChange)
+    }
+  }, [])
+
+  return (
+    <Tippy
+      visible={visible}
+      allowHTML={typeof content !== 'string'}
+      interactive
+      maxWidth={(maxWidth / 16) * rootFontSize}
+      delay={delay}
+      content={content}
+      placement="bottom-start"
+      className={`${success ? 'success' : ''} ${type} ${className || ''} ${
+        arrowWithBorder ? 'arrow-with-border' : ''
+      }`}
+      disabled={disabled}
+      {...props}
+    >
+      <div
+        className="tooltip-custom-wrapper"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <div
+          className="tooltip-custom-wrapper"
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {children}
+        </div>
+      </div>
+    </Tippy>
+  )
+}
+
+export default Tooltip