plataforma-fundacao-componentes 2.22.13 → 2.22.16

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CheckboxThemes } from '../../libraries/CheckboxThemes';
 import { TooltipPosition } from '../../libraries/Tooltips';
 import './Checkbox.scss';
@@ -7,7 +7,7 @@ export interface CheckboxProps {
     'tooltip-text'?: string;
     disabled?: boolean;
     value?: boolean;
-    onChange?: (value: boolean) => void;
+    onChange?: (value: boolean, evt: React.MouseEvent<HTMLElement>) => void;
     theme?: CheckboxThemes;
     tag?: 'button' | 'div';
 }

package/dist/components/dropdownMenu/DropdownMenu.stories.d.ts

@@ -1,7 +1,9 @@
-declare namespace _default {
-    export const title: string;
-    export { DropdownMenu as component };
-}
+/// <reference types="react" />
+import DropdownMenu from './DropdownMenu';
+declare const _default: {
+    title: string;
+    component: typeof DropdownMenu;
+};
 export default _default;
-export function LeftTop(): JSX.Element;
-import DropdownMenu from "./DropdownMenu";
+export declare const Example: () => JSX.Element;
+export declare const Oversized: () => JSX.Element;

package/dist/components/table/components/TableUpperHeader/TableUpperHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DropdownMenuProps } from '../../../dropdownMenu/DropdownMenu';
 import './TableUpperHeader.scss';
 interface upperHeaderButtonType {
@@ -18,6 +18,8 @@ export interface TableUpperHeaderProps {
     active?: boolean;
     leftContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
     rightContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
+    opened?: boolean;
+    collapsedContent?: ReactNode;
 }
 declare function TableUpperHeader(props: TableUpperHeaderProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TableUpperHeader>;

package/dist/components/tableWithOverflow/TableWithOverflow.d.ts

@@ -16,8 +16,6 @@ export declare type ColumnObject = {
 };
 interface TableWithOverflowProps {
     upperHeader?: TableUpperHeaderProps;
-    showArrowControl?: boolean;
-    hasActionsCol?: boolean;
     showTopNavigator?: boolean;
     columns: ColumnObject[];
     lines?: any[];
@@ -25,8 +23,6 @@ interface TableWithOverflowProps {
 declare function TableWithOverflow(props: TableWithOverflowProps): JSX.Element;
 declare namespace TableWithOverflow {
     var defaultProps: {
-        showArrowControl: boolean;
-        hasActionsCol: boolean;
         showTopNavigator: boolean;
     };
 }

package/dist/index.css

@@ -7876,7 +7876,9 @@ h5 {
   background-color: #fefefe;
   position: fixed;
   border-radius: 8px;
-  box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
+  box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
+  overflow: overlay;
+  max-height: calc(49% - 46px); }
 
 .component-dropdown-menu-panel-fade-enter {
   transition: transform 0.3s ease, opacity 0.3s ease;
@@ -15238,7 +15240,7 @@ h5 {
 .component-upper-header-table {
   width: 100%;
   border-radius: 8px 8px 0 0;
-  padding: 0 8px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15284,11 +15286,16 @@ h5 {
       background-color: #d7e6c8;
       color: #3fa110; }
   .component-upper-header-table .component-upper-header-table-left {
+    padding-left: 8px;
     display: flex;
     flex-wrap: wrap; }
   .component-upper-header-table .component-upper-header-table-right {
+    padding-right: 8px;
     display: flex;
     flex-wrap: wrap; }
+  .component-upper-header-table .component-upper-header-table-collapsed {
+    border-top: 1px solid #3fa110;
+    background-color: #eff4eb; }
 
 @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

@@ -1339,7 +1339,7 @@ function Checkbox(props) {
   var fProps = React.useMemo(function () {
     var handleClick = function handleClick(evt) {
       if (typeof props.onChange === 'function' && !props.disabled) {
-        props.onChange(!props.value);
+        props.onChange(!props.value, evt);
         evt.stopPropagation();
       }
     };
@@ -4450,26 +4450,20 @@ function DropdownMenu(props) {
       var windowHeight = window.innerHeight;
       var windowWidth = window.innerWidth;
 
-      if (painel.getBoundingClientRect().height > windowHeight) {
-        painel.style.overflowY = 'overlay';
-      } else {
-        painel.style.overflowY = '';
-      }
-
       if (pontoCentralX < windowWidth / 2) {
+        painel.style.left = bound.x + "px";
+
         if (pontoCentralY < windowHeight / 2) {
-          painel.style.left = bound.x + "px";
           painel.style.top = bound.y + bound.height + "px";
         } else {
-          painel.style.left = bound.x + "px";
           painel.style.top = bound.y - painel.getBoundingClientRect().height + "px";
         }
       } else {
+        painel.style.right = windowWidth - bound.x - bound.width + "px";
+
         if (pontoCentralY < windowHeight / 2) {
-          painel.style.right = windowWidth - bound.x - bound.width + "px";
           painel.style.top = bound.y + bound.height + "px";
         } else {
-          painel.style.right = windowWidth - bound.x - bound.width + "px";
           painel.style.top = bound.y - painel.getBoundingClientRect().height + "px";
         }
       }
@@ -4563,7 +4557,7 @@ function DropdownMenu(props) {
     classNames: rootClassName$S + "-panel-fade",
     unmountOnExit: true
   }, React__default.createElement("div", {
-    className: rootClassName$S + "-panel"
+    className: rootClassName$S + "-panel scroll-white"
   }, props.content)));
 }
 DropdownMenu.defaultProps = {
@@ -9586,7 +9580,7 @@ var LeftCheckboxWithLabel = function LeftCheckboxWithLabel(props) {
       var _props$spanProps3;
 
       if (props.anchorLabelToCheckbox) {
-        props.onChange(!props.value);
+        props.onChange(!props.value, evt);
       }
 
       if (props.spanProps && typeof props.spanProps.onClick === 'function') (_props$spanProps3 = props.spanProps) === null || _props$spanProps3 === void 0 ? void 0 : _props$spanProps3.onClick(evt);
@@ -9878,38 +9872,49 @@ function TableUpperHeader(props) {
   }, React__default.createElement("div", {
     className: rootClassName$1A + "-left"
   }, (_props$leftContent = props.leftContent) === null || _props$leftContent === void 0 ? void 0 : _props$leftContent.map(function (btn, i) {
-    return btn.type === 'Button' ? React__default.createElement("button", Object.assign({
-      key: i
-    }, btn, {
+    return btn.type === 'Button' ? React__default.createElement("button", {
+      key: i,
+      id: btn.id,
+      onClick: btn.onClick,
       disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false,
-      type: 'button',
-      className: rootClassName$1A + "-btn"
-    }), btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn, {
-      key: i
-    }), React__default.createElement("button", Object.assign({
+      className: rootClassName$1A + "-btn",
+      type: 'button'
+    }, btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn, {
       key: i
-    }, btn.children, {
+    }), React__default.createElement("button", {
+      key: i,
+      id: btn.children.id,
+      onClick: btn.children.onClick,
       className: rootClassName$1A + "-btn",
       disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.children.disabled) || false,
       type: 'button'
-    }), btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
+    }, btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
   })), React__default.createElement("div", {
     className: rootClassName$1A + "-right"
   }, (_props$rightContent = props.rightContent) === null || _props$rightContent === void 0 ? void 0 : _props$rightContent.map(function (btn, i) {
-    return btn.type === 'Button' ? React__default.createElement("button", Object.assign({
-      key: i
-    }, btn, {
+    return btn.type === 'Button' ? React__default.createElement("button", {
+      key: i,
+      id: btn.id,
+      onClick: btn.onClick,
       disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false,
       className: rootClassName$1A + "-btn",
       type: 'button'
-    }), btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn), React__default.createElement("button", Object.assign({
-      key: i
-    }, btn.children, {
+    }, btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn, {
+      key: "children_" + i
+    }), React__default.createElement("button", {
+      key: i,
+      id: btn.children.id,
+      onClick: btn.children.onClick,
       disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.children.disabled) || false,
       className: rootClassName$1A + "-btn",
       type: 'button'
-    }), btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
-  })));
+    }, btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
+  })), props.collapsedContent ? React__default.createElement(Collapse$1, {
+    opened: props.opened,
+    animateOpacity: true
+  }, React__default.createElement(Row$1, {
+    className: rootClassName$1A + "-collapsed"
+  }, props.collapsedContent)) : undefined);
 }
 
 var TableUpperHeader$1 = React.memo(TableUpperHeader);
@@ -9921,8 +9926,8 @@ function TableWithOverflow(props) {
 
   var mediaQuery = useScreenSize();
   var wrapperClassName = React.useMemo(function () {
-    return getMergedClassNames([rootClassName$1B + "-wrapper", props.hasActionsCol ? 'has-actions-col' : '', props.upperHeader ? 'has-upper-header' : '', 'left-columns-padding']);
-  }, [props.hasActionsCol, props.upperHeader]);
+    return getMergedClassNames([rootClassName$1B + "-wrapper", props.upperHeader ? 'has-upper-header' : '', 'left-columns-padding']);
+  }, [props.upperHeader]);
   var outerTableRef = React.createRef();
   useDraggableScroll(outerTableRef, {
     mouseDownCondition: function mouseDownCondition(el) {
@@ -9947,22 +9952,27 @@ function TableWithOverflow(props) {
     }
   };
 
+  var atLeastOneStaticColumn = React.useMemo(function () {
+    return props.columns.some(function (c) {
+      return !c.absolute;
+    });
+  }, [props.columns]);
   var paddingLeft = React.useMemo(function () {
-    return props.columns.reduce(function (prev, atual) {
+    return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
       var _atual$absolute;
 
       var n = (_atual$absolute = atual.absolute) !== null && _atual$absolute !== void 0 && _atual$absolute.left ? parseInt(atual.absolute.width) : 0;
       return prev + n;
-    }, 8) + "px";
-  }, [props.columns]);
+    }, 8) + "px" : '8px';
+  }, [props.columns, atLeastOneStaticColumn]);
   var paddingRight = React.useMemo(function () {
-    return props.columns.reduce(function (prev, atual) {
+    return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
       var _atual$absolute2;
 
       var n = (_atual$absolute2 = atual.absolute) !== null && _atual$absolute2 !== void 0 && _atual$absolute2.right ? parseInt(atual.absolute.width) : 0;
       return prev + n;
-    }, 8) + "px";
-  }, [props.columns]);
+    }, 8) + "px" : '8px';
+  }, [props.columns, atLeastOneStaticColumn]);
   return React__default.createElement("div", {
     className: rootClassName$1B
   }, props.upperHeader ? React__default.createElement("div", {
@@ -9993,12 +10003,13 @@ function TableWithOverflow(props) {
   }), (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (column) {
     var _column$props;
 
+    var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
     return React__default.createElement("th", Object.assign({
       key: "header-" + column.key,
-      "data-draggable": !Boolean(column.absolute)
+      "data-draggable": atLeastOneStaticColumn && !Boolean(absoluteObj)
     }, column.props, {
-      style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style, column.absolute),
-      className: getMergedClassNames([column.key + "-cell", column.absolute ? 'absolute' : ''])
+      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);
   }), React__default.createElement("th", {
     className: 'absolute right-0'
@@ -10014,12 +10025,13 @@ function TableWithOverflow(props) {
     }), (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.map(function (column) {
       var _column$props2, _column$props3;
 
+      var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
       return React__default.createElement("td", Object.assign({
-        "data-draggable": !Boolean(column.absolute),
+        "data-draggable": atLeastOneStaticColumn && !Boolean(column.absolute),
         key: lineIndex + "-" + column.key
       }, column.props, {
-        style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style, column.absolute),
-        className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", column.absolute ? 'absolute' : ''])
+        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' : ''])
       }), line[column.key]);
     }), React__default.createElement("td", {
       className: 'absolute right-0'
@@ -10028,8 +10040,6 @@ function TableWithOverflow(props) {
 }
 
 TableWithOverflow.defaultProps = {
-  showArrowControl: true,
-  hasActionsCol: true,
   showTopNavigator: true
 };
 var TableWithOverflow$1 = React.memo(TableWithOverflow);