@coreui/react-pro 5.25.0 → 5.27.0

package/src/hooks/useForkedRef.ts

@@ -13,24 +13,30 @@ export type AssignableRef<ValueType> =
 export function useForkedRef<RefValueType = any>(
   ...refs: (AssignableRef<RefValueType> | null | undefined)[]
 ) {
-  return useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (node: any) => {
-      refs.forEach((ref) => {
-        assignRef(ref, node)
-      })
-    }
-  }, refs)
+  return useMemo(
+    () => {
+      if (refs.every((ref) => ref == null)) {
+        return null
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (node: any) => {
+        refs.forEach((ref) => {
+          assignRef(ref, node)
+        })
+      }
+    },
+    // useForkedRef accepts a variable number of refs, so the dependency list
+    // cannot be a static array literal; the refs are compared element-wise.
+    // eslint-disable-next-line react-hooks/use-memo, react-hooks/exhaustive-deps
+    refs
+  )
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function assignRef<RefValueType = any>(
   ref: AssignableRef<RefValueType> | null | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any,
+  value: any
 ) {
   if (ref == null) return
   if (isFunction(ref)) {
@@ -44,7 +50,6 @@ export function assignRef<RefValueType = any>(
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-export function isFunction(value: any): value is Function {
-  return !!(value && {}.toString.call(value) == '[object Function]')
+export function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+  return typeof value === 'function'
 }

package/src/hooks/usePopper.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { createPopper } from '@popperjs/core'
 import type { Instance, Options } from '@popperjs/core'
 
@@ -13,12 +13,16 @@ export const usePopper = (): UsePopperOutput => {
   const _popper = useRef<Instance>(undefined)
   const el = useRef<HTMLElement>(null)
 
-  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
-    _popper.current = createPopper(reference, popper, options)
-    el.current = popper
-  }
+  const initPopper = useCallback(
+    (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
+      _popper.current?.destroy()
+      _popper.current = createPopper(reference, popper, options)
+      el.current = popper
+    },
+    []
+  )
 
-  const destroyPopper = () => {
+  const destroyPopper = useCallback(() => {
     const popperInstance = _popper.current
 
     if (popperInstance && el.current) {
@@ -26,9 +30,9 @@ export const usePopper = (): UsePopperOutput => {
     }
 
     _popper.current = undefined
-  }
+  }, [])
 
-  const updatePopper = (options?: Partial<Options>) => {
+  const updatePopper = useCallback((options?: Partial<Options>) => {
     const popperInstance = _popper.current
 
     if (popperInstance && options) {
@@ -38,7 +42,7 @@ export const usePopper = (): UsePopperOutput => {
     if (popperInstance) {
       popperInstance.update()
     }
-  }
+  }, [])
 
   return {
     popper: _popper.current,

package/src/hooks/useStateWithCallback.ts

@@ -3,12 +3,13 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 export const useStateWithCallback = <S>(
   initialState: S,
   handler?: (prevState: S) => void,
-  runHandler?: boolean,
+  runHandler?: boolean
 ): [S, Dispatch<SetStateAction<S>>] => {
   const [state, setState] = useState<S>(initialState)
-  handler &&
-    useEffect(() => {
-      runHandler && handler(state)
-    }, [state])
+  useEffect(() => {
+    if (handler && runHandler) {
+      handler(state)
+    }
+  }, [state])
   return [state, setState]
 }

package/src/types.ts

@@ -1,15 +1,7 @@
 export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 
 export type Colors =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'dark'
-  | 'light'
-  | string
+  'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
 
 export type Gradients =
   | 'primary-gradient'

package/src/utils/executeAfterTransition.ts

@@ -25,7 +25,7 @@ const executeAfterTransition = (
 
   let called = false
 
-  const handler = ({ target }: { target: any }) => {
+  const handler = ({ target }: Event) => {
     if (target !== transitionElement) {
       return
     }

package/src/utils/index.ts

@@ -8,6 +8,7 @@ import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
 import mergeClassNames from './mergeClassNames'
+import Swipe from './swipe'
 
 export {
   executeAfterTransition,
@@ -20,4 +21,5 @@ export {
   isObjectInArray,
   isRTL,
   mergeClassNames,
+  Swipe,
 }

package/src/utils/mergeClassNames.ts

@@ -9,7 +9,7 @@ const mergeClassNames = <T extends object>(
   const classNames: T = { ...defaultClassNames }
 
   for (const key in customClassNames) {
-    if (customClassNames.hasOwnProperty(key)) {
+    if (Object.hasOwn(customClassNames, key)) {
       const typedKey = key as keyof T
       const customClassName = customClassNames[typedKey]?.toString()
 

package/src/utils/swipe.ts

@@ -0,0 +1,114 @@
+const SWIPE_THRESHOLD = 40
+const POINTER_TYPE_TOUCH = 'touch'
+const POINTER_TYPE_PEN = 'pen'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+
+export interface SwipeCallbacks {
+  onLeft?: () => void
+  onRight?: () => void
+  onEnd?: () => void
+}
+
+/**
+ * Detects horizontal swipe gestures on an element, using Pointer events when
+ * available and falling back to Touch events otherwise. A modified port of the
+ * vanilla `@coreui/coreui` swipe helper.
+ */
+class Swipe {
+  private readonly element: HTMLElement
+  private readonly callbacks: SwipeCallbacks
+  private deltaX = 0
+  private readonly supportPointerEvents = Boolean(window.PointerEvent)
+
+  constructor(element: HTMLElement, callbacks: SwipeCallbacks = {}) {
+    this.element = element
+    this.callbacks = callbacks
+
+    if (!element || !Swipe.isSupported()) {
+      return
+    }
+
+    this.initEvents()
+  }
+
+  static isSupported(): boolean {
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+  }
+
+  dispose(): void {
+    this.element.removeEventListener('pointerdown', this.start)
+    this.element.removeEventListener('pointerup', this.end)
+    this.element.removeEventListener('touchstart', this.start)
+    this.element.removeEventListener('touchmove', this.move)
+    this.element.removeEventListener('touchend', this.end)
+    this.element.classList.remove(CLASS_NAME_POINTER_EVENT)
+  }
+
+  private readonly start = (event: PointerEvent | TouchEvent): void => {
+    if (!this.supportPointerEvents) {
+      this.deltaX = (event as TouchEvent).touches[0].clientX
+      return
+    }
+
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX
+    }
+  }
+
+  private readonly move = (event: TouchEvent): void => {
+    this.deltaX =
+      event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.deltaX
+  }
+
+  private readonly end = (event: PointerEvent | TouchEvent): void => {
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX - this.deltaX
+    }
+
+    this.handleSwipe()
+    this.callbacks.onEnd?.()
+  }
+
+  private handleSwipe(): void {
+    const absDeltaX = Math.abs(this.deltaX)
+
+    if (absDeltaX <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltaX / this.deltaX
+
+    this.deltaX = 0
+
+    if (!direction) {
+      return
+    }
+
+    if (direction > 0) {
+      this.callbacks.onRight?.()
+    } else {
+      this.callbacks.onLeft?.()
+    }
+  }
+
+  private eventIsPointerPenTouch(event: PointerEvent): boolean {
+    return (
+      this.supportPointerEvents &&
+      (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
+    )
+  }
+
+  private initEvents(): void {
+    if (this.supportPointerEvents) {
+      this.element.addEventListener('pointerdown', this.start)
+      this.element.addEventListener('pointerup', this.end)
+      this.element.classList.add(CLASS_NAME_POINTER_EVENT)
+    } else {
+      this.element.addEventListener('touchstart', this.start)
+      this.element.addEventListener('touchmove', this.move)
+      this.element.addEventListener('touchend', this.end)
+    }
+  }
+}
+
+export default Swipe

package/src/vitest.d.ts

@@ -0,0 +1 @@
+/// <reference types="vitest/globals" />

package/dist/cjs/components/sidebar/CSidebarNavContext.d.ts

@@ -1,5 +0,0 @@
-export interface CSidebarNavContextProps {
-    visibleGroup: string;
-    setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>;
-}
-export declare const CSidebarNavContext: import("react").Context<CSidebarNavContextProps>;

package/dist/cjs/components/sidebar/CSidebarNavContext.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const CSidebarNavContext = React.createContext({});
-
-exports.CSidebarNavContext = CSidebarNavContext;
-//# sourceMappingURL=CSidebarNavContext.js.map

package/dist/cjs/components/sidebar/CSidebarNavContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSidebarNavContext.js","sources":["../../../../src/components/sidebar/CSidebarNavContext.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;MAOa,kBAAkB,GAAGA,mBAAa,CAAC,EAA6B;;;;"}

package/dist/cjs/components/smart-table/utils.d.ts

@@ -1,23 +0,0 @@
-import type { Column, ColumnFilter, ColumnFilterValue, Group, Item, Sorter, SorterValue, TableFilter } from './types';
-export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
-export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
-export declare const getClickedColumnName: (target: HTMLElement, columnNames: string[], selectable?: boolean) => string;
-export declare const getColumnKey: (column: Column | string) => string;
-export declare const getColumnLabel: (column: Column | string) => string;
-export declare const getColumnName: (column: Column | string) => string;
-export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
-export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
-export declare const countColumns: (columns: Column[]) => number;
-export declare const getColumnGroups: (columns: (string | Column)[] | undefined) => Group[][];
-export declare const getColumnNamesFromItems: (items: Item[]) => string[];
-export declare const getColumnSorterFunction: (column: Column | undefined) => ((a: any, b: any) => number) | undefined;
-export declare const getColumnSorterState: (key: string, sorterState?: SorterValue[]) => string | number;
-export declare const getColumnValues: (items: Item[], key: string) => any[];
-export declare const getTableDataCellProps: (column: Column | string, item: Item, colName: string) => Record<string, any>;
-export declare const getTableDataCellStyles: (column: Column | string, item: Item, colName: string) => Record<string, any>;
-export declare const getTableHeaderCellProps: (column: Column | string) => import("../table/CTableHeaderCell").CTableHeaderCellProps;
-export declare const getTableHeaderCellStyles: (column: Column | string, columnSorter: boolean | Sorter | undefined) => Record<string, any>;
-export declare const isSortable: (index: number, columns: (string | Column)[] | undefined, columnSorter: boolean | Sorter | undefined, itemsDataColumns: string[], columnNames: string[]) => boolean;
-export declare const pretifyName: (name: string) => string;
-export declare const sortBy: (column: Column | undefined, items: Item[], key: string, order: SorterValue["state"]) => Item[];
-export declare const sortItems: (columns: (Column | string)[] | undefined, columnSorter: boolean | Sorter | undefined, items: Item[], itemsDataColumns: string[], sorterState: SorterValue[]) => Item[];

package/dist/esm/components/sidebar/CSidebarNavContext.d.ts

@@ -1,5 +0,0 @@
-export interface CSidebarNavContextProps {
-    visibleGroup: string;
-    setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>;
-}
-export declare const CSidebarNavContext: import("react").Context<CSidebarNavContextProps>;

package/dist/esm/components/sidebar/CSidebarNavContext.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-const CSidebarNavContext = createContext({});
-
-export { CSidebarNavContext };
-//# sourceMappingURL=CSidebarNavContext.js.map

package/dist/esm/components/sidebar/CSidebarNavContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSidebarNavContext.js","sources":["../../../../src/components/sidebar/CSidebarNavContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;MAOa,kBAAkB,GAAG,aAAa,CAAC,EAA6B;;;;"}

package/dist/esm/components/smart-table/utils.d.ts

@@ -1,23 +0,0 @@
-import type { Column, ColumnFilter, ColumnFilterValue, Group, Item, Sorter, SorterValue, TableFilter } from './types';
-export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
-export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
-export declare const getClickedColumnName: (target: HTMLElement, columnNames: string[], selectable?: boolean) => string;
-export declare const getColumnKey: (column: Column | string) => string;
-export declare const getColumnLabel: (column: Column | string) => string;
-export declare const getColumnName: (column: Column | string) => string;
-export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
-export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
-export declare const countColumns: (columns: Column[]) => number;
-export declare const getColumnGroups: (columns: (string | Column)[] | undefined) => Group[][];
-export declare const getColumnNamesFromItems: (items: Item[]) => string[];
-export declare const getColumnSorterFunction: (column: Column | undefined) => ((a: any, b: any) => number) | undefined;
-export declare const getColumnSorterState: (key: string, sorterState?: SorterValue[]) => string | number;
-export declare const getColumnValues: (items: Item[], key: string) => any[];
-export declare const getTableDataCellProps: (column: Column | string, item: Item, colName: string) => Record<string, any>;
-export declare const getTableDataCellStyles: (column: Column | string, item: Item, colName: string) => Record<string, any>;
-export declare const getTableHeaderCellProps: (column: Column | string) => import("../table/CTableHeaderCell").CTableHeaderCellProps;
-export declare const getTableHeaderCellStyles: (column: Column | string, columnSorter: boolean | Sorter | undefined) => Record<string, any>;
-export declare const isSortable: (index: number, columns: (string | Column)[] | undefined, columnSorter: boolean | Sorter | undefined, itemsDataColumns: string[], columnNames: string[]) => boolean;
-export declare const pretifyName: (name: string) => string;
-export declare const sortBy: (column: Column | undefined, items: Item[], key: string, order: SorterValue["state"]) => Item[];
-export declare const sortItems: (columns: (Column | string)[] | undefined, columnSorter: boolean | Sorter | undefined, items: Item[], itemsDataColumns: string[], sorterState: SorterValue[]) => Item[];

package/src/components/accordion/__tests__/CAccordion.spec.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordion } from '../index'
-
-test('loads and displays CAccordion component', async () => {
-  const { container } = render(<CAccordion>Test</CAccordion>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordion customize', async () => {
-  const { container } = render(<CAccordion className="bazinga">Test</CAccordion>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordion use case test', async () => {
-  jest.useFakeTimers()
-  const { rerender } = render(<CAccordion flush={false}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  rerender(<CAccordion flush={true}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
-  rerender(<CAccordion flush={false}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  jest.useRealTimers()
-})

package/src/components/accordion/__tests__/CAccordionBody.spec.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionBody } from '../index'
-
-test('loads and displays CAccordionBody component', async () => {
-  const { container } = render(<CAccordionBody>Test</CAccordionBody>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionBody customize', async () => {
-  const { container } = render(<CAccordionBody>Test</CAccordionBody>)
-  expect(container.firstChild?.firstChild).toHaveClass('accordion-body')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/CAccordionButton.spec.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionButton } from '../index'
-
-test('loads and displays CAccordionButton component', async () => {
-  const { container } = render(<CAccordionButton>Test</CAccordionButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionButton customize', async () => {
-  const { container } = render(<CAccordionButton className="bazinga">Test</CAccordionButton>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-button')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/CAccordionHeader.spec.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionHeader } from '../index'
-
-test('loads and displays CAccordionHeader component', async () => {
-  const { container } = render(<CAccordionHeader>Test</CAccordionHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionHeader customize', async () => {
-  const { container } = render(<CAccordionHeader className="bazinga">Test</CAccordionHeader>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-header')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/CAccordionItem.spec.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionItem } from '../index'
-
-test('loads and displays CAccordionItem component', async () => {
-  const { container } = render(<CAccordionItem>Test</CAccordionItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionItem customize', async () => {
-  const { container } = render(<CAccordionItem className="bazinga">Test</CAccordionItem>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-item')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordion customize 1`] = `
-<div>
-  <div
-    class="accordion bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordion component 1`] = `
-<div>
-  <div
-    class="accordion"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionBody customize 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    <div
-      class="accordion-body"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionBody component 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    <div
-      class="accordion-body"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionButton customize 1`] = `
-<div>
-  <button
-    class="accordion-button collapsed bazinga"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CAccordionButton component 1`] = `
-<div>
-  <button
-    class="accordion-button collapsed"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionHeader customize 1`] = `
-<div>
-  <div
-    class="accordion-header bazinga"
-  >
-    <button
-      class="accordion-button collapsed"
-      type="button"
-    >
-      Test
-    </button>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionHeader component 1`] = `
-<div>
-  <div
-    class="accordion-header"
-  >
-    <button
-      class="accordion-button collapsed"
-      type="button"
-    >
-      Test
-    </button>
-  </div>
-</div>
-`;

package/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionItem customize 1`] = `
-<div>
-  <div
-    class="accordion-item bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionItem component 1`] = `
-<div>
-  <div
-    class="accordion-item"
-  >
-    Test
-  </div>
-</div>
-`;