@coreui/react-pro 5.0.0-alpha.0 → 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,50 +247,46 @@ 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 [isValid, setIsValid] = useState(valid || (invalid && false))
+    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)
 
     useEffect(() => {
-      setIsValid(valid || (invalid && false))
+      setIsValid(valid ?? (invalid === true ? false : undefined))
     }, [valid, invalid])
 
     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)
@@ -409,7 +407,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           className={classNames('date-picker-input', {
             hover: inputStartHoverValue,
           })}
-          // delay={true}
+          // delay={true} TODO
           disabled={disabled}
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
@@ -432,7 +430,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className={classNames('date-picker-input', {
               hover: inputEndHoverValue,
             })}
-            // delay={true}
+            // delay={true} TODO
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
@@ -588,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)}
@@ -606,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
@@ -614,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"
                     />
                   </>
@@ -638,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/modal/CModal.tsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
@@ -35,6 +35,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * @ignore
    */
   duration?: number
+  /**
+   * Puts the focus on the modal when shown.
+   *
+   * @since v4.10.0
+   */
+  focus?: boolean
   /**
    * Set modal to covers the entire user viewport.
    */
@@ -96,6 +102,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       backdrop = true,
       className,
       duration = 150,
+      focus = true,
       fullscreen,
       keyboard = true,
       onClose,
@@ -111,6 +118,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     },
     ref,
   ) => {
+    const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
     const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
@@ -128,11 +136,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }, [visible])
 
     useEffect(() => {
-      document.addEventListener('click', handleClickOutside)
-      document.addEventListener('keydown', handleKeyDown)
+      if (_visible) {
+        activeElementRef.current = document.activeElement as HTMLElement | null
+        document.addEventListener('mouseup', handleClickOutside)
+        document.addEventListener('keydown', handleKeyDown)
+      } else {
+        activeElementRef.current?.focus()
+      }
 
       return () => {
-        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('mouseup', handleClickOutside)
         document.removeEventListener('keydown', handleKeyDown)
       }
     }, [_visible])
@@ -143,6 +156,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
 
       setVisible(false)
+
       return onClose && onClose()
     }
 
@@ -163,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
         setTimeout(
           () => {
-            modalRef.current?.focus()
+            focus && modalRef.current?.focus()
           },
           transition ? duration : 0,
         )
@@ -225,10 +239,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     className,
                   )}
                   tabIndex={-1}
-                  role="dialog"
+                  {...(_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' })}
                   style={{
                     ...(state !== 'exited' && { display: 'block' }),
                   }}
+                  {...rest}
                   ref={forkedRef}
                 >
                   <CModalDialog
@@ -237,9 +254,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     scrollable={scrollable}
                     size={size}
                   >
-                    <CModalContent {...rest} ref={modalContentRef}>
-                      {children}
-                    </CModalContent>
+                    <CModalContent ref={modalContentRef}>{children}</CModalContent>
                   </CModalDialog>
                 </div>
               </CModalContext.Provider>
@@ -262,6 +277,7 @@ CModal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   duration: PropTypes.number,
+  focus: PropTypes.bool,
   fullscreen: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),

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,
           ])
         }
@@ -491,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 })}

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,7 +48,7 @@ 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"
@@ -65,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
 }

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

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types'
 
-export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
-  const value = text.toLowerCase().replace(/\s/g, '-')
+export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
+  const value = label.toLowerCase().replace(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 
@@ -13,7 +13,7 @@ export const createOption = (text: string, options: (Option | OptionsGroup)[]) =
   return [
     {
       value: uniqueValue,
-      text,
+      label,
       custom: true,
     },
   ]
@@ -28,10 +28,10 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
         option.options &&
         option.options.filter(
           (option: Option) =>
-            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+            option.lable && option.label.toLowerCase().includes(search.toLowerCase()),
         )
       if (
-        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (option.lable && option.label.toLowerCase().includes(search.toLowerCase())) ||
         (options && options.length > 0)
       ) {
         optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))