@coreui/react-pro 5.16.0 → 5.17.1

package/dist/esm/utils/getTransitionDurationFromElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTransitionDurationFromElement.js","sources":["../../../src/utils/getTransitionDurationFromElement.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,gCAAgC,GAAG,UAAC,OAAoB,EAAA;IAC5D,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;;;AAIN,IAAA,IAAA,EAA0C,GAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAxE,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAAE,eAAe,qBAAqC;IAE9E,IAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;;;IAIV,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;;;;"}
+{"version":3,"file":"getTransitionDurationFromElement.js","sources":["../../../src/utils/getTransitionDurationFromElement.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,gCAAgC,GAAG,UAAC,OAAoB,EAAA;IAC5D,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;IACV;;AAGI,IAAA,IAAA,EAAA,GAA0C,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAxE,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAAE,eAAe,qBAAqC;IAE9E,IAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;IACV;;IAGA,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;;;;"}

package/dist/esm/utils/isInViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"isInViewport.js","sources":["../../../src/utils/isInViewport.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,YAAY,GAAG,UAAC,OAAoB,EAAA;AACxC,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;IAC5C,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QACxF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAEzF;;;;"}
+{"version":3,"file":"isInViewport.js","sources":["../../../src/utils/isInViewport.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,YAAY,GAAG,UAAC,OAAoB,EAAA;AACxC,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;IAC5C,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QACxF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAEzF;;;;"}

package/dist/esm/utils/isObjectInArray.js.map

@@ -1 +1 @@
-{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,eAAe,GAAG,UAAI,KAAU,EAAE,IAAO,EAAE,MAAqB,EAAA;AAArB,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAqB,GAAA,EAAA,CAAA;AACpE,IAAA,OAAA,KAAK,CAAC,IAAI,CAAC,UAAC,KAAQ,EAAA;QAClB,IAAI,MAAM,GAAG,IAAI;AACjB,QAAA,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;gBACrD,MAAM,GAAG,KAAK;gBACd;;;AAIJ,QAAA,OAAO,MAAM;AACf,KAAC,CAAC;AAVF;;;;"}
+{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,eAAe,GAAG,UAAI,KAAU,EAAE,IAAO,EAAE,MAAqB,EAAA;AAArB,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAA,GAAA,EAAqB,CAAA,CAAA;AACpE,IAAA,OAAA,KAAK,CAAC,IAAI,CAAC,UAAC,KAAQ,EAAA;QAClB,IAAI,MAAM,GAAG,IAAI;AACjB,QAAA,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;gBACrD,MAAM,GAAG,KAAK;gBACd;YACF;QACF;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,CAAC;AAVF;;;;"}

package/dist/esm/utils/isRTL.js.map

@@ -1 +1 @@
-{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,KAAK,GAAG,UAAC,OAA6C,EAAA;AAC1D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI;;IAGb,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI;;AAGhD,IAAA,OAAO,KAAK;AACd;;;;"}
+{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,KAAK,GAAG,UAAC,OAA6C,EAAA;AAC1D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI;IAChD;AAEA,IAAA,OAAO,KAAK;AACd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.16.0",
+  "version": "5.17.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,21 +41,21 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.13.0",
+    "@coreui/coreui-pro": "^5.15.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/prop-types": "15.7.14",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.3",
+    "@types/prop-types": "15.7.15",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
@@ -65,8 +65,8 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.41.0",
-    "ts-jest": "^29.3.4",
+    "rollup": "^4.45.0",
+    "ts-jest": "^29.4.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3"
   },

package/src/components/calendar/CCalendar.tsx

@@ -618,7 +618,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         return
       }
 
-      date = setTimeFromDate(date, selectEndDate ? _endDate : _startDate)
+      date = setTimeFromDate(date, selectEndDate ? _endDate : _startDate) as Date
 
       setHoverDate(date)
 

package/src/components/calendar/utils.ts

@@ -646,7 +646,11 @@ export const removeTimeFromDate = (date: Date): Date => {
  * @param {Date | null} source - The date to copy the time from.
  * @returns {Date} A new Date instance with the date from `target` and time from `source`.
  */
-export const setTimeFromDate = (target: Date, source: Date | null): Date => {
+export const setTimeFromDate = (target: Date | null, source: Date | null): Date | null => {
+  if (target === null) {
+    return null
+  }
+
   if (!(source instanceof Date)) {
     return target
   }

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

@@ -451,8 +451,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         setCalendarDate(date)
         if (input === 'start') {
           setStartDate(date)
+          onStartDateChange?.(date)
         } else {
           setEndDate(date)
+          onEndDateChange?.(date)
         }
       }
     }, inputOnChangeDelay)

package/src/components/dropdown/CDropdown.tsx

@@ -1,4 +1,13 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import type { Options } from '@popperjs/core'
@@ -190,59 +199,64 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [dropdownToggleElement, setDropdownToggleElement] = useState<HTMLElement | null>(null)
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : as
-
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
+    const dropdownToggleRef = useCallback((node: HTMLElement | null) => {
+      if (node) {
+        setDropdownToggleElement(node)
+      }
+    }, [])
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownToggleRef,
-      dropdownMenuRef,
-      popper,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
+    const allowPopperUse = popper && typeof alignment !== 'object'
+    const Component = variant === 'nav-item' ? 'li' : as
 
-    const defaultPopperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
+    const computedPopperConfig: Partial<Options> = useMemo(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+      }
 
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
+      return {
+        ...defaultPopperConfig,
+        ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+      }
+    }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
-      const toggleElement = dropdownToggleRef.current
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
+
+    const handleShow = () => {
+      const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
 
-      if (_visible && toggleElement && menuElement) {
-        if (popper) {
+      if (toggleElement && menuElement) {
+        setVisible(true)
+
+        if (allowPopperUse) {
           initPopper(toggleElement, menuElement, computedPopperConfig)
         }
 
@@ -255,28 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
 
         onShow?.()
       }
+    }
 
-      return () => {
-        if (popper) {
-          destroyPopper()
-        }
-
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
+    const handleHide = () => {
+      setVisible(false)
 
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
 
-        onHide?.()
+      if (allowPopperUse) {
+        destroyPopper()
       }
-    }, [
-      computedPopperConfig,
-      destroyPopper,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      initPopper,
-      _visible,
-    ])
+
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+
+      onHide?.()
+    }
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -299,16 +311,16 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       if (event.key === 'Escape') {
-        setVisible(false)
+        handleHide()
       }
     }
 
     const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+      if (!dropdownToggleElement || !dropdownMenuRef.current) {
         return
       }
 
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      if (dropdownToggleElement.contains(event.target as HTMLElement)) {
         return
       }
 
@@ -317,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
         (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
       ) {
-        setTimeout(() => setVisible(false), 1)
+        setTimeout(() => handleHide(), 1)
         return
       }
     }
 
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
         {variant === 'input-group' ? (

package/src/components/dropdown/CDropdownContext.ts

@@ -5,10 +5,10 @@ export interface CDropdownContextProps {
   alignment?: Alignments
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   dark?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | null>
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  dropdownToggleRef: (node: HTMLElement | null) => void
+  handleHide?: () => void
+  handleShow?: () => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'

package/src/components/dropdown/CDropdownToggle.tsx

@@ -45,18 +45,24 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
   }
 
@@ -74,36 +80,32 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
+  if (custom && React.isValidElement(children)) {
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: dropdownToggleRef,
+        })}
+      </>
+    )
+  }
 
