@coreui/react 5.7.1 → 5.8.0

package/src/components/focus-trap/__tests__/CFocusTrap.spec.tsx

@@ -0,0 +1,232 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CFocusTrap } from '../CFocusTrap'
+
+// Helper function to create a test component with focusable elements
+interface TestComponentProps {
+  children?: React.ReactNode
+  [key: string]: any
+}
+
+const TestComponent = ({ children, ...props }: TestComponentProps) => (
+  <CFocusTrap {...props}>
+    <div data-testid="container">
+      <button data-testid="first-button">First</button>
+      <input data-testid="input" type="text" placeholder="Input field" />
+      <a href="#" data-testid="link">
+        Link
+      </a>
+      <button data-testid="last-button">Last</button>
+      {children}
+    </div>
+  </CFocusTrap>
+)
+
+describe('CFocusTrap', () => {
+  beforeEach(() => {
+    // Reset document focus before each test
+    document.body.focus()
+  })
+
+  test('loads and displays CFocusTrap component', () => {
+    const { container } = render(
+      <CFocusTrap>
+        <div data-testid="test-content">Test Content</div>
+      </CFocusTrap>
+    )
+    expect(container).toMatchSnapshot()
+    expect(screen.getByTestId('test-content')).toBeInTheDocument()
+  })
+
+  test('CFocusTrap with custom props', () => {
+    const onActivate = jest.fn()
+    const onDeactivate = jest.fn()
+
+    const { container } = render(
+      <CFocusTrap
+        active={true}
+        restoreFocus={false}
+        focusFirstElement={false}
+        onActivate={onActivate}
+        onDeactivate={onDeactivate}
+      >
+        <div data-testid="custom-container">Custom Content</div>
+      </CFocusTrap>
+    )
+
+    expect(container).toMatchSnapshot()
+    expect(onActivate).toHaveBeenCalledTimes(1)
+  })
+
+  test('focuses container when focusFirstElement is false (default)', () => {
+    const mockFocus = jest.fn()
+    const originalFocus = HTMLElement.prototype.focus
+    HTMLElement.prototype.focus = mockFocus
+
+    render(<TestComponent active={true} />)
+
+    const container = screen.getByTestId('container')
+    expect(container).toBeInTheDocument()
+    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
+
+    HTMLElement.prototype.focus = originalFocus
+  })
+
+  test('does not trap focus when active is false', () => {
+    render(<TestComponent active={false} />)
+
+    // Focus should not be moved to any element
+    expect(screen.getByTestId('container')).not.toHaveFocus()
+    expect(screen.getByTestId('first-button')).not.toHaveFocus()
+  })
+
+  test('handles container with no tabbable elements', () => {
+    const mockFocus = jest.fn()
+    const originalFocus = HTMLElement.prototype.focus
+    HTMLElement.prototype.focus = mockFocus
+
+    render(
+      <CFocusTrap active={true}>
+        <div data-testid="empty-container">No focusable elements</div>
+      </CFocusTrap>
+    )
+
+    const container = screen.getByTestId('empty-container')
+    expect(container).toBeInTheDocument()
+    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
+
+    HTMLElement.prototype.focus = originalFocus
+  })
+
+  test('calls onActivate callback when trap becomes active', () => {
+    const onActivate = jest.fn()
+
+    const { rerender } = render(<TestComponent active={false} onActivate={onActivate} />)
+    expect(onActivate).not.toHaveBeenCalled()
+
+    // Re-render with active=true
+    rerender(<TestComponent active={true} onActivate={onActivate} />)
+    expect(onActivate).toHaveBeenCalledTimes(1)
+  })
+
+  test('calls onDeactivate callback when trap becomes inactive', () => {
+    const onDeactivate = jest.fn()
+
+    const { rerender } = render(<TestComponent active={true} onDeactivate={onDeactivate} />)
+    expect(onDeactivate).not.toHaveBeenCalled()
+
+    // Deactivate the trap
+    rerender(<TestComponent active={false} onDeactivate={onDeactivate} />)
+    expect(onDeactivate).toHaveBeenCalledTimes(1)
+  })
+
+  test('cleans up event listeners on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
+
+    const { unmount } = render(<TestComponent active={true} />)
+
+    unmount()
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), true)
+
+    removeEventListenerSpy.mockRestore()
+  })
+
+  test('focuses first element when focusFirstElement is true', () => {
+    const mockFocus = jest.fn()
+    const originalFocus = HTMLElement.prototype.focus
+    HTMLElement.prototype.focus = mockFocus
+
+    render(<TestComponent active={true} focusFirstElement={true} />)
+
+    const firstButton = screen.getByTestId('first-button')
+    expect(firstButton).toBeInTheDocument()
+    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
+
+    HTMLElement.prototype.focus = originalFocus
+  })
+
+  test('works with additionalContainer prop', () => {
+    const additionalRef = React.createRef<HTMLDivElement>()
+
+    render(
+      <div>
+        <CFocusTrap active={true} additionalContainer={additionalRef}>
+          <div data-testid="main-container">
+            <button data-testid="main-button">Main Button</button>
+          </div>
+        </CFocusTrap>
+        <div ref={additionalRef} data-testid="additional-container">
+          <button data-testid="additional-button">Additional Button</button>
+        </div>
+      </div>
+    )
+
+    const mainContainer = screen.getByTestId('main-container')
+    const additionalContainer = screen.getByTestId('additional-container')
+
+    expect(mainContainer).toBeInTheDocument()
+    expect(additionalContainer).toBeInTheDocument()
+  })
+
+  test('restores focus when restoreFocus is true', () => {
+    // Mock document.activeElement to simulate a focused element
+    const focusButton = document.createElement('button')
+    focusButton.dataset.testid = 'focus-button'
+    document.body.appendChild(focusButton)
+
+    const mockFocus = jest.fn()
+    focusButton.focus = mockFocus
+
+    // Mock document.activeElement
+    Object.defineProperty(document, 'activeElement', {
+      value: focusButton,
+      writable: true,
+      configurable: true,
+    })
+
+    const { rerender } = render(<TestComponent active={false} restoreFocus={true} />)
+
+    // Activate the trap (should store the previous focused element)
+    rerender(<TestComponent active={true} restoreFocus={true} />)
+
+    // Deactivate the trap (should restore focus)
+    rerender(<TestComponent active={false} restoreFocus={true} />)
+
+    // Verify focus restoration was attempted
+    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
+
+    focusButton.remove()
+  })
+
+  test('does not restore focus when restoreFocus is false', () => {
+    // Mock document.activeElement to simulate a focused element
+    const focusButton = document.createElement('button')
+    focusButton.dataset.testid = 'focus-button'
+    document.body.appendChild(focusButton)
+
+    const mockFocus = jest.fn()
+    focusButton.focus = mockFocus
+
+    // Mock document.activeElement
+    Object.defineProperty(document, 'activeElement', {
+      value: focusButton,
+      writable: true,
+      configurable: true,
+    })
+
+    const { rerender } = render(<TestComponent active={false} restoreFocus={false} />)
+
+    // Activate the trap (should store the previous focused element)
+    rerender(<TestComponent active={true} restoreFocus={false} />)
+
+    // Deactivate the trap (should NOT restore focus)
+    rerender(<TestComponent active={false} restoreFocus={false} />)
+
+    // Verify focus restoration was not attempted
+    expect(mockFocus).not.toHaveBeenCalledWith({ preventScroll: true })
+
+    focusButton.remove()
+  })
+})

