linear-react-components-ui 1.1.20-beta.42 → 1.1.20-beta.43

package/lib/assets/styles/button.scss

@@ -104,6 +104,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
     pointer-events: auto;
+    cursor: not-allowed;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;

package/lib/assets/styles/effects.scss

@@ -135,12 +135,10 @@
 @keyframes revealelement {
   0% {
     color: transparent;
-    height: 0%;
     opacity: 0.0;
   }
   50% {
     color: inherit;
-    height: auto;
     opacity: 0.3;
   }
   100% {

package/lib/assets/styles/treetable.scss

@@ -78,13 +78,13 @@ table {
       display: flex;
       flex-direction: row;
       align-items: center;
+      justify-content: space-between;
     }
 
     span.container-toolbar-buttons {
-      width: 100%;
+      width: auto;
       height: auto;
       margin-left: 4px;
-      margin-right: 16px;
     }
 
     .row-toolbar {

package/lib/assets/styles/treeview.scss

@@ -1,6 +1,6 @@
 @import "./colors.scss";
 @import "./effects.scss";
-.treeview-component { 
+.treeview-component {
   display: flex;
   flex-direction: column;
   > .treeviewcontainer {
@@ -52,17 +52,17 @@
     align-items: center;
     min-height: 25px;
     color: $font-color-soft;
-    >.node-menu {
+    > .node-menu {
       animation: revealelement 0.3s forwards ease-in-out;
       margin-left: 10px;
     }
-    >.node-rightelements {
+    > .node-rightelements {
       animation: revealelement 0.3s forwards ease-in-out;
       display: flex;
       justify-content: flex-start;
       align-items: center;
     }
-    >.node-toolbarelements {
+    > .node-toolbarelements {
       animation: revealelement 0.3s forwards ease-in-out;
       width: auto;
       height: 100%;
@@ -82,15 +82,31 @@
   }
 }
 
-.nodelist > .treeviewitem > .label > .node-rightelements  > .element,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
+.nodelist > .treeviewitem > .label > .node-rightelements > .element,
+.treeview-component
+  > .treeviewcontainer
+  > .treeviewitem
+  > .label
+  > .node-rightelements
+  > .element {
   margin-left: 10px;
   display: flex;
   align-items: center;
   height: 100%;
 }
 
-.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
+.nodelist
+  > .treeviewitem
+  > .label
+  > .node-toolbarelements
+  > .toolbar-group
+  > .buttonbar,
+.treeview-component
+  > .treeviewcontainer
+  > .treeviewitem
+  > .label
+  > .node-toolbarelements
+  > .toolbar-group
+  > .buttonbar {
   border: none;
 }

package/lib/assets/styles/wizard.scss

@@ -4,11 +4,72 @@
   .wizard-wrapper {
     .wizard-content {
       display: flex !important;
-      flex-direction: column;
-      .wizard-body{
-        overflow: auto;
+      &:has(.wizard-progressbar[data-position="top"]) {
+        flex-direction: column;
+      }
+      &:has(.wizard-progressbar[data-position="left"]) {
+        flex-direction: row;
+      }
+      .wizard-progressbar {
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          position: relative;
+          &[data-disabled="true"] {
+            pointer-events: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            .step {
+              .number {
+                background-color: #dadada;
+                border-color: #dadada;
+              }
+            }
+            .step-title {
+              color: #dadada;
+            }
+          }
+          &[data-completed="true"] {
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
       }
-      .wizard-progresbar {
+      .wizard-progressbar[data-position="top"] {
         width: 100%;
         display: grid;
         grid-auto-columns: 1fr;
@@ -19,12 +80,7 @@
         border-bottom: 2px solid $component-border-color;
         gap: 10px;
         > .title {
-          font-size: 16px;
-          font-weight: 600;
-          display: flex;
-          align-items: center;
           flex-direction: column;
-          position: relative;
           flex: 1;
           text-align: center;
           &:first-child {
@@ -81,47 +137,50 @@
             & + .title:after {
               background-color: $success-color !important;
             }
-            > .step {
-              > .number {
-                background-color: $success-color;
-                border-color: $success-color;
-              }
-            }
-          }
-          &[data-disabled="true"] .step {
-            opacity: 0.3;
           }
           > .step {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
             width: 54px;
-            > .number {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              font-size: 20px;
-              font-weight: 600;
-              width: 36px;
-              height: 36px;
-              border-radius: 100%;
-              color: #fff;
-              background-color: $color-light-dark;
-              z-index: 1;
-              transition: all 0.2s ease-in-out;
-              border: 2px solid $color-light-dark;
-            }
           }
           > .step-title {
-            max-width: 150px;
-            overflow: hidden;
             margin-top: 6px;
-            font-weight: 500;
-            color: $font-color-soft;
           }
         }
       }
+      .wizard-progressbar[data-position="left"] {
+        width: 220px;
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+        border-right: 1px solid #ccc;
+        padding: 10px 16px 10px 10px;
+        margin-right: 10px;
+        background-color: $fieldset-default;
+        > .title {
+          gap: 10px;
+          &:has(+ .title) {
+            &:after {
+              content: "";
+              position: absolute;
+              bottom: -44px;
+              left: 17px;
+              width: 3px;
+              height: calc(100% + 10px);
+              background-color: #dadada;
+            }
+          }
+          &[data-completed="true"] {
+            &:has(+ .title):after {
+              background-color: $success-color !important;
+            }
+          }
+          > .step {
+            width: 36px;
+          }
+        }
+      }
+      .wizard-body {
+        overflow: auto;
+      }
     }
   }
 }

package/lib/buttons/DefaultButton.js

@@ -11,7 +11,7 @@ var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "onDeniedText"];
+const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "errorMessage", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "handlerClose", "onDeniedText", "tooltip", "tooltipWidth", "tooltipPosition"];
 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; }
@@ -54,12 +54,15 @@ const DefaultButton = _ref => {
       permissionAttr,
       skeletonize,
       errorMessage,
-      tooltipWidth,
       isFloatMenu,
       dropdownAlign,
       customClassForDropdown,
       buttonRef,
-      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
+      handlerClose,
+      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.',
+      tooltip,
+      tooltipWidth,
+      tooltipPosition
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];

package/lib/buttons/types.d.ts

@@ -41,6 +41,7 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     customClassForDropdown?: string;
     dropdownAlign?: 'left' | 'right';
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    handlerClose?: (cb: () => void) => void;
     closeDropdownOnClickOutside?: boolean;
     errorMessage?: string;
     onDeniedText?: string;

package/lib/dialog/Alert.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Alert = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: props.confirmLabel ?? 'Confirmar'
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Error.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Error = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: props.confirmLabel ?? 'Confirmar'
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Information.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Information = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: props.confirmLabel ?? 'Confirmar'
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Question.js

@@ -19,8 +19,8 @@ const Question = props => {
     isWaiting,
     onConfirmClick,
     onUnconfirmClick,
-    confirmLabel,
-    declineLabel
+    confirmLabel = 'Sim',
+    declineLabel = 'Não'
   } = props;
   const idUnconfirm = 'botao-unconfirm-click';
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
@@ -28,13 +28,13 @@ const Question = props => {
     disabled: isWaiting,
     onClick: onConfirmClick,
     isLoading: isWaiting,
-    label: confirmLabel ?? 'Sim'
+    label: confirmLabel
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
     id: idUnconfirm,
     key: "no-buttom",
     disabled: isWaiting,
     onClick: onUnconfirmClick,
-    label: declineLabel ?? 'Não'
+    label: declineLabel
   })];
   (0, _react.useLayoutEffect)(() => {
     const lastElementActive = document.activeElement;

package/lib/dialog/Warning.js

@@ -11,9 +11,13 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Warning = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
-    onClick: props.onConfirmClick,
-    label: props.confirmLabel ?? 'Confirmar',
+    onClick: onConfirmClick,
+    label: confirmLabel,
     key: 1
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {

package/lib/dialog/types.d.ts

@@ -86,6 +86,7 @@ interface WizardComponentProps extends Omit<IFormProps, 'content'> {
     controls: WizardControls;
     customStyleForProgressBar?: CSSProperties;
     customStyleForBody?: CSSProperties;
+    progressBarPosition?: 'top' | 'left';
 }
 interface WizardStepComponentProps {
     children: React.ReactNode;

package/lib/dialog/wizard/index.d.ts

@@ -8,6 +8,6 @@ import '../../icons/helper.js';
 
 declare const WizardContext: React__default.Context<WizardControls | null>;
 declare const useWizardContext: () => WizardControls | null;
-declare function Wizard({ children, controls, showProgressbar, customStyleForProgressBar, customStyleForBody, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+declare function Wizard({ children, controls, showProgressbar, customStyleForProgressBar, customStyleForBody, progressBarPosition, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
 
 export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -25,7 +25,7 @@ var _progressbar = require("./progressbar");
 require("../../assets/styles/wizard.scss");
 var _step = require("./step");
 var _useWizard = require("./useWizard");
-const _excluded = ["children", "controls", "showProgressbar", "customStyleForProgressBar", "customStyleForBody"];
+const _excluded = ["children", "controls", "showProgressbar", "customStyleForProgressBar", "customStyleForBody", "progressBarPosition"];
 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; }
@@ -41,7 +41,8 @@ function Wizard(_ref) {
       controls,
       showProgressbar = true,
       customStyleForProgressBar,
-      customStyleForBody
+      customStyleForBody,
+      progressBarPosition = 'top'
     } = _ref,
     dialogProps = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -69,7 +70,8 @@ function Wizard(_ref) {
     contentClassName: "wizard-content"
   }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
     stepsTitle: stepsTitle,
-    customStyle: customStyleForProgressBar
+    customStyle: customStyleForProgressBar,
+    position: progressBarPosition
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "wizard-body",
     style: customStyleForBody

package/lib/dialog/wizard/progressbar.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
+declare function Progressbar({ customClass, customStyle, stepsTitle, position, }: Readonly<{
     customClass?: string;
     stepsTitle: {
         title: string;
@@ -8,6 +8,7 @@ declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<
         completed: boolean;
     }[];
     customStyle?: CSSProperties;
+    position?: 'top' | 'left';
 }>): JSX.Element;
 
 export { Progressbar };

package/lib/dialog/wizard/progressbar.js

@@ -11,7 +11,8 @@ function Progressbar(_ref) {
   let {
     customClass,
     customStyle,
-    stepsTitle
+    stepsTitle,
+    position = 'top'
   } = _ref;
   const context = (0, _.useWizardContext)();
   if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
@@ -19,8 +20,9 @@ function Progressbar(_ref) {
     currentStep
   } = context;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `wizard-progresbar ${customClass}`,
-    style: customStyle
+    className: `wizard-progressbar ${customClass}`,
+    style: customStyle,
+    "data-position": position
   }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
     key: step.number,
     className: "title",

package/lib/dropdown/Popup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IPopUpProps } from './types.js';
 
-declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
+declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, targetRef, ...props }: IPopUpProps) => React.ReactPortal;
 
 export { DropdownPopup as default };

package/lib/dropdown/Popup.js

@@ -7,20 +7,36 @@ exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = require("uuid");
-const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
+const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth", "targetRef"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 getCalendarDropdownStyle = _ref => {
+const getDropdownStyles = _ref => {
   let {
-    topPosition,
-    leftPosition,
-    rightPosition,
     align,
     isFloatMenu,
-    minWidth
+    minWidth,
+    container,
+    target
   } = _ref;
-  let style = `top: ${topPosition + (isFloatMenu ? 6 : 2)}px; min-width: ${minWidth}px;`;
+  if (!container || !target) return '';
+  const targetDimensions = target.getBoundingClientRect();
+  const rightPosition = !isFloatMenu ? window.innerWidth - targetDimensions.x - targetDimensions.width - 4 : undefined;
+  const leftPosition = targetDimensions.left;
+  let topPosition = targetDimensions.top + window.scrollY + targetDimensions.height;
+  let top = topPosition + (isFloatMenu ? 6 : 2);
+  let maxHeight = undefined;
+  let showScroll = false;
+  const isOverflowing = top + container.scrollHeight > window.innerHeight;
+  if (isOverflowing) {
+    const targetPosition = targetDimensions.top;
+    const containerHeight = container.scrollHeight;
+    showScroll = containerHeight > targetPosition;
+    maxHeight = showScroll ? targetPosition - 10 : containerHeight;
+    top = top - maxHeight - targetDimensions.height - (isFloatMenu ? 6 : 2) - 5;
+  }
+  let style = `top: ${top}px; min-width: ${minWidth}px;`;
+  if (showScroll) style += `max-height: ${maxHeight}px; overflow-y: scroll;`;
   if (align === 'left') {
     style += `left: ${leftPosition}px;`;
   } else if (align === 'right') {
@@ -28,7 +44,9 @@ const getCalendarDropdownStyle = _ref => {
   }
   return style;
 };
-const body = document.getElementsByTagName('body')[0];
+const {
+  body
+} = document;
 const DropdownPopup = _ref2 => {
   let {
       id,
@@ -38,20 +56,13 @@ const DropdownPopup = _ref2 => {
       topPosition = 0,
       leftPosition = 0,
       rightPosition = 0,
-      minWidth = 0
+      minWidth = 0,
+      targetRef
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   const popup = (0, _react.useRef)(document.createElement('div'));
   popup.current.className = `dropdown-component ${customClassForDropdown}`;
   popup.current.dataset.testid = 'dropdown-component';
-  popup.current.style.cssText = getCalendarDropdownStyle({
-    topPosition,
-    leftPosition,
-    rightPosition,
-    align,
-    isFloatMenu,
-    minWidth
-  });
   if (popup && popup.current) {
     const modalContainers = document.body.getElementsByClassName('modalcontainer');
     const lastModalContainer = modalContainers[modalContainers.length - 1];
@@ -60,6 +71,16 @@ const DropdownPopup = _ref2 => {
   (0, _react.useEffect)(() => {
     body.appendChild(popup.current);
     popup.current.id = id || `dropdown-component-${(0, _uuid.v1)()}`;
+    popup.current.style.cssText = getDropdownStyles({
+      topPosition,
+      leftPosition,
+      rightPosition,
+      align,
+      isFloatMenu,
+      minWidth,
+      container: popup.current,
+      target: targetRef
+    });
     return () => {
       body.removeChild(popup.current);
     };

package/lib/dropdown/types.d.ts

@@ -10,6 +10,7 @@ interface WithDropdownProps {
     closeDropdownOnClickOutside?: boolean;
     showDropdown?: () => void;
     isFloatMenu?: boolean;
+    handlerClose?: (cb: () => void) => void;
 }
 interface WrappedComponentProps extends WithDropdownProps {
     getDropdownPopup?: (ref: Ref<HTMLElement | null>) => ReactElement;
@@ -31,14 +32,17 @@ interface IPopUpProps {
     leftPosition?: number;
     rightPosition?: number;
     minWidth?: number;
+    targetRef?: HTMLElement;
 }
-interface GetCalendarDropdownStyleParams {
+interface GetDropdownStyleParams {
     align: 'left' | 'right';
     minWidth: number;
     isFloatMenu: boolean;
     topPosition: number;
     leftPosition: number;
     rightPosition: number;
+    container?: HTMLDivElement;
+    target?: HTMLElement;
 }
 
-export { GetCalendarDropdownStyleParams, GetDisplayNameParams, IPopUpProps, WithDropdownContextProps, WithDropdownProps, WrappedComponentProps };
+export { GetDisplayNameParams, GetDropdownStyleParams, IPopUpProps, WithDropdownContextProps, WithDropdownProps, WrappedComponentProps };

package/lib/dropdown/withDropdown.js

@@ -20,6 +20,7 @@ const withDropdown = WrappedComponent => {
       showDropdown,
       dropdown,
       closeDropdownOnClickOutside = true,
+      handlerClose,
       customClassForDropdown,
       children,
       dropdownAlign = 'left',
@@ -48,11 +49,8 @@ const withDropdown = WrappedComponent => {
     const getDropdown = targetRef => {
       if (!targetRef || !opened) return null;
       wrappedComponentRef.current = targetRef;
-      const targetDimensions = targetRef.getBoundingClientRect();
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
-        topPosition: targetDimensions.top + window.scrollY + targetDimensions.height,
-        rightPosition: !isFloatMenu ? window.innerWidth - targetDimensions.x - targetDimensions.width - 4 : undefined,
-        leftPosition: targetDimensions.left,
+        targetRef: targetRef,
         align: dropdownAlign,
         customClassForDropdown: customClassForDropdown,
         isFloatMenu: isFloatMenu
@@ -73,6 +71,9 @@ const withDropdown = WrappedComponent => {
         }
       };
     }, []);
+    (0, _react.useEffect)(() => {
+      if (handlerClose) handlerClose(() => setOpened(false));
+    }, [handlerClose]);
     const contextValues = {
       handleDropdownClose: onDropdownClick
     };