@coreui/react-pro 5.0.0-alpha.0 → 5.0.0-alpha.2

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/card/CCard.tsx

@@ -19,7 +19,7 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Sets the text color context of the component to one of CoreUI’s themed colors.
    *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
    */
   textColor?: string
 }

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/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap

@@ -5,22 +5,26 @@ exports[`loads and displays CCarousel component 1`] = `
   <div
     class="carousel slide"
   >
-    <ol
+    <div
       class="carousel-indicators"
     >
-      <li
+      <button
+        aria-current="true"
+        aria-label="Slide 1"
         class="active"
         data-coreui-target=""
       />
-      <li
+      <button
+        aria-label="Slide 2"
         class=""
         data-coreui-target=""
       />
-      <li
+      <button
+        aria-label="Slide 3"
         class=""
         data-coreui-target=""
       />
-    </ol>
+    </div>
     <div
       class="carousel-inner"
     >

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/CDropdown.tsx

@@ -107,6 +107,28 @@ interface ContextProps extends CDropdownProps {
   portal: boolean
 }
 
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
 const getPlacement = (
   placement: Placements,
   direction: CDropdownProps['direction'],
@@ -207,9 +229,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     useEffect(() => {
       if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+        dropdownToggleRef.current.focus()
         popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
+        dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
+        dropdownMenuRef.current.addEventListener('keydown', handleKeydown)
         onShow && onShow()
       }
 
@@ -217,10 +242,28 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
         popper && destroyPopper()
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyup)
+        dropdownToggleRef.current &&
+          dropdownToggleRef.current.removeEventListener('keydown', handleKeydown)
+        dropdownMenuRef.current &&
+          dropdownMenuRef.current.removeEventListener('keydown', handleKeydown)
         onHide && onHide()
       }
     }, [_visible])
 
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        const target = event.target as HTMLElement
+        event.preventDefault()
+        const items = [].concat(
+          ...Element.prototype.querySelectorAll.call(
+            dropdownMenuRef.current,
+            '.dropdown-item:not(.disabled):not(:disabled)',
+          ),
+        )
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+      }
+    }
+
     const handleKeyup = (event: KeyboardEvent) => {
       if (autoClose === false) {
         return
@@ -263,7 +306,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
                 'dropup dropup-center': direction === 'dropup-center',
                 [`${direction}`]:
                   direction && direction !== 'center' && direction !== 'dropup-center',
-                show: _visible,
               },
               className,
             )}

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/dropdown/CDropdownToggle.tsx

@@ -39,7 +39,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, visible, setVisible } = useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -59,7 +59,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       {
         'dropdown-toggle': caret,
         'dropdown-toggle-split': split,
-        'nav-link': variant === 'nav-item',
+        show: visible,
       },
       className,
     ),
@@ -67,7 +67,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  // We use any because Toggler can be `a` as well as `button`.
   const Toggler = () => {
     if (custom && React.isValidElement(children)) {
       return (
@@ -81,16 +80,8 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       )
     }
 
-    if (variant === 'nav-item') {
-      return (
-        <a href="#" {...togglerProps} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
-
     return (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>