linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/toolbar/Separator.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Separator = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: "separator"
+});
+var _default = exports.default = Separator;

package/lib/toolbar/ToolBarGroup.d.ts

@@ -0,0 +1,12 @@
+import { IToolBarGroup } from './types.js';
+import 'react';
+import '../@types/ButtonTypes.js';
+import '../@types/Position.js';
+import '../@types/Size.js';
+import '../treeview/types.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const ToolBarGroup: ({ children, style }: IToolBarGroup) => JSX.Element;
+
+export { ToolBarGroup as default };

package/lib/toolbar/ToolBarGroup.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ToolBarGroup = _ref => {
+  let {
+    children,
+    style = {}
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolbar-group",
+    style: style
+  }, children);
+};
+var _default = exports.default = ToolBarGroup;

package/lib/toolbar/helpers.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IToolbarProps } from './types.js';
+import '../@types/ButtonTypes.js';
+import '../@types/Position.js';
+import '../@types/Size.js';
+import '../treeview/types.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const ToolBarContext: React.Context<IToolbarProps>;
+
+export { ToolBarContext as default };

package/lib/toolbar/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const ToolBarContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = exports.default = ToolBarContext;

package/lib/toolbar/index.d.ts

@@ -0,0 +1,16 @@
+export { default as ToolBarGroup } from './ToolBarGroup.js';
+export { default as Separator } from './Separator.js';
+export { default as ButtonBar } from './ButtonBar.js';
+export { default as LabelBar } from './LabelBar.js';
+import { IToolbarProps } from './types.js';
+import 'react';
+import '../@types/ButtonTypes.js';
+import '../@types/Position.js';
+import '../@types/Size.js';
+import '../treeview/types.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const ToolBar: ({ innerRef, children, style, size, customClass, ...props }: IToolbarProps) => JSX.Element;
+
+export { ToolBar as default };

package/lib/toolbar/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ButtonBar", {
+  enumerable: true,
+  get: function () {
+    return _ButtonBar.default;
+  }
+});
+Object.defineProperty(exports, "LabelBar", {
+  enumerable: true,
+  get: function () {
+    return _LabelBar.default;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.default;
+  }
+});
+Object.defineProperty(exports, "ToolBarGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToolBarGroup.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ToolBarGroup = _interopRequireDefault(require("./ToolBarGroup"));
+var _Separator = _interopRequireDefault(require("./Separator"));
+var _ButtonBar = _interopRequireDefault(require("./ButtonBar"));
+var _LabelBar = _interopRequireDefault(require("./LabelBar"));
+require("../assets/styles/toolbar.scss");
+var _helpers = _interopRequireDefault(require("./helpers"));
+const _excluded = ["innerRef", "children", "style", "size", "customClass"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+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; }
+const ToolBar = _ref => {
+  let {
+      innerRef,
+      children,
+      style = {},
+      size,
+      customClass = ''
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const contextValues = _objectSpread({}, props);
+  return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: innerRef,
+    className: `toolbar-component ${size ? `${size}-bar` : ''} ${customClass}`,
+    style: style
+  }, children));
+};
+var _default = exports.default = ToolBar;

package/lib/toolbar/types.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ButtonTypes } from '../@types/ButtonTypes.js';
+import { Position } from '../@types/Position.js';
+import { Size } from '../@types/Size.js';
+import { NodeItem } from '../treeview/types.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
+
+interface IToolbarProps {
+    children?: ReactNode;
+    customClass?: string;
+    skeletonize?: boolean;
+    innerRef?: () => void;
+    style?: CSSProperties;
+    size?: Extract<Size, 'small' | 'large'>;
+}
+interface IButtonBarProps {
+    label?: string;
+    iconName?: IconNames;
+    type?: ButtonTypes;
+    icon?: ReactElement;
+    onClick?: () => void;
+    customClass?: string;
+    transparent?: boolean;
+    size?: Size;
+    iconAlign?: Exclude<Position, 'top' | 'bottom'>;
+    validationKey?: string;
+    boxShadow?: boolean;
+    id?: string;
+    onNodeElementClick?: (node: NodeItem) => void;
+}
+interface ILabelBarProps {
+    iconName?: IconNames;
+    bordered?: boolean;
+    icon?: ReactElement;
+    children?: ReactNode;
+    style?: CSSProperties;
+    size?: Extract<Size, 'small' | 'large'>;
+    type?: Extract<ButtonTypes, 'default' | 'primary' | 'danger' | 'info' | 'success' | 'warning'>;
+}
+interface IToolBarGroup {
+    style?: CSSProperties;
+    children: ReactNode;
+}
+
+export { IButtonBarProps, ILabelBarProps, IToolBarGroup, IToolbarProps };

