@coreui/react-pro 4.12.0-beta.3 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.12.0-beta.3",
+  "version": "4.12.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.1",
+    "jest-environment-jsdom": "^29.6.1",
     "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",
+    "rollup": "^3.26.2",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.6.0-beta.0",
+    "@coreui/coreui-pro": ">=4.5.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

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

@@ -403,13 +403,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }
 
     const InputGroup = () => (
-      <div className="date-picker-input-group">
+      <div
+        className={classNames('input-group', 'picker-input-group', {
+          [`input-group-${size}`]: size,
+        })}
+      >
         <input
           autoComplete="off"
-          className={classNames('date-picker-input', {
+          className={classNames('form-control date-picker-input', {
             hover: inputStartHoverValue,
           })}
-          // delay={true}
           disabled={disabled}
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
@@ -425,14 +428,18 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
         />
-        {range && separator !== false && <div className="date-picker-separator" />}
+        {range && separator !== false && (
+          <span className="input-group-text">
+            <span className="picker-input-group-icon date-picker-arrow-icon"></span>
+          </span>
+        )}
         {range && (
           <input
             autoComplete="off"
-            className={classNames('date-picker-input', {
+            className={classNames('form-control date-picker-input', {
               hover: inputEndHoverValue,
             })}
-            // delay={true}
+
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
@@ -449,18 +456,32 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             ref={inputEndRef}
           />
         )}
-        {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),
-            })
-          ))}
+        {(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>
+        )}
       </div>
     )
 
@@ -489,10 +510,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className,
           )}
           disabled={disabled}
-          dropdownClassNames="date-picker-dropdown"
           footer={footer || timepicker}
           footerContent={
-            <div className="date-picker-footer">
+            <div className="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.1
+   * @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-beta.3
+   * @since 4.12.0
    */
   optionsTemplate?: (option: Option) => ReactNode
   /**
    * Custom template for options groups.
    *
-   * @since 4.12.0-beta.3
+   * @since 4.12.0
    */
   optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   /**
@@ -451,7 +451,9 @@ 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,
@@ -499,24 +501,13 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 ></input>
               )}
             </CMultiSelectSelection>
-            <div className="form-multi-select-buttons">
-              {!disabled && cleaner && selected.length > 0 && (
-                <button
-                  type="button"
-                  className="form-multi-select-cleaner"
-                  onClick={() => handleDeselectAll()}
-                ></button>
-              )}
+            {!disabled && cleaner && selected.length > 0 && (
               <button
                 type="button"
-                className="form-multi-select-indicator"
-                onClick={(event) => {
-                  event.preventDefault()
-                  event.stopPropagation()
-                  setVisible(!_visible)
-                }}
+                className="form-multi-select-selection-cleaner"
+                onClick={() => handleDeselectAll()}
               ></button>
-            </div>
+            )}
           </div>
           <div className="form-multi-select-dropdown" role="menu" ref={dropdownRef}>
             {multiple && selectAll && (

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

@@ -54,7 +54,9 @@ 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(className, {
+            className={classNames('dropdown', 'picker', className, {
               show: _visible,
             })}
             onClick={() => !disabled && setVisible(true)}
@@ -152,7 +152,16 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
               React.cloneElement(toggler as React.ReactElement<any>, {
                 ref: togglerRef,
               })}
-            <div className={dropdownClassNames} ref={dropdownRef}>
+            <div
+              className={classNames(
+                'dropdown-menu',
+                {
+                  show: _visible,
+                },
+                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.1
+   * @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.1
+   * @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.1
+   * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

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

@@ -272,11 +272,14 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }
 
     const InputGroup = () => (
-      <div className="time-picker-input-group">
+      <div
+        className={classNames('input-group', 'picker-input-group', {
+          [`input-group-${size}`]: size,
+        })}
+      >
         <input
           autoComplete="off"
-          className="time-picker-input"
-          // delay={true}
+          className="form-control"
           disabled={disabled}
           onChange={(event) =>
             isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
@@ -286,18 +289,32 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           required={required}
           ref={inputRef}
         />
-        {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),
-            })
-          ))}
+        {(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>
+        )}
       </div>
     )
 
@@ -434,7 +451,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           dropdownClassNames="time-picker-dropdown"
           footer={footer}
           footerContent={
-            <div className="time-picker-footer">
+            <div className="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.1
+   * @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.1
+   * @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.1
+   * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
   /**

package/src/hooks/index.ts

@@ -1,6 +1,5 @@
-import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useColorModes, useForkedRef, usePopper, useStateWithCallback }
+export { 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) {

package/dist/components/date-range-picker/CDateRangePicker copy.d.ts

@@ -1,114 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CCalendarProps } from '../calendar/CCalendar';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import { CPickerProps } from '../picker/CPicker';
-import { Colors } from '../../types';
-export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'floatingLabel'>, Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>, Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
-    /**
-     * The number of calendars that render on desktop devices.
-     */
-    calendars?: number;
-    /**
-     * A string of all className you want applied to the component.
-     */
-    className?: string;
-    /**
-     * If true the dropdown will be immediately closed after submitting the full date.
-     *
-     * @since 4.8.0
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Toggle visibility or set the content of the cleaner button.
-     */
-    cleaner?: boolean;
-    /**
-     * Set date format.
-     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
-     */
-    format?: string;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - \{id\}-start-date
-     * - \{id\}-end-date
-     */
-    id?: string;
-    /**
-     * Toggle visibility or set the content of the input indicator.
-     */
-    indicator?: ReactNode | boolean;
-    /**
-     * Toggle the readonly state for the component.
-     */
-    inputReadOnly?: boolean;
-    /**
-     * Specifies short hints that are visible in start date and end date inputs.
-     */
-    placeholder?: string | string[];
-    /**
-     * @ignore
-     */
-    range?: boolean;
-    /**
-     * Predefined date ranges the user can select from.
-     */
-    ranges?: object;
-    /**
-     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     */
-    rangesButtonsColor?: Colors;
-    /**
-     * Size the ranges button small or large.
-     */
-    rangesButtonsSize?: 'sm' | 'lg';
-    /**
-     * Set the ranges button variant to an outlined button or a ghost button.
-     */
-    rangesButtonsVariant?: 'outline' | 'ghost';
-    /**
-     * When present, it specifies that date must be filled out before submitting the form.
-     *
-     * @since 4.10.0
-     */
-    required?: boolean;
-    /**
-     * Default icon or character character that separates two dates.
-     */
-    separator?: ReactNode | boolean;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Provide an additional time selection by adding select boxes to choose times.
-     */
-    timepicker?: boolean;
-    /**
-     * Toggle visibility or set the content of today button.
-     *
-     * @default 'Today'
-     */
-    todayButton?: boolean | ReactNode;
-    /**
-     * Sets the color context of the today button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     * @default 'primary'
-     */
-    todayButtonColor?: Colors;
-    /**
-     * Size the today button small or large.
-     *
-     * @default 'sm'
-     */
-    todayButtonSize?: 'sm' | 'lg';
-    /**
-     * Set the today button variant to an outlined button or a ghost button.
-     */
-    todayButtonVariant?: 'outline' | 'ghost';
-}
-export declare const CDateRangePicker: React.ForwardRefExoticComponent<CDateRangePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/multi-select-new/CMultiSelect.d.ts

