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

package/dist/index.es.js

@@ -2472,6 +2472,46 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
+var getStoredTheme = function (localStorageItemName) { return localStorage.getItem(localStorageItemName); };
+var setStoredTheme = function (localStorageItemName, colorMode) {
+    return localStorage.setItem(localStorageItemName, colorMode);
+};
+var getPreferredColorScheme = function (localStorageItemName) {
+    var storedTheme = getStoredTheme(localStorageItemName);
+    if (storedTheme) {
+        return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+var setTheme = function (colorMode) {
+    document.documentElement.dataset.coreuiTheme =
+        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : colorMode;
+    var event = new Event('ColorSchemeChange');
+    document.documentElement.dispatchEvent(event);
+};
+var useColorModes = function (localStorageItemName) {
+    if (localStorageItemName === void 0) { localStorageItemName = 'coreui-react-color-scheme'; }
+    var _a = useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
+    useEffect(function () {
+        setStoredTheme(localStorageItemName, colorMode);
+        setTheme(colorMode);
+    }, [colorMode]);
+    useEffect(function () {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+            var storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                setTheme(colorMode);
+            }
+        });
+    }, []);
+    return {
+        getColorMode: function () { return colorMode; },
+        setColorMode: function (mode) { return setColorMode(mode); },
+    };
+};
+
 // code borrowed from https://github.com/reach/reach-ui
 // problem described https://github.com/facebook/react/issues/13029
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2505,7 +2545,7 @@ value) {
         try {
             ref.current = value;
         }
-        catch (error) {
+        catch (_a) {
             throw new Error("Cannot assign value \"".concat(value, "\" to ref \"").concat(ref, "\""));
         }
     }
@@ -2677,7 +2717,10 @@ var textColorsPropType = PropTypes.oneOfType([
     PropTypes.oneOf(['white', 'muted']),
     PropTypes.string,
 ]);
-var triggerPropType = PropTypes.oneOf(['hover', 'focus', 'click']);
+var triggerPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'click']).isRequired),
+    PropTypes.oneOf(['hover', 'focus', 'click']),
+]);
 
 var CAlert = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]);
@@ -3021,6 +3064,16 @@ var isInViewport = function (element) {
         Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
 };
 
+var isRTL = function (element) {
+    if (typeof document !== 'undefined' && 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"]);
@@ -3797,17 +3850,7 @@ function effect$1(_ref2) {
     }
   }
 
-  if (process.env.NODE_ENV !== "production") {
-    if (!isHTMLElement(arrowElement)) {
-      console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
-    }
-  }
-
   if (!contains(state.elements.popper, arrowElement)) {
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
-    }
-
     return;
   }
 
@@ -3949,17 +3992,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
-  if (process.env.NODE_ENV !== "production") {
-    var transitionProperty = getComputedStyle$1(state.elements.popper).transitionProperty || '';
-
-    if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
-      return transitionProperty.indexOf(property) >= 0;
-    })) {
-      console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
-    }
-  }
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -4400,10 +4432,6 @@ function computeAutoPlacement(state, options) {
 
   if (allowedPlacements.length === 0) {
     allowedPlacements = placements$1;
-
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
-    }
   } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -4955,108 +4983,6 @@ function debounce(fn) {
   };
 }
 
-function format(str) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-
-  return [].concat(args).reduce(function (p, c) {
-    return p.replace(/%s/, c);
-  }, str);
-}
-
-var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
-var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
-var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
-function validateModifiers(modifiers) {
-  modifiers.forEach(function (modifier) {
-    [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
-    .filter(function (value, index, self) {
-      return self.indexOf(value) === index;
-    }).forEach(function (key) {
-      switch (key) {
-        case 'name':
-          if (typeof modifier.name !== 'string') {
-            console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
-          }
-
-          break;
-
-        case 'enabled':
-          if (typeof modifier.enabled !== 'boolean') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
-          }
-
-          break;
-
-        case 'phase':
-          if (modifierPhases.indexOf(modifier.phase) < 0) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
-          }
-
-          break;
-
-        case 'fn':
-          if (typeof modifier.fn !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'effect':
-          if (modifier.effect != null && typeof modifier.effect !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'requires':
-          if (modifier.requires != null && !Array.isArray(modifier.requires)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
-          }
-
-          break;
-
-        case 'requiresIfExists':
-          if (!Array.isArray(modifier.requiresIfExists)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
-          }
-
-          break;
-
-        case 'options':
-        case 'data':
-          break;
-
-        default:
-          console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
-            return "\"" + s + "\"";
-          }).join(', ') + "; but \"" + key + "\" was provided.");
-      }
-
-      modifier.requires && modifier.requires.forEach(function (requirement) {
-        if (modifiers.find(function (mod) {
-          return mod.name === requirement;
-        }) == null) {
-          console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
-        }
-      });
-    });
-  });
-}
-
-function uniqueBy(arr, fn) {
-  var identifiers = new Set();
-  return arr.filter(function (item) {
-    var identifier = fn(item);
-
-    if (!identifiers.has(identifier)) {
-      identifiers.add(identifier);
-      return true;
-    }
-  });
-}
-
 function mergeByName(modifiers) {
   var merged = modifiers.reduce(function (merged, current) {
     var existing = merged[current.name];
@@ -5072,8 +4998,6 @@ function mergeByName(modifiers) {
   });
 }
 
-var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
-var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
 var DEFAULT_OPTIONS = {
   placement: 'bottom',
   modifiers: [],
@@ -5135,42 +5059,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-        // if one of the modifiers is invalid for any reason
-
-        if (process.env.NODE_ENV !== "production") {
-          var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
-            var name = _ref.name;
-            return name;
-          });
-          validateModifiers(modifiers);
-
-          if (getBasePlacement(state.options.placement) === auto) {
-            var flipModifier = state.orderedModifiers.find(function (_ref2) {
-              var name = _ref2.name;
-              return name === 'flip';
-            });
-
-            if (!flipModifier) {
-              console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
-            }
-          }
-
-          var _getComputedStyle = getComputedStyle$1(popper),
-              marginTop = _getComputedStyle.marginTop,
-              marginRight = _getComputedStyle.marginRight,
-              marginBottom = _getComputedStyle.marginBottom,
-              marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
-          // cause bugs with positioning, so we'll warn the consumer
-
-
-          if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
-            return parseFloat(margin);
-          })) {
-            console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
-          }
-        }
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -5190,10 +5079,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.error(INVALID_ELEMENT_ERROR);
-          }
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -5216,18 +5101,8 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers.forEach(function (modifier) {
           return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
         });
