groundfloor-react-ui 1.0.19 → 1.0.20

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 (26) hide show
  1. package/components/Accordion/Accordion.js +12 -6
  2. package/components/Cards/Card.js +25 -30
  3. package/components/Cards/DocumentCard.js +83 -89
  4. package/components/Divider/Divider.js +23 -30
  5. package/components/FilterChip/FilterChip.js +34 -32
  6. package/components/Form/HeaderComponent.js +57 -27
  7. package/components/GroupAvatars/GroupAvatars.js +12 -16
  8. package/components/GroupButtons/GroupButtonsPopup.js +3 -9
  9. package/components/Inputs/CheckBoxInput.js +48 -26
  10. package/components/Inputs/DropdownSelect.js +55 -10
  11. package/components/Inputs/DropzoneInput.js +83 -68
  12. package/components/Inputs/RadioInput.js +55 -29
  13. package/components/Inputs/Signature.js +88 -38
  14. package/components/Inputs/TextArea.js +24 -40
  15. package/components/Inputs/TimeInput.js +9 -25
  16. package/components/Inputs/ToggleSwitch.js +87 -59
  17. package/components/Modal/ModalComp.js +61 -37
  18. package/components/Pagination/Pagination.js +30 -54
  19. package/components/ProgressBar/ProgressBar.js +57 -40
  20. package/components/Rating/Rating.js +8 -14
  21. package/components/Tables/Table.js +56 -34
  22. package/components/Tooltip/Tooltip.js +135 -141
  23. package/components/constants/defaultStyle.js +28 -37
  24. package/dist/index.es.js +413 -374
  25. package/dist/index.js +406 -367
  26. package/package.json +1 -1
package/components/Tables/Table.js CHANGED
@@ -1,16 +1,24 @@
1
- import React from 'react';
2
1
  import PropTypes from 'prop-types';
3
- import DataTable from "react-data-table-component";
2
+ import React from 'react';
3
+ import DataTable from 'react-data-table-component';
4
+ import styled, { useTheme } from 'styled-components';
4
5
  import defaultStyles from '../constants/defaultStyle';
6
+ import defaultThemeColor from '../constants/defaultThemeColor';
5
7
  import { Icon } from '../Icon';
6
8
 
7
9
  /**
8
10
  * Primary UI component for user interaction
9
11
  */
10
12
 
