@coreui/react-pro 4.9.0-next.0 → 4.9.0-next.1

package/dist/props.d.ts

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import type { Placements, Triggers } from './types';
+export declare const colorPropType: PropTypes.Requireable<string>;
+export declare const gradientsPropType: PropTypes.Requireable<string>;
+export declare const placementPropType: PropTypes.Requireable<Placements>;
+export declare const shapePropType: PropTypes.Requireable<string>;
+export declare const textColorsPropType: PropTypes.Requireable<string>;
+export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
+export type Gradients = 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient';
+export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
+export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
+export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
+export type Triggers = 'hover' | 'focus' | 'click';

package/dist/utils/index.d.ts

@@ -1,5 +1,3 @@
-import getNextSibling from './getNextSibling';
-import getPreviousSibling from './getPreviousSibling';
 import isInViewport from './isInViewport';
 import isObjectInArray from './isObjectInArray';
-export { getNextSibling, getPreviousSibling, isInViewport, isObjectInArray };
+export { isInViewport, isObjectInArray };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.9.0-next.0",
+  "version": "4.9.0-next.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/accordion/CAccordionBody.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { CAccordionItemContext } from './CAccordionItem'
 
 import { CCollapse } from './../collapse/CCollapse'
+
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/accordion/CAccordionCollapse.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+
 import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
 
 export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(

package/src/components/alert/CAlert.tsx

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
 import { useForkedRef } from '../../hooks'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/avatar/CAvatar.tsx

@@ -2,14 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import {
-  Colors,
-  Shapes,
-  TextColors,
-  colorPropType,
-  shapePropType,
-  textColorsPropType,
-} from '../Types'
+import { colorPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Shapes, TextColors } from '../../types'
 
 export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/backdrop/CBackdrop.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes, useRef } from 'react'
-import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
 import { useForkedRef } from '../../hooks'
 

package/src/components/badge/CBadge.tsx

@@ -2,16 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import {
-  Colors,
-  Gradients,
-  Shapes,
-  TextColors,
-  colorPropType,
-  gradientsPropType,
-  shapePropType,
-  textColorsPropType,
-} from '../Types'
+import { colorPropType, gradientsPropType, shapePropType, textColorsPropType } from '../../props'
+import type { Colors, Gradients, Shapes, TextColors } from '../../types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /**

package/src/components/button/CButton.tsx

