linear-react-components-ui 1.1.20-beta.11 → 1.1.20-beta.12

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 (153) hide show
  1. package/lib/alerts/BaseAlert.js +1 -1
  2. package/lib/alerts/Message.js +1 -1
  3. package/lib/assets/styles/button.scss +1 -0
  4. package/lib/assets/styles/select.scss +1 -2
  5. package/lib/assets/styles/table.scss +6 -10
  6. package/lib/assets/styles/toolbar.scss +0 -3
  7. package/lib/avatar/index.js +9 -8
  8. package/lib/badge/index.js +4 -4
  9. package/lib/buttons/DangerButton.js +1 -1
  10. package/lib/buttons/DefaultButton.js +18 -7
  11. package/lib/buttons/InfoButton.js +1 -1
  12. package/lib/buttons/PrimaryButton.js +1 -1
  13. package/lib/buttons/SuccessButton.js +1 -1
  14. package/lib/buttons/WarningButton.js +1 -1
  15. package/lib/buttons/button_container/index.js +1 -1
  16. package/lib/buttons/split_button/index.js +1 -1
  17. package/lib/buttons/types.d.ts +1 -0
  18. package/lib/calendar/base/Day.js +1 -1
  19. package/lib/calendar/base/Month.js +1 -1
  20. package/lib/calendar/base/helpers.js +2 -2
  21. package/lib/calendar/base/index.js +1 -1
  22. package/lib/dialog/Custom.js +1 -1
  23. package/lib/dialog/base/Content.d.ts +1 -1
  24. package/lib/dialog/base/Content.js +2 -3
  25. package/lib/dialog/base/Header.js +2 -2
  26. package/lib/dialog/base/index.js +4 -6
  27. package/lib/dialog/form/index.js +3 -8
  28. package/lib/dialog/types.d.ts +4 -34
  29. package/lib/drawer/Drawer.js +3 -3
  30. package/lib/drawer/Header.js +1 -1
  31. package/lib/dropdown/Popup.d.ts +1 -1
  32. package/lib/dropdown/Popup.js +43 -22
  33. package/lib/dropdown/helper.js +1 -1
  34. package/lib/dropdown/types.d.ts +6 -2
  35. package/lib/dropdown/withDropdown.js +7 -6
  36. package/lib/fieldset/index.js +7 -7
  37. package/lib/form/Field.js +24 -11
  38. package/lib/form/FieldArray.js +25 -10
  39. package/lib/form/FieldNumber.js +21 -9
  40. package/lib/form/FieldPeriod.js +5 -5
  41. package/lib/form/index.js +6 -9
  42. package/lib/form/types.d.ts +6 -10
  43. package/lib/form/withFieldHOC.js +2 -2
  44. package/lib/gridlayout/GridCol.js +5 -5
  45. package/lib/gridlayout/GridRow.js +4 -1
  46. package/lib/gridlayout/types.d.ts +1 -1
  47. package/lib/hint/index.js +7 -1
  48. package/lib/icons/helper.d.ts +0 -20
  49. package/lib/icons/helper.js +0 -20
  50. package/lib/icons/index.js +24 -27
  51. package/lib/inputs/base/InputTextBase.js +6 -9
  52. package/lib/inputs/base/Label.js +1 -1
  53. package/lib/inputs/base/helpers.js +7 -3
  54. package/lib/inputs/date/helpers.js +4 -1
  55. package/lib/inputs/date/index.js +9 -15
  56. package/lib/inputs/errorMessage/index.js +1 -1
  57. package/lib/inputs/file/DefaultFile.js +5 -6
  58. package/lib/inputs/file/DragDropFile.js +15 -17
  59. package/lib/inputs/file/File.js +3 -4
  60. package/lib/inputs/mask/BaseMask.js +1 -1
  61. package/lib/inputs/multiSelect/Dropdown.js +9 -10
  62. package/lib/inputs/multiSelect/helper.js +1 -2
  63. package/lib/inputs/multiSelect/index.js +7 -9
  64. package/lib/inputs/number/BaseNumber.d.ts +1 -1
  65. package/lib/inputs/number/BaseNumber.js +9 -2
  66. package/lib/inputs/number/Currency.d.ts +1 -1
  67. package/lib/inputs/number/Currency.js +11 -4
  68. package/lib/inputs/number/index.js +1 -1
  69. package/lib/inputs/period/PeriodList.js +1 -1
  70. package/lib/inputs/period/helper.js +3 -1
  71. package/lib/inputs/period/index.js +9 -14
  72. package/lib/inputs/search/index.js +1 -1
  73. package/lib/inputs/select/Dropdown.js +1 -1
  74. package/lib/inputs/select/helper.js +10 -13
  75. package/lib/inputs/select/multiple/Selecteds.js +1 -1
  76. package/lib/inputs/select/multiple/index.js +12 -19
  77. package/lib/inputs/select/simple/index.js +13 -22
  78. package/lib/inputs/select/types.d.ts +0 -1
  79. package/lib/inputs/textarea/index.js +1 -1
  80. package/lib/internals/withTooltip.js +9 -9
  81. package/lib/labelMessages/index.js +4 -3
  82. package/lib/labels/DefaultLabel.js +4 -1
  83. package/lib/labels/label_container/index.js +1 -1
  84. package/lib/list/Header.d.ts +0 -1
  85. package/lib/list/Header.js +1 -1
  86. package/lib/list/Item.d.ts +2 -6
  87. package/lib/list/Item.js +12 -22
  88. package/lib/list/helpers.d.ts +0 -1
  89. package/lib/list/index.d.ts +0 -1
  90. package/lib/list/index.js +1 -1
  91. package/lib/list/types.d.ts +0 -6
  92. package/lib/menus/float/MenuItem.js +2 -2
  93. package/lib/menus/float/SubMenuContainer.js +1 -1
  94. package/lib/menus/float/index.js +1 -1
  95. package/lib/menus/sidenav/ExpandMenu.js +1 -1
  96. package/lib/menus/sidenav/NavMenuGroup.js +1 -1
  97. package/lib/menus/sidenav/NavMenuItem.js +7 -9
  98. package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
  99. package/lib/menus/sidenav/helpers.js +1 -1
  100. package/lib/menus/sidenav/index.js +5 -5
  101. package/lib/panel/Content.js +5 -7
  102. package/lib/panel/Default.js +2 -2
  103. package/lib/panel/Header.js +3 -3
  104. package/lib/permissionValidations.js +1 -1
  105. package/lib/popover/PopoverText.d.ts +3 -2
  106. package/lib/popover/PopoverText.js +5 -8
  107. package/lib/popover/PopoverTitle.d.ts +1 -0
  108. package/lib/popover/index.d.ts +3 -5
  109. package/lib/popover/index.js +20 -14
  110. package/lib/popover/types.d.ts +12 -1
  111. package/lib/progress/Bar.js +6 -6
  112. package/lib/radio/index.js +2 -2
  113. package/lib/shortcuts/index.js +1 -1
  114. package/lib/skeleton/SkeletonContainer.js +2 -1
  115. package/lib/skeleton/index.js +4 -1
  116. package/lib/spinner/index.js +2 -2
  117. package/lib/split/Split.js +1 -1
  118. package/lib/split/SplitSide.js +3 -3
  119. package/lib/table/Body.js +3 -3
  120. package/lib/table/Header.js +8 -11
  121. package/lib/table/HeaderColumn.d.ts +1 -1
  122. package/lib/table/HeaderColumn.js +11 -12
  123. package/lib/table/Row.js +3 -3
  124. package/lib/table/RowColumn.js +2 -3
  125. package/lib/table/index.js +6 -1
  126. package/lib/table/types.d.ts +4 -4
  127. package/lib/tabs/DropdownTabs.js +1 -1
  128. package/lib/tabs/Menu.js +1 -1
  129. package/lib/tabs/MenuTabs.js +2 -2
  130. package/lib/tabs/Panel.js +5 -7
  131. package/lib/tabs/context.js +3 -6
  132. package/lib/textContent/index.js +1 -1
  133. package/lib/toolbar/ButtonBar.js +1 -1
  134. package/lib/toolbar/index.js +1 -1
  135. package/lib/tooltip/index.js +7 -7
  136. package/lib/treetable/Body.js +1 -1
  137. package/lib/treetable/Header.js +2 -2
  138. package/lib/treetable/Row.js +8 -8
  139. package/lib/treeview/Header.js +1 -1
  140. package/lib/treeview/Node.js +11 -15
  141. package/lib/treeview/index.js +7 -11
  142. package/lib/treeview/types.d.ts +0 -4
  143. package/lib/uitour/index.js +6 -8
  144. package/package.json +2 -2
  145. package/lib/assets/styles/wizard.scss +0 -125
  146. package/lib/dialog/wizard/index.d.ts +0 -13
  147. package/lib/dialog/wizard/index.js +0 -74
  148. package/lib/dialog/wizard/progressbar.d.ts +0 -13
  149. package/lib/dialog/wizard/progressbar.js +0 -36
  150. package/lib/dialog/wizard/step.d.ts +0 -9
  151. package/lib/dialog/wizard/step.js +0 -22
  152. package/lib/dialog/wizard/useWizard.d.ts +0 -9
  153. package/lib/dialog/wizard/useWizard.js +0 -48