+  if (variant === 'nav-item' && navLink) {
     return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
         {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
+      </a>
     )
   }
 
-  return <Toggler />
+  return (
+    <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      {children}
+      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+    </CButton>
+  )
 }
 
 CDropdownToggle.propTypes = {

package/src/components/smart-table/CSmartTable.tsx

@@ -51,6 +51,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       onColumnFilterChange,
       onFilteredItemsChange,
       onItemsPerPageChange,
+      onRowChecked,
       onRowClick,
       onSelectAll,
       onSelectedItemsChange,
@@ -76,7 +77,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       tableProps,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const mountedRef = useRef(false)
 
@@ -184,22 +185,22 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
     const itemsDataColumns = useMemo(
       () => columnNames.filter((name) => getColumnNamesFromItems(_items).includes(name)),
-      [columnNames, _items],
+      [columnNames, _items]
     )
 
     const filteredColumns: Item[] = useMemo(
       () => filterColumns(_items, columnFilter, columnFilterState, itemsDataColumns),
-      [columnFilterState, _items],
+      [columnFilterState, _items]
     )
 
     const filteredTable: Item[] = useMemo(
       () => filterTable(filteredColumns, tableFilter, tableFilterState, itemsDataColumns),
-      [tableFilterState, tableFilterValue, filteredColumns],
+      [tableFilterState, tableFilterValue, filteredColumns]
     )
 
     const sortedItems: Item[] = useMemo(
       () => sortItems(columns, columnSorter, filteredTable, itemsDataColumns, sorterState),
-      [columnSorter, sorterState, filteredTable],
+      [columnSorter, sorterState, filteredTable]
     )
 
     const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
@@ -249,18 +250,19 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }
 
     const handleRowChecked = (item: Item, value: boolean) => {
+      onRowChecked?.(item, value)
       if (value && !isObjectInArray(_selected, item, ITEM_INTERNAL_KEYS)) {
         setSelected((prevSelected) => [...prevSelected, item])
         return
       }
 
       setSelected((prevSelected) =>
-        prevSelected.filter((_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS)),
+        prevSelected.filter((_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS))
       )
     }
 
     const handleSelectAllChecked = () => {
-      onSelectAll && onSelectAll()
+      onSelectAll?.()
 
       if (selectedAll === true) {
         setSelected(_items.filter((item) => item._selectable === false))
@@ -272,7 +274,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
 
       const selectable = _items.filter(
-        (item) => item._selectable !== false || item._selected === true,
+        (item) => item._selectable !== false || item._selected === true
       )
 
       if (selectable.length === _selected.length) {
@@ -291,7 +293,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
           }
 
           return item
-        }),
+        })
       )
     }
 
