@coreui/react 4.0.0-rc.4 → 4.0.1

package/dist/index.js

@@ -2590,7 +2590,6 @@ var CAlert = React.forwardRef(function (_a, ref) {
     }, [visible]);
     var _className = classNames('alert', variant === 'solid' ? "bg-" + color + " text-white" : "alert-" + color, {
         'alert-dismissible fade': dismissible,
-        // show: _visible,
     }, className);
     var getTransitionClass = function (state) {
         return state === 'entered' && 'show';
@@ -5570,13 +5569,16 @@ var CDropdown = React.forwardRef(function (_a, ref) {
         show: _visible,
     }, direction, className);
     React.useEffect(function () {
-        window.addEventListener('click', handleClickOutside);
-        window.addEventListener('keyup', handleKeyup);
+        _visible &&
+            setTimeout(function () {
+                window.addEventListener('click', handleClickOutside);
+                window.addEventListener('keyup', handleKeyup);
+            });
         return function () {
             window.removeEventListener('click', handleClickOutside);
             window.removeEventListener('keyup', handleKeyup);
         };
-    });
+    }, [_visible]);
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -5596,9 +5598,11 @@ var CDropdown = React.forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
+    var dropdownContent = function () {
+        return variant === 'input-group' ? (React__default["default"].createElement(React__default["default"].Fragment, null, children)) : (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children));
+    };
     return popper ? (React__default["default"].createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default["default"].createElement(Manager, null, variant === 'input-group' ? (React__default["default"].createElement(React__default["default"].Fragment, null, children)) : (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children))))) : (React__default["default"].createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children)));
+        React__default["default"].createElement(Manager, null, dropdownContent()))) : (React__default["default"].createElement(CDropdownContext.Provider, { value: contextValues }, dropdownContent()));
 });
 var alignmentDirection = PropTypes.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -5951,7 +5955,14 @@ CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "hitArea", "id", "inline", "invalid", "label", "type", "valid"]);
+    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "type", "valid"]);
+    var inputRef = React.useRef(null);
+    var forkedRef = useForkedRef(ref, inputRef);
+    React.useEffect(function () {
+        if (inputRef.current && indeterminate) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
     var _className = classNames('form-check', {
         'form-check-inline': inline,
         'is-invalid': invalid,
@@ -5968,7 +5979,7 @@ var CFormCheck = React.forwardRef(function (_a, ref) {
             _b), "" + button.shape)
         : 'form-check-label');
     var formControl = function () {
-        return React__default["default"].createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: ref }));
+        return React__default["default"].createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
     };
     var formLabel = function () {
         return (React__default["default"].createElement(CFormLabel, __assign({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
@@ -5986,6 +5997,7 @@ CFormCheck.propTypes = {
     className: PropTypes.string,
     hitArea: PropTypes.oneOf(['full']),
     id: PropTypes.string,
+    indeterminate: PropTypes.bool,
     inline: PropTypes.bool,
     invalid: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -6058,19 +6070,25 @@ CFormRange.displayName = 'CFormRange';
 
 var CFormSelect = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, size = _a.size, valid = _a.valid, rest = __rest(_a, ["children", "className", "htmlSize", "invalid", "size", "valid"]);
+    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, options = _a.options, size = _a.size, valid = _a.valid, rest = __rest(_a, ["children", "className", "htmlSize", "invalid", "options", "size", "valid"]);
     var _className = classNames('form-select', (_b = {},
         _b["form-select-" + size] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
-    return (React__default["default"].createElement("select", __assign({ className: _className, size: htmlSize }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("select", __assign({ className: _className, size: htmlSize }, rest, { ref: ref }), options
+        ? options.map(function (option, index) {
+            return (React__default["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));
+        })
+        : children));
 });
 CFormSelect.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     htmlSize: PropTypes.number,
     invalid: PropTypes.bool,
+    options: PropTypes.array,
     size: PropTypes.oneOf(['sm', 'lg']),
     valid: PropTypes.bool,
 };
@@ -6789,26 +6807,8 @@ CPaginationItem.propTypes = {
 };
 CPaginationItem.displayName = 'CPaginationItem';
 
-var CPopoverContent = React.forwardRef(function (_a, ref) {
-    var content = _a.content, title = _a.title, placementClassNamePostfix = _a.placementClassNamePostfix, arrowProps = _a.arrowProps, style = _a.style, transitionClass = _a.transitionClass;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: classNames("popover bs-popover-" + placementClassNamePostfix, transitionClass), ref: ref, style: style, role: "tooltip" },
-            React__default["default"].createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
-            React__default["default"].createElement("div", { className: "popover-header" }, title),
-            React__default["default"].createElement("div", { className: "popover-body" }, content))));
-});
-CPopoverContent.propTypes = {
-    arrowProps: PropTypes.any,
-    content: PropTypes.node,
-    placementClassNamePostfix: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    title: PropTypes.string,
-    transitionClass: PropTypes.string,
-};
-CPopoverContent.displayName = 'CPopoverContent';
-
 var CPopover = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 8] : _c, onHide = _a.onHide, onShow = _a.onShow, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "placement", "offset", "onHide", "onShow", "trigger", "visible"]);
+    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 8] : _c, onHide = _a.onHide, onShow = _a.onShow, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "offset", "onHide", "onShow", "title", "trigger", "visible"]);
     var _e = React.useState(visible), _visible = _e[0], setVisible = _e[1];
     var getTransitionClass = function (state) {
         return state === 'entering'
@@ -6845,15 +6845,23 @@ var CPopover = function (_a) {
                                 offset: offset,
                             },
                         },
