@coreui/react-pro 4.13.1 → 5.0.0-alpha.1

package/src/components/calendar/utils.ts

@@ -1,3 +1,31 @@
+export const convertIsoWeekToDate = (isoWeek: string) => {
+  const [year, week] = isoWeek.split(/w/i)
+  // Get date for 4th of January for year
+  const date = new Date(Number(year), 0, 4)
+  // Get previous Monday, add 7 days for each week after first
+  date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7)
+  return date
+}
+
+export const convertToDateObject = (
+  date: Date | string | null,
+  selectionType?: 'day' | 'week' | 'month' | 'year',
+) => {
+  // if (date === null) {
+  //   return null
+  // }
+
+  if (date instanceof Date) {
+    return date
+  }
+
+  if (selectionType === 'week') {
+    return convertIsoWeekToDate(date as string)
+  }
+
+  return new Date(Date.parse(date))
+}
+
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
   d.toLocaleDateString(locale, options)
 
@@ -11,10 +39,50 @@ export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][]
     .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
 
+export const getCalendarDate = (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => {
+  if (order !== 0 && view === 'days') {
+    return new Date(Date.UTC(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1))
+  }
+
+  if (order !== 0 && view === 'months') {
+    return new Date(Date.UTC(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1))
+  }
+
+  if (order !== 0 && view === 'years') {
+    return new Date(Date.UTC(calendarDate.getFullYear() + (12 * order), calendarDate.getMonth(), 1))
+  }
+
+  return calendarDate
+}
+
 export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
+export const getDateBySelectionType = (
+  date: Date | null,
+  selectionType: 'day' | 'week' | 'month' | 'year',
+) => {
+  if (date === null) {
+    return null
+  }
+
+  if (selectionType === 'week') {
+    return `${date.getFullYear()}W${getWeekNumber(date)}`
+  }
+
+  if (selectionType === 'month') {
+    const monthNumber = `0${date.getMonth() + 1}`.slice(-2)
+    return `${date.getFullYear()}-${monthNumber}`
+  }
+
+  if (selectionType === 'year') {
+    return `${date.getFullYear()}`
+  }
+
+  return date
+}
+
 export const getMonthName = (month: number, locale: string) => {
   const d = new Date()
   d.setDate(1)
@@ -77,6 +145,7 @@ const getMonthDays = (year: number, month: number) => {
       month: 'current',
     })
   }
+
   return dates
 }
 
@@ -94,22 +163,40 @@ const getTrailingDays = (
       month: 'next',
     })
   }
+
   return dates
 }
 
+export const getDayNumber = (date: Date) =>
+ Math.ceil((Number(date) - Number(new Date(date.getFullYear(), 0, 0))) / 1000 / 60 / 60 / 24)
+
+export const getWeekNumber = (date: Date) => {
+  const week1 = new Date(date.getFullYear(), 0, 4)
+  return (
+    1 +
+    Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7)
+  )
+}
+
 export const getMonthDetails = (year: number, month: number, firstDayOfWeek: number) => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
   const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
   const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
-
-  const weeks: { date: Date; month: string }[][] = []
+  const weeks: { weekNumber?: number; days: { date: Date; month: string }[] }[] = []
 
   days.forEach((day, index) => {
     if (index % 7 === 0 || weeks.length === 0) {
-      weeks.push([])
+      weeks.push({
+        days: [],
+      })
     }
-    weeks[weeks.length - 1].push(day)
+
+    if ((index + 1) % 7 === 0) {
+      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
+    }
+
+    weeks[weeks.length - 1].days.push(day)
   })
 
   return weeks

package/src/components/carousel/CCarousel.tsx

@@ -226,11 +226,11 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         className={classNames(
           'carousel slide',
           {
-            'carousel-dark': dark,
             'carousel-fade': transition === 'crossfade',
           },
           className,
         )}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
         {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}