@@ -27,7 +27,7 @@ const TreeTableBody = () => {
27
27
  dataRow: element,
28
28
  rowLevel: element.rowLevel ? element.rowLevel + 1 : 0,
29
29
  key: element[rootPropName],
30
- rowId: "".concat(element[rootPropName]),
30
+ rowId: `${element[rootPropName]}`,
31
31
  style: stylesForRow
32
32
  })));
33
33
  };
@@ -15,9 +15,9 @@ const TreeTableHeader = () => {
15
15
  dataColumns
16
16
  } = (0, _react.useContext)(_helpers.TreeTableContext);
17
17
  return /*#__PURE__*/_react.default.createElement(_table.THeader, null, /*#__PURE__*/_react.default.createElement(_table.TRow, {
18
- key: "tr-header-".concat((0, _uuid.v1)())
18
+ key: `tr-header-${(0, _uuid.v1)()}`
19
19
  }, dataColumns.map(column => /*#__PURE__*/_react.default.createElement(_table.Th, {
20
- key: "th-".concat(column.name, "-").concat((0, _uuid.v1)()),
20
+ key: `th-${column.name}-${(0, _uuid.v1)()}`,
21
21
  style: column.style
22
22
  }, column.title))));
23
23
  };
@@ -94,7 +94,7 @@ const TreeRow = props => {
94
94
  let newElementsWithNewProps = [];
95
95
  if (elements) {
96
96
  newElementsWithNewProps = _react.default.Children.map(elements, element => {
97
- if ( /*#__PURE__*/_react.default.isValidElement(element) && element.props) {
97
+ if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
98
98
  const _element$props = element.props,
99
99
  {
100
100
  validationKey,
@@ -134,14 +134,14 @@ const TreeRow = props => {
134
134
  onMouseLeave: () => setShowToolbarElements(false)
135
135
  }), /*#__PURE__*/_react.default.createElement(_table.Td, {
136
136
  ignoreTableColClick: true,
137
- key: "td-".concat(dataColumns[0].name, "-").concat((0, _uuid.v1)()),
137
+ key: `td-${dataColumns[0].name}-${(0, _uuid.v1)()}`,
138
138
  style: dataColumns[0].style
139
139
  }, /*#__PURE__*/_react.default.createElement("div", {
140
140
  className: "column-container"
141
141
  }, /*#__PURE__*/_react.default.createElement("span", {
142
- className: "column-more-childrens ".concat(rowLevel && 'line-path-decoration'),
142
+ className: `column-more-childrens ${rowLevel && 'line-path-decoration'}`,
143
143
  style: {
144
- marginLeft: "".concat(rowLevel, "rem")
144
+ marginLeft: `${rowLevel}rem`
145
145
  }
146
146
  }, /*#__PURE__*/_react.default.createElement("button", {
147
147
  tabIndex: -1,
@@ -165,20 +165,20 @@ const TreeRow = props => {
165
165
  size: "small",
166
166
  customClass: "row-toolbar"
167
167
  }, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
168
- key: "left-toolbar-".concat((0, _uuid.v1)()),
168
+ key: `left-toolbar-${(0, _uuid.v1)()}`,
169
169
  style: _objectSpread({
170
170
  float: 'left',
171
171
  height: 'fit-content'
172
172
  }, styleForLeftToolbar)
173
173
  }, showToolbarElements && leftToolbarElements && buildToolbarElements(leftToolbarElements)), /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
174
- key: "right-toolbar-".concat((0, _uuid.v1)()),
174
+ key: `right-toolbar-${(0, _uuid.v1)()}`,
175
175
  style: _objectSpread({
176
176
  float: 'right',
177
177
  height: 'fit-content',
178
178
  gap: '4px'
179
179
  }, styleForRightToolbar)
180
180
  }, rightToolbarElements && buildToolbarElements(rightToolbarElements)))))), dataColumns.slice(1).map(column => /*#__PURE__*/_react.default.createElement(_table.Td, {
181
- key: "key-".concat(column.name, "-").concat((0, _uuid.v1)()),
181
+ key: `key-${column.name}-${(0, _uuid.v1)()}`,
182
182
  style: _objectSpread({}, column.style),
183
183
  ignoreTableColClick: true
184
184
  }, dataRow[column.name]))), open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrens && childrens.length === 0 && isLoadingChildrens ? /*#__PURE__*/_react.default.createElement(_table.TRow, {
@@ -195,7 +195,7 @@ const TreeRow = props => {
195
195
  dataRow: item,
196
196
  rowLevel: item.rowLevel ? item.rowLevel + 1 : 1,
197
197
  key: item[rootPropName],
198
- rowId: "".concat(item[rootPropName]),
198
+ rowId: `${item[rootPropName]}`,
199
199
  style: stylesForRow
200
200
  })), childrens && childrens.length !== 0 && isLoadingChildrens && /*#__PURE__*/_react.default.createElement(_table.TRow, {
201
201
  key: "tr-loading-childrens"
@@ -13,7 +13,7 @@ const Header = props => {
13
13
  children
14
14
  } = props;
15
15
  return /*#__PURE__*/_react.default.createElement("div", {
16
- className: "treeviewheader ".concat(customClass)
16
+ className: `treeviewheader ${customClass}`
17
17
  }, title ? /*#__PURE__*/_react.default.createElement("div", {
18
18
  className: "title"
19
19
  }, title) : children);
@@ -39,9 +39,7 @@ const TreeNode = props => {
39
39
  children,
40
40
  nodeMenuButtonSize = 'small',
41
41
  selectedNodeId,
42
- alwaysShowArrow = false,
43
- customClass = '',
44
- customStyle
42
+ alwaysShowArrow = false
45
43
  } = props;
46
44
  const [node, setNode] = (0, _react.useState)(props.node);
47
45
  const [isVisible, setIsVisible] = (0, _react.useState)(startNodesOpened && nodeHasItens(node));
@@ -67,6 +65,8 @@ const TreeNode = props => {
67
65
  const checked = selectedIds && selectedIds.includes(node[valuePropName]) || required;
68
66
  if (node !== props.node) {
69
67
  setNode(props.node);
68
+ setIsVisible(startNodesOpened && nodeHasItens(node));
69
+ setWasOpened(startNodesOpened && nodeHasItens(node));
70
70
  }
71
71
  const openCloseTree = currentNode => {
72
72
  if (!wasOpened && handlerOnNodeOpen) {
@@ -80,6 +80,7 @@ const TreeNode = props => {
80
80
  let span = /*#__PURE__*/_react.default.createElement("noscript", null);
81
81
  if (node.itens && node.itens.length > 0 || alwaysShowArrow) {
82
82
  span = /*#__PURE__*/_react.default.createElement("span", {
83
+ onKeyPress: () => {},
83
84
  tabIndex: 0,
84
85
  role: "button",
85
86
  className: isLoading ? 'loading' : 'opencloseicon',
@@ -87,7 +88,7 @@ const TreeNode = props => {
87
88
  }, isLoading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
88
89
  size: "35px"
89
90
  }) : /*#__PURE__*/_react.default.createElement(_icons.default, {
90
- name: isVisible ? 'down' : 'arrow_right',
91
+ name: isVisible ? 'up' : 'down',
91
92
  size: 10
92
93
  }));
93
94
  }
@@ -118,8 +119,8 @@ const TreeNode = props => {
118
119
  validator,
119
120
  applyBehavior
120
121
  } = validation;
121
- if (_lodash.default.isEmpty(elementBehavior) && validator && validator(node)) {
122
- elementBehavior = options[applyBehavior !== null && applyBehavior !== void 0 ? applyBehavior : 'unvisible'];
122
+ if (_lodash.default.isEmpty(elementBehavior) && validator && validator(node) && applyBehavior) {
123
+ elementBehavior = options[applyBehavior] || options.unvisible;
123
124
  }
124
125
  });
125
126
  }
@@ -129,7 +130,7 @@ const TreeNode = props => {
129
130
  let updatedElements = [];
130
131
  if (elements) {
131
132
  updatedElements = _react.default.Children.map(elements, element => {
132
- if ( /*#__PURE__*/_react.default.isValidElement(element) && element.props) {
133
+ if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
133
134
  const _element$props = element.props,
134
135
  {
135
136
  validationKey,
@@ -165,7 +166,7 @@ const TreeNode = props => {
165
166
  } : {};
166
167
  return /*#__PURE__*/_react.default.createElement("div", {
167
168
  style: style,
168
- key: "element-".concat(uuid.v1()),
169
+ key: `element-${uuid.v1()}`,
169
170
  className: "element"
170
171
  }, element);
171
172
  });
@@ -179,13 +180,8 @@ const TreeNode = props => {
179
180
  customClass: "node-toolbarelements"
180
181
  }, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, null, updatedNodeRightElements)) : null;
181
182
  };
182
- (0, _react.useEffect)(() => {
183
- setIsVisible(startNodesOpened && nodeHasItens(node));
184
- setWasOpened(startNodesOpened && nodeHasItens(node));
185
- }, [node]);
186
183
  return /*#__PURE__*/_react.default.createElement("li", {
187
- style: customStyle,
188
- className: "treeviewitem ".concat(customClass)
184
+ className: "treeviewitem"
189
185
  }, getSpan(), /*#__PURE__*/_react.default.createElement("div", {
190
186
  className: "label",
191
187
  style: {
@@ -202,7 +198,7 @@ const TreeNode = props => {
202
198
  }, showCheckBox ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
203
199
  checked: checked,
204
200
  disabled: required || disabled,
205
- value: "".concat(node[valuePropName]),
201
+ value: `${node[valuePropName]}`,
206
202
  label: node[labelPropName],
207
203
  tooltip: required ? defaultDisabledTooltip : '',
208
204
  onChange: disabled || required ? undefined : e => {
@@ -47,13 +47,11 @@ const TreeView = props => {
47
47
  nodeToolbarElements,
48
48
  onNodeClick,
49
49
  selectedNodeId,
50
- customClass = '',
50
+ customClass,
51
51
  children,
52
52
  styleForContainer,
53
53
  bordered,
54
- requiredIds: propsRequiredIds = [],
55
- customClassForNodes = '',
56
- customStyleForNodes
54
+ requiredIds: propsRequiredIds = []
57
55
  } = props;
58
56
  const [data, setData] = (0, _react.useState)(props.data);
59
57
  const [currentSelectedIds, setCurrentSelectedIds] = (0, _react.useState)(selectedIds);
@@ -239,7 +237,7 @@ const TreeView = props => {
239
237
  }
240
238
  }
241
239
  return /*#__PURE__*/_react.default.createElement(_Node.default, {
242
- key: "node-".concat(node.id),
240
+ key: `node-${node.id}`,
243
241
  node: node,
244
242
  idsInLoading: idsInLoading,
245
243
  startNodesOpened: startNodesOpened,
@@ -253,9 +251,7 @@ const TreeView = props => {
253
251
  nodeMenuButtonSize: nodeMenuButtonSize,
254
252
  onNodeClick: onNodeClick,
255
253
  selectedNodeId: selectedNodeId,
256
- handlerOnNodeOpen: handleOnNodeOpen,
257
- customClass: customClassForNodes,
258
- customStyle: customStyleForNodes
254
+ handlerOnNodeOpen: handleOnNodeOpen
259
255
  }, childrenIds.length > 0 && node.itens && node.itens.map(nodeitem => buildTree(nodeitem, node.id, idsWithChildren)));
260
256
  };
261
257
  const handleNewSelectedIds = selectedNodeIds => {
@@ -281,7 +277,7 @@ const TreeView = props => {
281
277
  setData(props.data);
282
278
  } else if (!isSameSelectedIds) {
283
279
  setCurrentSelectedIds(selectedIds);
284
- onSelectedIdsChange === null || onSelectedIdsChange === void 0 ? void 0 : onSelectedIdsChange(selectedIds);
280
+ onSelectedIdsChange?.(selectedIds);
285
281
  setPropSelectedIds(selectedIds);
286
282
  }
287
283
  }, [selectedIds.length, props.data]);
@@ -311,10 +307,10 @@ const TreeView = props => {
311
307
  return /*#__PURE__*/_react.default.createElement(_constants.TreeviewContext.Provider, {
312
308
  value: contextValues
313
309
  }, /*#__PURE__*/_react.default.createElement("div", {
314
- className: "treeview-component ".concat(customClass)
310
+ className: `treeview-component ${customClass}`
315
311
  }, children, /*#__PURE__*/_react.default.createElement("ul", {
316
312
  style: styleForContainer,
317
- className: "treeviewcontainer ".concat(bordered && '-bordered')
313
+ className: `treeviewcontainer ${bordered && '-bordered'}`
318
314
  }, buildTree(data))));
319
315
  };
320
316
  var _default = exports.default = TreeView;
@@ -47,8 +47,6 @@ interface ITreeviewProps {
47
47
  enableDynamicData?: boolean;
48
48
  idsInLoading?: number[];
49
49
  selectedNodeId?: number;
50
- customClassForNodes?: string;
51
- customStyleForNodes?: CSSProperties;
52
50
  }
53
51
  interface ITreeNodeProps {
54
52
  node: any;
@@ -67,8 +65,6 @@ interface ITreeNodeProps {
67
65
  nodeElementsValidations?: INodeElementsValidations;
68
66
  idsInLoading?: number[];
69
67
  selectedNodeId?: number;
70
- customClass?: string;
71
- customStyle?: CSSProperties;
72
68
  }
73
69
  interface ITreeHeaderProps {
74
70
  title?: string;
@@ -40,7 +40,7 @@ const UiTour = props => {
40
40
  const activatedEffects = (0, _react.useRef)([]);
41
41
  const handleNextStep = () => {
42
42
  if (hasNextStep) {
43
- const currentStepIndex = data.findIndex(item => item.id === (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id));
43
+ const currentStepIndex = data.findIndex(item => item.id === currentStep?.id);
44
44
  const nextStep = data[currentStepIndex + 1];
45
45
  const nextStepIndex = data.findIndex(item => item.id === nextStep.id);
46
46
  const target = document.getElementById(nextStep.targetId);
@@ -53,7 +53,7 @@ const UiTour = props => {
53
53
  };
54
54
  const handleBackStep = () => {
55
55
  if (hasBackStep) {
56
- const currentStepIndex = data.findIndex(item => item.id === (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id));
56
+ const currentStepIndex = data.findIndex(item => item.id === currentStep?.id);
57
57
  const backStep = data[currentStepIndex - 1];
58
58
  const backStepIndex = data.findIndex(item => item.id === backStep.id);
59
59
  const target = document.getElementById(backStep.targetId);
@@ -72,7 +72,7 @@ const UiTour = props => {
72
72
  if (stepRef.current) {
73
73
  const stepRect = stepRef.current.getBoundingClientRect();
74
74
  const windowWidth = window.innerWidth;
75
- if (stepRect.right >= windowWidth || (currentStep === null || currentStep === void 0 ? void 0 : currentStep.position) === _helpers.STEP_POSITIONS.right) {
75
+ if (stepRect.right >= windowWidth || currentStep?.position === _helpers.STEP_POSITIONS.right) {
76
76
  setStepPosition(_helpers.STEP_POSITIONS.right);
77
77
  setStepDimensions({
78
78
  top: target.top - _helpers.ARROW_HEIGHT,
@@ -179,9 +179,8 @@ const UiTour = props => {
179
179
  mutationObserver = new MutationObserver(() => {
180
180
  const targetObserved = document.getElementById(initialStep.targetId);
181
181
  if (targetObserved) {
182
- var _mutationObserver;
183
182
  showStepTour(initialStep);
184
- (_mutationObserver = mutationObserver) === null || _mutationObserver === void 0 ? void 0 : _mutationObserver.disconnect();
183
+ mutationObserver?.disconnect();
185
184
  mutationObserver = null;
186
185
  }
187
186
  });
@@ -192,8 +191,7 @@ const UiTour = props => {
192
191
  }
193
192
  }
194
193
  return () => {
195
- var _mutationObserver2;
196
- (_mutationObserver2 = mutationObserver) === null || _mutationObserver2 === void 0 ? void 0 : _mutationObserver2.disconnect();
194
+ mutationObserver?.disconnect();
197
195
  mutationObserver = null;
198
196
  };
199
197
  }, [visible, data]);
@@ -207,7 +205,7 @@ const UiTour = props => {
207
205
  className: "uitour-component"
208
206
  }, currentStep && /*#__PURE__*/_react.default.createElement("div", {
209
207
  ref: stepRef,
210
- className: "step -".concat(stepPosition),
208
+ className: `step -${stepPosition}`,
211
209
  key: currentStep.id,
212
210
  style: _objectSpread({}, stepDimensions)
213
211
  }, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linear-react-components-ui",
3
- "version": "1.1.20-beta.11",
3
+ "version": "1.1.20-beta.12",
4
4
  "description": "Linear Sistemas ReactJs Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.cjs",
@@ -29,7 +29,7 @@
29
29
  "homepage": "",
30
30
  "repository": {
31
31
  "type": "git",
32
- "url": "git@git.erplinear.com.br:linear-front/linear-react-components-ui.git"
32
+ "url": "git@gitlab.com:linear-front/linear-react-components-ui.git"
33
33
  },
34
34
  "browserslist": {
35
35
  "production": [
@@ -1,125 +0,0 @@
1
- @import "colors.scss";
2
-
3
- .wizard-dialog {
4
- .wizard-wrapper {
5
- .wizard-content {
6
- display: flex !important;
7
- flex-direction: column;
8
- .wizard-progresbar {
9
- width: 100%;
10
- display: grid;
11
- grid-auto-columns: 1fr;
12
- grid-auto-flow: column;
13
- justify-content: space-between;
14
- padding: 20px;
15
- margin-bottom: 20px;
16
- border-bottom: 2px solid $component-border-color;
17
- gap: 10px;
18
- overflow: hidden;
19
- > .title {
20
- font-size: 16px;
21
- font-weight: 600;
22
- display: flex;
23
- align-items: center;
24
- flex-direction: column;
25
- position: relative;
26
- flex: 1;
27
- text-align: center;
28
- &:first-child {
29
- .step {
30
- align-self: flex-start;
31
- }
32
- .step-title {
33
- align-self: flex-start;
34
- text-align: left;
35
- }
36
- &:before {
37
- right: auto;
38
- left: 45px;
39
- }
40
- }
41
- &:last-child {
42
- .step {
43
- align-self: flex-end;
44
- }
45
- .step-title {
46
- align-self: flex-end;
47
- text-align: right;
48
- }
49
- &:after {
50
- left: auto;
51
- right: 45px;
52
- }
53
- }
54
- &::after, &::before {
55
- content: "";
56
- position: absolute;
57
- height: 2px;
58
- background-color: $component-border-color;
59
- top: 18px;
60
- width: calc(100% - 25px);
61
- transition: all 0.2s ease-in-out;
62
- }
63
- &::after {
64
- left: calc(50% + 18px);
65
- }
66
- &::before {
67
- right: calc(50% + 18px);
68
- }
69
- &[data-completed="true"] {
70
- &::after {
71
- background-color: $success-color !important;
72
- }
73
- + .title::before {
74
- background-color: $success-color !important;
75
- }
76
- &:first-child::before {
77
- background-color: $success-color !important;
78
- }
79
- & + .title:after {
80
- background-color: $success-color !important;
81
- }
82
- > .step {
83
- > .number {
84
- background-color: $success-color;
85
- border-color: $success-color;
86
- }
87
- }
88
- }
89
- &[data-disabled="true"] .step {
90
- opacity: 0.3;
91
- }
92
- > .step {
93
- display: flex;
94
- flex-direction: column;
95
- align-items: center;
96
- justify-content: center;
97
- width: 54px;
98
- > .number {
99
- display: flex;
100
- align-items: center;
101
- justify-content: center;
102
- font-size: 20px;
103
- font-weight: 600;
104
- width: 36px;
105
- height: 36px;
106
- border-radius: 100%;
107
- color: #fff;
108
- background-color: $color-light-dark;
109
- z-index: 1;
110
- transition: all 0.2s ease-in-out;
111
- border: 2px solid $color-light-dark;
112
- }
113
- }
114
- > .step-title {
115
- max-width: 150px;
116
- overflow: hidden;
117
- margin-top: 6px;
118
- font-weight: 500;
119
- color: $font-color-soft;
120
- }
121
- }
122
- }
123
- }
124
- }
125
- }
@@ -1,13 +0,0 @@
1
- import React__default from 'react';
2
- import { WizardControls, WizardComponentProps } from '../types.js';
3
- export { WizardStep as Step } from './step.js';
4
- export { useWizard } from './useWizard.js';
5
- import '../../@types/Align.js';
6
- import '../../@types/Icon.js';
7
- import '../../icons/helper.js';
8
-
9
- declare const WizardContext: React__default.Context<WizardControls | null>;
10
- declare const useWizardContext: () => WizardControls | null;
11
- declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
12
-
13
- export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };
@@ -1,74 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Container = Wizard;
7
- Object.defineProperty(exports, "Step", {
8
- enumerable: true,
9
- get: function () {
10
- return _step.WizardStep;
11
- }
12
- });
13
- exports.default = exports.WizardContext = void 0;
14
- Object.defineProperty(exports, "useWizard", {
15
- enumerable: true,
16
- get: function () {
17
- return _useWizard.useWizard;
18
- }
19
- });
20
- exports.useWizardContext = void 0;
21
- var _react = _interopRequireWildcard(require("react"));
22
- var _lodash = _interopRequireDefault(require("lodash"));
23
- var _form = _interopRequireDefault(require("../form/"));
24
- var _progressbar = require("./progressbar");
25
- require("../../assets/styles/wizard.scss");
26
- var _step = require("./step");
27
- var _useWizard = require("./useWizard");
28
- const _excluded = ["children", "controls", "showProgressbar"];
29
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
30
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
31
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
33
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
34
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
35
- const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
36
- const useWizardContext = () => _react.default.useContext(WizardContext);
37
- exports.useWizardContext = useWizardContext;
38
- function Wizard(_ref) {
39
- let {
40
- children,
41
- controls,
42
- showProgressbar = true
43
- } = _ref,
44
- dialogProps = _objectWithoutProperties(_ref, _excluded);
45
- const {
46
- currentStep,
47
- setTotalSteps
48
- } = controls;
49
- const steps = _react.default.Children.toArray(children);
50
- const stepsTitle = steps.map((step, index) => {
51
- return {
52
- title: String(step.props.title),
53
- number: index + 1,
54
- completed: index < currentStep - 1 && index !== currentStep
55
- };
56
- });
57
- const currentStepElement = steps[currentStep - 1];
58
- if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
59
- (0, _react.useEffect)(() => {
60
- setTotalSteps(steps.length);
61
- }, [steps.length]);
62
- return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
63
- value: controls
64
- }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
65
- className: "wizard-dialog",
66
- wrapperClassName: "wizard-wrapper",
67
- contentClassName: "wizard-content"
68
- }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
69
- stepsTitle: stepsTitle
70
- }), /*#__PURE__*/_react.default.createElement("div", {
71
- className: "wizard-body"
72
- }, currentStepElement)));
73
- }
74
- var _default = exports.default = Wizard;
@@ -1,13 +0,0 @@
1
- import { CSSProperties } from 'react';
2
-
3
- declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
4
- customClass?: string;
5
- stepsTitle: {
6
- title: string;
7
- number: number;
8
- completed: boolean;
9
- }[];
10
- customStyle?: CSSProperties;
11
- }>): JSX.Element;
12
-
13
- export { Progressbar };
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Progressbar = Progressbar;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = require(".");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- function Progressbar(_ref) {
11
- let {
12
- customClass,
13
- customStyle,
14
- stepsTitle
15
- } = _ref;
16
- const context = (0, _.useWizardContext)();
17
- if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
18
- const {
19
- currentStep
20
- } = context;
21
- return /*#__PURE__*/_react.default.createElement("div", {
22
- className: "wizard-progresbar ".concat(customClass),
23
- style: customStyle
24
- }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
25
- key: step.number,
26
- className: "title",
27
- "data-completed": step.completed,
28
- "data-disabled": step.number > currentStep
29
- }, /*#__PURE__*/_react.default.createElement("div", {
30
- className: "step"
31
- }, /*#__PURE__*/_react.default.createElement("span", {
32
- className: "number"
33
- }, step.number)), /*#__PURE__*/_react.default.createElement("span", {
34
- className: "step-title"
35
- }, step.title))));
36
- }
@@ -1,9 +0,0 @@
1
- import { WizardStepComponentProps } from '../types.js';
2
- import 'react';
3
- import '../../@types/Align.js';
4
- import '../../@types/Icon.js';
5
- import '../../icons/helper.js';
6
-
7
- declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
8
-
9
- export { WizardStep };
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.WizardStep = WizardStep;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _ = require(".");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- function WizardStep(_ref) {
11
- let {
12
- children,
13
- customClass = '',
14
- customStyle
15
- } = _ref;
16
- const context = (0, _.useWizardContext)();
17
- if (!context) throw new Error('WizardStep must be used within a Wizard component');
18
- return /*#__PURE__*/_react.default.createElement("div", {
19
- className: "wizard-step-component ".concat(customClass),
20
- style: customStyle
21
- }, children);
22
- }
@@ -1,9 +0,0 @@
1
- import { UseWizardReturn } from '../types.js';
2
- import 'react';
3
- import '../../@types/Align.js';
4
- import '../../@types/Icon.js';
5
- import '../../icons/helper.js';
6
-
7
- declare const useWizard: () => UseWizardReturn;
8
-
9
- export { useWizard };