-                    ] }, function (p) { return (React__default["default"].createElement(CPopoverContent, __assign({ transitionClass: transitionClass, placementClassNamePostfix: placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement }, rest, p))); }));
+                    ] }, function (_a) {
+                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
+                    return (React__default["default"].createElement("div", __assign({ className: classNames("popover bs-popover-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                        React__default["default"].createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
+                        React__default["default"].createElement("div", { className: "popover-header" }, title),
+                        React__default["default"].createElement("div", { className: "popover-body" }, content)));
+                }));
             }), document.body)));
 };
 CPopover.propTypes = {
     children: PropTypes.any,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    content: PropTypes.node,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
+    title: PropTypes.string,
     trigger: triggerPropType,
     visible: PropTypes.bool,
 };
@@ -7502,23 +7510,8 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltipContent = React.forwardRef(function (_a, ref) {
-    var content = _a.content, placementClassNamePostfix = _a.placementClassNamePostfix, arrowProps = _a.arrowProps, transitionClass = _a.transitionClass, style = _a.style;
-    return (React__default["default"].createElement("div", { className: classNames("tooltip bs-tooltip-" + placementClassNamePostfix, transitionClass), ref: ref, style: style, role: "tooltip" },
-        React__default["default"].createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
-        React__default["default"].createElement("div", { className: "tooltip-inner" }, content)));
-});
-CTooltipContent.propTypes = {
-    arrowProps: PropTypes.any,
-    content: PropTypes.node,
-    placementClassNamePostfix: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    transitionClass: PropTypes.string,
-};
-CTooltipContent.displayName = 'CTooltipContent';
-
 var CTooltip = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, visible = _a.visible, rest = __rest(_a, ["children", "placement", "onHide", "onShow", "trigger", "visible"]);
+    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "onHide", "onShow", "trigger", "visible"]);
     var _d = React.useState(visible), _visible = _d[0], setVisible = _d[1];
     var getTransitionClass = function (state) {
         return state === 'entering'
@@ -7548,12 +7541,18 @@ var CTooltip = function (_a) {
                     exit: 200,
                 }, unmountOnExit: true }, function (state) {
                 var transitionClass = getTransitionClass(state);
-                return (React__default["default"].createElement(Popper, { placement: placement }, function (p) { return (React__default["default"].createElement(CTooltipContent, __assign({ transitionClass: transitionClass, placementClassNamePostfix: placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement }, rest, p))); }));
+                return (React__default["default"].createElement(Popper, { placement: placement }, function (_a) {
+                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
+                    return (React__default["default"].createElement("div", __assign({ className: classNames("tooltip bs-tooltip-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                        React__default["default"].createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
+                        React__default["default"].createElement("div", { className: "tooltip-inner" }, content)));
+                }));
             }), document.body)));
 };
 CTooltip.propTypes = {
     children: PropTypes.any,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    content: PropTypes.node,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     onHide: PropTypes.func,
     onShow: PropTypes.func,
     trigger: triggerPropType,
@@ -7784,7 +7783,6 @@ exports.COffcanvasTitle = COffcanvasTitle;
 exports.CPagination = CPagination;
 exports.CPaginationItem = CPaginationItem;
 exports.CPopover = CPopover;
-exports.CPopoverContent = CPopoverContent;
 exports.CProgress = CProgress;
 exports.CProgressBar = CProgressBar;
 exports.CRow = CRow;
@@ -7811,7 +7809,6 @@ exports.CToastClose = CToastClose;
 exports.CToastHeader = CToastHeader;
 exports.CToaster = CToaster;
 exports.CTooltip = CTooltip;
-exports.CTooltipContent = CTooltipContent;
 exports.CWidgetStatsA = CWidgetStatsA;
 exports.CWidgetStatsB = CWidgetStatsB;
 exports.CWidgetStatsC = CWidgetStatsC;