[pull] main from coreui:main

packages/coreui-react/src/components/accordion/CAccordion.tsx

@@ -89,16 +89,16 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
   ) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
 
-    const _classNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
       ACCORDION_CLASS_NAMES,
       customClassNames,
     )
 
     return (
       <div
         className={classNames(
-          _classNames.ACCORDION,
-          { [_classNames.ACCORDION_FLUSH]: flush },
+          mergedClassNames.ACCORDION,
+          { [mergedClassNames.ACCORDION_FLUSH]: flush },
           className,
         )}
         {...rest}

packages/coreui-react/src/components/accordion/CAccordionBody.tsx

@@ -51,14 +51,14 @@ export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
     const { id, visible } = useContext(CAccordionItemContext)
 
-    const _classNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
       ACCORDION_BODY_CLASS_NAMES,
       customClassNames,
     )
 
     return (
-      <CCollapse id={id} className={_classNames.ACCORDION_COLLAPSE} visible={visible}>
-        <div className={classNames(_classNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
+      <CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
+        <div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>

packages/coreui-react/src/components/accordion/CAccordionButton.tsx

@@ -36,12 +36,17 @@ export const CLASS_NAMES = {
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
     const { id, visible, setVisible } = useContext(CAccordionItemContext)
-    const _classNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
+
+    const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
 
     return (
       <button
         type="button"
-        className={classNames(_classNames.ACCORDION_BUTTON, { collapsed: !visible }, className)}
+        className={classNames(
+          mergedClassNames.ACCORDION_BUTTON,
+          { collapsed: !visible },
+          className,
+        )}
         aria-controls={id}
         aria-expanded={visible}
         onClick={() => setVisible(!visible)}

packages/coreui-react/src/components/accordion/CAccordionHeader.tsx

@@ -43,13 +43,15 @@ export const ACCORDION_HEADER_CLASS_NAMES = {
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
-    const _classNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
       ACCORDION_HEADER_CLASS_NAMES,
       customClassNames,
     )
     return (
-      <div className={classNames(_classNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
-        <CAccordionButton className={_classNames.ACCORDION_HEADER}>{children}</CAccordionButton>
+      <div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
+        <CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
+          {children}
+        </CAccordionButton>
       </div>
     )
   },

packages/coreui-react/src/components/accordion/CAccordionItem.tsx

@@ -65,21 +65,23 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
 
-    const _classNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
       ACCORDION_ITEM_CLASS_NAMES,
       customClassNames,
     )
 
     useEffect(() => {
-      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+      if (!alwaysOpen && visible) {
+        setActiveKey(_itemKey.current)
+      }
     }, [visible])
 
     useEffect(() => {
       setVisible(Boolean(_activeItemKey === _itemKey.current))
     }, [_activeItemKey])
 
     return (
-      <div className={classNames(_classNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
+      <div className={classNames(mergedClassNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
         <CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>

packages/docs/build/api.mjs

@@ -7,18 +7,21 @@ import { writeFile, mkdir } from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parse } from 'react-docgen-typescript'
+import showdown from 'showdown'
 
 /**
  * Derive __dirname in ESM
  */
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const converter = new showdown.Converter({ simpleLineBreaks: true })
 
 /**
  * Glob patterns to locate .tsx files for documentation.
  * Adjust these patterns based on your project structure.
  */
 const GLOB_PATTERNS = [
+  // '**/src/components/date-picker/*.tsx',
   '**/src/**/*.tsx',
   '../node_modules/@coreui/icons-react/src/**/*.tsx',
   '../node_modules/@coreui/react-chartjs/src/**/*.tsx',
@@ -44,7 +47,6 @@ const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed
  * Options for react-docgen-typescript parser.
  */
 const DOCGEN_OPTIONS = {
-  savePropValueAsString: true,
   shouldIncludePropTagMap: true,
 }
 
@@ -67,6 +69,17 @@ const PRO_COMPONENTS = [
   'CVirtualScroller',
 ]
 
+const TEXT_REPLACEMENTS = {
+  CDatePicker: {
+    description: [{ 'React Calendar': 'React Date Picker' }],
+    example: [{ CCalendar: 'CDatePicker' }],
+  },
+  CDateRangePicker: {
+    description: [{ 'React Calendar': 'React Date Range Picker' }],
+    example: [{ CCalendar: 'CDateRangePicker' }],
+  },
+}
+
 /**
  * Escapes special characters in text to prevent Markdown rendering issues.
  *
@@ -110,6 +123,10 @@ function getRelativeFilename(file) {
  * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input.
  */
 function splitOutsideBracesAndParentheses(input) {
+  if (input.endsWith('...')) {
+    return [input]
+  }
+
   const parts = []
   let currentPart = ''
   let braceDepth = 0 // Tracks depth of curly braces {}
@@ -172,6 +189,23 @@ function splitOutsideBracesAndParentheses(input) {
   return parts
 }
 
+function replaceText(componenName, keyName, text) {
+  const keyNames = Object.keys(TEXT_REPLACEMENTS)
+
+  if (keyNames.includes(componenName)) {
+    const replacements = TEXT_REPLACEMENTS[componenName][keyName]
+    for (const replacement of replacements) {
+      for (const [key, value] of Object.entries(replacement)) {
+        if (text && key && value) {
+          return text.replaceAll(key, value)
+        }
+      }
+    }
+  } else {
+    return text
+  }
+}
+
 /**
  * Creates an MDX file with the component's API documentation.
  *
@@ -240,14 +274,19 @@ async function createMdx(file, component) {
     const deprecated = propInfo.tags?.deprecated
       ? `<span className="badge bg-success">Deprecated ${propInfo.tags.since}</span>`
       : ''
-    const description = propInfo.description || '-'
+    const description = propInfo.description
+      ? replaceText(component.displayName, 'description', propInfo.description)
+      : '-'
 
     const type = propInfo.type
       ? propInfo.type.name.includes('ReactElement')
         ? 'ReactElement'
         : propInfo.type.name
       : ''
     const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : `undefined`
+    const example = propInfo.tags?.example
+      ? replaceText(component.displayName, 'example', propInfo.tags?.example)
+      : false
 
     // Format types as inline code
     const types = splitOutsideBracesAndParentheses(type)
@@ -263,7 +302,16 @@ async function createMdx(file, component) {
     content += `        <td>${escapeMarkdown(types)}</td>\n`
     content += `      </tr>\n`
     content += `      <tr>\n`
-    content += `        <td colSpan="3">${escapeMarkdown(description)}${propInfo.tags?.example ? `<br /><JSXDocs code={\`${propInfo.tags.example}\`} />` : ''}</td>\n`
+    content += `        <td colSpan="3">\n`
+    content += `          ${converter
+      .makeHtml(description)
+      .replaceAll(/<code>(.*?)<\/code>/g, '<code>{`$1`}</code>')}\n`
+
+    if (example) {
+      content += `        <JSXDocs code={\`${example.trim()}\`} />\n`
+    }
+
+    content += `        </td>\n`
     content += `      </tr>\n`
 
     if (isLast) {

packages/docs/gatsby-node.mjs

@@ -34,7 +34,7 @@ export const createPages = async ({
 }) => {
   const result = await graphql(`
     query {
-      allMdx {
+      allMdx(filter: { fields: { slug: { regex: "/^(?!/api/).*/" } } }) {
         nodes {
           id
           fields {

packages/docs/package.json

@@ -60,7 +60,8 @@
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1",
     "rimraf": "^6.0.1",
-    "sass": "^1.80.4"
+    "sass": "^1.80.4",
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

packages/docs/src/styles/_table-api.scss

@@ -10,6 +10,10 @@
 
   tr th {
     padding: 0.75rem 1rem;
+
+    &:nth-child(3) {
+      width: 50%;
+    }
   }
 
   tr td {
@@ -37,5 +41,10 @@
     padding: 0.25rem 1rem;
     border: 0;
     border-radius: 0;
+    border: 2px solid var(--cui-body-bg);
+
+    code[class*=language-], pre[class*=language-] {
+      white-space: pre-wrap;
+    }
   }
 }