13
+ const WrapperDiv = styled.div`
14
+ .form-check-input {
15
+ accent-color: ${({ theme }) => theme.primary['primary-1']};
16
+ }
17
+ `;
18
+
11
19
  export const Table = ({
12
- theme,
13
20
  customStyles,
21
+ inBuiltCss,
14
22
  type = 'table',
15
23
  sortIcon,
16
24
  data,
@@ -24,26 +32,40 @@ export const Table = ({
24
32
  conditionalRowStyles,
25
33
  fixedHeader,
26
34
  fixedHeaderScrollHeight,
27
- ...props }) => {
28
-
29
- let tableStyle = {}
30
-
31
- if (theme) {
32
- if (theme[type]) {
33
-
34
- tableStyle = theme[type];
35
+ checkboxColor,
36
+ ...props
37
+ }) => {
38
+ let tableStyle = {};
39
+
40
+ if (inBuiltCss) {
41
+ if (inBuiltCss[type]) {
42
+ tableStyle = inBuiltCss[type];
35
43
  }
36
44
  }
37
45
 
38
-
39
46
  if (customStyles) {
40
47
  for (const property in customStyles) {
41
- tableStyle[property] = customStyles[property]
48
+ tableStyle[property] = customStyles[property];
42
49
  }
43
50
  }
44
51
 
45
- return (
52
+ const activeTheme = useTheme() || defaultThemeColor;
53
+
54
+ const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) => {
55
+ return (
56
+ <WrapperDiv theme={activeTheme}>
57
+ <input
58
+ type='checkbox'
59
+ className='form-check-input'
60
+ ref={ref}
61
+ onClick={onClick}
62
+ {...rest}
63
+ />
64
+ </WrapperDiv>
65
+ );
66
+ });
46
67
 
68
+ return (
47
69
  <DataTable
48
70
  responsive={responsive}
49
71
  data={data}
@@ -57,25 +79,22 @@ export const Table = ({
57
79
  progressComponent={progressComponent ? progressComponent : undefined}
58
80
  sortServer={sortServer}
59
81
  onSort={(columnInfo, direction, event) => {
60
- handleOnSort(columnInfo, direction, event)
82
+ handleOnSort(columnInfo, direction, event);
61
83
  }}
62
84
  conditionalRowStyles={conditionalRowStyles}
63
85
  fixedHeader={fixedHeader}
64
86
  fixedHeaderScrollHeight={fixedHeaderScrollHeight}
87
+ selectableRowsComponent={Checkbox}
65
88
  {...props}
66
89
  />
67
-
68
-
69
-
70
-
71
90
  );
72
91
  };
73
92
 
74
93
  Table.propTypes = {
75
94
  /**
76
- * Theme object
95
+ * inBuiltCss object
77
96
  */
78
- theme: PropTypes.object,
97
+ inBuiltCss: PropTypes.object,
79
98
  /**
80
99
  * Optional component to override the default sorting icon (must be downward)
81
100
  */
@@ -121,7 +140,7 @@ Table.propTypes = {
121
140
  */
122
141
  fixedHeader: PropTypes.bool,
123
142
  /**
124
- * Optional to set height of the table
143
+ * Optional to set height of the table
125
144
  */
126
145
  fixedHeaderScrollHeight: PropTypes.string,
127
146
  /**
@@ -133,24 +152,27 @@ Table.propTypes = {
133
152
  };
134
153
 
135
154
  Table.defaultProps = {
136
- theme: defaultStyles,
137
- sortIcon: <Icon
138
- icon={'arrow-down'}
139
- size={11}
140
- color={'#333333'}
141
- style={{
142
- transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
143
- }}
144
- />,
155
+ inBuiltCss: defaultStyles,
156
+ sortIcon: (
157
+ <Icon
158
+ icon={'arrow-down'}
159
+ size={11}
160
+ color={'#333333'}
161
+ style={{
162
+ transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
163
+ }}
164
+ />
165
+ ),
145
166
  data: [],
146
167
  tableColumns: [],
147
168
  progressPending: false,
148
169
  defaultSortFieldId: null,
149
- handleOnSort: (columnInfo, direction, event) => { console.log(columnInfo, direction, event) },
170
+ handleOnSort: (columnInfo, direction, event) => {
171
+ console.log(columnInfo, direction, event);
172
+ },
150
173
  sortServer: null,
151
174
  progressComponent: undefined,
152
175
  responsive: true,
153
176
  fixedHeader: true,
154
177
  fixedHeaderScrollHeight: '100vh',
155
- };
156
-
178
+ };
package/components/Tooltip/Tooltip.js CHANGED
@@ -1,23 +1,23 @@
1
- import React from "react";
2
1
  import PropTypes from 'prop-types';
2
+ import React from "react";
3
+ import { usePopperTooltip } from 'react-popper-tooltip';
3
4
  import styled from 'styled-components';
4
5
  import defaultStyles from '../constants/defaultStyle';
5
- import { usePopperTooltip } from 'react-popper-tooltip';
6
6
 
7
7
  /**
8
8
  * Primary UI component for user interaction
9
9
  */
10
10
  const TooltipContainer = styled.div`
11
- ${({ theme, type, customStylesTPContainer }) => {
12
- if (theme) {
11
+ ${({ inBuiltCss, type, customStylesTPContainer }) => {
12
+ if (inBuiltCss) {
13
13
  let tempObj = {};
14
- if (theme['tooltip-container']) {
15
- for (const property in theme['common']) {
16
- tempObj[property] = theme['common'][property]
14
+ if (inBuiltCss['tooltip-container']) {
15
+ for (const property in inBuiltCss['common']) {
16
+ tempObj[property] = inBuiltCss['common'][property]
17
17
  }
18
- for (const property in theme['tooltip-container']) {
19
- tempObj[property] = theme['tooltip-container'][property]
20
- delete theme.common[property]
18
+ for (const property in inBuiltCss['tooltip-container']) {
19
+ tempObj[property] = inBuiltCss['tooltip-container'][property]
20
+ delete inBuiltCss.common[property]
21
21
  }
22
22
  }
23
23
  return { ...tempObj, ...customStylesTPContainer };
@@ -25,16 +25,16 @@ ${({ theme, type, customStylesTPContainer }) => {
25
25
  }}
26
26
 
27
27
  &[data-popper-placement*='bottom'] .tooltip-arrow {
28
- ${({ theme, type, customStylesTPAbottom }) => {
29
- if (theme) {
28
+ ${({ inBuiltCss, type, customStylesTPAbottom }) => {
29
+ if (inBuiltCss) {
30
30
  let tempObj = {};
31
- if (theme['tp-cont-bottom-arrow']) {
32
- for (const property in theme['common']) {
33
- tempObj[property] = theme['common'][property]
31
+ if (inBuiltCss['tp-cont-bottom-arrow']) {
32
+ for (const property in inBuiltCss['common']) {
33
+ tempObj[property] = inBuiltCss['common'][property]
34
34
  }
35
- for (const property in theme['tp-cont-bottom-arrow']) {
36
- tempObj[property] = theme['tp-cont-bottom-arrow'][property]
37
- delete theme.common[property]
35
+ for (const property in inBuiltCss['tp-cont-bottom-arrow']) {
36
+ tempObj[property] = inBuiltCss['tp-cont-bottom-arrow'][property]
37
+ delete inBuiltCss.common[property]
38
38
  }
39
39
  }
40
40
  return { ...tempObj, ...customStylesTPAbottom };
@@ -43,16 +43,16 @@ ${({ theme, type, customStylesTPContainer }) => {
43
43
  }
44
44
 
45
45
  &[data-popper-placement*='bottom'] .tooltip-arrow::before {
46
- ${({ theme, type, customStylesTPAbottomBefore }) => {
47
- if (theme) {
46
+ ${({ inBuiltCss, type, customStylesTPAbottomBefore }) => {
47
+ if (inBuiltCss) {
48
48
  let tempObj = {};
49
- if (theme['tp-cont-bottom-arrow-before']) {
50
- for (const property in theme['common']) {
51
- tempObj[property] = theme['common'][property]
49
+ if (inBuiltCss['tp-cont-bottom-arrow-before']) {
50
+ for (const property in inBuiltCss['common']) {
51
+ tempObj[property] = inBuiltCss['common'][property]
52
52
  }
53
- for (const property in theme['tp-cont-bottom-arrow-before']) {
54
- tempObj[property] = theme['tp-cont-bottom-arrow-before'][property]
55
- delete theme.common[property]
53
+ for (const property in inBuiltCss['tp-cont-bottom-arrow-before']) {
54
+ tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-before'][property]
55
+ delete inBuiltCss.common[property]
56
56
  }
57
57
  }
58
58
  return { ...tempObj, ...customStylesTPAbottomBefore };
@@ -61,16 +61,16 @@ ${({ theme, type, customStylesTPContainer }) => {
61
61
  }
62
62
 
63
63
  &[data-popper-placement*='bottom'] .tooltip-arrow::after {
64
- ${({ theme, type, customStylesTPAbottomAfter }) => {
65
- if (theme) {
64
+ ${({ inBuiltCss, type, customStylesTPAbottomAfter }) => {
65
+ if (inBuiltCss) {
66
66
  let tempObj = {};
67
- if (theme['tp-cont-bottom-arrow-before']) {
68
- for (const property in theme['common']) {
69
- tempObj[property] = theme['common'][property]
67
+ if (inBuiltCss['tp-cont-bottom-arrow-before']) {
68
+ for (const property in inBuiltCss['common']) {
69
+ tempObj[property] = inBuiltCss['common'][property]
70
70
  }
71
- for (const property in theme['tp-cont-bottom-arrow-after']) {
72
- tempObj[property] = theme['tp-cont-bottom-arrow-after'][property]
73
- delete theme.common[property]
71
+ for (const property in inBuiltCss['tp-cont-bottom-arrow-after']) {
72
+ tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-after'][property]
73
+ delete inBuiltCss.common[property]
74
74
  }
75
75
  }
76
76
  return { ...tempObj, ...customStylesTPAbottomAfter };
@@ -78,16 +78,16 @@ ${({ theme, type, customStylesTPContainer }) => {
78
78
  }}
79
79
  }
80
80
  &[data-popper-placement*='top'] .tooltip-arrow {
81
- ${({ theme, type, customStylesTPAtop }) => {
82
- if (theme) {
81
+ ${({ inBuiltCss, type, customStylesTPAtop }) => {
82
+ if (inBuiltCss) {
83
83
  let tempObj = {};
84
- if (theme['tp-cont-top-arrow']) {
85
- for (const property in theme['common']) {
86
- tempObj[property] = theme['common'][property]
84
+ if (inBuiltCss['tp-cont-top-arrow']) {
85
+ for (const property in inBuiltCss['common']) {
86
+ tempObj[property] = inBuiltCss['common'][property]
87
87
  }
88
- for (const property in theme['tp-cont-top-arrow']) {
89
- tempObj[property] = theme['tp-cont-top-arrow'][property]
90
- delete theme.common[property]
88
+ for (const property in inBuiltCss['tp-cont-top-arrow']) {
89
+ tempObj[property] = inBuiltCss['tp-cont-top-arrow'][property]
90
+ delete inBuiltCss.common[property]
91
91
  }
92
92
  }
93
93
  return { ...tempObj, ...customStylesTPAtop };
@@ -95,16 +95,16 @@ ${({ theme, type, customStylesTPContainer }) => {
95
95
  }}
96
96
  }
97
97
  &[data-popper-placement*='top'] .tooltip-arrow::before {
98
- ${({ theme, type, customStylesTPAtopBefore }) => {
99
- if (theme) {
98
+ ${({ inBuiltCss, type, customStylesTPAtopBefore }) => {
99
+ if (inBuiltCss) {
100
100
  let tempObj = {};
101
- if (theme['tp-cont-top-arrow-before']) {
102
- for (const property in theme['common']) {
103
- tempObj[property] = theme['common'][property]
101
+ if (inBuiltCss['tp-cont-top-arrow-before']) {
102
+ for (const property in inBuiltCss['common']) {
103
+ tempObj[property] = inBuiltCss['common'][property]
104
104
  }
105
- for (const property in theme['tp-cont-top-arrow-before']) {
106
- tempObj[property] = theme['tp-cont-top-arrow-before'][property]
107
- delete theme.common[property]
105
+ for (const property in inBuiltCss['tp-cont-top-arrow-before']) {
106
+ tempObj[property] = inBuiltCss['tp-cont-top-arrow-before'][property]
107
+ delete inBuiltCss.common[property]
108
108
  }
109
109
  }
110
110
  return { ...tempObj, ...customStylesTPAtopBefore };
@@ -112,16 +112,16 @@ ${({ theme, type, customStylesTPContainer }) => {
112
112
  }}
113
113
  }
114
114
  &[data-popper-placement*='top'] .tooltip-arrow::after {
115
- ${({ theme, type, customStylesTPAtopAfter }) => {
116
- if (theme) {
115
+ ${({ inBuiltCss, type, customStylesTPAtopAfter }) => {
116
+ if (inBuiltCss) {
117
117
  let tempObj = {};
118
- if (theme['tp-cont-top-arrow-before']) {
119
- for (const property in theme['common']) {
120
- tempObj[property] = theme['common'][property]
118
+ if (inBuiltCss['tp-cont-top-arrow-before']) {
119
+ for (const property in inBuiltCss['common']) {
120
+ tempObj[property] = inBuiltCss['common'][property]
121
121
  }
122
- for (const property in theme['tp-cont-top-arrow-after']) {
123
- tempObj[property] = theme['tp-cont-top-arrow-after'][property]
124
- delete theme.common[property]
122
+ for (const property in inBuiltCss['tp-cont-top-arrow-after']) {
123
+ tempObj[property] = inBuiltCss['tp-cont-top-arrow-after'][property]
124
+ delete inBuiltCss.common[property]
125
125
  }
126
126
  }
127
127
  return { ...tempObj, ...customStylesTPAtopAfter };
@@ -129,16 +129,16 @@ ${({ theme, type, customStylesTPContainer }) => {
129
129
  }}
130
130
  }
131
131
  &[data-popper-placement*='right'] .tooltip-arrow {
132
- ${({ theme, type, customStylesTPAright }) => {
133
- if (theme) {
132
+ ${({ inBuiltCss, type, customStylesTPAright }) => {
133
+ if (inBuiltCss) {
134
134
  let tempObj = {};
135
- if (theme['tp-cont-right-arrow']) {
136
- for (const property in theme['common']) {
137
- tempObj[property] = theme['common'][property]
135
+ if (inBuiltCss['tp-cont-right-arrow']) {
136
+ for (const property in inBuiltCss['common']) {
137
+ tempObj[property] = inBuiltCss['common'][property]
138
138
  }
139
- for (const property in theme['tp-cont-right-arrow']) {
140
- tempObj[property] = theme['tp-cont-right-arrow'][property]
141
- delete theme.common[property]
139
+ for (const property in inBuiltCss['tp-cont-right-arrow']) {
140
+ tempObj[property] = inBuiltCss['tp-cont-right-arrow'][property]
141
+ delete inBuiltCss.common[property]
142
142
  }
143
143
  }
144
144
  return { ...tempObj, ...customStylesTPAright };
@@ -146,16 +146,16 @@ ${({ theme, type, customStylesTPContainer }) => {
146
146
  }}
147
147
  }
148
148
  &[data-popper-placement*='right'] .tooltip-arrow::before {
149
- ${({ theme, type, customStylesTPArightBefore }) => {
150
- if (theme) {
149
+ ${({ inBuiltCss, type, customStylesTPArightBefore }) => {
150
+ if (inBuiltCss) {
151
151
  let tempObj = {};
152
- if (theme['tp-cont-right-arrow-before']) {
153
- for (const property in theme['common']) {
154
- tempObj[property] = theme['common'][property]
152
+ if (inBuiltCss['tp-cont-right-arrow-before']) {
153
+ for (const property in inBuiltCss['common']) {
154
+ tempObj[property] = inBuiltCss['common'][property]
155
155
  }
156
- for (const property in theme['tp-cont-right-arrow-before']) {
157
- tempObj[property] = theme['tp-cont-right-arrow-before'][property]
158
- delete theme.common[property]
156
+ for (const property in inBuiltCss['tp-cont-right-arrow-before']) {
157
+ tempObj[property] = inBuiltCss['tp-cont-right-arrow-before'][property]
158
+ delete inBuiltCss.common[property]
159
159
  }
160
160
  }
161
161
  return { ...tempObj, ...customStylesTPArightBefore };
@@ -163,16 +163,16 @@ ${({ theme, type, customStylesTPContainer }) => {
163
163
  }}
164
164
  }
165
165
  &[data-popper-placement*='right'] .tooltip-arrow::after {
166
- ${({ theme, type, customStylesTPArightAfter }) => {
167
- if (theme) {
166
+ ${({ inBuiltCss, type, customStylesTPArightAfter }) => {
167
+ if (inBuiltCss) {
168
168
  let tempObj = {};
169
- if (theme['tp-cont-right-arrow-before']) {
170
- for (const property in theme['common']) {
171
- tempObj[property] = theme['common'][property]
169
+ if (inBuiltCss['tp-cont-right-arrow-before']) {
170
+ for (const property in inBuiltCss['common']) {
171
+ tempObj[property] = inBuiltCss['common'][property]
172
172
  }
173
- for (const property in theme['tp-cont-right-arrow-after']) {
174
- tempObj[property] = theme['tp-cont-right-arrow-after'][property]
175
- delete theme.common[property]
173
+ for (const property in inBuiltCss['tp-cont-right-arrow-after']) {
174
+ tempObj[property] = inBuiltCss['tp-cont-right-arrow-after'][property]
175
+ delete inBuiltCss.common[property]
176
176
  }
177
177
  }
178
178
  return { ...tempObj, ...customStylesTPArightAfter };
@@ -180,16 +180,16 @@ ${({ theme, type, customStylesTPContainer }) => {
180
180
  }}
181
181
  }
182
182
  &[data-popper-placement*='left'] .tooltip-arrow {
183
- ${({ theme, type, customStylesTPAleft }) => {
184
- if (theme) {
183
+ ${({ inBuiltCss, type, customStylesTPAleft }) => {
184
+ if (inBuiltCss) {
185
185
  let tempObj = {};
186
- if (theme['tp-cont-left-arrow']) {
187
- for (const property in theme['common']) {
188
- tempObj[property] = theme['common'][property]
186
+ if (inBuiltCss['tp-cont-left-arrow']) {
187
+ for (const property in inBuiltCss['common']) {
188
+ tempObj[property] = inBuiltCss['common'][property]
189
189
  }
190
- for (const property in theme['tp-cont-left-arrow']) {
191
- tempObj[property] = theme['tp-cont-left-arrow'][property]
192
- delete theme.common[property]
190
+ for (const property in inBuiltCss['tp-cont-left-arrow']) {
191
+ tempObj[property] = inBuiltCss['tp-cont-left-arrow'][property]
192
+ delete inBuiltCss.common[property]
193
193
  }
194
194
  }
195
195
  return { ...tempObj, ...customStylesTPAleft };
@@ -197,16 +197,16 @@ ${({ theme, type, customStylesTPContainer }) => {
197
197
  }}
198
198
  }
199
199
  &[data-popper-placement*='left'] .tooltip-arrow::before {
200
- ${({ theme, type, customStylesTPAleftBefore }) => {
201
- if (theme) {
200
+ ${({ inBuiltCss, type, customStylesTPAleftBefore }) => {
201
+ if (inBuiltCss) {
202
202
  let tempObj = {};
203
- if (theme['tp-cont-left-arrow-before']) {
204
- for (const property in theme['common']) {
205
- tempObj[property] = theme['common'][property]
203
+ if (inBuiltCss['tp-cont-left-arrow-before']) {
204
+ for (const property in inBuiltCss['common']) {
205
+ tempObj[property] = inBuiltCss['common'][property]
206
206
  }
207
- for (const property in theme['tp-cont-left-arrow-before']) {
208
- tempObj[property] = theme['tp-cont-left-arrow-before'][property]
209
- delete theme.common[property]
207
+ for (const property in inBuiltCss['tp-cont-left-arrow-before']) {
208
+ tempObj[property] = inBuiltCss['tp-cont-left-arrow-before'][property]
209
+ delete inBuiltCss.common[property]
210
210
  }
211
211
  }
212
212
  return { ...tempObj, ...customStylesTPAleftBefore };
@@ -214,16 +214,16 @@ ${({ theme, type, customStylesTPContainer }) => {
214
214
  }}
215
215
  }
216
216
  &[data-popper-placement*='left'] .tooltip-arrow::after {
217
- ${({ theme, type, customStylesTPAleftAfter }) => {
218
- if (theme) {
217
+ ${({ inBuiltCss, type, customStylesTPAleftAfter }) => {
218
+ if (inBuiltCss) {
219
219
  let tempObj = {};
220
- if (theme['tp-cont-left-arrow-before']) {
221
- for (const property in theme['common']) {
222
- tempObj[property] = theme['common'][property]
220
+ if (inBuiltCss['tp-cont-left-arrow-before']) {
221
+ for (const property in inBuiltCss['common']) {
222
+ tempObj[property] = inBuiltCss['common'][property]
223
223
  }
224
- for (const property in theme['tp-cont-left-arrow-after']) {
225
- tempObj[property] = theme['tp-cont-left-arrow-after'][property]
226
- delete theme.common[property]
224
+ for (const property in inBuiltCss['tp-cont-left-arrow-after']) {
225
+ tempObj[property] = inBuiltCss['tp-cont-left-arrow-after'][property]
226
+ delete inBuiltCss.common[property]
227
227
  }
228
228
  }
229
229
  return { ...tempObj, ...customStylesTPAleftAfter };
@@ -234,16 +234,16 @@ ${({ theme, type, customStylesTPContainer }) => {
234
234
 
235
235
  const TooltipArrow = styled.div`
236
236
 
237
- ${({ theme, type, customStylesTPArrow }) => {
238
- if (theme) {
237
+ ${({ inBuiltCss, type, customStylesTPArrow }) => {
238
+ if (inBuiltCss) {
239
239
  let tempObj = {};
240
- if (theme['tooltip-arrow']) {
241
- for (const property in theme['common']) {
242
- tempObj[property] = theme['common'][property]
240
+ if (inBuiltCss['tooltip-arrow']) {
241
+ for (const property in inBuiltCss['common']) {
242
+ tempObj[property] = inBuiltCss['common'][property]
243
243
  }
244
- for (const property in theme['tooltip-arrow']) {
245
- tempObj[property] = theme['tooltip-arrow'][property]
246
- delete theme.common[property]
244
+ for (const property in inBuiltCss['tooltip-arrow']) {
245
+ tempObj[property] = inBuiltCss['tooltip-arrow'][property]
246
+ delete inBuiltCss.common[property]
247
247
  }
248
248
  }
249
249
  return { ...tempObj, ...customStylesTPArrow };
@@ -252,16 +252,16 @@ ${({ theme, type, customStylesTPArrow }) => {
252
252
 
253
253
 
254
254
  &::before{
255
- ${({ theme, type, customStylesTPAbefore }) => {
256
- if (theme) {
255
+ ${({ inBuiltCss, type, customStylesTPAbefore }) => {
256
+ if (inBuiltCss) {
257
257
  let tempObj = {};
258
- if (theme['tooltip-arrow-before']) {
259
- for (const property in theme['common']) {
260
- tempObj[property] = theme['common'][property]
258
+ if (inBuiltCss['tooltip-arrow-before']) {
259
+ for (const property in inBuiltCss['common']) {
260
+ tempObj[property] = inBuiltCss['common'][property]
261
261
  }
262
- for (const property in theme['tooltip-arrow-before']) {
263
- tempObj[property] = theme['tooltip-arrow-before'][property]
264
- delete theme.common[property]
262
+ for (const property in inBuiltCss['tooltip-arrow-before']) {
263
+ tempObj[property] = inBuiltCss['tooltip-arrow-before'][property]
264
+ delete inBuiltCss.common[property]
265
265
  }
266
266
  }
267
267
  return { ...tempObj, ...customStylesTPAbefore };
@@ -270,16 +270,16 @@ ${({ theme, type, customStylesTPArrow }) => {
270
270
  }
271
271
 
272
272
  &::after{
273
- ${({ theme, type, customStylesTPAafter }) => {
274
- if (theme) {
273
+ ${({ inBuiltCss, type, customStylesTPAafter }) => {
274
+ if (inBuiltCss) {
275
275
  let tempObj = {};
276
- if (theme['tooltip-arrow-after']) {
277
- for (const property in theme['common']) {
278
- tempObj[property] = theme['common'][property]
276
+ if (inBuiltCss['tooltip-arrow-after']) {
277
+ for (const property in inBuiltCss['common']) {
278
+ tempObj[property] = inBuiltCss['common'][property]
279
279
  }
280
- for (const property in theme['tooltip-arrow-after']) {
281
- tempObj[property] = theme['tooltip-arrow-after'][property]
282
- delete theme.common[property]
280
+ for (const property in inBuiltCss['tooltip-arrow-after']) {
281
+ tempObj[property] = inBuiltCss['tooltip-arrow-after'][property]
282
+ delete inBuiltCss.common[property]
283
283
  }
284
284
  }
285
285
  return { ...tempObj, ...customStylesTPAafter };
@@ -289,7 +289,7 @@ ${({ theme, type, customStylesTPArrow }) => {
289
289
  `;
290
290
 
291
291
  export const Tooltip = ({
292
- theme,
292
+ inBuiltCss,
293
293
  contentTrigger,
294
294
  contentTooltip,
295
295
  popperOptionsP,
@@ -345,7 +345,7 @@ export const Tooltip = ({
345
345
  </div>
346
346
  {visible && (
347
347
  <TooltipContainer
348
- theme={theme}
348
+ inBuiltCss={defaultStyles}
349
349
  ref={setTooltipRef}
350
350
  {...getTooltipProps({ className: 'tooltip-container' })}
351
351
  customStylesTPContainer={customStylesTPContainer}
@@ -363,7 +363,7 @@ export const Tooltip = ({
363
363
  customStylesTPAleftAfter={customStylesTPAleftAfter}
364
364
  >
365
365
  <TooltipArrow
366
- theme={theme}
366
+ inBuiltCss={defaultStyles}
367
367
  {...getArrowProps({ className: 'tooltip-arrow' })}
368
368
  customStylesTPArrow={customStylesTPArrow}
369
369
  customStylesTPAbefore={customStylesTPAbefore}
@@ -377,10 +377,7 @@ export const Tooltip = ({
377
377
  };
378
378
 
379
379
  Tooltip.propTypes = {
380
- /**
381
- * Theme object
382
- */
383
- theme: PropTypes.object,
380
+
384
381
  /**
385
382
  * The element where to attach the tooltip
386
383
  */
@@ -470,9 +467,6 @@ Tooltip.propTypes = {
470
467
  };
471
468
 
472
469
  Tooltip.defaultProps = {
473
- theme: defaultStyles,
474
470
  contentTrigger: <div>Trigger</div>,
475
471
  contentTooltip: <div>I am the tooltip</div>,
476
- };
477
-
478
- export default Tooltip;
472
+ };