@@ -2,9 +2,11 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Shapes, colorPropType } from '../Types'
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors, Shapes } from '../../types'
+
 export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   /**
    * Toggle the active state for the component.

package/src/components/calendar/utils.ts

@@ -15,52 +15,6 @@ export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-    .replace('2013', '(?<year>[0-9]{2,4})')
-    .replace('12', '(?<month>[0-9]{1,2})')
-    .replace('31', '(?<day>[0-9]{1,2})')
-
-  if (time) {
-    regex = regex
-      .replace('5', '(?<hour>[0-9]{1,2})')
-      .replace('17', '(?<hour>[0-9]{1,2})')
-      .replace('19', '(?<minute>[0-9]{1,2})')
-      .replace('22', '(?<second>[0-9]{1,2})')
-      .replace('PM', '(?<ampm>[A-Z]{2})')
-  }
-
-  const rgx = RegExp(`${regex}`)
-  const partials = string.match(rgx)
-
-  if (partials === null) return
-
-  const newDate =
-    partials.groups &&
-    (time
-      ? new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-          partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
-              ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
-            : Number(partials.groups['hour']),
-          Number(partials.groups['minute']),
-          Number(partials.groups['second']),
-        )
-      : new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-        ))
-
-  return newDate
-}
-
 export const getMonthName = (month: number, locale: string) => {
   const d = new Date()
   d.setDate(1)

package/src/components/callout/CCallout.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/card/CCard.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Gradients, colorPropType, gradientsPropType } from '../Types'
+import { colorPropType, gradientsPropType } from '../../props'
+import type { Colors, Gradients } from '../../types'
 
 export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**

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

@@ -12,9 +12,9 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
-import { getLocalDateFromString } from '../calendar/utils'
+import { getLocalDateFromString } from './utils'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
     Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,

package/src/components/date-range-picker/utils.ts

@@ -0,0 +1,49 @@
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  if (!isNaN(Date.parse(string))) {
+    return new Date(Date.parse(string))
+  }
+
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+    .replace('2013', '(?<year>[0-9]{2,4})')
+    .replace('12', '(?<month>[0-9]{1,2})')
+    .replace('31', '(?<day>[0-9]{1,2})')
+
+  if (time) {
+    regex = regex
+      .replace('5', '(?<hour>[0-9]{1,2})')
+      .replace('17', '(?<hour>[0-9]{1,2})')
+      .replace('19', '(?<minute>[0-9]{1,2})')
+      .replace('22', '(?<second>[0-9]{1,2})')
+      .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = RegExp(`${regex}`)
+  const partials = string.match(rgx)
+
+  if (partials === null) return
+
+  const newDate =
+    partials.groups &&
+    (time
+      ? new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+          partials.groups['ampm']
+            ? partials.groups['ampm'] === 'PM'
+              ? Number(partials.groups['hour']) + 12
+              : Number(partials.groups['hour'])
+            : Number(partials.groups['hour']),
+          Number(partials.groups['minute']),
+          Number(partials.groups['second']),
+        )
+      : new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+        ))
+
+  return newDate
+}

package/src/components/dropdown/CDropdown.tsx

@@ -12,8 +12,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
-import { Placements, placementPropType } from '../Types'
 import { useForkedRef } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
 
 export type Directions = 'start' | 'end'
 

package/src/components/dropdown/CDropdownItem.tsx

@@ -2,8 +2,7 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CLinkProps } from '../link/CLink'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
 
 export interface CDropdownItemProps extends CLinkProps {
   /**

package/src/components/dropdown/CDropdownMenu.tsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
-import { Placements } from '../Types'
 import { Alignments, CDropdownContext } from './CDropdown'
 
+import type { Placements } from '../../types'
+
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
     Omit<

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { useForkedRef } from '../../hooks'
-
-import { Triggers, triggerPropType } from '../Types'
-
 import { CButton, CButtonProps } from '../button/CButton'
+
 import { CDropdownContext } from './CDropdown'
 
+import { useForkedRef } from '../../hooks'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
+
 export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * Enables pseudo element caret on toggler.

package/src/components/form/CFormCheck.tsx

@@ -2,12 +2,12 @@ import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef }
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
-import { Colors, Shapes } from '../Types'
-
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
 import { CFormLabel } from './CFormLabel'
 
+import { useForkedRef } from '../../hooks'
+import type { Colors, Shapes } from '../../types'
+
 export type ButtonObject = {
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.

package/src/components/form/CFormControlValidation.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormFeedback } from './CFormFeedback'

package/src/components/form/CFormControlWrapper.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'

package/src/components/form/CFormInput.tsx

@@ -1,10 +1,14 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, useState } from 'react'
-
-import classNames from 'classnames'
+import React, {
+  ChangeEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-import { useEffect } from 'react'
 
 export interface CFormInputProps
   extends CFormControlWrapperProps,

package/src/components/form/CFormRange.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormLabel } from './CFormLabel'
 export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {

package/src/components/form/CFormSelect.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 

package/src/components/form/CFormTextarea.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 

package/src/components/list-group/CListGroupItem.tsx

@@ -1,12 +1,14 @@
-import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
-  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement> {
+  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**
    * Toggle the active state for the component.
    */
@@ -29,13 +31,12 @@ export interface CListGroupItemProps
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
-  href?: string
 }
 
 export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement,
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
   CListGroupItemProps
