@coreui/react-pro 4.10.0 → 4.11.0-next.1

package/src/components/multi-select/utils.ts

@@ -1,33 +1,50 @@
 import type { Option, SelectedOption } from './types'
 
-export const filterOptionsList = (search: string, _options: Option[]) => {
-  return search.length > 0
+export const createOption = (text: string, options: Option[]) => {
+  const value = text.toLowerCase().replace(/\s/g, '-')
+  let uniqueValue = value
+  let i = 1
+
+  while (options.find((option) => String(option.value) === uniqueValue)) {
+    uniqueValue = `${value}-${i}`
+    i++
+  }
+
+  return [
+    {
+      value: uniqueValue,
+      text,
+      custom: true,
+    },
+  ]
+}
+
+export const filterOptionsList = (search: string, _options: Option[]) =>
+  search.length > 0
     ? _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 > 0)
-          ) {
-            acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
-          }
-
-          return acc
-        }, [])
+      _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 > 0)
+        ) {
+          acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
+        }
+
+        return acc
+      }, [])
     : _options
-}
 
-export const flattenArray = (options: Option[]): Option[] => {
-  return options.reduce((acc: Option[], val: Option) => {
-    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-  }, [])
-}
+export const flattenArray = (options: Option[]): Option[] =>
+  options.reduce(
+    (acc: Option[], val: Option) =>
+      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
+    [],
+  )
 
 export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element

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

@@ -121,7 +121,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect
   /**
-   * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
+   * When set, table will have loading style: loading spinner and reduced opacity.
    */
   loading?: boolean
   /**

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -43,17 +43,17 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
     })
 
     useEffect(() => {
-      setItemsNumber(itemsNumber || React.Children.count(children))
-    }, [children, itemsNumber])
+      setItemsNumber(React.Children.count(children))
+    }, [children])
 
     useEffect(() => {
-      setViewportHeight(visibleItems * itemHeight + 2 * viewportPadding)
-    }, [viewportPadding, visibleItems, itemHeight])
+      setViewportHeight(Math.min(visibleItems, itemsNumber) * itemHeight + 2 * viewportPadding)
+    }, [itemHeight, itemsNumber, viewportPadding, visibleItems])
 
     useEffect(() => {
-      setMaxHeight(itemsNumber * itemHeight + 2 * viewportPadding)
+      setMaxHeight(itemsNumber * itemHeight)
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
-    }, [itemsNumber, itemHeight])
+    }, [itemHeight, itemsNumber])
 
     useEffect(() => {
       setBuffer(Math.floor(visibleItems / 2))
@@ -73,7 +73,8 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
         }
         ref={forkedRef}
         style={{
-          height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+          // height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+          height: viewportHeight,
           overflowY: 'auto',
         }}
       >