@@ -244,20 +244,24 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           }}
         >
           {indicators && (
-            <ol className="carousel-indicators">
+            <div className="carousel-indicators">
               {Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
                 return (
-                  <li
+                  <button
                     key={`indicator${index}`}
                     onClick={() => {
                       !animating && handleIndicatorClick(index)
                     }}
-                    className={active === index ? 'active' : ''}
+                    className={classNames({
+                      active: active === index
+                    })}
                     data-coreui-target=""
+                    {...(active === index && { 'aria-current': true })}
+                    aria-label={`Slide ${index + 1}`}
                   />
                 )
               })}
-            </ol>
+            </div>
           )}
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {

package/src/components/close-button/CCloseButton.tsx

@@ -7,18 +7,24 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Invert the default color.
+   */
+  dark?: boolean
   /**
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
   /**
    * Change the default color to white.
+   * 
+   * @deprecated 5.0.0
    */
   white?: boolean
 }
 
 export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
-  ({ className, disabled, white, ...rest }, ref) => {
+  ({ className, dark, disabled, white, ...rest }, ref) => {
     return (
       <button
         type="button"
@@ -33,6 +39,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
         )}
         aria-label="Close"
         disabled={disabled}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         {...rest}
         ref={ref}
       />
@@ -42,6 +49,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
 
 CCloseButton.propTypes = {
   className: PropTypes.string,
+  dark: PropTypes.bool,
   disabled: PropTypes.bool,
   white: PropTypes.bool,
 }

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -223,7 +223,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       required,
       separator = true,
       selectAdjacementDays,
+      selectionType = 'day',
       showAdjacementDays,
+      showWeekNumber,
       size,
       startDate,
       text,
@@ -245,23 +247,19 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const inputStartRef = useRef<HTMLInputElement>(null)
     const formRef = useRef<HTMLFormElement>()
 
-    const [_calendarDate, setCalendarDate] = useState<Date>(
-      calendarDate ? new Date(calendarDate) : new Date(),
-    )
-    const [_endDate, setEndDate] = useState<Date | null>(endDate ? new Date(endDate) : null)
-    const [_maxDate, setMaxDate] = useState<Date | null>(maxDate ? new Date(maxDate) : null)
-    const [_minDate, setMinDate] = useState<Date | null>(minDate ? new Date(minDate) : null)
-    const [_startDate, setStartDate] = useState<Date | null>(startDate ? new Date(startDate) : null)
+    const [_calendarDate, setCalendarDate] = useState<Date | string | null>(calendarDate ?? null)
+    const [_endDate, setEndDate] = useState<Date | string | null>(endDate ?? null)
+    const [_maxDate, setMaxDate] = useState<Date | string | null>(maxDate ?? null)
+    const [_minDate, setMinDate] = useState<Date | string | null>(minDate ?? null)
+    const [_startDate, setStartDate] = useState<Date | string | null>(startDate ?? null)
     const [_visible, setVisible] = useState(visible)
 
-    const [initialStartDate, setInitialStartDate] = useState<Date | null>(
-      startDate ? new Date(startDate) : null,
-    )
-    const [initialEndDate, setInitialEndDate] = useState<Date | null>(
-      endDate ? new Date(endDate) : null,
+    const [initialStartDate, setInitialStartDate] = useState<Date | string | null>(
+      startDate ?? null,
     )
-    const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | null>(null)
-    const [inputEndHoverValue, setInputEndHoverValue] = useState<Date | null>(null)
+    const [initialEndDate, setInitialEndDate] = useState<Date | string | null>(endDate ?? null)
+    const [inputStartHoverValue, setInputStartHoverValue] = useState<Date | string | null>(null)
+    const [inputEndHoverValue, setInputEndHoverValue] = useState<Date | string | null>(null)
     const [isValid, setIsValid] = useState(valid ?? (invalid === true ? false : undefined))
     const [selectEndDate, setSelectEndDate] = useState(false)
 
@@ -271,24 +269,24 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
 
     useEffect(() => {
       if (startDate) {
-        setStartDate(new Date(startDate))
-        setCalendarDate(new Date(startDate))
+        setStartDate(startDate)
+        setCalendarDate(startDate)
       }
     }, [startDate])
 
     useEffect(() => {
       if (endDate) {
-        setEndDate(new Date(endDate))
-        setCalendarDate(new Date(endDate))
+        setEndDate(endDate)
+        setCalendarDate(endDate)
       }
     }, [endDate])
 
     useEffect(() => {
-      maxDate && setMaxDate(new Date(maxDate))
+      maxDate && setMaxDate(maxDate)
     }, [maxDate])
 
     useEffect(() => {
-      minDate && setMinDate(new Date(minDate))
+      minDate && setMinDate(minDate)
     }, [minDate])
 
     useEffect(() => {
@@ -325,15 +323,21 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }, [formRef, _startDate, _endDate])
 
-    const formatDate = (date: Date) => {
-      return format
-        ? dateFormat(date, format)
-        : timepicker
-        ? date.toLocaleString(locale)
-        : date.toLocaleDateString(locale)
+    const formatDate = (date: Date | string) => {
+      if (selectionType !== 'day') {
+        return date
+      }
+  
+      const _date = new Date(date)
+  
+      return format ?
+        dateFormat(_date, format) :
+        timepicker ?
+          _date.toLocaleString(locale) :
+          _date.toLocaleDateString(locale)
     }
 
-    const setInputValue = (el: HTMLInputElement | null, date: Date | null) => {
+    const setInputValue = (el: HTMLInputElement | null, date: Date | string | null) => {
       if (!el) {
         return
       }
@@ -346,23 +350,17 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       el.value = ''
     }
 
-    const handleDayHover = (date: Date | null) => {
+    const handleDateHover = (date: Date | string | null) => {
       selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date)
     }
 
-    const handleCalendarDateChange = (date: Date, difference?: number) => {
-      difference
-        ? setCalendarDate(new Date(date.getFullYear(), date.getMonth() - difference, 1))
-        : setCalendarDate(date)
-    }
-
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
       setStartDate(null)
       setEndDate(null)
     }
 
-    const handleEndDateChange = (date: Date | null) => {
+    const handleEndDateChange = (date: Date | string | null) => {
       setEndDate(date)
       setInputEndHoverValue(null)
       onEndDateChange && onEndDateChange(date, date ? formatDate(date) : undefined)
@@ -388,7 +386,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       setIsValid(false)
     }
 
-    const handleStartDateChange = (date: Date | null) => {
+    const handleStartDateChange = (date: Date | string | null) => {
       setStartDate(date)
       setInputStartHoverValue(null)
       onStartDateChange && onStartDateChange(date, date ? formatDate(date) : undefined)
@@ -403,16 +401,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }
 
     const InputGroup = () => (
-      <div
-        className={classNames('input-group', 'picker-input-group', {
-          [`input-group-${size}`]: size,
-        })}
-      >
+      <div className="date-picker-input-group">
         <input
           autoComplete="off"
-          className={classNames('form-control date-picker-input', {
+          className={classNames('date-picker-input', {
             hover: inputStartHoverValue,
           })}
+          // delay={true} TODO
           disabled={disabled}
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
@@ -428,18 +423,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
         />
-        {range && separator !== false && (
-          <span className="input-group-text">
-            <span className="picker-input-group-icon date-picker-arrow-icon"></span>
-          </span>
-        )}
+        {range && separator !== false && <div className="date-picker-separator" />}
         {range && (
           <input
             autoComplete="off"
-            className={classNames('form-control date-picker-input', {
+            className={classNames('date-picker-input', {
               hover: inputEndHoverValue,
             })}
-
+            // delay={true} TODO
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
@@ -456,32 +447,18 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             ref={inputEndRef}
           />
         )}
-        {(indicator || cleaner) && (
-          <span className="input-group-text">
-            {indicator && (
-              <span className="picker-input-group-indicator">
-                {typeof indicator === 'boolean' ? (
-                  <span className="picker-input-group-icon date-picker-input-icon" />
-                ) : (
-                  indicator
-                )}
-              </span>
-            )}
-            {cleaner && (_startDate || _endDate) && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {typeof cleaner === 'boolean' ? (
-                  <span className="picker-input-group-icon date-picker-cleaner-icon" />
-                ) : (
-                  cleaner
-                )}
-              </span>
-            )}
-          </span>
-        )}
+        {indicator &&
+          (typeof indicator === 'boolean' ? <div className="date-picker-indicator" /> : indicator)}
+        {cleaner &&
+          (_startDate || _endDate) &&
+          (typeof cleaner === 'boolean' ? (
+            <div className="date-picker-cleaner" onClick={(event) => handleClear(event)} />
+          ) : (
+            React.isValidElement(cleaner) &&
+            React.cloneElement(cleaner as React.ReactElement<any>, {
+              onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
+            })
+          ))}
       </div>
     )
 
@@ -510,9 +487,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className,
           )}
           disabled={disabled}
+          dropdownClassNames="date-picker-dropdown"
           footer={footer || timepicker}
           footerContent={
-            <div className="picker-footer">
+            <div className="date-picker-footer">
               {todayButton && (
                 <CButton
                   className="me-auto"
@@ -608,10 +586,12 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               range={range}
               selectAdjacementDays={selectAdjacementDays}
               selectEndDate={selectEndDate}
+              selectionType={selectionType}
               showAdjacementDays={showAdjacementDays}
+              showWeekNumber={showWeekNumber}
               startDate={_startDate}
-              onDayHover={(date) => handleDayHover(date)}
-              onCalendarDateChange={(date) => handleCalendarDateChange(date)}
+              onDateHover={(date) => handleDateHover(date)}
+              onCalendarDateChange={(date) => setCalendarDate(date)}
               onStartDateChange={(date) => handleStartDateChange(date)}
               onEndDateChange={(date) => handleEndDateChange(date)}
               onSelectEndChange={(value) => setSelectEndDate(value)}
@@ -626,7 +606,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                       disabled={_startDate === null ? true : false}
                       locale={locale}
                       onTimeChange={(_, __, date) => date && handleStartDateChange(date)}
-                      time={_startDate}
+                      time={_startDate && new Date(_startDate)}
                       variant="select"
                     />
                     <CTimePicker
@@ -634,7 +614,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                       disabled={_endDate === null ? true : false}
                       locale={locale}
                       onTimeChange={(_, __, date) => date && handleEndDateChange(date)}
-                      time={_endDate}
+                      time={_endDate && new Date(_endDate)}
                       variant="select"
                     />
                   </>
@@ -658,7 +638,11 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                           ? date && handleStartDateChange(date)
                           : date && handleEndDateChange(date)
                       }
-                      time={index === 0 ? _startDate : _endDate}
+                      time={
+                        index === 0
+                          ? _startDate && new Date(_startDate)
+                          : _endDate && new Date(_endDate)
+                      }
                       variant="select"
                     />
                   ))

package/src/components/dropdown/CDropdownMenu.tsx

@@ -46,7 +46,6 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           className={classNames(
             'dropdown-menu',
             {
-              'dropdown-menu-dark': dark,
               show: visible,
             },
             alignment && alignmentClassNames(alignment),
@@ -56,6 +55,7 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           role="menu"
           aria-hidden={!visible}
           {...(!popper && { 'data-coreui-popper': 'static' })}
+          {...(dark && { 'data-coreui-theme': 'dark' })}
           {...rest}
         >
           {Component === 'ul'

package/src/components/multi-select/CMultiSelect.tsx

@@ -243,7 +243,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       if (
         allowCreateOptions &&
         filteredOptions.some(
-          (option) => option.text && option.text.toLowerCase() === searchValue.toLowerCase(),
+          (option) => option.label && option.label.toLowerCase() === searchValue.toLowerCase(),
         )
       ) {
         return false
@@ -354,7 +354,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           setSelected([
             ...selected,
             filteredOptions.find(
-              (option) => String(option.text).toLowerCase() === searchValue.toLowerCase(),
+              (option) => String(option.label).toLowerCase() === searchValue.toLowerCase(),
             ) as Option,
           ])
         }
@@ -435,7 +435,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         valid={valid}
       >
         <CMultiSelectNativeSelect
-          className='form-multi-select'
           id={id}
           multiple={multiple}
           options={selected}
@@ -452,9 +451,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           className={classNames(
             'form-multi-select',
             {
-              'form-multi-select-with-cleaner': cleaner,
               [`form-multi-select-${size}`]: size,
-              'form-multi-select-selection-tags': multiple && selectionType === 'tags',
               disabled,
               'is-invalid': invalid,
               'is-valid': valid,
@@ -494,7 +491,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                       placeholder: `${selected.length} ${selectionTypeCounterText}`,
                     })}
                   {...(selected.length > 0 &&
-                    !multiple && { placeholder: selected.map((option) => option.text)[0] })}
+                    !multiple && { placeholder: selected.map((option) => option.label)[0] })}
                   {...(multiple &&
                     selected.length > 0 &&
                     selectionType !== 'counter' && { size: searchValue.length + 2 })}
@@ -502,13 +499,24 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 ></input>
               )}
             </CMultiSelectSelection>
-            {!disabled && cleaner && selected.length > 0 && (
+            <div className="form-multi-select-buttons">
+              {!disabled && cleaner && selected.length > 0 && (
+                <button
+                  type="button"
+                  className="form-multi-select-cleaner"
+                  onClick={() => handleDeselectAll()}
+                ></button>
+              )}
               <button
                 type="button"
-                className="form-multi-select-selection-cleaner"
-                onClick={() => handleDeselectAll()}
+                className="form-multi-select-indicator"
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setVisible(!_visible)
+                }}
               ></button>
-            )}
+            </div>
           </div>
           <div className="form-multi-select-dropdown" role="menu" ref={dropdownRef}>
             {multiple && selectAll && (

package/src/components/multi-select/CMultiSelectNativeSelect.tsx

@@ -18,7 +18,7 @@ const createNativeOptions = (options: Option[]) =>
       </optgroup>
     ) : (
       <option value={option.value} key={index} disabled={option.disabled}>
-        {option.text}
+        {option.label}
       </option>
     ),
   )

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -77,7 +77,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
               onKeyDown={(event) => handleKeyDown(event, option as Option)}
               tabIndex={0}
             >
-              {optionsTemplate ? optionsTemplate(option as Option) : option.text}
+              {optionsTemplate ? optionsTemplate(option as Option) : option.label}
             </div>
           ) : (
             <div className="form-multi-select-optgroup-label" key={index}>

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -48,15 +48,13 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
             if (selectionType === 'tags') {
               return (
                 <span className="form-multi-select-tag" key={index}>
-                  {option.text}
+                  {option.label}
                   {!option.disabled && (
                     <button
                       className="form-multi-select-tag-delete"
                       aria-label="Close"
                       onClick={() => onRemove && onRemove(option)}
-                    >
-                      <span aria-hidden="true">×</span>
-                    </button>
+                    />
                   )}
                 </span>
               )
@@ -67,11 +65,11 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
           selectionType === 'text' &&
           selected.map((option, index) => (
             <span key={index}>
-              {option.text}
+              {option.label}
               {index === selected.length - 1 ? '' : ','}&nbsp;
             </span>
           ))}
-        {!multiple && !search && selected.map((option) => option.text)[0]}
+        {!multiple && !search && selected.map((option) => option.label)[0]}
         {children}
       </span>
     )

package/src/components/multi-select/types.ts

@@ -2,7 +2,7 @@ export type Option = {
   custom?: boolean
   disabled?: boolean
   selected?: boolean
-  text: string // TODO: change to label in v5
+  label: string
   value: number | string
   [key: string]: number | string | any
 }
@@ -15,7 +15,7 @@ export type OptionsGroup = {
 
 export type SelectedOption = {
   disabled?: boolean
-  text: string
+  label: string
   value: number | string
   [key: string]: number | string | any
 }