->(({ children, active, className, disabled, href, color, component = 'li', ...rest }, ref) => {
+>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
   const _className = classNames(
     'list-group-item',
     {
@@ -52,9 +53,8 @@ export const CListGroupItem = forwardRef<
   rest = {
     ...((component === 'a' || component === 'button') && {
       active,
-      component,
       disabled,
-      href: href,
+      component,
       ref: ref,
     }),
     ...(active && { 'aria-current': true }),

package/src/components/list-group/CListGroupItem.tsx~HEAD

@@ -2,9 +2,11 @@ import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
   extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**

package/src/components/modal/CModal.tsx

@@ -13,12 +13,12 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../hooks'
-
 import { CBackdrop } from '../backdrop/CBackdrop'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
 
+import { useForkedRef } from '../../hooks'
+
 export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Align the modal in the center or top of the screen.

package/src/components/modal/CModalHeader.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CModalContext } from './CModal'
-import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
+import { CCloseButton } from '../close-button/CCloseButton'
+import { CModalContext } from './CModal'
+
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

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

@@ -16,11 +16,13 @@ import PropTypes from 'prop-types'
 import { CFormControlWrapper, CFormControlWrapperProps } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker/CPicker'
 
-import { CMultiSelectCleaner } from './CMultiSelectCleaner'
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
+import { filterOptionsList, flattenArray, selectOptions } from './utils'
+import type { Option, SelectedOption } from './types'
+
 export interface CMultiSelectProps
   extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -113,29 +115,6 @@ export interface CMultiSelectProps
   visibleItems?: number
 }
 
-export interface Option {
-  disabled?: boolean
-  label?: string
-  options?: Option[]
-  selected?: boolean
-  // TODO: change to label
-  text?: string
-  value?: number | string
-}
-
-export interface SelectedOption {
-  disabled?: boolean
-  text: string
-  value: number | string
-}
-
-const flattenArray = (options: Option[]): Option[] =>
-  options.reduce(
-    (acc: Option[], val: Option) =>
-      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
-    [],
-  )
-
 export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
   (
     {
@@ -181,30 +160,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const [_visible, setVisible] = useState(visible)
     const [selected, setSelected] = useState<SelectedOption[]>([])
 
-    const selectOptions = (options: Option[], deselected?: Option[]) => {
-      let _selected = [...selected, ...options]
-
-      if (deselected) {
-        _selected = _selected.filter(
-          (selectedOption) =>
-            !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
-        )
-      }
-
-      const deduplicated = _selected.reduce((unique: Option[], option) => {
-        if (!unique.some((obj) => obj.value === option.value)) {
-          unique.push({
-            value: option.value,
-            text: option.text,
-            ...(option.disabled && { disabled: option.disabled }),
-          })
-        }
-        return unique
-      }, []) as SelectedOption[]
-
-      setSelected(deduplicated)
-    }
-
     useMemo(() => {
       setOptions(options)
       const _selected =
@@ -227,7 +182,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           return
         })
 
-      _selected && selectOptions(_selected, deselected)
+      _selected && setSelected(selectOptions(_selected, selected, deselected))
     }, [JSON.stringify(options)])
 
     useEffect(() => {
@@ -254,29 +209,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       isInitialMount.current = false
     }, [])
 
-    const filterOptionsList = (search: string, options: Option[]) => {
-      return search.length
-        ? options &&
-            options.reduce((acc: Option[], val: Option) => {
-              const options =
-                val.options &&
-                val.options.filter(
-                  (element) =>
-                    element.text && element.text.toLowerCase().includes(search.toLowerCase()),
-                )
-
-              if (
-                (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-                (options && options.length)
-              ) {
-                acc.push(Object.assign({}, val, options && options.length && { options }))
-              }
-
-              return acc
-            }, [])
-        : _options
-    }
-
     const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
       const target = event.target as HTMLInputElement
       if (search !== 'external') {
@@ -315,7 +247,12 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }
 
     const handleSelectAll = () => {
-      selectOptions(flattenArray(options).filter((option: Option) => !option.disabled))
+      setSelected(
+        selectOptions(
+          flattenArray(options).filter((option: Option) => !option.disabled),
+          selected,
+        ),
+      )
     }
 
     const handleDeselectAll = () => {
@@ -366,7 +303,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 selectionTypeCounterText={selectionTypeCounterText}
               />
               {multiple && cleaner && selected.length > 0 && (
-                <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
+                <button
+                  type="button"
+                  className="form-multi-select-selection-cleaner"
+                  onClick={() => handleDeselectAll()}
+                ></button>
               )}
               {search && (
                 <input

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import { Option } from './CMultiSelect'
+import type { Option } from './types'
 
 export interface CMultiSelectNativeSelectProps
   extends Omit<HTMLAttributes<HTMLSelectElement>, 'options'> {