@@ -1,133 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import type { Option } from './types';
-export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /**
-     * Allow users to create options if they are not in the list of options.
-     *
-     * @since 4.11.0-next.0
-     */
-    allowCreateOptions?: boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Enables selection cleaner element.
-     */
-    cleaner?: boolean;
-    /**
-     * Clear current search on selecting an item.
-     *
-     * @since 4.11.0-next.0
-     */
-    clearSearchOnSelect?: boolean;
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled?: boolean;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name and id attributes for the native select element are generated based on the `id` property:
-     * - <select id="\{id\}-multi-select" name="\{id\}-multi-select" />
-     */
-    id?: string;
-    /**
-     * When set, the options list will have a loading style: loading spinner and reduced opacity.
-     *
-     * @since 4.11.0-next.0
-     */
-    loading?: boolean;
-    /**
-     * It specifies that multiple options can be selected at once.
-     */
-    multiple?: boolean;
-    /**
-     * Execute a function when a user changes the selected option.
-     */
-    onChange?: (selected: Option[]) => void;
-    /**
-     * Execute a function when the filter value changed.
-     *
-     * @since 4.8.0
-     */
-    onFilterChange?: (value: string) => void;
-    /**
-     * List of option elements.
-     */
-    options: Option[];
-    /**
-     * Sets maxHeight of options list.
-     */
-    optionsMaxHeight?: number | string;
-    /**
-     * Sets option style.
-     */
-    optionsStyle?: 'checkbox' | 'text';
-    /**
-     * TODO:
-     *
-     * @since TODO: 4._.0
-     */
-    optionsTemplate?: (option: Option) => ReactNode;
-    /**
-     * TODO:
-     *
-     * @since TODO: 4._.0
-     */
-    optionsGroupsTemplate?: (option: Option) => ReactNode;
-    /**
-     * Specifies a short hint that is visible in the search input.
-     */
-    placeholder?: string;
-    /**
-     * @since XXXX
-     */
-    required?: boolean;
-    /**
-     * Enables search input element.
-     */
-    search?: boolean | 'external';
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel?: string | ReactNode;
-    /**
-     * Enables select all button.
-     */
-    selectAll?: boolean;
-    /**
-     * Sets the select all button label.
-     */
-    selectAllLabel?: string | ReactNode;
-    /**
-     * Sets the selection style.
-     */
-    selectionType?: 'counter' | 'tags' | 'text';
-    /**
-     * Sets the counter selection label.
-     */
-    selectionTypeCounterText?: string;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Enable virtual scroller for the options list.
-     *
-     * @since 4.8.0
-     */
-    virtualScroller?: boolean;
-    /**
-     * Toggle the visibility of multi select dropdown.
-     */
-    visible?: boolean;
-    /**
-     * Amount of visible items when virtualScroller is set to `true`.
-     *
-     * @since 4.8.0
-     */
-    visibleItems?: number;
-}
-export declare const CMultiSelectNew: React.ForwardRefExoticComponent<CMultiSelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/multi-select-new/CMultiSelectNativeSelect.d.ts

@@ -1,7 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import type { Option } from './types';
-export interface CMultiSelectNativeSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'options'> {
-    options?: Option[];
-    value?: string | number | string[];
-}
-export declare const CMultiSelectNativeSelect: React.ForwardRefExoticComponent<CMultiSelectNativeSelectProps & React.RefAttributes<HTMLSelectElement>>;