@coreui/react 4.9.0-alpha.0 → 4.9.0-alpha.1

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-alpha.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-alpha.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/tooltip/CTooltip.d.ts

@@ -10,7 +10,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      */
     content: ReactNode | string;
     /**
-     * Offset of the popover relative to its target.
+     * Offset of the tooltip relative to its target.
      */
     offset?: [number, number];
     /**
@@ -32,7 +32,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      */
     placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
     /**
-     * Toggle the visibility of popover component.
+     * Toggle the visibility of tooltip component.
      */
     visible?: boolean;
 }

package/dist/index.es.js

@@ -3021,6 +3021,16 @@ var isInViewport = function (element) {
         Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
 };
 
+var isRTL = function (element) {
+    if (document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
 var CCarouselContext = createContext({});
 var CCarousel = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
@@ -5886,19 +5896,19 @@ var CDropdownMenu = function (_a) {
         _placement = 'bottom';
     }
     if (direction === 'dropup') {
-        _placement = 'top-start';
+        _placement = isRTL(dropdownMenuRef.current) ? 'top-end' : 'top-start';
     }
     if (direction === 'dropup-center') {
         _placement = 'top';
     }
     if (direction === 'dropend') {
-        _placement = 'right-start';
+        _placement = isRTL(dropdownMenuRef.current) ? 'left-start' : 'right-start';
     }
     if (direction === 'dropstart') {
-        _placement = 'left-start';
+        _placement = isRTL(dropdownMenuRef.current) ? 'right-start' : 'left-start';
     }
     if (alignment === 'end') {
-        _placement = 'bottom-end';
+        _placement = isRTL(dropdownMenuRef.current) ? 'bottom-start' : 'bottom-end';
     }
     var dropdownMenuComponent = function (style, ref) { return (React__default.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
         React__default.createElement(Component, __assign({ className: classNames('dropdown-menu', {
@@ -7160,30 +7170,60 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
+var getPlacement$1 = function (placement, element) {
+    console.log(element);
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
 var CPopover = function (_a) {
     var children = _a.children, className = _a.className, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 8] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "className", "content", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
+    var popoverRef = useRef(null);
+    var togglerRef = useRef(null);
+    var popper = useRef();
     var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
-    var popoverRef = useRef();
-    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
-    var _g = useState(null), popperElement = _g[0], setPopperElement = _g[1];
-    var _h = useState(null), arrowElement = _h[0], setArrowElement = _h[1];
-    var _j = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            { name: 'arrow', options: { element: arrowElement } },
-            {
-                name: 'offset',
-                options: {
-                    offset: offset,
-                },
-            },
-        ],
-        placement: placement,
-    }), styles = _j.styles, attributes = _j.attributes;
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
+    useEffect(function () {
+        if (_visible) {
+            initPopper();
+        }
+        return function () {
+            destroyPopper();
+        };
+    }, [_visible]);
+    var initPopper = function () {
+        if (togglerRef.current && popoverRef.current) {
+            popper.current = createPopper(togglerRef.current, popoverRef.current, {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: offset,
+                        },
+                    },
+                ],
+                placement: getPlacement$1(placement, togglerRef.current),
+            });
+        }
+    };
+    var destroyPopper = function () {
+        if (popper.current) {
+            popper.current.destroy();
+        }
+        popper.current = undefined;
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
+        React__default.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
             onFocus: function () { return setVisible(true); },
@@ -7196,10 +7236,12 @@ var CPopover = function (_a) {
             createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('popover', "bs-popover-".concat(placement.replace('left', 'start').replace('right', 'end')), 'fade', {
+                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('popover', "bs-popover-".concat(getPlacement$1(placement, togglerRef.current)
+                    .replace('left', 'start')
+                    .replace('right', 'end')), 'fade', {
                     show: state === 'entered',
-                }, className), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                React__default.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
+                }, className), ref: popoverRef, role: "tooltip" }, rest),
+                React__default.createElement("div", { "data-popper-arrow": true, className: "popover-arrow" }),
                 React__default.createElement("div", { className: "popover-header" }, title),
                 React__default.createElement("div", { className: "popover-body" }, content))); }), document.body)));
 };
@@ -7732,30 +7774,60 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
+var getPlacement = function (placement, element) {
+    console.log(element);
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
 var CTooltip = function (_a) {
-    var children = _a.children, className = _a.className, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 0] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.trigger, trigger = _d === void 0 ? 'hover' : _d, visible = _a.visible, rest = __rest(_a, ["children", "className", "content", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
-    var tooltipRef = useRef();
+    var children = _a.children, className = _a.className, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 6] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.trigger, trigger = _d === void 0 ? 'hover' : _d, visible = _a.visible, rest = __rest(_a, ["children", "className", "content", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
+    var tooltipRef = useRef(null);
+    var togglerRef = useRef(null);
+    var popper = useRef();
     var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
-    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
-    var _g = useState(null), popperElement = _g[0], setPopperElement = _g[1];
-    var _h = useState(null), arrowElement = _h[0], setArrowElement = _h[1];
-    var _j = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            { name: 'arrow', options: { element: arrowElement } },
-            {
-                name: 'offset',
-                options: {
-                    offset: offset,
-                },
-            },
-        ],
-        placement: placement,
-    }), styles = _j.styles, attributes = _j.attributes;
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
+    useEffect(function () {
+        if (_visible) {
+            initPopper();
+        }
+        return function () {
+            destroyPopper();
+        };
+    }, [_visible]);
+    var initPopper = function () {
+        if (togglerRef.current && tooltipRef.current) {
+            popper.current = createPopper(togglerRef.current, tooltipRef.current, {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: offset,
+                        },
+                    },
+                ],
+                placement: getPlacement(placement, togglerRef.current),
+            });
+        }
+    };
+    var destroyPopper = function () {
+        if (popper.current) {
+            popper.current.destroy();
+        }
+        popper.current = undefined;
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
+        React__default.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
             onFocus: function () { return setVisible(true); },
@@ -7765,13 +7837,15 @@ var CTooltip = function (_a) {
             onMouseLeave: function () { return setVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('tooltip', "bs-popover-".concat(placement.replace('left', 'start').replace('right', 'end')), 'fade', {
+                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('tooltip', "bs-tooltip-".concat(getPlacement(placement, togglerRef.current)
+                    .replace('left', 'start')
+                    .replace('right', 'end')), 'fade', {
                     show: state === 'entered',
-                }, className), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                React__default.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
+                }, className), ref: tooltipRef, role: "tooltip" }, rest),
+                React__default.createElement("div", { "data-popper-arrow": true, className: "tooltip-arrow" }),
                 React__default.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
 };
 CTooltip.propTypes = {