@coreui/react-pro 4.12.0-rc.0 → 5.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.12.0-rc.0",
+  "version": "5.0.0-alpha.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -40,31 +40,31 @@
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.6.0",
+    "jest-environment-jsdom": "^29.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.25.1",
-    "ts-jest": "^29.1.0",
-    "tslib": "^2.5.3",
-    "typescript": "^4.9.5"
+    "rollup": "^3.26.1",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.5.0",
+    "@coreui/coreui-pro": ">=5.0.0-alpha.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

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

@@ -403,10 +403,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }
 
     const InputGroup = () => (
-      <div className="input-group picker-input-group">
+      <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}
@@ -425,15 +425,11 @@ 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}
@@ -453,32 +449,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>
     )
 
@@ -507,9 +489,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"

package/src/components/dropdown/CDropdown.tsx

@@ -66,7 +66,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   /**
    * Callback fired when the component requests to be hidden.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   onHide?: () => void
   /**

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

@@ -102,13 +102,13 @@ export interface CMultiSelectProps
   /**
    * Custom template for options.
    *
-   * @since 4.12.0-rc.0
+   * @since 4.12.0
    */
   optionsTemplate?: (option: Option) => ReactNode
   /**
    * Custom template for options groups.
    *
-   * @since 4.12.0-rc.0
+   * @since 4.12.0
    */
   optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   /**
@@ -451,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,
@@ -501,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/CMultiSelectSelection.tsx

@@ -54,9 +54,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                       className="form-multi-select-tag-delete"
                       aria-label="Close"
                       onClick={() => onRemove && onRemove(option)}
-                    >
-                      <span aria-hidden="true">×</span>
-                    </button>
+                    />
                   )}
                 </span>
               )

package/src/components/picker/CPicker.tsx

@@ -141,7 +141,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       default: {
         return (
           <div
-            className={classNames('dropdown', 'picker', className, {
+            className={classNames(className, {
               show: _visible,
             })}
             onClick={() => !disabled && setVisible(true)}
@@ -152,16 +152,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
               React.cloneElement(toggler as React.ReactElement<any>, {
                 ref: togglerRef,
               })}
-            <div
-              className={classNames(
-                'dropdown-menu',
-                {
-                  show: _visible,
-                },
-                dropdownClassNames,
-              )}
-              ref={dropdownRef}
-            >
+            <div className={dropdownClassNames} ref={dropdownRef}>
               {children}
               {footer && footerContent}
             </div>

package/src/components/popover/CPopover.tsx

@@ -13,7 +13,7 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * Apply a CSS fade transition to the popover.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   animation?: boolean
   /**
@@ -31,13 +31,13 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
   /**
    * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

package/src/components/time-picker/CTimePicker.tsx

@@ -272,10 +272,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }
 
     const InputGroup = () => (
-      <div className="input-group picker-input-group">
+      <div className="time-picker-input-group">
         <input
           autoComplete="off"
-          className="form-control"
+          className="time-picker-input"
           // delay={true}
           disabled={disabled}
           onChange={(event) =>
@@ -286,32 +286,18 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           required={required}
           ref={inputRef}
         />
-        {(indicator || cleaner) && (
-          <span className="input-group-text">
-            {indicator && (
-              <span className="picker-input-group-indicator">
-                {typeof indicator === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-input-icon" />
-                ) : (
-                  indicator
-                )}
-              </span>
-            )}
-            {cleaner && date && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {typeof cleaner === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-cleaner-icon" />
-                ) : (
-                  cleaner
-                )}
-              </span>
-            )}
-          </span>
-        )}
+        {indicator &&
+          (typeof indicator === 'boolean' ? <div className="time-picker-indicator" /> : indicator)}
+        {cleaner &&
+          date &&
+          (typeof cleaner === 'boolean' ? (
+            <div className="time-picker-cleaner" onClick={(event) => handleClear(event)} />
+          ) : (
+            React.isValidElement(cleaner) &&
+            React.cloneElement(cleaner as React.ReactElement<any>, {
+              onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
+            })
+          ))}
       </div>
     )
 
@@ -448,7 +434,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           dropdownClassNames="time-picker-dropdown"
           footer={footer}
           footerContent={
-            <div className="picker-footer">
+            <div className="time-picker-footer">
               {cancelButton && (
                 <CButton
                   color={cancelButtonColor}

package/src/components/tooltip/CTooltip.tsx

@@ -13,7 +13,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * Apply a CSS fade transition to the tooltip.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   animation?: boolean
   /**
@@ -27,13 +27,13 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
   /**
    * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
    *
-   * @since 4.9.0-beta.2
+   * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
+import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useForkedRef, usePopper, useStateWithCallback }
+export { useColorModes, useForkedRef, usePopper, useStateWithCallback }

package/src/utils/getRTLPlacement.ts

@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core'
-import { isRTL } from '../utils'
+import isRTL from './isRTL'
 
 const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
   switch (placement) {