plataforma-fundacao-componentes 2.23.7 → 2.23.8

package/dist/components/dropdownItem/DropdownItem.d.ts

@@ -7,6 +7,7 @@ interface DropdownItemProps {
     disabled?: boolean;
     onClick?: (event?: any) => void;
     alignRight?: boolean;
+    loading?: boolean;
 }
 declare function DropdownItem(props: DropdownItemProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DropdownItem>;

package/dist/index.css

@@ -8497,6 +8497,7 @@ h5 {
   justify-content: flex-start;
   border: none;
   outline: none;
+  position: relative;
   transition: color 0.3s ease, background-color 0.3s ease; }
   .component-dropdown-item:not(:disabled) {
     cursor: pointer; }
@@ -8504,23 +8505,58 @@ h5 {
       background-color: #f3f3f3; }
   .component-dropdown-item:disabled {
     color: #cdd3cd; }
-  .component-dropdown-item.align-right {
-    justify-content: flex-end; }
-  .component-dropdown-item .component-dropdown-item-icon {
+    .component-dropdown-item:disabled .component-dropdown-item-loader {
+      color: #828a82; }
+  .component-dropdown-item .component-dropdown-item-content {
+    width: 100%;
     display: flex;
     align-items: center;
-    margin-right: 10px;
-    margin-left: unset; }
-    .component-dropdown-item .component-dropdown-item-icon.right {
-      margin-right: unset;
-      margin-left: 10px; }
-    .component-dropdown-item .component-dropdown-item-icon svg {
-      height: 20px;
-      width: 20px; }
-  .component-dropdown-item .component-dropdown-item-label {
+    justify-content: flex-start; }
+    .component-dropdown-item .component-dropdown-item-content .component-dropdown-item-label {
+      font-size: 15px;
+      vertical-align: middle;
+      text-overflow: ellipsis;
+      text-align: left; }
+    .component-dropdown-item .component-dropdown-item-content .component-dropdown-item-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      margin-left: unset; }
+      .component-dropdown-item .component-dropdown-item-content .component-dropdown-item-icon svg {
+        height: 20px;
+        width: 20px; }
+  .component-dropdown-item.right .component-dropdown-item-content,
+  .component-dropdown-item.right .component-dropdown-item-loader {
+    flex-direction: row-reverse; }
+  .component-dropdown-item.right .component-dropdown-item-label {
+    text-align: left; }
+  .component-dropdown-item.right .component-dropdown-item-icon {
+    margin-right: unset;
+    margin-left: 10px; }
+  .component-dropdown-item.loading .component-dropdown-item-content {
+    overflow: hidden; }
+  .component-dropdown-item .component-dropdown-item-loader {
+    width: 30px;
     display: flex;
     align-items: center;
-    font-size: 15px; }
+    justify-content: flex-start;
+    overflow: hidden;
+    transition: width 0.3s ease, opacity 0.2s ease; }
+    .component-dropdown-item .component-dropdown-item-loader svg {
+      height: 20px;
+      width: 20px; }
+    .component-dropdown-item .component-dropdown-item-loader.component-dropdown-item-fade-enter {
+      width: 0;
+      opacity: 0; }
+    .component-dropdown-item .component-dropdown-item-loader.component-dropdown-item-fade-enter-active {
+      opacity: 1;
+      width: 30px; }
+    .component-dropdown-item .component-dropdown-item-loader.component-dropdown-item-fade-exit {
+      opacity: 1;
+      width: 30px; }
+    .component-dropdown-item .component-dropdown-item-loader.component-dropdown-item-fade-exit-active {
+      opacity: 0;
+      width: 0px; }
 
 @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");

package/dist/index.js

@@ -8533,21 +8533,30 @@ var rootClassName$27 = 'component-dropdown-item';
 function DropdownItem(props) {
   return React__default.createElement("button", {
     id: props.id,
-    disabled: props.disabled,
+    disabled: props.disabled || props.loading,
     "aria-disabled": props.disabled,
-    className: getMergedClassNames([rootClassName$27, props.alignRight ? 'align-right' : '']),
+    className: getMergedClassNames([rootClassName$27, props.alignRight ? 'right' : '', props.loading ? 'loading' : '']),
     onClick: function onClick(evt) {
       if (typeof props.onClick === 'function' && !props.disabled) {
         props.onClick(evt);
       }
     }
-  }, props.icon && !props.alignRight ? React__default.createElement("div", {
+  }, React__default.createElement("div", {
+    className: rootClassName$27 + "-content"
+  }, React__default.createElement(reactTransitionGroup.CSSTransition, {
+    "in": props.loading,
+    timeout: 300,
+    unmountOnExit: true,
+    classNames: rootClassName$27 + "-fade"
+  }, React__default.createElement("div", {
+    className: rootClassName$27 + "-loader"
+  }, React__default.createElement(PercentLoaderIcon, {
+    indefinido: true
+  }))), props.icon ? React__default.createElement("div", {
     className: rootClassName$27 + "-icon"
   }, props.icon) : undefined, React__default.createElement("div", {
     className: rootClassName$27 + "-label"
-  }, props.label), props.icon && props.alignRight ? React__default.createElement("div", {
-    className: rootClassName$27 + "-icon right"
-  }, props.icon) : undefined);
+  }, props.label)));
 }
 
 var DropdownItem$1 = React.memo(DropdownItem);
@@ -11492,6 +11501,11 @@ function TableWithOverflow(props) {
     }
   };
 
+  var someAbsoluteColumn = React.useMemo(function () {
+    return props.columns.some(function (c) {
+      return c.absolute;
+    });
+  }, [props.columns]);
   var atLeastOneStaticColumn = React.useMemo(function () {
     return props.columns.some(function (c) {
       return !c.absolute;
@@ -11521,14 +11535,14 @@ function TableWithOverflow(props) {
 
       var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
       return React__default.createElement("th", Object.assign({
-        key: "header-" + column.key + "-" + atLeastOneStaticColumn,
-        "data-draggable": atLeastOneStaticColumn && !Boolean(column.absolute)
+        key: "header-" + column.key + "-" + atLeastOneStaticColumn + "-" + someAbsoluteColumn,
+        "data-draggable": someAbsoluteColumn && atLeastOneStaticColumn && !Boolean(column.absolute)
       }, column.props, {
         style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style, absoluteObj),
         className: getMergedClassNames([column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
       }), column.value);
     });
-  }, [props.columns, atLeastOneStaticColumn]);
+  }, [props.columns, atLeastOneStaticColumn, someAbsoluteColumn]);
   var lines = React.useMemo(function () {
     var _props$lines;
 
@@ -11547,8 +11561,8 @@ function TableWithOverflow(props) {
 
         var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
         return React__default.createElement("td", Object.assign({
-          "data-draggable": atLeastOneStaticColumn && !Boolean(column.absolute),
-          key: k + "-" + column.key + "-" + atLeastOneStaticColumn
+          "data-draggable": someAbsoluteColumn && atLeastOneStaticColumn && !Boolean(column.absolute),
+          key: k + "-" + column.key + "-" + atLeastOneStaticColumn + "-" + someAbsoluteColumn
         }, column.props, {
           style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style, absoluteObj),
           className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
@@ -11557,7 +11571,7 @@ function TableWithOverflow(props) {
         className: 'absolute right-0'
       }));
     });
-  }, [props.columns, props.lines, atLeastOneStaticColumn]);
+  }, [props.lines, props.columns, atLeastOneStaticColumn, someAbsoluteColumn]);
   return React__default.createElement("div", {
     className: rootClassName$2H
   }, props.upperHeader ? React__default.createElement("div", {