widenarrow-ui 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/components/ToolTip/ToolTip.d.ts +2 -0
  2. package/lib/index.esm.js +35 -33
  3. package/lib/index.esm.js.map +1 -1
  4. package/lib/index.js +34 -32
  5. package/lib/index.js.map +1 -1
  6. package/package.json +6 -5
  7. package/src/components/ToolTip/ToolTip.module.scss +7 -2
  8. package/src/components/ToolTip/ToolTip.tsx +53 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "widenarrow-ui",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
@@ -37,6 +37,7 @@
37
37
  "@types/classnames": "2.3.1",
38
38
  "@types/ramda": "0.29.4",
39
39
  "@types/react": "18.2.21",
40
+ "@types/react-dom": "^18.2.14",
40
41
  "@typescript-eslint/eslint-plugin": "5.29.0",
41
42
  "autoprefixer": "10.4.15",
42
43
  "babel-eslint": "10.1.0",
@@ -47,6 +48,7 @@
47
48
  "postcss": "8.4.21",
48
49
  "react": "18.2.0",
49
50
  "react-dom": "18.2.0",
51
+ "react-tooltip": "5.21.5",
50
52
  "rollup": "3.21.6",
51
53
  "rollup-plugin-copy": "3.5.0",
52
54
  "rollup-plugin-dts": "5.3.0",
@@ -56,15 +58,14 @@
56
58
  "storybook": "7.4.2",
57
59
  "storybook-css-modules": "1.0.8",
58
60
  "tsconfig-paths-webpack-plugin": "4.1.0",
59
- "typescript": "5.0.4",
60
- "react-tooltip": "5.21.5"
61
+ "typescript": "5.0.4"
61
62
  },
62
63
  "peerDependencies": {
63
- "react-tooltip": "4.2.13",
64
64
  "@types/react": "18.2.21",
65
65
  "ramda": "0.26.1",
66
66
  "react": "18.2.0",
67
- "react-dom": "18.2.0"
67
+ "react-dom": "18.2.0",
68
+ "react-tooltip": "5.21.5"
68
69
  },
69
70
  "dependencies": {
70
71
  "classnames": "2.2.6"
package/src/components/ToolTip/ToolTip.module.scss CHANGED
@@ -1,12 +1,17 @@
1
1
  @import 'src/styles/mixins.scss';
2
2
 
3
+ :root {
4
+ // overwrite default 0.9 opacity variable
5
+ --rt-opacity: 1 !important;
6
+ }
7
+
3
8
  // Need to add !important to override libraries' styles
4
- .tooltip {
9
+ .container {
5
10
  z-index: $tooltip-z-index !important;
6
11
  box-shadow: $box-shadow-tooltip !important;
7
12
  font-weight: 500 !important;
8
13
  font-size: $font-size-m !important;
9
- // display: block !important;
14
+ display: block !important;
10
15
  pointer-events: none !important;
11
16
  max-width: 420px;
12
17
 
package/src/components/ToolTip/ToolTip.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Fragment, FC, ReactNode } from 'react';
2
2
  import { Tooltip as ReactToolTip } from 'react-tooltip';
3
+ import { createPortal } from 'react-dom';
3
4
  import classNames from 'classnames/bind';
4
5
 
5
6
  import styles from './ToolTip.module.scss';
@@ -13,6 +14,8 @@ function uuid() {
13
14
  return `${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}`;
14
15
  }
15
16
 
17
+ const htmlRootNode = document.getElementById('root') as HTMLElement;
18
+
16
19
  /**
17
20
  |--------------------------------------------------
18
21
  | This components extends the react-tooltip library.
@@ -21,12 +24,13 @@ function uuid() {
21
24
  | https://react-tooltip.netlify.com/
22
25
  |--------------------------------------------------
23
26
  */
24
-
25
27
  interface Props {
26
28
  text?: string;
27
29
  children?: string | number | ReactNode | null;
30
+ component?: ReactNode;
28
31
  disabled?: boolean;
29
32
  withEllipsis?: boolean;
33
+ displayInPortal?: boolean;
30
34
  className?: string;
31
35
  toolTipClassName?: string;
32
36
  id?: string;
@@ -35,42 +39,70 @@ interface Props {
35
39
  placement?: 'top' | 'right' | 'bottom' | 'left';
36
40
  }
37
41
 
38
- const ToolTip: FC<Props> = ({ text, children, placement, disabled, className, toolTipClassName, withEllipsis, id, variant, offset }) => {
42
+ const ToolTip: FC<Props> = ({
43
+ text,
44
+ children,
45
+ disabled,
46
+ className,
47
+ toolTipClassName,
48
+ component,
49
+ withEllipsis,
50
+ id,
51
+ displayInPortal,
52
+ placement = 'top',
53
+ variant = 'dark',
54
+ offset
55
+ }) => {
39
56
  if (!children) {
40
57
  return null;
41
58
  }
42
59
 
43
60
  if (disabled || !text) {
44
- return children;
61
+ return <Fragment>{children}</Fragment>;
45
62
  }
46
63
 
47
64
  const uniq = id ? `${id}` : uuid();
48
65
 
66
+ const toolTipMarkup = (
67
+ <ReactToolTip
68
+ className={s('container', {
69
+ [toolTipClassName as string]: toolTipClassName
70
+ })}
71
+ id={uniq}
72
+ place={placement}
73
+ variant={variant}
74
+ offset={offset}
75
+ delayShow={300}
76
+ closeOnScroll
77
+ >
78
+ {text ? <span>{text as string}</span> : null}
79
+ {component || null}
80
+ </ReactToolTip>
81
+ );
82
+
83
+ if (displayInPortal || !!htmlRootNode) {
84
+ return (
85
+ <Fragment>
86
+ {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
87
+ {/* @ts-ignore */}
88
+ <div data-tooltip-id={uniq} className={s({ [className as string]: className, withEllipsis })}>
89
+ {children}
90
+ </div>
91
+ {createPortal(toolTipMarkup, htmlRootNode)}
92
+ </Fragment>
93
+ );
94
+ }
95
+
49
96
  return (
50
97
  <Fragment>
98
+ {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
99
+ {/* @ts-ignore */}
51
100
  <div data-tooltip-id={uniq} className={s({ [className as string]: className, withEllipsis })}>
52
101
  {children}
53
102
  </div>
54
- <ReactToolTip
55
- className={s('tooltip', {
56
- [toolTipClassName as string]: toolTipClassName
57
- })}
58
- id={uniq}
59
- place={placement}
60
- variant={variant}
61
- offset={offset}
62
- delayShow={300}
63
- closeOnScroll
64
- >
65
- {text ? <span>{text}</span> : null}
66
- </ReactToolTip>
103
+ {toolTipMarkup}
67
104
  </Fragment>
68
105
  );
69
106
  };
70
107
 
71
- ToolTip.defaultProps = {
72
- variant: 'dark',
73
- placement: 'top'
74
- };
75
-
76
108
  export default ToolTip;