@@ -328,7 +330,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
           setSorterState(
             multiple
               ? sorterState.map((item) => (item.column === column ? newState : item))
-              : [newState],
+              : [newState]
           )
         }
       } else {
@@ -373,7 +375,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                             onChange={(e) => {
                               handleTableFilterChange(
                                 (e.target as HTMLInputElement).value,
-                                'change',
+                                'change'
                               )
                             }}
                             placeholder={tableFilterPlaceholder}
@@ -539,7 +541,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         )}
       </>
     )
-  },
+  }
 )
 
 CSmartTable.propTypes = {
@@ -565,6 +567,7 @@ CSmartTable.propTypes = {
   onColumnFilterChange: PropTypes.func,
   onFilteredItemsChange: PropTypes.func,
   onItemsPerPageChange: PropTypes.func,
+  onRowChecked: PropTypes.func,
   onRowClick: PropTypes.func,
   onSelectAll: PropTypes.func,
   onSelectedItemsChange: PropTypes.func,
@@ -585,7 +588,7 @@ CSmartTable.propTypes = {
       PropTypes.shape({
         column: PropTypes.string.isRequired,
         state: PropTypes.oneOf<SorterValue['state']>(['asc', 'desc', 0]).isRequired,
-      }).isRequired,
+      }).isRequired
     ),
   ]),
   sortingIcon: PropTypes.node,

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -143,6 +143,12 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * Pagination change callback.
    */
   onItemsPerPageChange?: (value: number) => void
+  /**
+   * Row checked callback.
+   *
+   * @since 5.17.0
+   */
+  onRowChecked?: (item: Item, value: boolean) => void
   /**
    * Row click callback.
    */

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

@@ -39,7 +39,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        onClick && onClick(value)
+        onClick?.(value)
       }
     }
 
@@ -52,7 +52,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
                 selected: element.value === selected,
               })}
               key={index}
-              onClick={() => onClick && onClick(element.value)}
+              onClick={() => onClick?.(element.value)}
               onKeyDown={(event) => handleKeyDown(event, element.value)}
               role="button"
               tabIndex={0}

package/src/hooks/useIsVisible.ts

@@ -1,12 +1,15 @@
 import { RefObject, useEffect, useState } from 'react'
 
-export const useIsVisible = (ref: RefObject<HTMLElement>) => {
+export const useIsVisible = (ref: RefObject<HTMLElement | null>) => {
   const [isIntersecting, setIntersecting] = useState(false)
 
   useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))
 
-    ref.current && observer.observe(ref.current)
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
     return () => observer.disconnect()
   }, [])