plataforma-fundacao-componentes 2.22.9 → 2.22.14

package/dist/assets/icons/FilterIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './Icon.scss';
+export declare const FilterIcon: () => JSX.Element;

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

@@ -9,6 +9,7 @@ export interface CheckboxProps {
     value?: boolean;
     onChange?: (value: boolean) => void;
     theme?: CheckboxThemes;
+    tag?: 'button' | 'div';
 }
 declare function Checkbox(props: CheckboxProps): JSX.Element;
 declare namespace Checkbox {

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import './DropdownItem.scss';
 interface DropdownItemProps {
     id?: string;
-    icon?: object;
+    icon?: ReactNode;
     label?: string;
     disabled?: boolean;
     onClick?: (event?: any) => void;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './DropdownMenu.scss';
-interface DropdownMenuProps {
+export interface DropdownMenuProps {
     id?: string;
     opened?: boolean;
     setOpened: (evt?: any) => void;

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,17 +1,23 @@
 import React from 'react';
+import { DropdownMenuProps } from '../../../dropdownMenu/DropdownMenu';
 import './TableUpperHeader.scss';
-declare type upperHeaderButtonType = {
+interface upperHeaderButtonType {
+    type: 'Button';
     id?: string;
     onClick?: () => void;
     label?: string;
     leftIcon?: JSX.Element | React.ReactNode;
     rightIcon?: JSX.Element | React.ReactNode;
     disabled?: boolean;
-};
+}
+export interface upperHeaderDropdownMenuType extends DropdownMenuProps {
+    type: 'DropdownMenu';
+    children: upperHeaderButtonType;
+}
 export interface TableUpperHeaderProps {
     active?: boolean;
-    leftContent?: upperHeaderButtonType[];
-    rightContent?: upperHeaderButtonType[];
+    leftContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
+    rightContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
 }
 declare function TableUpperHeader(props: TableUpperHeaderProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TableUpperHeader>;

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

@@ -4,7 +4,7 @@ import './TableWithOverflow.scss';
 interface TableCell extends React.HTMLAttributes<HTMLTableCellElement> {
     align?: 'left' | 'center' | 'right' | 'justify' | 'char';
 }
-declare type ColumnObject = {
+export declare type ColumnObject = {
     key: string;
     props?: TableCell;
     value: any;

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

@@ -5,3 +5,4 @@ declare const _default: {
 export default _default;
 export declare const Primary: () => JSX.Element;
 export declare const UpperHeader: () => JSX.Element;
+export declare const UpperHeaderWithColumnFilter: () => JSX.Element;

package/dist/hooks/useDraggableScroll/useDraggableScroll.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export default function useDraggableScroll<T extends HTMLElement>(reference: React.RefObject<T>): void;
+export default function useDraggableScroll<T extends HTMLElement>(reference: React.RefObject<T>, options?: {
+    mouseDownCondition: (target: HTMLElement) => boolean;
+}): void;

package/dist/index.css

@@ -3861,12 +3861,12 @@ h5 {
   justify-content: center;
   align-items: center;
   transition: background-color 0.3s ease, opacity 0.3s ease; }
-  .component-checkbox:not(:disabled) {
+  .component-checkbox:not(:disabled), .component-checkbox:not(.component-checkbox[aria-disabled='true']) {
     cursor: pointer; }
   .component-checkbox:focus {
     outline: none; }
 
-.component-checkbox-primary:disabled {
+.component-checkbox-primary:disabled, .component-checkbox-primary[aria-disabled='true'] {
   opacity: 0.6; }
 
 .component-checkbox-primary.component-checkbox-not {
@@ -3875,7 +3875,7 @@ h5 {
 .component-checkbox-primary.component-checkbox-checked {
   background-color: #3fa110; }
 
-.component-checkbox-dark:disabled {
+.component-checkbox-dark:disabled, .component-checkbox-dark[aria-disabled='true'] {
   opacity: 0.6; }
 
 .component-checkbox-dark.component-checkbox-not {
@@ -3884,7 +3884,7 @@ h5 {
 .component-checkbox-dark.component-checkbox-checked {
   background-color: #323c32; }
 
-.component-checkbox-blue:disabled {
+.component-checkbox-blue:disabled, .component-checkbox-blue[aria-disabled='true'] {
   opacity: 0.6; }
 
 .component-checkbox-blue.component-checkbox-not {
@@ -3904,9 +3904,9 @@ h5 {
     height: 10px;
     background-color: rgba(0, 0, 0, 0);
     transition: background-color 0.3s ease; }
-  .component-checkbox-classic:disabled {
+  .component-checkbox-classic:disabled, .component-checkbox-classic[aria-disabled='true'] {
     border-color: #828a82; }
-    .component-checkbox-classic:disabled.component-checkbox-checked::after {
+    .component-checkbox-classic:disabled.component-checkbox-checked::after, .component-checkbox-classic[aria-disabled='true'].component-checkbox-checked::after {
       background-color: #828a82; }
   .component-checkbox-classic.component-checkbox-checked::after {
     background-color: #3fa110; }
@@ -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;
@@ -15248,7 +15250,7 @@ h5 {
   background-color: #cdd3cd;
   color: #828a82;
   border-color: #828a82; }
-  .component-upper-header-table button {
+  .component-upper-header-table .component-upper-header-table-btn {
     font-size: 16px;
     color: #828a82;
     border-color: #828a82;
@@ -15261,26 +15263,26 @@ h5 {
     align-items: center;
     justify-content: flex-start;
     background-color: rgba(0, 0, 0, 0); }
-    .component-upper-header-table button:not(:disabled) {
+    .component-upper-header-table .component-upper-header-table-btn:not(:disabled) {
       cursor: pointer; }
-      .component-upper-header-table button:not(:disabled):active {
+      .component-upper-header-table .component-upper-header-table-btn:not(:disabled):active {
         transform: scale(0.95, 0.9); }
-    .component-upper-header-table button span {
+    .component-upper-header-table .component-upper-header-table-btn span {
       display: flex;
       align-items: center;
       justify-content: center; }
-      .component-upper-header-table button span:first-child {
+      .component-upper-header-table .component-upper-header-table-btn span:first-child {
         padding-right: 8px; }
-      .component-upper-header-table button span:last-child {
+      .component-upper-header-table .component-upper-header-table-btn span:last-child {
         padding-left: 8px; }
-      .component-upper-header-table button span svg {
+      .component-upper-header-table .component-upper-header-table-btn span svg {
         max-width: 20px !important;
         max-height: 20px !important; }
   .component-upper-header-table.active {
     background-color: #d7e6c8;
     color: #3fa110;
     border-color: #3fa110; }
-    .component-upper-header-table.active button {
+    .component-upper-header-table.active .component-upper-header-table-btn:not(:disabled) {
       background-color: #d7e6c8;
       color: #3fa110; }
   .component-upper-header-table .component-upper-header-table-left {
@@ -15502,6 +15504,7 @@ tr:first-child th:last-child {
         align-items: center;
         justify-content: center; }
     @media screen and (min-width: 767.98px) {
+      .component-table-with-overflow .component-table-with-overflow-wrapper th[data-draggable='true'],
       .component-table-with-overflow .component-table-with-overflow-wrapper td[data-draggable='true'] {
         -webkit-user-select: none;
            -moz-user-select: none;
@@ -15509,6 +15512,7 @@ tr:first-child th:last-child {
                 user-select: none;
         cursor: -webkit-grab;
         cursor: grab; }
+      .component-table-with-overflow .component-table-with-overflow-wrapper table:active th[data-draggable='true'],
       .component-table-with-overflow .component-table-with-overflow-wrapper table:active td[data-draggable='true'] {
         cursor: -webkit-grabbing !important;
         cursor: grabbing !important; }

package/dist/index.js

@@ -1336,26 +1336,32 @@ var TrashIcon = function TrashIcon() {
 
 var rootClassName$s = 'component-checkbox';
 function Checkbox(props) {
-  var handleClick = function handleClick(evt) {
-    if (typeof props.onChange === 'function' && !props.disabled) {
-      props.onChange(!props.value);
-      evt.stopPropagation();
-    }
-  };
+  var fProps = React.useMemo(function () {
+    var handleClick = function handleClick(evt) {
+      if (typeof props.onChange === 'function' && !props.disabled) {
+        props.onChange(!props.value);
+        evt.stopPropagation();
+      }
+    };
 
-  var getProps = function getProps() {
     var p = _extends({}, props, {
       className: getMergedClassNames([rootClassName$s, rootClassName$s + "-" + props.theme, rootClassName$s + "-" + (props.value ? 'checked' : 'not')]),
+      'aria-disabled': props.disabled || props['aria-disabled'],
       onClick: handleClick
     });
 
     delete p.value;
+    delete p.tag;
     delete p.onChange;
     delete p.theme;
     return p;
-  };
+  }, [props]);
 
-  return React__default.createElement("button", Object.assign({}, getProps()));
+  if (props.tag === 'div') {
+    return React__default.createElement("div", Object.assign({}, fProps));
+  }
+
+  return React__default.createElement("button", Object.assign({}, fProps));
 }
 Checkbox.defaultProps = {
   disabled: false,
@@ -4396,6 +4402,7 @@ function DropdownItem(props) {
   return React__default.createElement("button", {
     id: props.id,
     disabled: props.disabled,
+    "aria-disabled": props.disabled,
     className: getMergedClassNames([rootClassName$R, props.alignRight ? 'align-right' : '']),
     onClick: function onClick(evt) {
       if (typeof props.onClick === 'function' && !props.disabled) {
@@ -4444,19 +4451,19 @@ function DropdownMenu(props) {
       var windowWidth = window.innerWidth;
 
       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";
         }
       }
@@ -4486,7 +4493,7 @@ function DropdownMenu(props) {
         var deveFechar = true;
 
         while (aux && aux.id !== 'root') {
-          if (aux && aux.id && aux.id === id && aux.classList.contains("" + rootClassName$S)) {
+          if (aux && aux.id && aux.id === id && aux.classList.contains(rootClassName$S)) {
             deveFechar = false;
             break;
           }
@@ -4550,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 = {
@@ -9757,7 +9764,7 @@ var CircleArrowLeft = function CircleArrowLeft() {
   }))));
 };
 
-function useDraggableScroll(reference) {
+function useDraggableScroll(reference, options) {
   React.useEffect(function () {
     var element = reference.current;
     var pos = {
@@ -9767,6 +9774,10 @@ function useDraggableScroll(reference) {
     var moving = false;
 
     var mouseDownHandler = function mouseDownHandler(evt) {
+      if (options && typeof options.mouseDownCondition === 'function' && !options.mouseDownCondition(evt.target)) {
+        return;
+      }
+
       if (evt.button === 0 && (element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth)) {
         moving = true;
         pos = {
@@ -9799,6 +9810,58 @@ function useDraggableScroll(reference) {
   }, [reference]);
 }
 
+var ScreenSize;
+
+(function (ScreenSize) {
+  ScreenSize["xs"] = "xs";
+  ScreenSize["sm"] = "sm";
+  ScreenSize["md"] = "md";
+  ScreenSize["lg"] = "lg";
+  ScreenSize["xl"] = "xl";
+})(ScreenSize || (ScreenSize = {}));
+
+function useScreenSize() {
+  var _useState = React.useState(),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  var f = function f() {
+    if (window.innerWidth <= 575.98) {
+      if (valueRef.current !== ScreenSize.xs) {
+        setValue(ScreenSize.xs);
+      }
+    } else if (window.innerWidth <= 767.98) {
+      if (valueRef.current !== ScreenSize.sm) {
+        setValue(ScreenSize.sm);
+      }
+    } else if (window.innerWidth <= 991.98) {
+      if (valueRef.current !== ScreenSize.md) {
+        setValue(ScreenSize.md);
+      }
+    } else if (window.innerWidth <= 1199.98) {
+      if (valueRef.current !== ScreenSize.lg) {
+        setValue(ScreenSize.lg);
+      }
+    } else if (window.innerWidth > 1199.98) {
+      if (valueRef.current !== ScreenSize.xl) {
+        setValue(ScreenSize.xl);
+      }
+    }
+  };
+
+  React.useLayoutEffect(function () {
+    f();
+    window.addEventListener('resize', f);
+    return function () {
+      window.removeEventListener('resize', f);
+    };
+  }, []);
+  return value;
+}
+
 var rootClassName$1A = 'component-upper-header-table';
 
 function TableUpperHeader(props) {
@@ -9809,19 +9872,37 @@ 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 React__default.createElement("button", Object.assign({
+    return btn.type === 'Button' ? React__default.createElement("button", Object.assign({
       key: i
     }, btn, {
-      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
-    }), btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon));
+      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({
+      key: i
+    }, btn.children, {
+      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)));
   })), 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 React__default.createElement("button", Object.assign({
+    return btn.type === 'Button' ? React__default.createElement("button", Object.assign({
       key: i
     }, btn, {
-      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
-    }), btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon));
+      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, {
+      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)));
   })));
 }
 
@@ -9832,11 +9913,16 @@ var rootClassName$1B = 'component-table-with-overflow';
 function TableWithOverflow(props) {
   var _props$columns, _props$lines;
 
+  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]);
   var outerTableRef = React.createRef();
-  useDraggableScroll(outerTableRef);
+  useDraggableScroll(outerTableRef, {
+    mouseDownCondition: function mouseDownCondition(el) {
+      return ['xl', 'lg', 'md'].includes(mediaQuery) && el.hasAttribute('data-draggable') && el.getAttribute('data-draggable') === 'true';
+    }
+  });
 
   var handleArrowClick = function handleArrowClick(toAdd) {
     if (toAdd === void 0) {
@@ -9902,7 +9988,8 @@ function TableWithOverflow(props) {
     var _column$props;
 
     return React__default.createElement("th", Object.assign({
-      key: "header-" + column.key
+      key: "header-" + column.key,
+      "data-draggable": !Boolean(column.absolute)
     }, 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' : ''])
@@ -11500,58 +11587,6 @@ function useModalManager() {
   }))), openModal, closeModal];
 }
 
-var ScreenSize;
-
-(function (ScreenSize) {
-  ScreenSize["xs"] = "xs";
-  ScreenSize["sm"] = "sm";
-  ScreenSize["md"] = "md";
-  ScreenSize["lg"] = "lg";
-  ScreenSize["xl"] = "xl";
-})(ScreenSize || (ScreenSize = {}));
-
-function useScreenSize() {
-  var _useState = React.useState(),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var valueRef = React.useRef(value);
-  valueRef.current = value;
-
-  var f = function f() {
-    if (window.innerWidth <= 575.98) {
-      if (valueRef.current !== ScreenSize.xs) {
-        setValue(ScreenSize.xs);
-      }
-    } else if (window.innerWidth <= 767.98) {
-      if (valueRef.current !== ScreenSize.sm) {
-        setValue(ScreenSize.sm);
-      }
-    } else if (window.innerWidth <= 991.98) {
-      if (valueRef.current !== ScreenSize.md) {
-        setValue(ScreenSize.md);
-      }
-    } else if (window.innerWidth <= 1199.98) {
-      if (valueRef.current !== ScreenSize.lg) {
-        setValue(ScreenSize.lg);
-      }
-    } else if (window.innerWidth > 1199.98) {
-      if (valueRef.current !== ScreenSize.xl) {
-        setValue(ScreenSize.xl);
-      }
-    }
-  };
-
-  React.useLayoutEffect(function () {
-    f();
-    window.addEventListener('resize', f);
-    return function () {
-      window.removeEventListener('resize', f);
-    };
-  }, []);
-  return value;
-}
-
 var rootClassName$22 = 'comp-toast-manager';
 var count$1 = 0;
 function useToastManager(props) {