linear-react-components-ui 1.1.20-beta.8 → 1.1.20-rc.0
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.
- package/lib/alerts/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +1 -1
- package/lib/assets/styles/effects.scss +0 -2
- package/lib/assets/styles/input.scss +2 -2
- package/lib/assets/styles/popover.scss +3 -0
- package/lib/assets/styles/select.scss +2 -1
- package/lib/assets/styles/treetable.scss +2 -2
- package/lib/assets/styles/treeview.scss +24 -8
- package/lib/assets/styles/wizard.scss +127 -0
- package/lib/avatar/index.js +9 -8
- package/lib/badge/index.js +4 -4
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +24 -4
- package/lib/buttons/InfoButton.js +1 -1
- package/lib/buttons/PrimaryButton.js +1 -1
- package/lib/buttons/SuccessButton.js +1 -1
- package/lib/buttons/WarningButton.js +1 -1
- package/lib/buttons/button_container/index.js +1 -1
- package/lib/buttons/split_button/index.js +1 -1
- package/lib/calendar/base/Day.js +1 -1
- package/lib/calendar/base/Month.js +1 -1
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/checkbox/index.js +46 -19
- package/lib/checkbox/types.d.ts +4 -0
- package/lib/dialog/Alert.js +6 -2
- package/lib/dialog/Custom.js +4 -2
- package/lib/dialog/Error.js +6 -2
- package/lib/dialog/Information.js +6 -2
- package/lib/dialog/Question.js +23 -5
- package/lib/dialog/Warning.js +6 -2
- package/lib/dialog/base/Content.d.ts +1 -1
- package/lib/dialog/base/Content.js +3 -2
- package/lib/dialog/base/Header.js +2 -2
- package/lib/dialog/base/index.js +12 -9
- package/lib/dialog/form/index.js +8 -3
- package/lib/dialog/types.d.ts +44 -4
- package/lib/dialog/wizard/index.d.ts +13 -0
- package/lib/dialog/wizard/index.js +78 -0
- package/lib/dialog/wizard/progressbar.d.ts +13 -0
- package/lib/dialog/wizard/progressbar.js +36 -0
- package/lib/dialog/wizard/step.d.ts +9 -0
- package/lib/dialog/wizard/step.js +22 -0
- package/lib/dialog/wizard/useWizard.d.ts +9 -0
- package/lib/dialog/wizard/useWizard.js +48 -0
- package/lib/drawer/Drawer.js +3 -3
- package/lib/drawer/Header.js +1 -1
- package/lib/dropdown/Popup.js +6 -6
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/withDropdown.js +2 -2
- package/lib/fieldset/index.js +7 -7
- package/lib/form/FieldArray.js +1 -1
- package/lib/form/FieldNumber.js +7 -10
- package/lib/form/FieldPeriod.js +2 -2
- package/lib/form/index.js +20 -15
- package/lib/form/types.d.ts +14 -1
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +4 -1
- package/lib/hint/index.js +7 -1
- package/lib/icons/helper.d.ts +20 -0
- package/lib/icons/helper.js +20 -0
- package/lib/icons/index.js +24 -27
- package/lib/inputs/base/InputTextBase.js +39 -15
- package/lib/inputs/base/Label.js +1 -1
- package/lib/inputs/base/helpers.js +7 -3
- package/lib/inputs/base/types.d.ts +3 -0
- package/lib/inputs/color/types.d.ts +5 -0
- package/lib/inputs/date/helpers.js +4 -1
- package/lib/inputs/date/index.js +9 -15
- package/lib/inputs/date/types.d.ts +4 -0
- package/lib/inputs/errorMessage/index.js +1 -1
- package/lib/inputs/file/DefaultFile.js +5 -6
- package/lib/inputs/file/DragDropFile.js +17 -18
- package/lib/inputs/file/File.js +3 -4
- package/lib/inputs/file/types.d.ts +3 -0
- package/lib/inputs/mask/BaseMask.js +4 -1
- package/lib/inputs/mask/helpers.d.ts +4 -0
- package/lib/inputs/mask/types.d.ts +4 -0
- package/lib/inputs/multiSelect/Dropdown.js +9 -10
- package/lib/inputs/multiSelect/helper.js +1 -2
- package/lib/inputs/multiSelect/index.js +7 -9
- package/lib/inputs/multiSelect/types.d.ts +4 -0
- package/lib/inputs/number/BaseNumber.d.ts +1 -1
- package/lib/inputs/number/Currency.d.ts +1 -1
- package/lib/inputs/number/Decimal.d.ts +1 -1
- package/lib/inputs/number/index.d.ts +1 -1
- package/lib/inputs/number/index.js +8 -4
- package/lib/inputs/number/types.d.ts +14 -2
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +3 -1
- package/lib/inputs/period/index.js +40 -18
- package/lib/inputs/period/types.d.ts +3 -0
- package/lib/inputs/search/index.js +1 -1
- package/lib/inputs/select/Dropdown.js +1 -1
- package/lib/inputs/select/helper.js +10 -13
- package/lib/inputs/select/multiple/Selecteds.js +1 -1
- package/lib/inputs/select/multiple/index.js +22 -18
- package/lib/inputs/select/simple/index.js +15 -20
- package/lib/inputs/select/types.d.ts +7 -0
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/internals/withTooltip.js +9 -9
- package/lib/labelMessages/index.js +4 -3
- package/lib/labels/DefaultLabel.js +4 -1
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.d.ts +1 -0
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.d.ts +6 -2
- package/lib/list/Item.js +36 -14
- package/lib/list/helpers.d.ts +1 -0
- package/lib/list/index.d.ts +1 -0
- package/lib/list/index.js +3 -2
- package/lib/list/types.d.ts +8 -1
- package/lib/menus/float/MenuItem.js +2 -2
- package/lib/menus/float/SubMenuContainer.js +1 -1
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/NavMenuGroup.js +1 -1
- package/lib/menus/sidenav/NavMenuItem.js +27 -25
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +39 -31
- package/lib/menus/sidenav/types.d.ts +1 -0
- package/lib/panel/Content.js +5 -7
- package/lib/panel/Default.js +2 -2
- package/lib/panel/Header.js +3 -3
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/index.js +4 -6
- package/lib/popover/types.d.ts +2 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.d.ts +1 -1
- package/lib/radio/index.js +36 -5
- package/lib/radio/types.d.ts +8 -1
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +2 -1
- package/lib/skeleton/index.js +4 -1
- package/lib/spinner/index.js +2 -2
- package/lib/split/Split.js +1 -1
- package/lib/split/SplitSide.js +3 -3
- package/lib/table/Body.js +3 -3
- package/lib/table/Header.js +8 -11
- package/lib/table/HeaderColumn.js +7 -7
- package/lib/table/Row.js +3 -3
- package/lib/table/RowColumn.js +1 -1
- package/lib/table/index.js +6 -1
- package/lib/table/types.d.ts +0 -2
- package/lib/tabs/DropdownTabs.js +1 -1
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuTabs.js +2 -2
- package/lib/tabs/Panel.js +5 -7
- package/lib/tabs/context.js +3 -6
- package/lib/textContent/index.d.ts +18 -4
- package/lib/textContent/index.js +18 -6
- package/lib/toolbar/ButtonBar.js +1 -1
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/index.js +7 -7
- package/lib/treetable/Body.js +1 -1
- package/lib/treetable/Header.js +2 -2
- package/lib/treetable/Row.d.ts +1 -1
- package/lib/treetable/Row.js +50 -25
- package/lib/treetable/helpers.d.ts +1 -1
- package/lib/treetable/index.d.ts +2 -2
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +5 -5
- package/lib/treeview/index.js +4 -4
- package/lib/{types.d-73cece43.d.ts → types.d-b477e076.d.ts} +1 -0
- package/lib/uitour/index.js +6 -8
- package/package.json +2 -2
- package/lib/checkbox/Label.d.ts +0 -11
- package/lib/checkbox/Label.js +0 -31
- package/lib/inputs/mask/imaskHOC.js +0 -203
- package/lib/menus/sidenav/popup_menu_help/index.js +0 -85
- package/lib/tabs/DropdownItems.js +0 -62
- package/lib/tabs/MenuItems.js +0 -70
- package/lib/treeview_old/Header.js +0 -29
- package/lib/treeview_old/Node.js +0 -68
- package/lib/treeview_old/index.js +0 -43
package/lib/table/RowColumn.js
CHANGED
|
@@ -71,7 +71,7 @@ const RowColumn = props => {
|
|
|
71
71
|
return /*#__PURE__*/_react.default.createElement("td", {
|
|
72
72
|
rowSpan: rowSpan,
|
|
73
73
|
colSpan: colSpan,
|
|
74
|
-
className:
|
|
74
|
+
className: `rowcolumn ${customClass} text-align-${textAlign} ${!context.rowBorder && ' -noborder'} ${!rowSpan ? ' -norowspan' : ''} ${isMenuColumn && 'menu-column'}`,
|
|
75
75
|
style: style,
|
|
76
76
|
onClick: e => getColClickEvent(e, _objectSpread(_objectSpread({}, context), props)),
|
|
77
77
|
role: "presentation",
|
package/lib/table/index.js
CHANGED
|
@@ -65,7 +65,12 @@ const getClass = _ref => {
|
|
|
65
65
|
bodyScrollable,
|
|
66
66
|
skeletonInRows = 10
|
|
67
67
|
} = _ref;
|
|
68
|
-
return
|
|
68
|
+
return `table-component ${customClass} ${striped && '-striped'}
|
|
69
|
+
${bordered && '-bordered'} ${hovered && '-hovered'} ${headerColored && '-headercolor'}
|
|
70
|
+
${condensed && '-condensed'}
|
|
71
|
+
${vertical && '-vertical'}
|
|
72
|
+
${skeletonize && !skeletonInRows ? '-skeletonized' : ''}
|
|
73
|
+
${bodyScrollable ? '-scrollable' : ''}`;
|
|
69
74
|
};
|
|
70
75
|
const Table = _ref2 => {
|
|
71
76
|
let {
|
package/lib/table/types.d.ts
CHANGED
|
@@ -25,8 +25,6 @@ interface ITableHeaderProps extends ComponentProps<'th'> {
|
|
|
25
25
|
textAlign?: string;
|
|
26
26
|
visible?: boolean;
|
|
27
27
|
id?: string;
|
|
28
|
-
rowSpan?: number;
|
|
29
|
-
colSpan?: number;
|
|
30
28
|
isMenuColumn?: boolean;
|
|
31
29
|
}
|
|
32
30
|
interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {
|
package/lib/tabs/DropdownTabs.js
CHANGED
|
@@ -62,7 +62,7 @@ const DropdownTabs = _ref2 => {
|
|
|
62
62
|
transparent: true,
|
|
63
63
|
boxShadow: false,
|
|
64
64
|
size: "large",
|
|
65
|
-
customClass:
|
|
65
|
+
customClass: `dropdownbutton ${hasTabs ? 'show' : ''}`
|
|
66
66
|
}, /*#__PURE__*/_react.default.createElement(_list.default, {
|
|
67
67
|
customClass: "dropdown-hide-tabs"
|
|
68
68
|
}, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(DropdownTab, _extends({
|
package/lib/tabs/Menu.js
CHANGED
|
@@ -40,7 +40,7 @@ const Menu = _ref => {
|
|
|
40
40
|
tabMenuAlign: props.tabMenuAlign,
|
|
41
41
|
firstTabIdent: props.firstTabIdent
|
|
42
42
|
}), toolbar && /*#__PURE__*/_react.default.cloneElement(toolbar, {
|
|
43
|
-
customClass:
|
|
43
|
+
customClass: `menubar ${customClassForToolBar}`
|
|
44
44
|
}));
|
|
45
45
|
};
|
|
46
46
|
var _default = exports.default = Menu;
|
package/lib/tabs/MenuTabs.js
CHANGED
|
@@ -42,7 +42,7 @@ const MenuTab = _ref => {
|
|
|
42
42
|
style: {
|
|
43
43
|
width: tabWidth
|
|
44
44
|
},
|
|
45
|
-
className:
|
|
45
|
+
className: `menuitem ${selectedTabId === id && 'selected'}`
|
|
46
46
|
}, /*#__PURE__*/_react.default.createElement(_buttons.default, {
|
|
47
47
|
className: "btn menubutton",
|
|
48
48
|
boxShadow: false,
|
|
@@ -71,7 +71,7 @@ const MenuTabs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
|
|
|
71
71
|
} = _ref2;
|
|
72
72
|
const uniqueTabs = _lodash.default.uniqBy(tabs, 'id');
|
|
73
73
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
74
|
-
className:
|
|
74
|
+
className: `menu ${firstTabIdent && '-firsttabident'}`,
|
|
75
75
|
style: helpers.menuStyles(tabMenuAlign),
|
|
76
76
|
ref: ref
|
|
77
77
|
}, uniqueTabs.map(tab => /*#__PURE__*/_react.default.createElement(MenuTab, _extends({
|
package/lib/tabs/Panel.js
CHANGED
|
@@ -60,9 +60,8 @@ const Panel = props => {
|
|
|
60
60
|
scrollHeight
|
|
61
61
|
} = rootElementRef.current;
|
|
62
62
|
if (scrollHeight !== lastScrollHeight.current) {
|
|
63
|
-
var _observer;
|
|
64
63
|
enableOnEndReached.current = true;
|
|
65
|
-
|
|
64
|
+
observer?.disconnect();
|
|
66
65
|
}
|
|
67
66
|
});
|
|
68
67
|
observer.observe(rootElementRef.current);
|
|
@@ -70,16 +69,15 @@ const Panel = props => {
|
|
|
70
69
|
rootElementRef.current.addEventListener('resize', onScrollEndReached);
|
|
71
70
|
}
|
|
72
71
|
return () => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
(
|
|
76
|
-
(_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.disconnect();
|
|
72
|
+
rootElementRef.current?.removeEventListener('scroll', onScrollEndReached);
|
|
73
|
+
rootElementRef.current?.removeEventListener('resize', onScrollEndReached);
|
|
74
|
+
observer?.disconnect();
|
|
77
75
|
};
|
|
78
76
|
}, [onScrollEndReached]);
|
|
79
77
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
80
78
|
ref: rootElementRef,
|
|
81
79
|
id: id,
|
|
82
|
-
className:
|
|
80
|
+
className: `${customClass} panel ${hidePanel}`,
|
|
83
81
|
style: style
|
|
84
82
|
}, hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : children);
|
|
85
83
|
};
|
package/lib/tabs/context.js
CHANGED
|
@@ -13,7 +13,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
13
13
|
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; }
|
|
14
14
|
const TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
15
15
|
function TabsProvider(_ref) {
|
|
16
|
-
var _menuRef$current$clie, _menuRef$current;
|
|
17
16
|
let {
|
|
18
17
|
children,
|
|
19
18
|
tabs: tabsProp,
|
|
@@ -26,12 +25,11 @@ function TabsProvider(_ref) {
|
|
|
26
25
|
} = _ref;
|
|
27
26
|
const [selectedTabId, setSelectedTabId] = _react.default.useState(selectedTab);
|
|
28
27
|
const [containerWidth, setContainerWidth] = (0, _react.useState)(() => {
|
|
29
|
-
|
|
30
|
-
return (_container$current$cl = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth) !== null && _container$current$cl !== void 0 ? _container$current$cl : 0;
|
|
28
|
+
return container.current?.clientWidth ?? 0;
|
|
31
29
|
});
|
|
32
30
|
const [tabs, setTabs] = (0, _react.useState)((0, _tabHelpers.getTabs)(tabsProp));
|
|
33
31
|
const menuRef = (0, _react.useRef)(null);
|
|
34
|
-
const menuSize = (
|
|
32
|
+
const menuSize = (menuRef.current?.clientWidth ?? 0) - 38 - (firstTabIdent ? 15 : 0);
|
|
35
33
|
const tabsWidth = (0, _react.useMemo)(() => {
|
|
36
34
|
if (typeof tabsWidthProp === 'string') return tabsWidthProp === 'auto' ? 100 : parseInt(tabsWidthProp) || 100;
|
|
37
35
|
return tabsWidthProp;
|
|
@@ -41,8 +39,7 @@ function TabsProvider(_ref) {
|
|
|
41
39
|
setSelectedTabId(selectedTab);
|
|
42
40
|
}
|
|
43
41
|
if (tabs.length > 0 && selectedTabId === null) {
|
|
44
|
-
|
|
45
|
-
setSelectedTabId((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
|
|
42
|
+
setSelectedTabId(tabs[0]?.id);
|
|
46
43
|
}
|
|
47
44
|
const dropdownTabs = (0, _react.useMemo)(() => {
|
|
48
45
|
if (menuSize === 0) return [];
|
|
@@ -1,8 +1,22 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
1
|
+
import React__default, { MutableRefObject } from 'react';
|
|
2
|
+
import { WithTooltipProps } from '../internals/types.js';
|
|
3
|
+
import '../@types/PermissionAttr.js';
|
|
4
|
+
import '../@types/Position.js';
|
|
2
5
|
|
|
3
|
-
interface TextContentProps extends React__default.HTMLAttributes<HTMLElement
|
|
6
|
+
interface TextContentProps extends React__default.HTMLAttributes<HTMLElement>, WithTooltipProps {
|
|
4
7
|
as?: 'span' | 'strong' | 'p';
|
|
8
|
+
label?: string | string[];
|
|
9
|
+
styleForLabel?: object;
|
|
10
|
+
labelUppercase?: boolean;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
targetRef?: (ref: HTMLSpanElement | null) => void;
|
|
14
|
+
labelRef?: MutableRefObject<HTMLSpanElement | null>;
|
|
15
|
+
onHoverLabel?: (e: React__default.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
|
|
5
16
|
}
|
|
6
|
-
declare const
|
|
17
|
+
declare const _default: {
|
|
18
|
+
(props: TextContentProps & React__default.RefAttributes<HTMLElement>): JSX.Element;
|
|
19
|
+
displayName: string;
|
|
20
|
+
};
|
|
7
21
|
|
|
8
|
-
export {
|
|
22
|
+
export { _default as default };
|
package/lib/textContent/index.js
CHANGED
|
@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
require("../assets/styles/textContent.scss");
|
|
9
|
-
|
|
9
|
+
var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
|
|
10
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
11
|
+
const _excluded = ["as", "children", "className", "label", "styleForLabel", "disabled", "targetRef", "labelRef", "onHoverLabel"];
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
13
|
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); }
|
|
11
14
|
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; }
|
|
12
15
|
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); }
|
|
@@ -16,15 +19,24 @@ const TextContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
16
19
|
let {
|
|
17
20
|
as: Comp = 'span',
|
|
18
21
|
children,
|
|
19
|
-
className
|
|
22
|
+
className,
|
|
23
|
+
label,
|
|
24
|
+
styleForLabel,
|
|
25
|
+
disabled,
|
|
26
|
+
targetRef,
|
|
27
|
+
labelRef,
|
|
28
|
+
onHoverLabel
|
|
20
29
|
} = _ref,
|
|
21
30
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
31
|
const typedRef = ref;
|
|
32
|
+
const restProps = _lodash.default.omit(props, ['tooltipWidth', 'tooltip', 'tooltipPosition', 'labelUppercase']);
|
|
23
33
|
return /*#__PURE__*/_react.default.createElement(Comp, _extends({
|
|
24
34
|
ref: typedRef,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
style: styleForLabel,
|
|
36
|
+
className: `text-content-component ${className}`,
|
|
37
|
+
"data-textcontent": Comp,
|
|
38
|
+
onMouseEnter: onHoverLabel
|
|
39
|
+
}, restProps), children);
|
|
28
40
|
});
|
|
29
41
|
TextContent.displayName = 'TextContent';
|
|
30
|
-
var _default = exports.default = TextContent;
|
|
42
|
+
var _default = exports.default = (0, _withTooltip.default)(TextContent);
|
package/lib/toolbar/ButtonBar.js
CHANGED
|
@@ -44,7 +44,7 @@ const ButtonBar = _ref => {
|
|
|
44
44
|
transparent,
|
|
45
45
|
skeletonize,
|
|
46
46
|
boxShadow: false,
|
|
47
|
-
customClass:
|
|
47
|
+
customClass: `buttonbar ${customClass}`
|
|
48
48
|
});
|
|
49
49
|
return {
|
|
50
50
|
default: /*#__PURE__*/_react.default.createElement(_buttons.default, getProps()),
|
package/lib/toolbar/index.js
CHANGED
|
@@ -58,7 +58,7 @@ const ToolBar = _ref => {
|
|
|
58
58
|
value: contextValues
|
|
59
59
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
60
60
|
ref: innerRef,
|
|
61
|
-
className:
|
|
61
|
+
className: `toolbar-component ${size ? `${size}-bar` : ''} ${customClass}`,
|
|
62
62
|
style: style
|
|
63
63
|
}, children));
|
|
64
64
|
};
|
package/lib/tooltip/index.js
CHANGED
|
@@ -23,14 +23,14 @@ const Tooltip = _ref => {
|
|
|
23
23
|
} = _ref;
|
|
24
24
|
const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
|
|
25
25
|
(0, _react.useEffect)(() => {
|
|
26
|
-
tooltipComponent.current.id =
|
|
27
|
-
tooltipComponent.current.className =
|
|
26
|
+
tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
|
|
27
|
+
tooltipComponent.current.className = `tooltip-component ${className} `;
|
|
28
28
|
tooltipComponent.current.dataset.testid = 'tooltip-component';
|
|
29
29
|
tooltipComponent.current.style.cssText = style;
|
|
30
30
|
document.body.appendChild(tooltipComponent.current);
|
|
31
|
-
const tooltipEl = document.querySelector(
|
|
32
|
-
let widthDimension = tooltipEl
|
|
33
|
-
const heightDimension = tooltipEl
|
|
31
|
+
const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
|
|
32
|
+
let widthDimension = tooltipEl?.offsetWidth;
|
|
33
|
+
const heightDimension = tooltipEl?.offsetHeight;
|
|
34
34
|
if (tooltipDimensions && tooltipDimensions.width) {
|
|
35
35
|
widthDimension = tooltipDimensions.width;
|
|
36
36
|
}
|
|
@@ -47,13 +47,13 @@ const Tooltip = _ref => {
|
|
|
47
47
|
};
|
|
48
48
|
}, []);
|
|
49
49
|
(0, _react.useEffect)(() => {
|
|
50
|
-
tooltipComponent.current.className =
|
|
50
|
+
tooltipComponent.current.className = `tooltip-component ${className} `;
|
|
51
51
|
}, [className]);
|
|
52
52
|
(0, _react.useEffect)(() => {
|
|
53
53
|
tooltipComponent.current.style.cssText = style;
|
|
54
54
|
}, [style]);
|
|
55
55
|
(0, _react.useEffect)(() => {
|
|
56
|
-
tooltipComponent.current.className = textError ?
|
|
56
|
+
tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${className}` : `tooltip-component ${className}`;
|
|
57
57
|
}, [textError]);
|
|
58
58
|
const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
|
|
59
59
|
className: "tooltipcontent"
|
package/lib/treetable/Body.js
CHANGED
package/lib/treetable/Header.js
CHANGED
|
@@ -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:
|
|
18
|
+
key: `tr-header-${(0, _uuid.v1)()}`
|
|
19
19
|
}, dataColumns.map(column => /*#__PURE__*/_react.default.createElement(_table.Th, {
|
|
20
|
-
key:
|
|
20
|
+
key: `th-${column.name}-${(0, _uuid.v1)()}`,
|
|
21
21
|
style: column.style
|
|
22
22
|
}, column.title))));
|
|
23
23
|
};
|
package/lib/treetable/Row.d.ts
CHANGED
package/lib/treetable/Row.js
CHANGED
|
@@ -37,7 +37,8 @@ const TreeRow = props => {
|
|
|
37
37
|
leftToolbarElements,
|
|
38
38
|
rightToolbarElements,
|
|
39
39
|
styleForRightToolbar,
|
|
40
|
-
toolbarElementsValidations
|
|
40
|
+
toolbarElementsValidations,
|
|
41
|
+
openNodeId
|
|
41
42
|
} = (0, _react.useContext)(_helpers.TreeTableContext);
|
|
42
43
|
const {
|
|
43
44
|
rowId,
|
|
@@ -49,16 +50,17 @@ const TreeRow = props => {
|
|
|
49
50
|
const [isLoadingChildrens, setIsLoadingChildrens] = (0, _react.useState)(false);
|
|
50
51
|
const [showToolbarElements, setShowToolbarElements] = (0, _react.useState)(false);
|
|
51
52
|
const [firstRenderingOfChildrens, setFirstRenderingOfChildrens] = (0, _react.useState)(false);
|
|
53
|
+
const divContainerRef = (0, _react.useRef)(null);
|
|
52
54
|
const searchChildrensAndInsertState = () => {
|
|
53
55
|
const dataChildrens = (0, _helpers.searchChildrensPerRow)(data, parentPropName, rowId, rowLevel);
|
|
54
56
|
setChildrens(dataChildrens);
|
|
55
57
|
setIsLoadingChildrens(false);
|
|
56
58
|
};
|
|
57
|
-
const handlerShowChildrens =
|
|
58
|
-
if (!firstRenderingOfChildrens && !open
|
|
59
|
+
const handlerShowChildrens = () => {
|
|
60
|
+
if (!firstRenderingOfChildrens && !open) {
|
|
59
61
|
setOpen(true);
|
|
60
62
|
setIsLoadingChildrens(true);
|
|
61
|
-
|
|
63
|
+
if (onClickGetChildrens?.(rowId) && typeof onClickGetChildrens(rowId).finally === 'function') onClickGetChildrens(rowId).then(() => {}).catch(() => {}).finally(() => {
|
|
62
64
|
searchChildrensAndInsertState();
|
|
63
65
|
});
|
|
64
66
|
setFirstRenderingOfChildrens(true);
|
|
@@ -94,7 +96,7 @@ const TreeRow = props => {
|
|
|
94
96
|
let newElementsWithNewProps = [];
|
|
95
97
|
if (elements) {
|
|
96
98
|
newElementsWithNewProps = _react.default.Children.map(elements, element => {
|
|
97
|
-
if (
|
|
99
|
+
if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
|
|
98
100
|
const _element$props = element.props,
|
|
99
101
|
{
|
|
100
102
|
validationKey,
|
|
@@ -121,64 +123,87 @@ const TreeRow = props => {
|
|
|
121
123
|
}
|
|
122
124
|
return newElementsWithNewProps;
|
|
123
125
|
};
|
|
126
|
+
const handleOnMouseEnter = () => {
|
|
127
|
+
setShowToolbarElements(true);
|
|
128
|
+
};
|
|
129
|
+
const handlerMouseInsideDivContainer = event => {
|
|
130
|
+
const elementoAtual = document.elementFromPoint(event.clientX, event.clientY);
|
|
131
|
+
if (divContainerRef.current && !divContainerRef.current.contains(elementoAtual)) {
|
|
132
|
+
setShowToolbarElements(false);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
124
135
|
(0, _react.useEffect)(() => {
|
|
125
136
|
searchChildrensAndInsertState();
|
|
126
137
|
}, [data]);
|
|
127
138
|
(0, _react.useEffect)(() => {
|
|
128
139
|
setIsLoadingChildrens(false);
|
|
129
140
|
}, [childrens]);
|
|
141
|
+
(0, _react.useEffect)(() => {
|
|
142
|
+
if (showToolbarElements) {
|
|
143
|
+
window.addEventListener('mousemove', handlerMouseInsideDivContainer);
|
|
144
|
+
} else {
|
|
145
|
+
window.removeEventListener('mousemove', handlerMouseInsideDivContainer);
|
|
146
|
+
}
|
|
147
|
+
return () => {
|
|
148
|
+
window.removeEventListener('mousemove', handlerMouseInsideDivContainer);
|
|
149
|
+
};
|
|
150
|
+
}, [showToolbarElements]);
|
|
151
|
+
(0, _react.useEffect)(() => {
|
|
152
|
+
if (openNodeId === Number(dataRow.id)) setOpen(true);
|
|
153
|
+
}, [openNodeId]);
|
|
130
154
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_table.TRow, _extends({}, props, {
|
|
131
155
|
dataId: rowId,
|
|
132
|
-
customClass: "tree-row-element"
|
|
133
|
-
onMouseEnter: () => leftToolbarElements ? setShowToolbarElements(true) : null,
|
|
134
|
-
onMouseLeave: () => setShowToolbarElements(false)
|
|
156
|
+
customClass: "tree-row-element"
|
|
135
157
|
}), /*#__PURE__*/_react.default.createElement(_table.Td, {
|
|
136
158
|
ignoreTableColClick: true,
|
|
137
|
-
key:
|
|
159
|
+
key: `td-${dataColumns[0].name}-${(0, _uuid.v1)()}`,
|
|
138
160
|
style: dataColumns[0].style
|
|
139
161
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
140
|
-
|
|
162
|
+
ref: divContainerRef,
|
|
163
|
+
className: "column-container",
|
|
164
|
+
onMouseEnter: handleOnMouseEnter
|
|
141
165
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
142
|
-
className:
|
|
166
|
+
className: `column-more-childrens ${rowLevel && 'line-path-decoration'}`,
|
|
143
167
|
style: {
|
|
144
|
-
marginLeft:
|
|
168
|
+
marginLeft: `${rowLevel}rem`
|
|
145
169
|
}
|
|
146
170
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
147
171
|
tabIndex: -1,
|
|
148
172
|
className: "open-close-children",
|
|
149
173
|
onClick: () => handlerShowChildrens()
|
|
150
|
-
},
|
|
151
|
-
name:
|
|
152
|
-
size: 10
|
|
153
|
-
}) : /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
154
|
-
name: "arrow_right",
|
|
174
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
175
|
+
name: open ? 'down' : 'arrow_right',
|
|
155
176
|
size: 10
|
|
156
177
|
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
157
|
-
tabIndex:
|
|
178
|
+
tabIndex: -1,
|
|
158
179
|
role: "button",
|
|
159
|
-
onKeyPress: undefined,
|
|
160
180
|
className: "value-button",
|
|
161
181
|
onClick: () => onClickFirstColumn ? onClickFirstColumn(rowId) : {}
|
|
162
|
-
}, dataRow[dataColumns[0].name])
|
|
182
|
+
}, dataRow[dataColumns[0].name]), /*#__PURE__*/_react.default.createElement("span", {
|
|
163
183
|
className: "container-toolbar-buttons"
|
|
164
184
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.default, {
|
|
165
185
|
size: "small",
|
|
166
186
|
customClass: "row-toolbar"
|
|
167
187
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
|
|
168
|
-
key:
|
|
188
|
+
key: `left-toolbar-${(0, _uuid.v1)()}`,
|
|
169
189
|
style: _objectSpread({
|
|
170
190
|
float: 'left',
|
|
171
191
|
height: 'fit-content'
|
|
172
192
|
}, styleForLeftToolbar)
|
|
173
|
-
}, showToolbarElements && leftToolbarElements && buildToolbarElements(leftToolbarElements)), /*#__PURE__*/_react.default.createElement(
|
|
174
|
-
|
|
193
|
+
}, showToolbarElements && leftToolbarElements && buildToolbarElements(leftToolbarElements))))), /*#__PURE__*/_react.default.createElement("span", {
|
|
194
|
+
className: "container-toolbar-info"
|
|
195
|
+
}, /*#__PURE__*/_react.default.createElement(_toolbar.default, {
|
|
196
|
+
size: "small",
|
|
197
|
+
customClass: "row-toolbar"
|
|
198
|
+
}, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
|
|
199
|
+
key: `right-toolbar-${(0, _uuid.v1)()}`,
|
|
175
200
|
style: _objectSpread({
|
|
176
201
|
float: 'right',
|
|
177
202
|
height: 'fit-content',
|
|
178
203
|
gap: '4px'
|
|
179
204
|
}, styleForRightToolbar)
|
|
180
205
|
}, rightToolbarElements && buildToolbarElements(rightToolbarElements)))))), dataColumns.slice(1).map(column => /*#__PURE__*/_react.default.createElement(_table.Td, {
|
|
181
|
-
key:
|
|
206
|
+
key: `key-${column.name}-${(0, _uuid.v1)()}`,
|
|
182
207
|
style: _objectSpread({}, column.style),
|
|
183
208
|
ignoreTableColClick: true
|
|
184
209
|
}, dataRow[column.name]))), open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrens && childrens.length === 0 && isLoadingChildrens ? /*#__PURE__*/_react.default.createElement(_table.TRow, {
|
|
@@ -195,7 +220,7 @@ const TreeRow = props => {
|
|
|
195
220
|
dataRow: item,
|
|
196
221
|
rowLevel: item.rowLevel ? item.rowLevel + 1 : 1,
|
|
197
222
|
key: item[rootPropName],
|
|
198
|
-
rowId:
|
|
223
|
+
rowId: `${item[rootPropName]}`,
|
|
199
224
|
style: stylesForRow
|
|
200
225
|
})), childrens && childrens.length !== 0 && isLoadingChildrens && /*#__PURE__*/_react.default.createElement(_table.TRow, {
|
|
201
226
|
key: "tr-loading-childrens"
|
package/lib/treetable/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as ITreeTableProps } from '../types.d-
|
|
2
|
-
export { b as IRowElementsValidations, R as RowItem } from '../types.d-
|
|
1
|
+
import { a as ITreeTableProps } from '../types.d-b477e076.js';
|
|
2
|
+
export { b as IRowElementsValidations, R as RowItem } from '../types.d-b477e076.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '../table/types.js';
|
|
5
5
|
|
package/lib/treeview/Header.js
CHANGED
|
@@ -13,7 +13,7 @@ const Header = props => {
|
|
|
13
13
|
children
|
|
14
14
|
} = props;
|
|
15
15
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
16
|
-
className:
|
|
16
|
+
className: `treeviewheader ${customClass}`
|
|
17
17
|
}, title ? /*#__PURE__*/_react.default.createElement("div", {
|
|
18
18
|
className: "title"
|
|
19
19
|
}, title) : children);
|
package/lib/treeview/Node.js
CHANGED
|
@@ -119,7 +119,7 @@ const TreeNode = props => {
|
|
|
119
119
|
applyBehavior
|
|
120
120
|
} = validation;
|
|
121
121
|
if (_lodash.default.isEmpty(elementBehavior) && validator && validator(node)) {
|
|
122
|
-
elementBehavior = options[applyBehavior
|
|
122
|
+
elementBehavior = options[applyBehavior ?? 'unvisible'];
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
125
|
}
|
|
@@ -129,7 +129,7 @@ const TreeNode = props => {
|
|
|
129
129
|
let updatedElements = [];
|
|
130
130
|
if (elements) {
|
|
131
131
|
updatedElements = _react.default.Children.map(elements, element => {
|
|
132
|
-
if (
|
|
132
|
+
if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
|
|
133
133
|
const _element$props = element.props,
|
|
134
134
|
{
|
|
135
135
|
validationKey,
|
|
@@ -165,7 +165,7 @@ const TreeNode = props => {
|
|
|
165
165
|
} : {};
|
|
166
166
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
167
167
|
style: style,
|
|
168
|
-
key:
|
|
168
|
+
key: `element-${uuid.v1()}`,
|
|
169
169
|
className: "element"
|
|
170
170
|
}, element);
|
|
171
171
|
});
|
|
@@ -185,7 +185,7 @@ const TreeNode = props => {
|
|
|
185
185
|
}, [node]);
|
|
186
186
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
187
187
|
style: customStyle,
|
|
188
|
-
className:
|
|
188
|
+
className: `treeviewitem ${customClass}`
|
|
189
189
|
}, getSpan(), /*#__PURE__*/_react.default.createElement("div", {
|
|
190
190
|
className: "label",
|
|
191
191
|
style: {
|
|
@@ -202,7 +202,7 @@ const TreeNode = props => {
|
|
|
202
202
|
}, showCheckBox ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
203
203
|
checked: checked,
|
|
204
204
|
disabled: required || disabled,
|
|
205
|
-
value:
|
|
205
|
+
value: `${node[valuePropName]}`,
|
|
206
206
|
label: node[labelPropName],
|
|
207
207
|
tooltip: required ? defaultDisabledTooltip : '',
|
|
208
208
|
onChange: disabled || required ? undefined : e => {
|
package/lib/treeview/index.js
CHANGED
|
@@ -239,7 +239,7 @@ const TreeView = props => {
|
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
241
|
return /*#__PURE__*/_react.default.createElement(_Node.default, {
|
|
242
|
-
key:
|
|
242
|
+
key: `node-${node.id}`,
|
|
243
243
|
node: node,
|
|
244
244
|
idsInLoading: idsInLoading,
|
|
245
245
|
startNodesOpened: startNodesOpened,
|
|
@@ -281,7 +281,7 @@ const TreeView = props => {
|
|
|
281
281
|
setData(props.data);
|
|
282
282
|
} else if (!isSameSelectedIds) {
|
|
283
283
|
setCurrentSelectedIds(selectedIds);
|
|
284
|
-
onSelectedIdsChange
|
|
284
|
+
onSelectedIdsChange?.(selectedIds);
|
|
285
285
|
setPropSelectedIds(selectedIds);
|
|
286
286
|
}
|
|
287
287
|
}, [selectedIds.length, props.data]);
|
|
@@ -311,10 +311,10 @@ const TreeView = props => {
|
|
|
311
311
|
return /*#__PURE__*/_react.default.createElement(_constants.TreeviewContext.Provider, {
|
|
312
312
|
value: contextValues
|
|
313
313
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
314
|
-
className:
|
|
314
|
+
className: `treeview-component ${customClass}`
|
|
315
315
|
}, children, /*#__PURE__*/_react.default.createElement("ul", {
|
|
316
316
|
style: styleForContainer,
|
|
317
|
-
className:
|
|
317
|
+
className: `treeviewcontainer ${bordered && '-bordered'}`
|
|
318
318
|
}, buildTree(data))));
|
|
319
319
|
};
|
|
320
320
|
var _default = exports.default = TreeView;
|
|
@@ -34,6 +34,7 @@ interface ITreeTableProps extends ITableProps {
|
|
|
34
34
|
onClickFirstColumn?: (id?: string | number) => void;
|
|
35
35
|
styleForRightToolbar?: CSSProperties;
|
|
36
36
|
styleForLeftToolbar?: CSSProperties;
|
|
37
|
+
openNodeId?: number;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
interface ITreeTableRow extends ITableRowProps {
|
package/lib/uitour/index.js
CHANGED
|
@@ -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 ===
|
|
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 ===
|
|
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 ||
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
208
|
+
className: `step -${stepPosition}`,
|
|
211
209
|
key: currentStep.id,
|
|
212
210
|
style: _objectSpread({}, stepDimensions)
|
|
213
211
|
}, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
|