(
34 | nodeOrFunc: ReactNode | ((props: P) => ReactNode),
35 | props: P
36 | ) => ReactNode = (nodeOrFunc, props) =>
37 | typeof nodeOrFunc === 'function' ? nodeOrFunc(props) : nodeOrFunc;
38 |
39 | const WrappedItem = memo(
40 | ({
41 | forwardedRef,
42 | itemRef,
43 | state,
44 | toggle,
45 | className,
46 | disabled,
47 | header,
48 | headingTag: Heading = 'h3',
49 | headingProps,
50 | buttonProps,
51 | contentProps,
52 | panelProps,
53 | children,
54 | ...rest
55 | }: WrappedItemProps (
12 | WrappedItem: MemoExoticComponent<(props: ItemStateProps (className?: ClassNameProp , props?: P) => {
10 | const blockElement = element ? `${block}__${element}` : block;
11 |
12 | let classString = blockElement;
13 | modifiers &&
14 | Object.keys(modifiers).forEach((name) => {
15 | const value = modifiers[name];
16 | if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
17 | });
18 |
19 | let expandedClassName = typeof className === 'function' ? className(props!) : className;
20 | if (typeof expandedClassName === 'string') {
21 | expandedClassName = expandedClassName.trim();
22 | if (expandedClassName) classString += ` ${expandedClassName}`;
23 | }
24 |
25 | return classString;
26 | };
27 |
28 | export { bem };
29 |
--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | import { createContext, HTMLAttributes } from 'react';
2 | import {
3 | TransitionState,
4 | TransitionMapResult,
5 | TransitionMapOptions,
6 | TransitionOptions
7 | } from 'react-transition-state';
8 |
9 | export const ACCORDION_BLOCK = 'szh-accordion';
10 | export const ACCORDION_PREFIX = 'szh-adn';
11 | export const ACCORDION_ATTR: string = `data-${ACCORDION_PREFIX}`;
12 | export const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
13 |
14 | export type Modifiers = {
15 | readonly [index: string]: boolean | string;
16 | };
17 | export type ClassNameProp = string | ((props: P) => string);
18 | export interface ElementProps ;
21 | 'data-testid'?: string | number;
22 | }
23 |
24 | export type ItemKey = Element | string | number;
25 | export type TransitionProp =
26 | | boolean
27 | | {
28 | enter?: boolean;
29 | exit?: boolean;
30 | preEnter?: boolean;
31 | preExit?: boolean;
32 | };
33 |
34 | export interface ItemState {
35 | readonly state: TransitionState;
36 | readonly toggle: (toEnter?: boolean) => void;
37 | disabled?: boolean;
38 | }
39 |
40 | export interface ItemStateOptions {
41 | itemKey?: string | number;
42 | initialEntered?: boolean;
43 | disabled?: boolean;
44 | }
45 |
46 | export interface AccordionProviderOptions
47 | extends Omit<
48 | TransitionMapOptions (WrappedItem: MemoExoticComponent<(props: ItemStateProps (className?: ClassNameProp , props?: P) => string;
7 | export { bem };
8 |
--------------------------------------------------------------------------------
/types/utils/constants.d.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes } from 'react';
2 | import { TransitionState, TransitionMapResult, TransitionMapOptions, TransitionOptions } from 'react-transition-state';
3 | export declare const ACCORDION_BLOCK = "szh-accordion";
4 | export declare const ACCORDION_PREFIX = "szh-adn";
5 | export declare const ACCORDION_ATTR: string;
6 | export declare const ACCORDION_BTN_ATTR = "data-szh-adn-btn";
7 | export type Modifiers = {
8 | readonly [index: string]: boolean | string;
9 | };
10 | export type ClassNameProp = string | ((props: P) => string);
11 | export interface ElementProps ;
13 | 'data-testid'?: string | number;
14 | }
15 | export type ItemKey = Element | string | number;
16 | export type TransitionProp = boolean | {
17 | enter?: boolean;
18 | exit?: boolean;
19 | preEnter?: boolean;
20 | preExit?: boolean;
21 | };
22 | export interface ItemState {
23 | readonly state: TransitionState;
24 | readonly toggle: (toEnter?: boolean) => void;
25 | disabled?: boolean;
26 | }
27 | export interface ItemStateOptions {
28 | itemKey?: string | number;
29 | initialEntered?: boolean;
30 | disabled?: boolean;
31 | }
32 | export interface AccordionProviderOptions extends Omit
14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit,
15 | sed do eiusmod tempor incididunt ut labore et dolore magna
16 | aliqua.
17 |
73 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
74 | do eiusmod tempor incididunt ut labore et dolore magna
75 | aliqua.
76 | What is Lorem Ipsum?
13 | Lorem ipsum is a placeholder text commonly used to
14 | demonstrate the visual form of a document.
15 | {description}
14 | {/* Accessing item state by providing an `itemKey` */}
15 | {/* highlight-next-line */}
16 | Next item expanded: {getItemState('next').isEnter.toString()}
17 | {siteConfig.tagline}
68 |
102 | );
103 | }
104 | );
105 |
106 | WrappedItem.displayName = 'AccordionItem';
107 | const AccordionItem = withAccordionItem
92 |
100 | )}
101 |
97 | {getRenderNode(children, itemState)}
98 |
99 |
71 |
75 | ```
76 |
77 | ```html
78 |
79 |
72 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
73 |
74 |
80 |
84 | ```
85 |
86 | In case outer vertical margin of the children of an accordion item cannot be practically
87 | removed, add a vertical padding on the parent DOM element. It can be a small non-visible
88 | padding if you don't actual need one:
89 |
90 | ```html
91 |
81 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
82 |
83 |
92 |
96 | ```
97 |
98 | :::
99 |
--------------------------------------------------------------------------------
/website/docs/docs/controlling-state.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 5
3 | ---
4 |
5 | import CodeBlock from '@theme/CodeBlock';
6 | import { transformCodeBlock } from '@site/src/utils';
7 | import controllingStateSource from '!!raw-loader!@site/src/components/ControllingState';
8 | import useStateHookSource from '!!raw-loader!@site/src/components/UseStateHook';
9 | import ControllingState from '@site/src/components/ControllingState';
10 | import UseStateHook from '@site/src/components/UseStateHook';
11 |
12 | # Controlling state
13 |
14 | ## From above `Accordion`
15 |
16 | If you want to programmatically open or close accordion items from a component that is
17 | above `Accordion` in the React tree, you could use the `ControlledAccordion` and
18 | `useAccordionProvider`.
19 |
20 | The value returned from `useAccordionProvider` contains a `toggle` function which can be
21 | used to open or close any accordion items. This value should also be given to the
22 | `providerValue` prop of the `ControlledAccordion` component.
23 |
24 | The `toggle` function accepts two parameters. The first parameter is the `itemKey` prop of
25 | any accordion items to toggle. The second parameter specifies whether to open or close an
26 | item using a `boolean` value, or to toggle between the two states if the parameter is
27 | omitted.
28 |
29 |
93 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
94 |
95 |
20 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/website/src/components/CustomisingHeader/index.tsx:
--------------------------------------------------------------------------------
1 | import { Accordion, AccordionItem } from '../accordion';
2 | import styles from './styles.module.css';
3 |
4 | export default function Example() {
5 | return (
6 |
21 |
29 |
37 |
44 |
51 |
59 |
60 |
61 |
21 | {children}
22 |
23 |
44 |
79 | );
80 | };
81 |
82 | export default AccordionItem;
83 |
--------------------------------------------------------------------------------
/website/src/components/HeadlessUI/AccordionItemBare.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useAccordionItem,
3 | useAccordionItemEffect
4 | } from '@szhsin/react-accordion';
5 | import ChevronDown from '@site/static/img/chevron-down.svg';
6 | import styles from '../accordion/styles.module.css';
7 |
8 | const AccordionItem = ({
9 | header,
10 | children,
11 | itemKey,
12 | initialEntered,
13 | disabled
14 | }: {
15 | header: React.ReactNode;
16 | children: React.ReactNode;
17 | itemKey?: string | number;
18 | initialEntered?: boolean;
19 | disabled?: boolean;
20 | }) => {
21 | const { itemRef, state, toggle } =
22 | useAccordionItemEffect
45 |
53 |
54 | {isMounted && (
55 | // Add an extra `div` around the panel `div` for the
56 | // height transition to work as intended
57 | // highlight-next-line
58 |
66 |
77 | )}
78 |
72 | {children}
73 |
74 | {/* Closing tag of the extra `div` */}
75 | {/* highlight-next-line */}
76 |
36 | {/* Choose a heading level that is appropriate for the information
37 | architecture of your page */}
38 | {/* highlight-next-line */}
39 |
61 | );
62 | };
63 |
64 | export default AccordionItem;
65 |
--------------------------------------------------------------------------------
/website/src/components/HeadlessUI/AccordionItemMemo.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import {
3 | useAccordionItem,
4 | useHeightTransition,
5 | withAccordionItem
6 | } from '@szhsin/react-accordion';
7 | import type {
8 | ItemStateProps,
9 | ItemStateOptions
10 | } from '@szhsin/react-accordion';
11 | import ChevronDown from '@site/static/img/chevron-down.svg';
12 | import styles from '../accordion/styles.module.css';
13 |
14 | interface Props {
15 | header: React.ReactNode;
16 | children: React.ReactNode;
17 | }
18 |
19 | const MemoItem = memo(
20 | ({
21 | itemRef,
22 | state,
23 | toggle,
24 | disabled,
25 | header,
26 | children
27 | }: ItemStateProps
40 |
48 |
49 | {isMounted && (
50 |
57 | {children}
58 |
59 | )}
60 |
41 |
70 | );
71 | }
72 | );
73 |
74 | MemoItem.displayName = `AccordionItem`;
75 | const AccordionItem = withAccordionItem<
76 | ItemStateOptions & Props,
77 | HTMLDivElement
78 | >(MemoItem);
79 |
80 | export default AccordionItem;
81 |
--------------------------------------------------------------------------------
/website/src/components/HeadlessUI/Example.tsx:
--------------------------------------------------------------------------------
1 | import Accordion from './Accordion';
2 | import AccordionItem from './AccordionItem';
3 |
4 | export default function Example() {
5 | return (
6 |
42 |
50 |
51 | {isMounted && (
52 |
60 |
68 | )}
69 |
65 | {children}
66 |
67 |
59 |
62 | );
63 | }
64 |
65 | export default function HomepageFeatures(): JSX.Element {
66 | return (
67 | {title}
60 |
20 | {/* highlight-next-line */}
21 |
24 |
25 | {/* highlight-next-line */}
26 |
29 |
30 |
3 |
4 |
23 |
--------------------------------------------------------------------------------
/website/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | .heroBanner {
2 | padding: 4rem 0;
3 | text-align: center;
4 | position: relative;
5 | }
6 |
7 | .container {
8 | padding: 0;
9 | }
10 |
11 | [data-theme='dark'] .heroBanner {
12 | color: white;
13 | background-color: #205d3b;
14 | }
15 |
16 | @media screen and (max-width: 996px) {
17 | .heroBanner {
18 | padding: 2rem;
19 | }
20 | }
21 |
22 | @media screen and (max-width: 480px) {
23 | .heroBanner {
24 | padding: 2rem 1rem;
25 | }
26 | .heroTitle {
27 | font-size: 2rem;
28 | }
29 | }
30 |
31 | .buttons {
32 | display: flex;
33 | flex-direction: column;
34 | align-items: center;
35 | }
36 |
37 | .install {
38 | margin-bottom: 1.5rem;
39 | }
40 |
--------------------------------------------------------------------------------
/website/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import Link from '@docusaurus/Link';
3 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4 | import Layout from '@theme/Layout';
5 | import CodeBlock from '@theme/CodeBlock';
6 | import HomepageFeatures from '@site/src/components/HomepageFeatures';
7 | import styles from './index.module.css';
8 |
9 | export default function Home(): JSX.Element {
10 | const { siteConfig } = useDocusaurusContext();
11 | return (
12 |
5 |
19 |
20 |
21 |
22 |
6 |
10 |
11 |
12 |
18 |
13 |
14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
15 | eiusmod tempor incididunt ut labore et dolore magna aliqua.
16 |
17 |
15 |
31 |
16 | {siteConfig.title}
17 |
18 |
20 |
30 |