@coreui/react-pro 4.9.0 → 4.10.0

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.9.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.10.0.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/date-range-picker/CDateRangePicker.d.ts

@@ -69,6 +69,12 @@ export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'f
      * Set the ranges button variant to an outlined button or a ghost button.
      */
     rangesButtonsVariant?: 'outline' | 'ghost';
+    /**
+     * When present, it specifies that date must be filled out before submitting the form.
+     *
+     * @since 4.10.0
+     */
+    required?: boolean;
     /**
      * Default icon or character character that separates two dates.
      */

package/dist/components/time-picker/CTimePicker.d.ts

@@ -36,6 +36,12 @@ export interface CTimePickerProps extends Omit<CFormControlWrapperProps, 'floati
      * Specifies a short hint that is visible in the input.
      */
     placeholder?: string;
+    /**
+     * When present, it specifies that time must be filled out before submitting the form.
+     *
+     * @since 4.10.0
+     */
+    required?: boolean;
     /**
      * Show seconds.
      *

package/dist/index.es.js

@@ -9916,6 +9916,10 @@ function Reference(_ref) {
   });
 }
 
+var PopperManagerWrapper = function (_a) {
+    var children = _a.children, popper = _a.popper;
+    return popper ? React__default$1.createElement(Manager, null, children) : React__default$1.createElement(React__default$1.Fragment, null, children);
+};
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
     var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
@@ -9947,16 +9951,13 @@ var CDropdown = forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var DropdownContent = function () {
-        return variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
+    return (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues },
+        React__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
                 'dropdown-center': direction === 'center',
                 'dropup dropup-center': direction === 'dropup-center',
                 direction: direction && direction !== 'center' && direction !== 'dropup-center',
                 show: _visible,
-            }, className) }, rest, { ref: forkedRef }), children));
-    };
-    return (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues }, popper ? (React__default$1.createElement(Manager, null,
-        React__default$1.createElement(DropdownContent, null))) : (React__default$1.createElement(DropdownContent, null))));
+            }, className) }, rest, { ref: forkedRef }), children)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -10264,7 +10265,7 @@ var isValidTime = function (time) {
 
 var CTimePicker = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
+    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, required = _a.required, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
     var inputRef = useRef(null);
     var _m = useState(convertTimeToDate(time)), date = _m[0], setDate = _m[1];
     var _o = useState(null), initialDate = _o[0], setInitialDate = _o[1];
@@ -10323,7 +10324,7 @@ var CTimePicker = forwardRef(function (_a, ref) {
     var InputGroup = function () { return (React__default$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React__default$1.createElement(CFormInput, { autoComplete: "off", delay: true, disabled: disabled, onChange: function (event) {
                 return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
-            }, placeholder: placeholder, readOnly: inputReadOnly, ref: inputRef }),
+            }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
         (indicator || cleaner) && (React__default$1.createElement(CInputGroupText, null,
             indicator && (React__default$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
             cleaner && date && (React__default$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
@@ -10395,7 +10396,7 @@ var CTimePicker = forwardRef(function (_a, ref) {
                     _b['time-picker-roll'] = variant === 'roll',
                     _b)) }, variant === 'select' ? React__default$1.createElement(TimePickerSelect, null) : TimePickerRoll()))));
 });
-CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
+CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, required: propTypesExports.bool, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
 
 var getLocalDateFromString = function (string, locale, time) {
@@ -10433,7 +10434,7 @@ var getLocalDateFromString = function (string, locale, time) {
 
 var _a, _b, _c, _d, _e, _f;
 var CDateRangePicker = forwardRef(function (_a, ref) {
-    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, _l = _a.separator, separator = _l === void 0 ? true : _l, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "separator", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
+    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, required = _a.required, _l = _a.separator, separator = _l === void 0 ? true : _l, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
     var _q = useState(visible), _visible = _q[0], setVisible = _q[1];
     var inputStartRef = useRef(null);
     var inputEndRef = useRef(null);
@@ -10534,7 +10535,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
     var InputGroup = function () { return (React__default$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React__default$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputStartHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10544,7 +10545,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         range && separator !== false && (React__default$1.createElement(CInputGroupText, null, typeof separator === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" })) : (separator))),
         range && (React__default$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputEndHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10597,7 +10598,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                     }, time: index === 0 ? _startDate : _endDate, variant: "select" })); }))))))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
-CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
+CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, required: propTypesExports.bool, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
 
 var CDatePicker = forwardRef(function (_a, ref) {
     var date = _a.date, id = _a.id, onDateChange = _a.onDateChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, rest = __rest$1(_a, ["date", "id", "onDateChange", "placeholder"]);