package/src/components/focus-trap/__tests__/__snapshots__/CFocusTrap.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFocusTrap CFocusTrap with custom props 1`] = `
+<div>
+  <div
+    data-testid="custom-container"
+  >
+    Custom Content
+  </div>
+</div>
+`;
+
+exports[`CFocusTrap loads and displays CFocusTrap component 1`] = `
+<div>
+  <div
+    data-testid="test-content"
+  >
+    Test Content
+  </div>
+</div>
+`;

package/src/components/focus-trap/index.ts

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

package/src/components/focus-trap/utils.ts

@@ -0,0 +1,121 @@
+import React from 'react'
+
+/**
+ * Gets all focusable child elements within a container.
+ * Uses a comprehensive selector to find elements that can receive focus.
+ * @param element - The container element to search within
+ * @returns Array of focusable HTML elements
+ */
+export const focusableChildren = (element: HTMLElement): HTMLElement[] => {
+  const focusableSelectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'details',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+  ].join(',')
+
+  const elements = [...element.querySelectorAll<HTMLElement>(focusableSelectors)] as HTMLElement[]
+
+  return elements.filter((el) => !isDisabled(el) && isVisible(el))
+}
+
+/**
+ * Checks if an element is disabled.
+ * Considers various ways an element can be disabled including CSS classes and attributes.
+ * @param element - The HTML element to check
+ * @returns True if the element is disabled, false otherwise
+ */
+export const isDisabled = (element: HTMLElement): boolean => {
+  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+    return true
+  }
+
+  if (element.classList.contains('disabled')) {
+    return true
+  }
+
+  if ('disabled' in element && typeof element.disabled === 'boolean') {
+    return element.disabled
+  }
+
+  return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'
+}
+
+/**
+ * Type guard to check if an object is an Element.
+ * Handles edge cases including jQuery objects.
+ * @param object - The object to check
+ * @returns True if the object is an Element, false otherwise
+ */
+export const isElement = (object: unknown): object is Element => {
+  if (!object || typeof object !== 'object') {
+    return false
+  }
+
+  // Handle jQuery objects
+  if ('jquery' in object && object.jquery !== undefined) {
+    const jQueryObject = object as { [key: number]: Element }
+    return isElement(jQueryObject[0])
+  }
+
+  return 'nodeType' in object && typeof object.nodeType === 'number'
+}
+
+/**
+ * Checks if an element is visible in the DOM.
+ * Considers client rects and computed visibility styles, handling edge cases like details elements.
+ * @param element - The HTML element to check for visibility
+ * @returns True if the element is visible, false otherwise
+ */
+export const isVisible = (element: HTMLElement): boolean => {
+  if (!isElement(element) || element.getClientRects().length === 0) {
+    return false
+  }
+
+  const elementIsVisible = getComputedStyle(element).getPropertyValue('visibility') === 'visible'
+
+  // Handle `details` element as its content may falsely appear visible when it is closed
+  const closedDetails = element.closest('details:not([open])')
+
+  if (!closedDetails) {
+    return elementIsVisible
+  }
+
+  if (closedDetails !== element) {
+    const summary = element.closest('summary')
+
+    // Check if summary is a direct child of the closed details
+    if (summary?.parentNode !== closedDetails) {
+      return false
+    }
+  }
+
+  return elementIsVisible
+}
+
+/**
+ * Merges multiple React refs into a single ref callback.
+ * Handles both function refs and ref objects, gracefully ignoring failures.
+ * @param refs - Array of React refs to merge
+ * @returns A ref callback that applies to all provided refs
+ */
+export const mergeRefs =
+  <T>(...refs: (React.Ref<T> | undefined)[]) =>
+  (node: T) => {
+    refs.forEach((ref) => {
+      if (!ref) return
+      if (typeof ref === 'function') {
+        ref(node)
+      } else {
+        try {
+          ;(ref as React.RefObject<T>).current = node
+        } catch {
+          // Ignore assignment failures for read-only refs
+        }
+      }
+    })
+  }

package/src/components/footer/CFooter.tsx

@@ -24,7 +24,7 @@ export const CFooter = forwardRef<HTMLDivElement, CFooterProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CFooter.propTypes = {

package/src/components/footer/__tests__/CFooter.spec.tsx

@@ -12,7 +12,7 @@ test('CFooter customize', async () => {
   const { container } = render(
     <CFooter className="bazinga" position="fixed">
       Test
-    </CFooter>,
+    </CFooter>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/form/CForm.tsx

@@ -24,7 +24,7 @@ export const CForm = forwardRef<HTMLFormElement, CFormProps>(
         {children}
       </form>
     )
-  },
+  }
 )
 
 CForm.propTypes = {

package/src/components/form/CFormCheck.tsx

@@ -103,7 +103,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const forkedRef = useForkedRef(ref, inputRef)
@@ -151,9 +151,9 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
                 {
                   [`btn-${button.size}`]: button.size,
                 },
-                `${button.shape}`,
+                `${button.shape}`
               )
-            : 'form-check-label',
+            : 'form-check-label'
         )}
         {...(id && { htmlFor: id })}
       >
@@ -194,7 +194,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
                 'is-invalid': invalid,
                 'is-valid': valid,
               },
-              className,
+              className
             )}
           >
             <FormControl />
@@ -208,7 +208,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     }
 
     return <FormCheck />
-  },
+  }
 )
 
 CFormCheck.propTypes = {

package/src/components/form/CFormFeedback.tsx

@@ -38,7 +38,7 @@ export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedba
               [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
               [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
             },
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -46,7 +46,7 @@ export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedba
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CFormFeedback.propTypes = {

package/src/components/form/CFormFloating.tsx

@@ -16,7 +16,7 @@ export const CFormFloating = forwardRef<HTMLDivElement, CFormFloatingProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CFormFloating.propTypes = {

package/src/components/form/CFormInput.tsx

@@ -76,14 +76,14 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
 
     useEffect(() => {
       const timeOutId = setTimeout(
         () => value && onChange && onChange(value),
-        typeof delay === 'number' ? delay : 500,
+        typeof delay === 'number' ? delay : 500
       )
 
       return () => clearTimeout(timeOutId)
@@ -113,7 +113,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           id={id}
           type={type}
@@ -125,7 +125,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
         </input>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormInput.propTypes = {

package/src/components/form/CFormLabel.tsx

@@ -20,7 +20,7 @@ export const CFormLabel = forwardRef<HTMLLabelElement, CFormLabelProps>(
         {children}
       </label>
     )
-  },
+  }
 )
 
 CFormLabel.propTypes = {

package/src/components/form/CFormRange.tsx

@@ -54,7 +54,7 @@ export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
         <input type="range" className={classNames('form-range', className)} {...rest} ref={ref} />
       </>
     )
-  },
+  }
 )
 
 CFormRange.propTypes = {

package/src/components/form/CFormSelect.tsx

@@ -66,7 +66,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <CFormControlWrapper
@@ -92,7 +92,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           size={htmlSize}
           {...rest}
@@ -116,7 +116,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
         </select>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormSelect.propTypes = {

package/src/components/form/CFormSwitch.tsx

@@ -53,7 +53,7 @@ export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
             'is-invalid': invalid,
             'is-valid': valid,
           },
-          className,
+          className
         )}
       >
         <input
@@ -73,7 +73,7 @@ export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
         )}
       </div>
     )
-  },
+  }
 )
 
 CFormSwitch.propTypes = {

package/src/components/form/CFormTextarea.tsx

@@ -54,7 +54,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <CFormControlWrapper
@@ -78,7 +78,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           id={id}
           {...rest}
@@ -88,7 +88,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         </textarea>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormTextarea.propTypes = {

package/src/components/form/CInputGroup.tsx

@@ -22,7 +22,7 @@ export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
           {
             [`input-group-${size}`]: size,
           },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -30,7 +30,7 @@ export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CInputGroup.propTypes = {

package/src/components/form/CInputGroupText.tsx

@@ -24,7 +24,7 @@ export const CInputGroupText: PolymorphicRefForwardingComponent<'span', CInputGr
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CInputGroupText.propTypes = {

package/src/components/form/__tests__/CForm.spec.tsx

@@ -13,7 +13,7 @@ test('CForm customize', async () => {
   const { container } = render(
     <CForm className="bazinga" validated={true}>
       Test
-    </CForm>,
+    </CForm>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -30,7 +30,7 @@ test('CForm example', async () => {
       <CButton type="submit" color="primary">
         E
       </CButton>
-    </CForm>,
+    </CForm>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/form/__tests__/CFormCheck.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CFormCheck component', async () => {
 
 test('CFormCheck customize button=false', async () => {
   const { container } = render(
-    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />,
+    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -27,7 +27,7 @@ test('CFormCheck customize button=true', async () => {
       inline={true}
       label="label"
       type="radio"
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/form/__tests__/CFormControl.spec.tsx

@@ -18,7 +18,7 @@ test('CFormInput customize', async () => {
       size="lg"
       type="color"
       value="value"
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')