-        var __debug_loops__ = 0;
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (process.env.NODE_ENV !== "production") {
-            __debug_loops__ += 1;
-
-            if (__debug_loops__ > 100) {
-              console.error(INFINITE_LOOP_ERROR);
-              break;
-            }
-          }
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -5265,10 +5140,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error(INVALID_ELEMENT_ERROR);
-      }
-
       return instance;
     }
 
@@ -5283,11 +5154,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -5886,19 +5757,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', {
@@ -6169,7 +6040,8 @@ var CFormSelect = forwardRef(function (_a, ref) {
                 _b), className), size: htmlSize }, rest, { ref: ref }), options
             ? options.map(function (option, index) {
                 return (React__default.createElement("option", __assign({}, (typeof option === 'object' &&
-                    option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
+                    option.disabled && { disabled: option.disabled }), (typeof option === 'object' &&
+                    option.value !== undefined && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
             })
             : children)));
 });
@@ -6597,6 +6469,7 @@ var CModal = forwardRef(function (_a, ref) {
         if (backdrop === 'static') {
             return setStaticBackdrop(true);
         }
+        setVisible(false);
         return onClose && onClose();
     };
     useLayoutEffect(function () {
@@ -7143,6 +7016,7 @@ CProgressBar.propTypes = {
 };
 CProgressBar.displayName = 'CProgressBar';
 
+// TODO: update markup and add '.progress-stacked' in v5
 var CProgress = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, height = _a.height, thin = _a.thin, _b = _a.value, value = _b === void 0 ? 0 : _b, white = _a.white, rest = __rest(_a, ["children", "className", "height", "thin", "value", "white"]);
     return (React__default.createElement("div", { className: classNames('progress', {
@@ -7160,30 +7034,59 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
+var getPlacement$1 = function (placement, 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 +7099,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)));
 };
@@ -7244,7 +7149,7 @@ var CSidebar = forwardRef(function (_a, ref) {
         var _a, _b;
         sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
         sidebarRef.current && setInViewport(isInViewport(sidebarRef.current));
-        window.addEventListener('resize', function () { return handleResize(); });
+        window.addEventListener('resize', handleResize);
         window.addEventListener('mouseup', handleClickOutside);
         window.addEventListener('keyup', handleKeyup);
         (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleOnClick);
@@ -7253,7 +7158,7 @@ var CSidebar = forwardRef(function (_a, ref) {
         });
         return function () {
             var _a, _b;
-            window.removeEventListener('resize', function () { return handleResize(); });
+            window.removeEventListener('resize', handleResize);
             window.removeEventListener('mouseup', handleClickOutside);
             window.removeEventListener('keyup', handleKeyup);
             (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleOnClick);
@@ -7362,8 +7267,12 @@ CSidebarHeader.propTypes = {
 CSidebarHeader.displayName = 'CSidebarHeader';
 
 var CSpinner = forwardRef(function (_a, ref) {
-    var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    return (React__default.createElement(Component, __assign({ className: classNames("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className), role: "status" }, rest, { ref: ref }),
+    var _b;
+    var className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'div' : _c, size = _a.size, _d = _a.variant, variant = _d === void 0 ? 'border' : _d, _e = _a.visuallyHiddenLabel, visuallyHiddenLabel = _e === void 0 ? 'Loading...' : _e, rest = __rest(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
+    return (React__default.createElement(Component, __assign({ className: classNames("spinner-".concat(variant), (_b = {},
+            _b["spinner-".concat(variant, "-").concat(size)] = size,
+            _b["text-".concat(color)] = color,
+            _b), className), role: "status" }, rest, { ref: ref }),
         React__default.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
@@ -7534,7 +7443,8 @@ var CTable = forwardRef(function (_a, ref) {
                 React__default.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), getColumnLabel(column))); })))),
             items && (React__default.createElement(CTableBody, null, items.map(function (item, index) { return (React__default.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), columnNames &&
                 columnNames.map(function (colName, index) {
-                    return item[colName] ? (React__default.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+                    // eslint-disable-next-line unicorn/no-negated-condition
+                    return item[colName] !== undefined ? (React__default.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
                 }))); }))),
             children,
             footer && (React__default.createElement(CTableFoot, __assign({}, tableFootProps),
@@ -7732,30 +7642,59 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
+var getPlacement = function (placement, 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 +7704,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 = {
@@ -7912,5 +7853,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useColorModes, useForkedRef };
 //# sourceMappingURL=index.es.js.map