plataforma-fundacao-componentes 2.22.9 → 2.22.14

package/dist/index.modern.js

@@ -1339,26 +1339,32 @@ var CheckboxThemes;
 
 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 = 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.createElement("button", Object.assign({}, getProps()));
+  if (props.tag === 'div') {
+    return React.createElement("div", Object.assign({}, fProps));
+  }
+
+  return React.createElement("button", Object.assign({}, fProps));
 }
 Checkbox.defaultProps = {
   disabled: false,
@@ -4409,6 +4415,7 @@ function DropdownItem(props) {
   return React.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) {
@@ -4457,19 +4464,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";
         }
       }
@@ -4499,7 +4506,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;
           }
@@ -4563,7 +4570,7 @@ function DropdownMenu(props) {
     classNames: rootClassName$S + "-panel-fade",
     unmountOnExit: true
   }, React.createElement("div", {
-    className: rootClassName$S + "-panel"
+    className: rootClassName$S + "-panel scroll-white"
   }, props.content)));
 }
 DropdownMenu.defaultProps = {
@@ -9776,7 +9783,7 @@ var CircleArrowLeft = function CircleArrowLeft() {
   }))));
 };
 
-function useDraggableScroll(reference) {
+function useDraggableScroll(reference, options) {
   useEffect(function () {
     var element = reference.current;
     var pos = {
@@ -9786,6 +9793,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 = {
@@ -9818,6 +9829,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 = useState(),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var valueRef = 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);
+      }
+    }
+  };
+
+  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) {
@@ -9828,19 +9891,37 @@ function TableUpperHeader(props) {
   }, React.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.createElement("button", Object.assign({
+    return btn.type === 'Button' ? React.createElement("button", Object.assign({
       key: i
     }, btn, {
-      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
-    }), btn.leftIcon && React.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.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.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.createElement("span", null, btn.rightIcon)) : React.createElement(DropdownMenu, Object.assign({}, btn, {
+      key: i
+    }), React.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.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React.createElement("span", null, btn.children.rightIcon)));
   })), React.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.createElement("button", Object.assign({
+    return btn.type === 'Button' ? React.createElement("button", Object.assign({
       key: i
     }, btn, {
-      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
-    }), btn.leftIcon && React.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.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.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.createElement("span", null, btn.rightIcon)) : React.createElement(DropdownMenu, Object.assign({}, btn), React.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.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React.createElement("span", null, btn.children.rightIcon)));
   })));
 }
 
@@ -9851,11 +9932,16 @@ var rootClassName$1B = 'component-table-with-overflow';
 function TableWithOverflow(props) {
   var _props$columns, _props$lines;
 
+  var mediaQuery = useScreenSize();
   var wrapperClassName = 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 = 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) {
@@ -9921,7 +10007,8 @@ function TableWithOverflow(props) {
     var _column$props;
 
     return React.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' : ''])
@@ -11523,58 +11610,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 = useState(),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var valueRef = 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);
-      }
-    }
-  };
-
-  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) {