@coreui/react-pro 5.8.0 → 5.9.0

package/src/components/picker/CPicker.tsx

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Placement } from '@popperjs/core'
 
+import { CConditionalPortal } from '../conditional-portal'
+
 import { useForkedRef, usePopper } from '../../hooks'
 import { isRTL } from '../../utils'
 
@@ -36,6 +38,12 @@ export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
    * Callback fired when the component requests to be shown.
    */
   onShow?: () => void
+  /**
+   * Generates dropdown menu using createPortal.
+   *
+   * @since 5.9.0
+   */
+  portal?: boolean
   /**
    * The content of toggler.
    */
@@ -58,6 +66,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       footerContent,
       onHide,
       onShow,
+      portal = true,
       toggler,
       visible,
     },
@@ -127,6 +136,10 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
         return
       }
 
+      if (dropdownRef.current && dropdownRef.current.contains(event.target as HTMLElement)) {
+        return
+      }
+
       setVisible(false)
     }
 
@@ -152,10 +165,17 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
               React.cloneElement(toggler as React.ReactElement<any>, {
                 ref: togglerRef,
               })}
-            <div className={dropdownClassNames} ref={dropdownRef}>
-              {children}
-              {footer && footerContent}
-            </div>
+            <CConditionalPortal portal={portal}>
+              <div
+                className={classNames(dropdownClassNames, {
+                  show: portal && _visible,
+                })}
+                ref={dropdownRef}
+              >
+                {children}
+                {footer && footerContent}
+              </div>
+            </CConditionalPortal>
           </div>
         )
       }
@@ -175,6 +195,7 @@ CPicker.propTypes = {
   footerContent: PropTypes.node,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  portal: PropTypes.bool,
   toggler: PropTypes.node,
   visible: PropTypes.bool,
 }

package/src/components/range-slider/CRangeSlider.tsx

