widenarrow-ui 1.1.102 → 1.1.105

package/lib/components/DropDown/DropDown.types.d.ts

@@ -20,6 +20,7 @@ export interface DropDownProps {
     rotateLeftIconByDegree?: number;
     rotateMiddleIconByDegree?: number;
     rotateRightIconByDegree?: number;
+    withPortal?: boolean;
     placement?: Placement;
     strategy?: PositioningStrategy;
     offset?: {

package/lib/components/DropDown/useHandleClickOutside.d.ts

@@ -2,5 +2,5 @@ import { RefObject } from 'react';
 type UseHandleClickOutsideReturn = {
     ref: RefObject<HTMLDivElement>;
 };
-export default function useHandleClickOutside(callback: (...args: unknown[]) => void): UseHandleClickOutsideReturn;
+export default function useHandleClickOutside(callback: (...args: unknown[]) => void, portalRef?: RefObject<HTMLDivElement>): UseHandleClickOutsideReturn;
 export {};

package/lib/index.d.ts

@@ -539,6 +539,7 @@ interface DropDownProps {
     rotateLeftIconByDegree?: number;
     rotateMiddleIconByDegree?: number;
     rotateRightIconByDegree?: number;
+    withPortal?: boolean;
     placement?: Placement;
     strategy?: PositioningStrategy;
     offset?: {

package/lib/index.esm.js

@@ -710,7 +710,7 @@ var AppColors;
 var styles$s = {"body":"ToolTip-module_EfvT16","container":"ToolTip-module_rxb-Ce","withEllipsis":"ToolTip-module_vea-tI"};
 
 var s$s = classNames.bind(styles$s);
-var htmlRootNode = document.getElementById('root');
+var htmlRootNode$1 = document.getElementById('root');
 /**
  * @desc This components extends the react-tooltip library.
  * Full api documentation here: https://github.com/wwayne/react-tooltip
@@ -731,8 +731,8 @@ var ToolTip = function (_a) {
     var toolTipMarkup = (jsxs(Tooltip, { className: s$s('container', (_b = {},
             _b[toolTipClassName] = toolTipClassName,
             _b)), id: uniq, place: is(String, placement) ? placement : 'top', variant: is(String, variant) ? variant : 'dark', offset: offset || 8, delayShow: delayShow || 150, closeOnScroll: true, children: [text ? jsx("span", { children: text }) : null, component || null] }));
-    if (displayInPortal || !!htmlRootNode) {
-        return (jsxs(Fragment, { children: [jsx("div", { "data-tooltip-id": uniq, className: s$s((_c = {}, _c[className] = className, _c.withEllipsis = withEllipsis, _c)), children: children }), createPortal(toolTipMarkup, htmlRootNode)] }));
+    if (displayInPortal || !!htmlRootNode$1) {
+        return (jsxs(Fragment, { children: [jsx("div", { "data-tooltip-id": uniq, className: s$s((_c = {}, _c[className] = className, _c.withEllipsis = withEllipsis, _c)), children: children }), createPortal(toolTipMarkup, htmlRootNode$1)] }));
     }
     return (jsxs(Fragment, { children: [jsx("div", { "data-tooltip-id": uniq, className: s$s((_d = {}, _d[className] = className, _d.withEllipsis = withEllipsis, _d)), children: children }), toolTipMarkup] }));
 };
@@ -2674,33 +2674,46 @@ var RadioButton = function (_a) {
     return toolTip ? (jsx(ToolTip, { className: s$k('toolTip'), text: toolTip, children: getRadioButton() })) : (getRadioButton());
 };
 
-function useHandleClickOutside(callback) {
+function useHandleClickOutside(callback, portalRef) {
     var ref = useRef(null);
     useEffect(function () {
         var handleClickOutside = function (event) {
-            if (ref.current && !ref.current.contains(event.target)) {
-                callback();
+            var target = event.target;
+            var isOutsideContainer = ref.current && !ref.current.contains(target);
+            var isOutsidePortal = (portalRef === null || portalRef === void 0 ? void 0 : portalRef.current) && !portalRef.current.contains(target);
+            // If we have a portal ref, check if click is outside both container and portal
+            // If no portal ref, just check if click is outside container
+            if (portalRef === null || portalRef === void 0 ? void 0 : portalRef.current) {
+                if (isOutsideContainer && isOutsidePortal) {
+                    callback();
+                }
+            }
+            else {
+                if (isOutsideContainer) {
+                    callback();
+                }
             }
         };
         document.addEventListener('click', handleClickOutside, true);
         return function () {
             document.removeEventListener('click', handleClickOutside, true);
         };
-    }, [callback]);
+    }, [callback, portalRef]);
     return { ref: ref };
 }
 
 var styles$j = {"body":"DropDown-module_s-41xK","container":"DropDown-module_ms9Bnm","dropDownContainer":"DropDown-module_1bVmMF","arrow":"DropDown-module_b3hGdC","arrow_topIsDark":"DropDown-module_R8bNg1","opacityIn":"DropDown-module_nxu56-","headingContainer":"DropDown-module_d9ELNG","heading":"DropDown-module_h3xW01","childrenContainer":"DropDown-module_SegKtJ","childrenContainer_left":"DropDown-module_6BCK8k","slideInRight":"DropDown-module_si25YW","childrenContainer_top":"DropDown-module_FyuZ2X","slideInBottom":"DropDown-module_kkRcRV","childrenContainer_right":"DropDown-module_I06m6q","slideInLeft":"DropDown-module_0LyhMh","childrenContainer_bottom":"DropDown-module_8k0-k4","slideInTop":"DropDown-module_Q28lTs","list":"DropDown-module_OPwMsl","list_noHeader":"DropDown-module_RMfcZD","list_noFooter":"DropDown-module_EuuqD-","list_noHeaderOrFooter":"DropDown-module_3teSz6","list_withVisibleOverflow":"DropDown-module_Rvc2NZ","children":"DropDown-module_O5fSBy","children_noHeader":"DropDown-module_LQizIT","children_noFooter":"DropDown-module_HtsACa","children_noHeaderOrFooter":"DropDown-module_ho5wUS","spinner":"DropDown-module_hsbQPA","spinner_noHeader":"DropDown-module_T6lMJg","spinner_noFooter":"DropDown-module_-Tojji","footer":"DropDown-module_C-TdDM"};
 
 var s$j = classNames.bind(styles$j);
+var htmlRootNode = document.getElementById('root');
 var DropDown = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var title = _a.title, _g = _a.offset, offset = _g === void 0 ? { horizontal: 8, vertical: 12 } : _g, arrowPadding = _a.arrowPadding, _h = _a.placement, placement = _h === void 0 ? 'auto' : _h, _j = _a.strategy, strategy = _j === void 0 ? 'absolute' : _j, className = _a.className, buttonComponent = _a.buttonComponent, triggerComponent = _a.triggerComponent, _k = _a.buttonCallbackName, buttonCallbackName = _k === void 0 ? 'onClickCallback' : _k, footerComponent = _a.footerComponent, onCloseCallback = _a.onCloseCallback, onOpenCallback = _a.onOpenCallback, children = _a.children, dropDownClassName = _a.dropDownClassName, childrenClassName = _a.childrenClassName, loading = _a.loading, _l = _a.withArrow, withArrow = _l === void 0 ? true : _l, _m = _a.childrenIsList, childrenIsList = _m === void 0 ? true : _m, isOpen = _a.isOpen, _o = _a.closeOnEscape, closeOnEscape = _o === void 0 ? true : _o, rotateIconByDegree = _a.rotateIconByDegree, rotateLeftIconByDegree = _a.rotateLeftIconByDegree, rotateMiddleIconByDegree = _a.rotateMiddleIconByDegree, rotateRightIconByDegree = _a.rotateRightIconByDegree, withVisibleOverflow = _a.withVisibleOverflow;
-    var _p = useState(false), _isOpen = _p[0], _setIsOpen = _p[1];
-    var _q = useState(null), referenceElement = _q[0], setReferenceElement = _q[1];
-    var _r = useState(null), popperElement = _r[0], setPopperElement = _r[1];
-    var _s = useState(null), arrowElement = _s[0], setArrowElement = _s[1];
-    var _t = useState(false), hasBeenOpened = _t[0], setHasBeenOpened = _t[1];
+    var _b, _c, _d;
+    var title = _a.title, _e = _a.offset, offset = _e === void 0 ? { horizontal: 8, vertical: 12 } : _e, arrowPadding = _a.arrowPadding, _f = _a.placement, placement = _f === void 0 ? 'auto' : _f, _g = _a.strategy, strategy = _g === void 0 ? 'absolute' : _g, className = _a.className, buttonComponent = _a.buttonComponent, triggerComponent = _a.triggerComponent, _h = _a.buttonCallbackName, buttonCallbackName = _h === void 0 ? 'onClickCallback' : _h, footerComponent = _a.footerComponent, onCloseCallback = _a.onCloseCallback, onOpenCallback = _a.onOpenCallback, children = _a.children, dropDownClassName = _a.dropDownClassName, childrenClassName = _a.childrenClassName, loading = _a.loading, _j = _a.withArrow, withArrow = _j === void 0 ? true : _j, _k = _a.childrenIsList, childrenIsList = _k === void 0 ? true : _k, isOpen = _a.isOpen, _l = _a.closeOnEscape, closeOnEscape = _l === void 0 ? true : _l, rotateIconByDegree = _a.rotateIconByDegree, rotateLeftIconByDegree = _a.rotateLeftIconByDegree, rotateMiddleIconByDegree = _a.rotateMiddleIconByDegree, rotateRightIconByDegree = _a.rotateRightIconByDegree, withVisibleOverflow = _a.withVisibleOverflow, withPortal = _a.withPortal;
+    var _m = useState(false), _isOpen = _m[0], _setIsOpen = _m[1];
+    var _o = useState(null), referenceElement = _o[0], setReferenceElement = _o[1];
+    var _p = useState(null), popperElement = _p[0], setPopperElement = _p[1];
+    var _q = useState(null), arrowElement = _q[0], setArrowElement = _q[1];
+    var _r = useState(false), hasBeenOpened = _r[0], setHasBeenOpened = _r[1];
     var isOpenState = is(Boolean, isOpen) ? isOpen : _isOpen;
     var horizontal = offset.horizontal, vertical = offset.vertical;
     var escFunction = function (event) {
@@ -2726,14 +2739,14 @@ var DropDown = function (_a) {
     }, 
     // eslint-disable-next-line
     [closeOnEscape, hasBeenOpened]);
-    var _u = usePopper(referenceElement, popperElement, {
+    var _s = usePopper(referenceElement, popperElement, {
         placement: placement,
         strategy: strategy,
         modifiers: [
             { name: 'arrow', enabled: withArrow, options: { element: arrowElement, padding: arrowPadding || 16 } },
             { name: 'offset', enabled: true, options: { offset: [horizontal, vertical] } }
         ]
-    }), styles = _u.styles, attributes = _u.attributes;
+    }), styles = _s.styles, attributes = _s.attributes;
     var onClose = function () {
         if (isOpenState) {
             is(Function, onCloseCallback) && onCloseCallback();
@@ -2756,7 +2769,7 @@ var DropDown = function (_a) {
         onClose();
     };
     // Close the DropDown if we click outside the DropDown
-    var containerRef = useHandleClickOutside(onClose).ref;
+    var containerRef = useHandleClickOutside(onClose, withPortal ? { current: popperElement } : undefined).ref;
     // If a child has an onClickCallback, we want to close the DropDown when it is clicked.
     var cloneChildWithCloseCallback = function (child) {
         if (isValidElement(child) &&
@@ -2838,23 +2851,27 @@ var DropDown = function (_a) {
         _b[rotateMiddleIconByDegree ? 'rotateMiddleIconByDegree' : ''] = _isOpen ? rotateMiddleIconByDegree : 0,
         _b[rotateRightIconByDegree ? 'rotateRightIconByDegree' : ''] = _isOpen ? rotateRightIconByDegree : 0,
         _b);
+    var dropDownMarkup = function () {
+        var _a, _b;
+        return isOpenState ? (jsxs("div", __assign({ className: s$j('dropDownContainer', (_a = {},
+                _a[dropDownClassName] = dropDownClassName,
+                _a)), ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [withArrow && (jsx("div", { ref: setArrowElement, className: s$j('arrow', {
+                        arrow_topIsDark: title
+                    }), style: styles.arrow })), jsxs("div", { className: s$j('childrenContainer', (_b = {},
+                        _b["childrenContainer_".concat(getAnimationOrigin(attributes))] = getAnimationOrigin(attributes),
+                        _b)), children: [title && (jsx("header", { className: s$j('headingContainer'), children: jsx(Heading, { className: s$j('heading'), type: 'h6', marginBottom: '0', color: ColorTypes.WHITE, textAlign: 'left', children: title }) })), jsxs("div", { className: s$j('children', {
+                                children_noFooter: !footerComponent && title,
+                                children_noHeader: !title && footerComponent,
+                                children_noHeaderOrFooter: !title && !footerComponent
+                            }), children: [loading ? jsx(SolidSpinner, { type: HierarchyTypes.PRIMARY, absoluteCenter: true }) : null, getChildrenListMarkup()] }), footerComponent ? jsx("div", { className: s$j('footer'), children: footerComponent }) : null] })] }))) : null;
+    };
     return (jsxs("div", { ref: containerRef, className: s$j('container', (_c = {},
             _c[className] = className,
             _c)), children: [triggerComponent ? (jsx(Box, { displayFlex: true, alignItems: 'center', ref: setReferenceElement, children: isValidElement(triggerComponent)
                     ? cloneElement(triggerComponent, __assign({}, pickAttributes(buttonAttributes)))
                     : null })) : null, buttonComponent ? (jsx(Box, { displayFlex: true, alignItems: 'center', ref: setReferenceElement, children: isValidElement(buttonComponent)
                     ? cloneElement(buttonComponent, __assign((_d = {}, _d[buttonCallbackName] = function (e) { return onClickButton(e); }, _d), pickAttributes(buttonAttributes)))
-                    : null })) : null, isOpenState ? (jsxs("div", __assign({ className: s$j('dropDownContainer', (_e = {},
-                    _e[dropDownClassName] = dropDownClassName,
-                    _e)), ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [withArrow && (jsx("div", { ref: setArrowElement, className: s$j('arrow', {
-                            arrow_topIsDark: title
-                        }), style: styles.arrow })), jsxs("div", { className: s$j('childrenContainer', (_f = {},
-                            _f["childrenContainer_".concat(getAnimationOrigin(attributes))] = getAnimationOrigin(attributes),
-                            _f)), children: [title && (jsx("header", { className: s$j('headingContainer'), children: jsx(Heading, { className: s$j('heading'), type: 'h6', marginBottom: '0', color: ColorTypes.WHITE, textAlign: 'left', children: title }) })), jsxs("div", { className: s$j('children', {
-                                    children_noFooter: !footerComponent && title,
-                                    children_noHeader: !title && footerComponent,
-                                    children_noHeaderOrFooter: !title && !footerComponent
-                                }), children: [loading ? jsx(SolidSpinner, { type: HierarchyTypes.PRIMARY, absoluteCenter: true }) : null, getChildrenListMarkup()] }), footerComponent ? jsx("div", { className: s$j('footer'), children: footerComponent }) : null] })] }))) : null] }));
+                    : null })) : null, withPortal ? createPortal(dropDownMarkup(), htmlRootNode) : dropDownMarkup()] }));
 };
 
 var styles$i = {"body":"DropDownItem-module_UqDzTt","container":"DropDownItem-module_SLjW0W","container_disabled":"DropDownItem-module_n4Ei9p","innerContainer":"DropDownItem-module_yTPeWz","button":"DropDownItem-module_mxcLFJ","button_clickable":"DropDownItem-module_OZsG-E","text":"DropDownItem-module_jUNg9b","button_small":"DropDownItem-module_t-DbXt","button_medium":"DropDownItem-module_RC2tFi","button_large":"DropDownItem-module_cRR335","icon_placeholder":"DropDownItem-module_rnlTmr","icon_small":"DropDownItem-module_IP7eDy","icon_medium":"DropDownItem-module_zAzvAS","icon_large":"DropDownItem-module_evC7qy","icon_left":"DropDownItem-module_qT-IaM","icon_right":"DropDownItem-module_F1274l","text_active":"DropDownItem-module_WKiUMc","text_disabled":"DropDownItem-module_GMkCiF","text_activeDisabled":"DropDownItem-module_vwOfg5"};