package/lib/toolbar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { ITooltipProps } from './types.js';
+
+declare const Tooltip: ({ text, textError, tooltipRef, style, tooltipDimensions, className, handlerSetDimensions, }: ITooltipProps) => React__default.ReactPortal;
+
+export { Tooltip as default };

package/lib/tooltip/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
+require("../assets/styles/tooltip.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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; }
+const Tooltip = _ref => {
+  let {
+    text,
+    textError,
+    tooltipRef,
+    style = '',
+    tooltipDimensions,
+    className = 'bottom',
+    handlerSetDimensions = () => {}
+  } = _ref;
+  const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
+    tooltipComponent.current.className = `tooltip-component ${className} `;
+    tooltipComponent.current.dataset.testid = 'tooltip-component';
+    tooltipComponent.current.style.cssText = style;
+    document.body.appendChild(tooltipComponent.current);
+    const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
+    let widthDimension = tooltipEl?.offsetWidth;
+    const heightDimension = tooltipEl?.offsetHeight;
+    if (tooltipDimensions && tooltipDimensions.width) {
+      widthDimension = tooltipDimensions.width;
+    }
+    handlerSetDimensions({
+      width: widthDimension,
+      height: Number(heightDimension)
+    });
+    // eslint-disable-next-line no-param-reassign
+    if (tooltipRef) {
+      tooltipRef.current = tooltipEl;
+    }
+    return () => {
+      document.body.removeChild(tooltipComponent.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = `tooltip-component ${className} `;
+  }, [className]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.style.cssText = style;
+  }, [style]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${className}` : `tooltip-component ${className}`;
+  }, [textError]);
+  const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "tooltipcontent"
+  }, textError || text);
+  return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
+};
+var _default = exports.default = Tooltip;

package/lib/tooltip/types.d.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject } from 'react';
+
+type Dimensions = {
+    width: number | string;
+    height: number;
+};
+interface ITooltipProps {
+    text?: string;
+    style?: string;
+    className?: string;
+    tooltipRef?: MutableRefObject<HTMLElement | null>;
+    handlerSetDimensions?: ({ width, height }: Dimensions) => void;
+    tooltipDimensions?: Dimensions;
+    textError?: string;
+}
+
+export { ITooltipProps };

package/lib/tooltip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/treetable/Body.d.ts

@@ -0,0 +1,3 @@
+declare const TreeTableBody: () => JSX.Element;
+
+export { TreeTableBody as default };

package/lib/treetable/Body.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _table = require("../table");
+var _helpers = require("./helpers");
+var _Row = _interopRequireDefault(require("./Row"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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; }
+const TreeTableBody = () => {
+  const {
+    data,
+    rootPropName,
+    stylesForRow,
+    parentPropName
+  } = (0, _react.useContext)(_helpers.TreeTableContext);
+  const [rootElements, setRootElements] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const elements = (0, _helpers.searchRootElements)(data, parentPropName, 0);
+    setRootElements(elements);
+  }, [data]);
+  return /*#__PURE__*/_react.default.createElement(_table.TBody, null, rootElements && rootElements.map(element => /*#__PURE__*/_react.default.createElement(_Row.default, {
+    dataRow: element,
+    rowLevel: element.rowLevel ? element.rowLevel + 1 : 0,
+    key: element[rootPropName],
+    rowId: `${element[rootPropName]}`,
+    style: stylesForRow
+  })));
+};
+var _default = exports.default = TreeTableBody;

package/lib/treetable/Header.d.ts

@@ -0,0 +1,3 @@
+declare const TreeTableHeader: () => JSX.Element;
+
+export { TreeTableHeader as default };

package/lib/treetable/Header.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+var _table = require("../table");
+var _helpers = require("./helpers");
+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); }
+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; }
+const TreeTableHeader = () => {
+  const {
+    dataColumns
+  } = (0, _react.useContext)(_helpers.TreeTableContext);
+  return /*#__PURE__*/_react.default.createElement(_table.THeader, null, /*#__PURE__*/_react.default.createElement(_table.TRow, {
+    key: `tr-header-${(0, _uuid.v1)()}`
+  }, dataColumns.map(column => /*#__PURE__*/_react.default.createElement(_table.Th, {
+    key: `th-${column.name}-${(0, _uuid.v1)()}`,
+    style: column.style
+  }, column.title))));
+};
+var _default = exports.default = TreeTableHeader;

package/lib/treetable/Row.d.ts

@@ -0,0 +1,7 @@
+import { I as ITreeTableRow } from '../types.d-73cece43.js';
+import 'react';
+import '../table/types.js';
+
+declare const TreeRow: (props: ITreeTableRow) => JSX.Element;
+
+export { TreeRow as default };

package/lib/treetable/Row.js

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _uuid = require("uuid");
+var _icons = _interopRequireDefault(require("../icons"));
+var _SpinnerLoading = _interopRequireDefault(require("../spinner/SpinnerLoading"));
+var _table = require("../table");
+var _toolbar = _interopRequireWildcard(require("../toolbar"));
+var _helpers = require("./helpers");
+const _excluded = ["validationKey", "onNodeElementClick"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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; }
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+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; }
+const TreeRow = props => {
+  const {
+    data,
+    dataColumns,
+    rootPropName,
+    stylesForRow,
+    parentPropName,
+    styleForLeftToolbar,
+    onClickFirstColumn,
+    onClickGetChildrens,
+    leftToolbarElements,
+    rightToolbarElements,
+    styleForRightToolbar,
+    toolbarElementsValidations
+  } = (0, _react.useContext)(_helpers.TreeTableContext);
+  const {
+    rowId,
+    dataRow,
+    rowLevel
+  } = props;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [childrens, setChildrens] = (0, _react.useState)();
+  const [isLoadingChildrens, setIsLoadingChildrens] = (0, _react.useState)(false);
+  const [showToolbarElements, setShowToolbarElements] = (0, _react.useState)(false);
+  const [firstRenderingOfChildrens, setFirstRenderingOfChildrens] = (0, _react.useState)(false);
+  const searchChildrensAndInsertState = () => {
+    const dataChildrens = (0, _helpers.searchChildrensPerRow)(data, parentPropName, rowId, rowLevel);
+    setChildrens(dataChildrens);
+    setIsLoadingChildrens(false);
+  };
+  const handlerShowChildrens = async () => {
+    if (!firstRenderingOfChildrens && !open && onClickGetChildrens) {
+      setOpen(true);
+      setIsLoadingChildrens(true);
+      await onClickGetChildrens(rowId).then(() => {}).catch(() => {}).finally(() => {
+        searchChildrensAndInsertState();
+      });
+      setFirstRenderingOfChildrens(true);
+    } else {
+      setOpen(prevState => !prevState);
+    }
+  };
+  const validateRowElement = validationKey => {
+    const validations = toolbarElementsValidations && toolbarElementsValidations[validationKey];
+    const options = {
+      disabled: {
+        disabled: true
+      },
+      unvisible: {
+        visible: false
+      }
+    };
+    let elementBehavior = {};
+    if (validations) {
+      validations.forEach(validation => {
+        const {
+          validator,
+          onDenied
+        } = validation;
+        if (_lodash.default.isEmpty(elementBehavior) && validator && validator(dataRow) && onDenied) {
+          elementBehavior = options[onDenied] || options.unvisible;
+        }
+      });
+    }
+    return elementBehavior;
+  };
+  const buildToolbarElements = elements => {
+    let newElementsWithNewProps = [];
+    if (elements) {
+      newElementsWithNewProps = _react.default.Children.map(elements, element => {
+        if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
+          const _element$props = element.props,
+            {
+              validationKey,
+              onNodeElementClick
+            } = _element$props,
+            restProps = _objectWithoutProperties(_element$props, _excluded);
+          let elementBehavior;
+          let newProps = {};
+          if (toolbarElementsValidations && validationKey) {
+            elementBehavior = validateRowElement(validationKey);
+          }
+          if (onNodeElementClick) {
+            newProps = _objectSpread(_objectSpread({}, newProps), {}, {
+              onClick: e => {
+                onNodeElementClick(dataRow);
+                if (e.stopPropagation) e.stopPropagation();
+              }
+            });
+          }
+          return /*#__PURE__*/(0, _react.createElement)(element.type, _objectSpread(_objectSpread(_objectSpread({}, restProps), newProps), elementBehavior));
+        }
+        return element;
+      });
+    }
+    return newElementsWithNewProps;
+  };
+  (0, _react.useEffect)(() => {
+    searchChildrensAndInsertState();
+  }, [data]);
+  (0, _react.useEffect)(() => {
+    setIsLoadingChildrens(false);
+  }, [childrens]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_table.TRow, _extends({}, props, {
+    dataId: rowId,
+    customClass: "tree-row-element",
+    onMouseEnter: () => leftToolbarElements ? setShowToolbarElements(true) : null,
+    onMouseLeave: () => setShowToolbarElements(false)
+  }), /*#__PURE__*/_react.default.createElement(_table.Td, {
+    ignoreTableColClick: true,
+    key: `td-${dataColumns[0].name}-${(0, _uuid.v1)()}`,
+    style: dataColumns[0].style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `column-more-childrens ${rowLevel && 'line-path-decoration'}`,
+    style: {
+      marginLeft: `${rowLevel}rem`
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    tabIndex: -1,
+    className: "open-close-children",
+    onClick: () => handlerShowChildrens()
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: open ? 'down' : 'arrow_right',
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: 0,
+    role: "button",
+    onKeyPress: undefined,
+    className: "value-button",
+    onClick: () => onClickFirstColumn ? onClickFirstColumn(rowId) : {}
+  }, dataRow[dataColumns[0].name])), /*#__PURE__*/_react.default.createElement("span", {
+    className: "container-toolbar-buttons"
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.default, {
+    size: "small",
+    customClass: "row-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
+    key: `left-toolbar-${(0, _uuid.v1)()}`,
+    style: _objectSpread({
+      float: 'left',
+      height: 'fit-content'
+    }, styleForLeftToolbar)
+  }, showToolbarElements && leftToolbarElements && buildToolbarElements(leftToolbarElements)), /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
+    key: `right-toolbar-${(0, _uuid.v1)()}`,
+    style: _objectSpread({
+      float: 'right',
+      height: 'fit-content',
+      gap: '4px'
+    }, styleForRightToolbar)
+  }, rightToolbarElements && buildToolbarElements(rightToolbarElements)))))), dataColumns.slice(1).map(column => /*#__PURE__*/_react.default.createElement(_table.Td, {
+    key: `key-${column.name}-${(0, _uuid.v1)()}`,
+    style: _objectSpread({}, column.style),
+    ignoreTableColClick: true
+  }, dataRow[column.name]))), open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrens && childrens.length === 0 && isLoadingChildrens ? /*#__PURE__*/_react.default.createElement(_table.TRow, {
+    key: "tr-loading-childrens"
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: dataColumns.length,
+    className: "td-loading-childrens"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "td-loading-childrens-container"
+  }, /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
+    size: "48px",
+    key: "loading-childrens"
+  })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrens && childrens.map(item => /*#__PURE__*/_react.default.createElement(TreeRow, {
+    dataRow: item,
+    rowLevel: item.rowLevel ? item.rowLevel + 1 : 1,
+    key: item[rootPropName],
+    rowId: `${item[rootPropName]}`,
+    style: stylesForRow
+  })), childrens && childrens.length !== 0 && isLoadingChildrens && /*#__PURE__*/_react.default.createElement(_table.TRow, {
+    key: "tr-loading-childrens"
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: dataColumns.length,
+    className: "td-loading-childrens"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "td-loading-childrens-container"
+  }, /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
+    size: "48px",
+    key: "loading-childrens"
+  })))))));
+};
+var _default = exports.default = TreeRow;

package/lib/treetable/helpers.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { a as ITreeTableProps } from '../types.d-73cece43.js';
+import '../table/types.js';
+
+declare const TreeTableContext: React.Context<ITreeTableProps>;
+declare const searchRootElements: (data: {
+    [key: string]: any;
+}[], parentPropName: string, rowLevel?: number) => ({
+    [key: string]: any;
+} & {
+    rowLevel: number;
+})[];
+declare const searchChildrensPerRow: (data: {
+    [key: string]: any;
+}[], parentPropName: string, rowId?: string | number, rowLevel?: number) => {
+    [key: string]: any;
+}[];
+
+export { TreeTableContext, searchChildrensPerRow, searchRootElements };

package/lib/treetable/helpers.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchRootElements = exports.searchChildrensPerRow = exports.TreeTableContext = void 0;
+var _react = require("react");
+const TreeTableContext = exports.TreeTableContext = /*#__PURE__*/(0, _react.createContext)({});
+const searchRootElements = function (data, parentPropName) {
+  let rowLevel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let dataFiltered;
+  if (data) {
+    dataFiltered = data.filter(item => !item[parentPropName]);
+    return dataFiltered.map(item => Object.assign(item, {}, {
+      rowLevel
+    }));
+  }
+  return data;
+};
+exports.searchRootElements = searchRootElements;
+const searchChildrensPerRow = function (data, parentPropName, rowId) {
+  let rowLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let dataFiltered;
+  if (data && rowId) {
+    dataFiltered = data.filter(item => item[parentPropName] === Number(rowId));
+    return dataFiltered.map(item => Object.assign(item, {}, {
+      rowLevel
+    }));
+  }
+  return data;
+};
+exports.searchChildrensPerRow = searchChildrensPerRow;

package/lib/treetable/index.d.ts

@@ -0,0 +1,8 @@
+import { a as ITreeTableProps } from '../types.d-73cece43.js';
+export { b as IRowElementsValidations, R as RowItem } from '../types.d-73cece43.js';
+import 'react';
+import '../table/types.js';
+
+declare const TreeTable: (props: ITreeTableProps) => JSX.Element;
+
+export { TreeTable as default };