@@ -0,0 +1,377 @@
+import React, {
+  ChangeEvent,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../hooks'
+import { isRTL } from '../../utils'
+
+import { ThumbSize, type Label } from './types'
+import {
+  calculateClickValue,
+  calculateLabelPosition,
+  calculateMoveValue,
+  calculateTooltipPosition,
+  getLabelValue,
+  getNearestValueIndex,
+  getThumbSize,
+  updateGradient,
+  updateValue,
+  validateValue,
+} from './utils'
+
+export interface CRangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Customize the styling of your React Range Slider by adding a custom `className`.
+   * This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets.
+   */
+  className?: string
+  /**
+   * Enable or disable clickable labels in the React Range Slider.
+   * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
+   */
+  clickableLabels?: boolean
+  /**
+   * Control the interactive state of the React Range Slider with the `disabled` prop.
+   * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
+   */
+  disabled?: boolean
+  /**
+   * Define the minimum distance between slider handles using the `distance` prop in the React Range Slider.
+   * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
+   */
+  distance?: number
+  /**
+   * Add descriptive labels to your React Range Slider by providing an array of `labels`.
+   * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
+   */
+  labels?: Label[]
+  /**
+   * Specify the maximum value for the React Range Slider with the `max` prop.
+   * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
+   */
+  max?: number
+  /**
+   * Set the minimum value for the React Range Slider using the `min` prop.
+   * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
+   */
+  min?: number
+  /**
+   * Assign a `name` to the React Range Slider for form integration.
+   * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
+   */
+  name?: string | string[]
+  /**
+   * Control the granularity of the React Range Slider by setting the `step` prop.
+   * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
+   */
+  step?: number
+  /**
+   * Handle value changes in the React Range Slider by utilizing the `onChange` callback.
+   * This function is triggered whenever the slider's value updates, enabling you to manage state and respond to user interactions effectively.
+   */
+  onChange?: (value: number[]) => void
+  /**
+   * Toggle the visibility of tooltips in the React Range Slider with the `tooltips` prop.
+   * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
+   */
+  tooltips?: boolean
+  /**
+   * Customize the display format of tooltips in the React Range Slider using the `tooltipsFormat` function.
+   * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
+   */
+  tooltipsFormat?: (value: number) => ReactNode
+  /**
+   * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
+   */
+  track?: 'fill' | boolean
+  /**
+   * Set the current value(s) of the React Range Slider using the `value` prop.
+   * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
+   */
+  value?: number | number[]
+  /**
+   * Orient the React Range Slider vertically by setting the `vertical` prop to `true`.
+   * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
+   */
+  vertical?: boolean
+}
+
+export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
+  (
+    {
+      className,
+      clickableLabels = true,
+      disabled = false,
+      distance = 0,
+      labels,
+      min = 0,
+      max = 100,
+      name,
+      step = 1,
+      value = [],
+      onChange,
+      tooltips = true,
+      tooltipsFormat,
+      track = 'fill',
+      vertical = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rangeSliderRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, rangeSliderRef)
+    const inputsRef = useRef<HTMLInputElement[]>([])
+    const labelsContainerRef = useRef<HTMLDivElement>(null)
+    const labelsRef = useRef<HTMLDivElement[]>([])
+    const trackRef = useRef<HTMLDivElement>(null)
+
+    const [currentValue, setCurrentValue] = useState<number[]>(
+      Array.isArray(value) ? value : [value],
+    )
+    const [isDragging, setIsDragging] = useState(false)
+    const [dragIndex, setDragIndex] = useState(0)
+    const [thumbSize, setThumbSize] = useState<ThumbSize | null>()
+
+    useEffect(() => {
+      setCurrentValue(Array.isArray(value) ? value : [value])
+    }, [value])
+
+    useEffect(() => {
+      if (rangeSliderRef.current) {
+        setThumbSize(getThumbSize(rangeSliderRef.current, vertical))
+      }
+    }, [rangeSliderRef])
+
+    useEffect(() => {
+      const maxSize = Math.max(
+        ...labelsRef.current.map((label) => (vertical ? label.offsetWidth : label.offsetHeight)),
+      )
+
+      if (labelsContainerRef.current) {
+        labelsContainerRef.current.style[vertical ? 'width' : 'height'] = `${maxSize}px`
+      }
+    }, [labelsRef])
+
+    useEffect(() => {
+      if (isDragging) {
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+      }
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
+    }, [currentValue])
+
+    const updateNearestValue = (value: number) => {
+      const nearestIndex = getNearestValueIndex(value, currentValue)
+      const newCurrentValue = [...currentValue]
+      newCurrentValue[nearestIndex] = validateValue(value, currentValue, distance, nearestIndex)
+
+      setTimeout(() => {
+        inputsRef.current[nearestIndex].focus()
+      })
+
+      setCurrentValue(newCurrentValue)
+
+      if (onChange) {
+        onChange(newCurrentValue)
+      }
+    }
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>, index: number) => {
+      setIsDragging(false)
+
+      const target = event.target
+      const value = Number(target.value)
+
+      const newCurrentValue = updateValue(value, currentValue, distance, index)
+
+      setCurrentValue(newCurrentValue)
+
+      // Trigger change event if needed
+      if (onChange) {
+        onChange(newCurrentValue)
+      }
+    }
+
+    const handleInputsContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (trackRef.current === null) {
+        return
+      }
+
+      const clickValue = calculateClickValue(
+        event,
+        trackRef.current,
+        min,
+        max,
+        step,
+        vertical,
+        isRTL(rangeSliderRef.current),
+      )
+
+      const index = getNearestValueIndex(clickValue, currentValue)
+
+      setIsDragging(true)
+      setDragIndex(index)
+      updateNearestValue(clickValue)
+    }
+
+    const handleLabelClick = (value: number) => {
+      if (!clickableLabels || disabled) {
+        return
+      }
+
+      updateNearestValue(value)
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging || trackRef.current === null) {
+        return
+      }
+
+      const moveValue = calculateMoveValue(
+        event,
+        trackRef.current,
+        min,
+        max,
+        step,
+        vertical,
+        isRTL(rangeSliderRef.current),
+      )
+
+      const newCurrentValue = updateValue(moveValue, currentValue, distance, dragIndex)
+
+      setCurrentValue(newCurrentValue)
+
+      if (onChange) {
+        onChange(newCurrentValue)
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    return (
+      <div
+        className={classNames('range-slider', className, {
+          'range-slider-vertical': vertical,
+          disabled,
+        })}
+        {...rest}
+        ref={forkedRef}
+      >
+        <div className="range-slider-inputs-container" onMouseDown={handleInputsContainerMouseDown}>
+          {currentValue.map((value, index) => (
+            <React.Fragment key={index}>
+              <input
+                className="range-slider-input"
+                type="range"
+                min={min}
+                max={max}
+                step={step}
+                value={value}
+                name={Array.isArray(name) ? name[index] : `${name || ''}-${index}}`}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={value}
+                aria-orientation={vertical ? 'vertical' : 'horizontal'}
+                disabled={disabled}
+                onChange={(event) => handleInputChange(event, index)}
+                ref={(el: HTMLInputElement) => {
+                  inputsRef.current[index] = el
+                }}
+              />
+              {tooltips && (
+                <div
+                  className="range-slider-tooltip"
+                  {...(thumbSize && {
+                    style: calculateTooltipPosition(
+                      min,
+                      max,
+                      value,
+                      thumbSize,
+                      vertical,
+                      isRTL(rangeSliderRef.current),
+                    ),
+                  })}
+                >
+                  <div className="range-slider-tooltip-inner">
+                    {tooltipsFormat ? tooltipsFormat(value) : value}
+                  </div>
+                  <div className="range-slider-tooltip-arrow"></div>
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+          <div
+            className="range-slider-track"
+            {...(track && { style: updateGradient(min, max, currentValue, vertical) })}
+            ref={trackRef}
+          ></div>
+        </div>
+        {labels && (
+          <div className="range-slider-labels-container" ref={labelsContainerRef}>
+            {Array.isArray(labels) &&
+              labels.map((label: Label, index) => {
+                const labelPosition = calculateLabelPosition(min, max, labels, label, index)
+                const labelValue = getLabelValue(min, max, labels, label, index)
+                const labelStyle = Object.assign(
+                  vertical ? { bottom: labelPosition } : { left: labelPosition },
+                  typeof label === 'object' && 'style' in label && label.style,
+                )
+                return (
+                  <div
+                    className={classNames(
+                      'range-slider-label',
+                      {
+                        clickable: clickableLabels,
+                      },
+                      typeof label === 'object' && 'className' in label && label.className,
+                    )}
+                    style={labelStyle}
+                    onMouseDown={() => handleLabelClick(labelValue)}
+                    key={index}
+                    ref={(el: HTMLDivElement) => {
+                      labelsRef.current[index] = el
+                    }}
+                  >
+                    {typeof label === 'object' && 'label' in label ? label.label : label}
+                  </div>
+                )
+              })}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+CRangeSlider.propTypes = {
+  clickableLabels: PropTypes.bool,
+  disabled: PropTypes.bool,
+  distance: PropTypes.number,
+  labels: PropTypes.any,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  name: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  step: PropTypes.number,
+  tooltips: PropTypes.bool,
+  tooltipsFormat: PropTypes.func,
+  track: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'fill'>(['fill'])]),
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
+  vertical: PropTypes.bool,
+}
+
+CRangeSlider.displayName = 'CRangeSlider'

package/src/components/range-slider/index.ts

@@ -0,0 +1,3 @@
+import { CRangeSlider } from './CRangeSlider'
+
+export { CRangeSlider }

package/src/components/range-slider/types.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactElement } from 'react'
+
+export type Label =
+  | {
+      label: number | ReactElement | string
+      value: number
+      className?: string | string[]
+      style?: CSSProperties
+    }
+  | ReactElement
+  | string
+
+export type ThumbSize = {
+  value: number
+  unit: string | null
+}

package/src/components/range-slider/utils.ts

@@ -0,0 +1,243 @@
+import React from 'react'
+import type { Label, ThumbSize } from './types'
+
+export const calculateClickValue = (
+  event: React.MouseEvent,
+  container: HTMLDivElement,
+  min: number,
+  max: number,
+  step: number,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const clickPosition = getClickPosition(event, container, vertical, rtl)
+  const value = min + clickPosition * (max - min)
+  return roundToStep(value, step)
+}
+
+export const calculateMoveValue = (
+  event: MouseEvent,
+  container: HTMLDivElement,
+  min: number,
+  max: number,
+  step: number,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const rect = container.getBoundingClientRect()
+  const position = vertical
+    ? calculateVerticalPosition(event.clientY, rect)
+    : calculateHorizontalPosition(event.clientX, rect, rtl)
+
+  if (typeof position === 'string') {
+    return position === 'max' ? max : min
+  }
+
+  const value = min + position * (max - min)
+
+  return roundToStep(value, step)
+}
+
+export const calculateVerticalPosition = (mouseY: number, rect: DOMRect) => {
+  if (mouseY < rect.top) {
+    return 'max'
+  }
+
+  if (mouseY > rect.bottom) {
+    return 'min'
+  }
+
+  return Math.min(Math.max((rect.bottom - mouseY) / rect.height, 0), 1)
+}
+
+export const calculateHorizontalPosition = (mouseX: number, rect: DOMRect, rtl: boolean) => {
+  if (mouseX < rect.left) {
+    return rtl ? 'max' : 'min'
+  }
+
+  if (mouseX > rect.right) {
+    return rtl ? 'min' : 'max'
+  }
+
+  const relativeX = rtl ? rect.right - mouseX : mouseX - rect.left
+  return Math.min(Math.max(relativeX / rect.width, 0), 1)
+}
+
+export const calculateLabelPosition = (
+  min: number,
+  max: number,
+  labels: Label[],
+  label: Label,
+  index: number,
+) => {
+  if (typeof label === 'object' && 'value' in label) {
+    return `${((label.value - min) / (max - min)) * 100}%`
+  }
+
+  return `${(index / (labels.length - 1)) * 100}%`
+}
+
+export const calculateTooltipPosition = (
+  min: number,
+  max: number,
+  value: number,
+  thumbSize: ThumbSize,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  const percent = (value - min) / (max - min)
+  const margin =
+    percent > 0.5
+      ? `-${(percent - 0.5) * thumbSize.value}${thumbSize.unit}`
+      : `${(0.5 - percent) * thumbSize.value}${thumbSize.unit}`
+
+  if (vertical) {
+    return {
+      bottom: `${percent * 100}%`,
+      marginBottom: margin,
+    }
+  }
+
+  return rtl
+    ? { right: `${percent * 100}%`, marginRight: margin }
+    : { left: `${percent * 100}%`, marginLeft: margin }
+}
+
+export const getClickPosition = (
+  event: React.MouseEvent,
+  container: HTMLDivElement,
+  vertical: boolean,
+  rtl: boolean,
+) => {
+  // MouseEvent doesn't have `offsetX`/`offsetY`, so we need to use `event.nativeEvent` instead
+  const { offsetX, offsetY } = event.nativeEvent
+  const { offsetWidth, offsetHeight } = container
+
+  if (vertical) {
+    return 1 - offsetY / offsetHeight
+  }
+
+  return rtl ? 1 - offsetX / offsetWidth : offsetX / offsetWidth
+}
+
+export const getLabelValue = (
+  min: number,
+  max: number,
+  labels: Label[],
+  label: Label,
+  index: number,
+) =>
+  typeof label === 'object' && 'value' in label
+    ? label.value
+    : min + (index / (labels.length - 1)) * (max - min)
+
+export const getNearestValueIndex = (value: number, values: number[]) => {
+  const valuesLength = values.length
+
+  if (value < values[0]) {
+    return 0
+  }
+
+  if (value > values[valuesLength - 1]) {
+    return valuesLength - 1
+  }
+
+  const distances = values.map((v) => Math.abs(v - value))
+  const min = Math.min(...distances)
+  const firstIndex = distances.indexOf(min)
+
+  return value < values[firstIndex] ? firstIndex : distances.lastIndexOf(min)
+}
+
+export const getThumbSize = (element: HTMLDivElement, vertical: boolean): ThumbSize | null => {
+  const value = globalThis
+    .getComputedStyle(element, null)
+    .getPropertyValue(
+      vertical ? '--cui-range-slider-thumb-height' : '--cui-range-slider-thumb-width',
+    )
+
+  const regex = /^(\d+\.?\d*)([%a-z]*)$/i
+  const match = value.match(regex)
+
+  if (match) {
+    return {
+      value: Number.parseFloat(match[1]),
+      unit: match[2] || null,
+    }
+  }
+
+  return null
+}
+
+export const roundToStep = (number: number, step: number) => {
+  const _step = step === 0 ? 1 : step
+  return Math.round(number / _step) * _step
+}
+
+export const updateGradient = (min: number, max: number, values: number[], vertical: boolean) => {
+  const minVal = Math.min(...values)
+  const maxVal = Math.max(...values)
+
+  const from = ((minVal - min) / (max - min)) * 100
+  const to = ((maxVal - min) / (max - min)) * 100
+
+  const direction = vertical ? 'to top' : 'to right'
+
+  return {
+    backgroundImage:
+      values.length === 1
+        ? `linear-gradient(
+    ${direction},
+    var(--cui-range-slider-track-in-range-bg) 0%,
+    var(--cui-range-slider-track-in-range-bg) ${to}%,
+    transparent ${to}%,
+    transparent 100%
+  )`
+        : `linear-gradient(
+    ${direction},
+    transparent 0%,
+    transparent ${from}%,
+    var(--cui-range-slider-track-in-range-bg) ${from}%,
+    var(--cui-range-slider-track-in-range-bg) ${to}%,
+    transparent ${to}%,
+    transparent 100%
+  )`,
+  }
+}
+
+export const updateValue = (value: number, values: number[], distance: number, index: number) => {
+  const newValue = [...values]
+  newValue[index] = validateValue(value, values, distance, index)
+  return newValue
+}
+
+export const validateValue = (value: number, values: number[], distance: number, index: number) => {
+  // If there's only one value, return it as is
+  if (values.length === 1) {
+    return value
+  }
+
+  // Determine previous and next values if they exist
+  const prevValue: number | undefined = index > 0 ? values[index - 1] : undefined
+  const nextValue: number | undefined = index < values.length - 1 ? values[index + 1] : undefined
+
+  // If it's the first element, ensure it's not too close to the next value
+  if (index === 0 && nextValue !== undefined) {
+    return Math.min(value, nextValue - distance)
+  }
+
+  // If it's the last element, ensure it's not too close to the previous value
+  if (index === values.length - 1 && prevValue !== undefined) {
+    return Math.max(value, prevValue + distance)
+  }
+
+  // For middle elements, ensure the value is within the allowed distance from both neighbors
+  if (prevValue !== undefined && nextValue !== undefined) {
+    const minVal = prevValue + distance
+    const maxVal = nextValue - distance
+    return Math.min(Math.max(value, minVal), maxVal)
+  }
+
+  // Fallback: If for some reason prevValue or nextValue is undefined, return the original value
+  return value
+}