@lobehub/ui 5.10.1 → 5.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -19,6 +19,7 @@ const Accordion = memo(({ children, className: userClassName, style: userStyle,
|
|
|
19
19
|
expandedKeysRef.current = expandedKeys;
|
|
20
20
|
const setExpandedKeysRef = useRef(setExpandedKeys);
|
|
21
21
|
setExpandedKeysRef.current = setExpandedKeys;
|
|
22
|
+
const isOpenKey = useCallback((key) => expandedKeysRef.current.includes(key), []);
|
|
22
23
|
const toggleExpand = useCallback((key) => {
|
|
23
24
|
const prev = expandedKeysRef.current;
|
|
24
25
|
let newKeys;
|
|
@@ -26,6 +27,14 @@ const Accordion = memo(({ children, className: userClassName, style: userStyle,
|
|
|
26
27
|
else newKeys = prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key];
|
|
27
28
|
setExpandedKeysRef.current(newKeys);
|
|
28
29
|
}, [accordion]);
|
|
30
|
+
const toggleExpandKeys = useCallback((keys, preferredKey) => {
|
|
31
|
+
const prev = expandedKeysRef.current;
|
|
32
|
+
const isOpen = keys.some((key) => prev.includes(key));
|
|
33
|
+
let newKeys;
|
|
34
|
+
if (accordion) newKeys = isOpen ? [] : [preferredKey];
|
|
35
|
+
else newKeys = isOpen ? prev.filter((key) => !keys.includes(key)) : [...prev, preferredKey];
|
|
36
|
+
setExpandedKeysRef.current(newKeys);
|
|
37
|
+
}, [accordion]);
|
|
29
38
|
const configValue = useMemo(() => ({
|
|
30
39
|
disableAnimation,
|
|
31
40
|
hideIndicator,
|
|
@@ -43,12 +52,19 @@ const Accordion = memo(({ children, className: userClassName, style: userStyle,
|
|
|
43
52
|
showDivider,
|
|
44
53
|
variant
|
|
45
54
|
]);
|
|
55
|
+
const hasExplicitExpandedKeys = expandedKeysProp !== void 0 || defaultExpandedKeys !== void 0;
|
|
46
56
|
const content = /* @__PURE__ */ jsx(Fragment$1, { children: validChildren.map((child, index) => {
|
|
47
|
-
const
|
|
57
|
+
const hasChildItemKey = child.props.itemKey !== void 0;
|
|
58
|
+
const childKey = hasChildItemKey ? child.props.itemKey : index;
|
|
59
|
+
const itemIsOpen = expandedKeys.includes(childKey);
|
|
48
60
|
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccordionItemStateProvider, {
|
|
49
|
-
|
|
61
|
+
expandedKeys: hasChildItemKey ? void 0 : expandedKeys,
|
|
62
|
+
isOpen: itemIsOpen,
|
|
63
|
+
isOpenKey,
|
|
50
64
|
itemKey: childKey,
|
|
65
|
+
preferProviderKeyForNestedItems: !hasExplicitExpandedKeys,
|
|
51
66
|
onToggleKey: toggleExpand,
|
|
67
|
+
onToggleKeys: toggleExpandKeys,
|
|
52
68
|
children: child
|
|
53
69
|
}), showDivider && index < validChildren.length - 1 && /* @__PURE__ */ jsx(Divider, { className: styles.divider })] }, childKey);
|
|
54
70
|
}) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionConfigContext, AccordionItemStateProvider } from './context';\nimport { styles } from './style';\nimport { type AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n ({\n children,\n className: userClassName,\n style: userStyle,\n accordion = false,\n defaultExpandedKeys,\n expandedKeys: expandedKeysProp,\n onExpandedChange,\n variant = 'borderless',\n gap,\n showDivider = false,\n disableAnimation = false,\n hideIndicator = false,\n indicatorPlacement = 'start',\n keepContentMounted = true,\n classNames,\n styles: customStyles,\n motionProps,\n ref,\n ...rest\n }) => {\n // Convert children to array and filter valid elements\n const validChildren = Children.toArray(children).filter(isValidElement);\n\n // Collect all item keys\n const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n onChange: onExpandedChange,\n value: expandedKeysProp,\n });\n\n // Hold expandedKeys and setExpandedKeys via refs so toggleExpand can stay\n // reference-stable. use-merge-value's setter is recreated on every render,\n // so depending on it would force AccordionItemStateProvider's memoized\n // value to change identity each render — even when nothing toggled —\n // re-rendering every nested AccordionItem via \"context changed\".\n const expandedKeysRef = useRef(expandedKeys);\n expandedKeysRef.current = expandedKeys;\n const setExpandedKeysRef = useRef(setExpandedKeys);\n setExpandedKeysRef.current = setExpandedKeys;\n\n const toggleExpand = useCallback(\n (key: Key) => {\n const prev = expandedKeysRef.current;\n let newKeys: Key[];\n\n if (accordion) {\n newKeys = prev.includes(key) ? [] : [key];\n } else {\n newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n }\n\n setExpandedKeysRef.current(newKeys);\n },\n [accordion],\n );\n\n const configValue = useMemo(\n () => ({\n disableAnimation,\n hideIndicator,\n indicatorPlacement,\n keepContentMounted,\n motionProps,\n showDivider,\n variant,\n }),\n [\n disableAnimation,\n hideIndicator,\n indicatorPlacement,\n keepContentMounted,\n motionProps,\n showDivider,\n variant,\n ],\n );\n\n const content = (\n <>\n {validChildren.map((child, index) => {\n const childKey = (child.props as any).itemKey
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionConfigContext, AccordionItemStateProvider } from './context';\nimport { styles } from './style';\nimport { type AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n ({\n children,\n className: userClassName,\n style: userStyle,\n accordion = false,\n defaultExpandedKeys,\n expandedKeys: expandedKeysProp,\n onExpandedChange,\n variant = 'borderless',\n gap,\n showDivider = false,\n disableAnimation = false,\n hideIndicator = false,\n indicatorPlacement = 'start',\n keepContentMounted = true,\n classNames,\n styles: customStyles,\n motionProps,\n ref,\n ...rest\n }) => {\n // Convert children to array and filter valid elements\n const validChildren = Children.toArray(children).filter(isValidElement);\n\n // Collect all item keys\n const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n onChange: onExpandedChange,\n value: expandedKeysProp,\n });\n\n // Hold expandedKeys and setExpandedKeys via refs so toggleExpand can stay\n // reference-stable. use-merge-value's setter is recreated on every render,\n // so depending on it would force AccordionItemStateProvider's memoized\n // value to change identity each render — even when nothing toggled —\n // re-rendering every nested AccordionItem via \"context changed\".\n const expandedKeysRef = useRef(expandedKeys);\n expandedKeysRef.current = expandedKeys;\n const setExpandedKeysRef = useRef(setExpandedKeys);\n setExpandedKeysRef.current = setExpandedKeys;\n\n const isOpenKey = useCallback((key: Key) => expandedKeysRef.current.includes(key), []);\n\n const toggleExpand = useCallback(\n (key: Key) => {\n const prev = expandedKeysRef.current;\n let newKeys: Key[];\n\n if (accordion) {\n newKeys = prev.includes(key) ? [] : [key];\n } else {\n newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n }\n\n setExpandedKeysRef.current(newKeys);\n },\n [accordion],\n );\n\n const toggleExpandKeys = useCallback(\n (keys: Key[], preferredKey: Key) => {\n const prev = expandedKeysRef.current;\n const isOpen = keys.some((key) => prev.includes(key));\n let newKeys: Key[];\n\n if (accordion) {\n newKeys = isOpen ? [] : [preferredKey];\n } else {\n newKeys = isOpen\n ? prev.filter((key: Key) => !keys.includes(key))\n : [...prev, preferredKey];\n }\n\n setExpandedKeysRef.current(newKeys);\n },\n [accordion],\n );\n\n const configValue = useMemo(\n () => ({\n disableAnimation,\n hideIndicator,\n indicatorPlacement,\n keepContentMounted,\n motionProps,\n showDivider,\n variant,\n }),\n [\n disableAnimation,\n hideIndicator,\n indicatorPlacement,\n keepContentMounted,\n motionProps,\n showDivider,\n variant,\n ],\n );\n\n const hasExplicitExpandedKeys =\n expandedKeysProp !== undefined || defaultExpandedKeys !== undefined;\n\n const content = (\n <>\n {validChildren.map((child, index) => {\n const hasChildItemKey = (child.props as any).itemKey !== undefined;\n const childKey = hasChildItemKey ? (child.props as any).itemKey : index;\n const itemIsOpen = expandedKeys.includes(childKey);\n return (\n <Fragment key={childKey}>\n <AccordionItemStateProvider\n expandedKeys={hasChildItemKey ? undefined : expandedKeys}\n isOpen={itemIsOpen}\n isOpenKey={isOpenKey}\n itemKey={childKey}\n preferProviderKeyForNestedItems={!hasExplicitExpandedKeys}\n onToggleKey={toggleExpand}\n onToggleKeys={toggleExpandKeys}\n >\n {child}\n </AccordionItemStateProvider>\n {showDivider && index < validChildren.length - 1 && (\n <Divider className={styles.divider} />\n )}\n </Fragment>\n );\n })}\n </>\n );\n\n return (\n <AccordionConfigContext value={configValue}>\n <div\n className={cx(styles.base, classNames?.base, userClassName)}\n ref={ref}\n style={{\n gap: gap,\n ...customStyles?.base,\n ...userStyle,\n }}\n {...rest}\n >\n {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n </div>\n </AccordionConfigContext>\n );\n },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CAEJ,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAOF,MAAM,kBAAkB,OAAO,aAAa;AAC5C,iBAAgB,UAAU;CAC1B,MAAM,qBAAqB,OAAO,gBAAgB;AAClD,oBAAmB,UAAU;CAE7B,MAAM,YAAY,aAAa,QAAa,gBAAgB,QAAQ,SAAS,IAAI,EAAE,EAAE,CAAC;CAEtF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO,gBAAgB;EAC7B,IAAI;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,qBAAmB,QAAQ,QAAQ;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,mBAAmB,aACtB,MAAa,iBAAsB;EAClC,MAAM,OAAO,gBAAgB;EAC7B,MAAM,SAAS,KAAK,MAAM,QAAQ,KAAK,SAAS,IAAI,CAAC;EACrD,IAAI;AAEJ,MAAI,UACF,WAAU,SAAS,EAAE,GAAG,CAAC,aAAa;MAEtC,WAAU,SACN,KAAK,QAAQ,QAAa,CAAC,KAAK,SAAS,IAAI,CAAC,GAC9C,CAAC,GAAG,MAAM,aAAa;AAG7B,qBAAmB,QAAQ,QAAQ;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,cAAc,eACX;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,0BACJ,qBAAqB,KAAA,KAAa,wBAAwB,KAAA;CAE5D,MAAM,UACJ,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EACnC,MAAM,kBAAmB,MAAM,MAAc,YAAY,KAAA;EACzD,MAAM,WAAW,kBAAmB,MAAM,MAAc,UAAU;EAClE,MAAM,aAAa,aAAa,SAAS,SAAS;AAClD,SACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,4BAAD;GACE,cAAc,kBAAkB,KAAA,IAAY;GAC5C,QAAQ;GACG;GACX,SAAS;GACT,iCAAiC,CAAC;GAClC,aAAa;GACb,cAAc;aAEb;GAC0B,CAAA,EAC5B,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,SAAW,CAAA,CAE/B,EAAA,EAfI,SAeJ;GAEb,EACD,CAAA;AAGL,QACE,oBAAC,wBAAD;EAAwB,OAAO;YAC7B,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,SAAsB,CAAA;GAC9D,CAAA;EACiB,CAAA;EAG9B;AAED,UAAU,cAAc"}
|
|
@@ -113,7 +113,7 @@ const AccordionItemContent = memo(({ disableAnimation, isOpen, keepContentMounte
|
|
|
113
113
|
});
|
|
114
114
|
});
|
|
115
115
|
AccordionItemContent.displayName = "AccordionItemContent";
|
|
116
|
-
const AccordionItem = memo(({ title, children, action, alwaysShowAction = false, disabled = false, allowExpand = true, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper, defaultExpand, expand, onExpandChange }) => {
|
|
116
|
+
const AccordionItem = memo(({ itemKey, title, children, action, alwaysShowAction = false, disabled = false, allowExpand = true, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper, defaultExpand, expand, onExpandChange }) => {
|
|
117
117
|
const itemStateContext = useAccordionItemState();
|
|
118
118
|
const configContext = useAccordionConfig();
|
|
119
119
|
const isStandalone = expand !== void 0 || defaultExpand !== void 0;
|
|
@@ -131,13 +131,23 @@ const AccordionItem = memo(({ title, children, action, alwaysShowAction = false,
|
|
|
131
131
|
useEffect(() => {
|
|
132
132
|
isInitialRenderRef.current = false;
|
|
133
133
|
}, []);
|
|
134
|
-
const
|
|
134
|
+
const isDirectContextItem = itemStateContext?.itemKey === itemKey;
|
|
135
|
+
let isOpen = false;
|
|
136
|
+
if (isStandalone) isOpen = isExpandedStandalone;
|
|
137
|
+
else if (itemStateContext) isOpen = isDirectContextItem ? itemStateContext.isOpen : itemStateContext.isOpen || itemStateContext.isOpenKey(itemKey);
|
|
135
138
|
const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;
|
|
136
139
|
const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? "start";
|
|
137
140
|
const keepContentMounted = contextKeepContentMounted ?? true;
|
|
138
141
|
const disableAnimation = contextDisableAnimation ?? false;
|
|
139
142
|
const variant = customVariant || contextVariant;
|
|
140
|
-
const contextOnToggle =
|
|
143
|
+
const contextOnToggle = useCallback(() => {
|
|
144
|
+
if (!itemStateContext) return;
|
|
145
|
+
if (itemStateContext.itemKey === itemKey) {
|
|
146
|
+
itemStateContext.onToggle();
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
itemStateContext.onToggleNestedKey(itemKey);
|
|
150
|
+
}, [itemStateContext, itemKey]);
|
|
141
151
|
const handleToggle = useCallback(() => {
|
|
142
152
|
if (!allowExpand) return;
|
|
143
153
|
if (!disabled) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.mjs","names":["Flexbox"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type KeyboardEvent,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionConfig, useAccordionItemState } from './context';\nimport { styles } from './style';\nimport { type AccordionItemProps } from './type';\n\ntype AccordionContentBaseProps = {\n children?: ReactNode;\n className?: string;\n contentInnerClassName: string;\n style?: CSSProperties;\n};\n\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\n isOpen: boolean;\n keepContentMounted: boolean;\n};\n\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\n\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\n contextMotionProps?: MotionDivProps;\n isOpen: boolean;\n skipInitialAnimation: boolean;\n};\n\ntype AccordionItemContentProps = AccordionContentBaseProps & {\n contextMotionProps?: MotionDivProps;\n disableAnimation: boolean;\n isOpen: boolean;\n keepContentMounted: boolean;\n skipInitialAnimation: boolean;\n};\n\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\n\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\n ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\n if (keepContentMounted) {\n return (\n <div\n className={className}\n role=\"region\"\n style={{\n display: isOpen ? 'block' : 'none',\n ...style,\n }}\n >\n <div className={contentInnerClassName}>{children}</div>\n </div>\n );\n }\n\n if (!isOpen) return null;\n\n return (\n <div className={className} role=\"region\" style={style}>\n <div className={contentInnerClassName}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionStaticContent.displayName = 'AccordionStaticContent';\n\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\n ({\n contextMotionProps,\n className,\n style,\n children,\n contentInnerClassName,\n isOpen,\n skipInitialAnimation,\n }) => {\n const Motion = useMotionComponent();\n\n const motionProps = useMemo(\n () => ({\n animate: 'enter',\n exit: 'exit',\n initial: skipInitialAnimation ? false : 'exit',\n variants: {\n enter: {\n height: 'auto',\n opacity: 1,\n transition: {\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n },\n },\n exit: {\n height: 0,\n opacity: 0,\n transition: {\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n },\n },\n },\n ...contextMotionProps,\n }),\n [contextMotionProps, skipInitialAnimation],\n );\n\n return (\n <AnimatePresence initial={false}>\n {isOpen ? (\n <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\n <div className={className} role=\"region\" style={style}>\n <div className={contentInnerClassName}>{children}</div>\n </div>\n </Motion.div>\n ) : null}\n </AnimatePresence>\n );\n },\n);\n\nAccordionMotionContent.displayName = 'AccordionMotionContent';\n\nconst AccordionItemContent = memo<AccordionItemContentProps>(\n ({\n disableAnimation,\n isOpen,\n keepContentMounted,\n className,\n style,\n children,\n contentInnerClassName,\n contextMotionProps,\n skipInitialAnimation,\n }) => {\n if (disableAnimation || !keepContentMounted) {\n return (\n <AccordionStaticContent\n className={className}\n contentInnerClassName={contentInnerClassName}\n isOpen={isOpen}\n keepContentMounted={keepContentMounted}\n style={style}\n >\n {children}\n </AccordionStaticContent>\n );\n }\n\n return (\n <AccordionMotionContent\n className={className}\n contentInnerClassName={contentInnerClassName}\n contextMotionProps={contextMotionProps}\n isOpen={isOpen}\n skipInitialAnimation={skipInitialAnimation}\n style={style}\n >\n {children}\n </AccordionMotionContent>\n );\n },\n);\n\nAccordionItemContent.displayName = 'AccordionItemContent';\n\nconst AccordionItem = memo<AccordionItemProps>(\n ({\n title,\n children,\n action,\n alwaysShowAction = false,\n disabled = false,\n allowExpand = true,\n hideIndicator: itemHideIndicator,\n indicatorPlacement: itemIndicatorPlacement,\n indicator: customIndicator,\n classNames,\n paddingInline = 16,\n paddingBlock = 8,\n padding,\n ref,\n variant: customVariant,\n styles: customStyles,\n headerWrapper,\n defaultExpand,\n expand,\n onExpandChange,\n }) => {\n // Per-item state context: only this item's provider re-emits when its\n // own isOpen flips, so siblings stay stable across toggles.\n const itemStateContext = useAccordionItemState();\n const configContext = useAccordionConfig();\n\n // Determine if using standalone mode (has expand or defaultExpand props)\n const isStandalone = expand !== undefined || defaultExpand !== undefined;\n\n // Standalone state management\n const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\n defaultExpand ?? false,\n {\n onChange: onExpandChange,\n value: expand,\n },\n );\n\n const contextHideIndicator = configContext?.hideIndicator;\n const contextIndicatorPlacement = configContext?.indicatorPlacement;\n const contextKeepContentMounted = configContext?.keepContentMounted;\n const contextDisableAnimation = configContext?.disableAnimation;\n const contextMotionProps = configContext?.motionProps;\n const contextVariant = configContext?.variant ?? 'borderless';\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n isInitialRenderRef.current = false;\n }, []);\n\n // Determine expanded state\n const isOpen = isStandalone ? isExpandedStandalone : (itemStateContext?.isOpen ?? false);\n\n // Determine other props with fallbacks\n const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n const keepContentMounted = contextKeepContentMounted ?? true;\n const disableAnimation = contextDisableAnimation ?? false;\n const variant = customVariant || contextVariant;\n\n const contextOnToggle = itemStateContext?.onToggle;\n\n const handleToggle = useCallback(() => {\n // If allowExpand is false, only allow controlled expansion via expand prop\n if (!allowExpand) return;\n\n if (!disabled) {\n if (isStandalone) {\n setIsExpandedStandalone(!isExpandedStandalone);\n } else if (contextOnToggle) {\n contextOnToggle();\n }\n }\n }, [\n allowExpand,\n disabled,\n isStandalone,\n setIsExpandedStandalone,\n isExpandedStandalone,\n contextOnToggle,\n ]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n // If allowExpand is false, disable keyboard toggle\n if (!allowExpand || disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ': {\n e.preventDefault();\n handleToggle();\n break;\n }\n }\n },\n [allowExpand, disabled, handleToggle],\n );\n\n const preventTitleTextSelection = useCallback((e: any) => {\n // Prevent browser from creating a selection range on double/multi click,\n // which can accidentally select the content region.\n if (e?.detail > 1) e.preventDefault();\n }, []);\n\n // Build indicator\n const indicator = useMemo(() => {\n if (!allowExpand || hideIndicatorFinal) return null;\n\n if (customIndicator) {\n if (typeof customIndicator === 'function') {\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n {customIndicator({ isDisabled: disabled, isOpen })}\n </span>\n );\n }\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n {customIndicator}\n </span>\n );\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n </span>\n );\n }, [\n allowExpand,\n hideIndicatorFinal,\n customIndicator,\n disabled,\n isOpen,\n classNames,\n customStyles,\n ]);\n\n const skipInitialAnimation = isInitialRenderRef.current && isOpen;\n\n const contentClassName = useMemo(\n () => cx('accordion-content', styles.content, classNames?.content),\n [classNames?.content],\n );\n\n const titleNode = useMemo(\n () =>\n typeof title === 'string' ? (\n <Text ellipsis className={classNames?.title} style={customStyles?.title}>\n {title}\n </Text>\n ) : (\n title\n ),\n [title, classNames?.title, customStyles?.title],\n );\n\n const actionNode = useMemo(\n () =>\n action && (\n <Flexbox\n horizontal\n align={'center'}\n flex={'none'}\n gap={4}\n style={customStyles?.action}\n className={cx(\n 'accordion-action',\n styles.action,\n alwaysShowAction && styles.actionVisible,\n classNames?.action,\n )}\n onClick={stopPropagation}\n >\n {action}\n </Flexbox>\n ),\n [action, alwaysShowAction, classNames?.action, customStyles?.action],\n );\n\n const headerElement = useMemo(() => {\n const header = (\n <Block\n horizontal\n className={cx('accordion-header', styles.header, classNames?.header)}\n clickable={!disabled && allowExpand}\n gap={4}\n justify={'space-between'}\n padding={padding}\n paddingBlock={paddingBlock}\n paddingInline={paddingInline}\n ref={ref}\n variant={customVariant || variant}\n style={{\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : allowExpand ? 'pointer' : 'default',\n opacity: disabled ? 0.5 : undefined,\n overflow: 'hidden',\n width: '100%',\n ...customStyles?.header,\n }}\n onClick={handleToggle}\n onKeyDown={handleKeyDown}\n >\n {indicatorPlacementFinal === 'start' ? (\n <>\n <Flexbox\n horizontal\n align={'center'}\n className={styles.titleWrapper}\n flex={1}\n gap={2}\n style={{\n overflow: 'hidden',\n }}\n onDoubleClick={preventTitleTextSelection}\n onMouseDown={preventTitleTextSelection}\n >\n {titleNode}\n {indicator}\n </Flexbox>\n <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n {actionNode}\n </Flexbox>\n </>\n ) : (\n <>\n <Flexbox\n horizontal\n align={'center'}\n className={styles.titleWrapper}\n flex={1}\n gap={2}\n style={{\n overflow: 'hidden',\n }}\n onDoubleClick={preventTitleTextSelection}\n onMouseDown={preventTitleTextSelection}\n >\n {titleNode}\n </Flexbox>\n <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n {actionNode}\n {indicator}\n </Flexbox>\n </>\n )}\n </Block>\n );\n if (headerWrapper) {\n return headerWrapper(header);\n }\n return header;\n }, [\n classNames?.header,\n disabled,\n allowExpand,\n padding,\n paddingBlock,\n paddingInline,\n ref,\n customVariant,\n variant,\n customStyles?.header,\n handleToggle,\n handleKeyDown,\n indicatorPlacementFinal,\n preventTitleTextSelection,\n titleNode,\n indicator,\n actionNode,\n headerWrapper,\n ]);\n\n return (\n <div\n className={cx('accordion-item', styles.item, classNames?.base)}\n style={customStyles?.base}\n >\n {headerElement}\n <AccordionItemContent\n className={contentClassName}\n contentInnerClassName={styles.contentInner}\n contextMotionProps={contextMotionProps}\n disableAnimation={!!disableAnimation}\n isOpen={isOpen}\n keepContentMounted={!!keepContentMounted}\n skipInitialAnimation={skipInitialAnimation}\n style={customStyles?.content}\n >\n {children}\n </AccordionItemContent>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AccordionItem.mjs","names":["Flexbox"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type KeyboardEvent,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionConfig, useAccordionItemState } from './context';\nimport { styles } from './style';\nimport { type AccordionItemProps } from './type';\n\ntype AccordionContentBaseProps = {\n children?: ReactNode;\n className?: string;\n contentInnerClassName: string;\n style?: CSSProperties;\n};\n\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\n isOpen: boolean;\n keepContentMounted: boolean;\n};\n\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\n\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\n contextMotionProps?: MotionDivProps;\n isOpen: boolean;\n skipInitialAnimation: boolean;\n};\n\ntype AccordionItemContentProps = AccordionContentBaseProps & {\n contextMotionProps?: MotionDivProps;\n disableAnimation: boolean;\n isOpen: boolean;\n keepContentMounted: boolean;\n skipInitialAnimation: boolean;\n};\n\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\n\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\n ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\n if (keepContentMounted) {\n return (\n <div\n className={className}\n role=\"region\"\n style={{\n display: isOpen ? 'block' : 'none',\n ...style,\n }}\n >\n <div className={contentInnerClassName}>{children}</div>\n </div>\n );\n }\n\n if (!isOpen) return null;\n\n return (\n <div className={className} role=\"region\" style={style}>\n <div className={contentInnerClassName}>{children}</div>\n </div>\n );\n },\n);\n\nAccordionStaticContent.displayName = 'AccordionStaticContent';\n\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\n ({\n contextMotionProps,\n className,\n style,\n children,\n contentInnerClassName,\n isOpen,\n skipInitialAnimation,\n }) => {\n const Motion = useMotionComponent();\n\n const motionProps = useMemo(\n () => ({\n animate: 'enter',\n exit: 'exit',\n initial: skipInitialAnimation ? false : 'exit',\n variants: {\n enter: {\n height: 'auto',\n opacity: 1,\n transition: {\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n },\n },\n exit: {\n height: 0,\n opacity: 0,\n transition: {\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n },\n },\n },\n ...contextMotionProps,\n }),\n [contextMotionProps, skipInitialAnimation],\n );\n\n return (\n <AnimatePresence initial={false}>\n {isOpen ? (\n <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\n <div className={className} role=\"region\" style={style}>\n <div className={contentInnerClassName}>{children}</div>\n </div>\n </Motion.div>\n ) : null}\n </AnimatePresence>\n );\n },\n);\n\nAccordionMotionContent.displayName = 'AccordionMotionContent';\n\nconst AccordionItemContent = memo<AccordionItemContentProps>(\n ({\n disableAnimation,\n isOpen,\n keepContentMounted,\n className,\n style,\n children,\n contentInnerClassName,\n contextMotionProps,\n skipInitialAnimation,\n }) => {\n if (disableAnimation || !keepContentMounted) {\n return (\n <AccordionStaticContent\n className={className}\n contentInnerClassName={contentInnerClassName}\n isOpen={isOpen}\n keepContentMounted={keepContentMounted}\n style={style}\n >\n {children}\n </AccordionStaticContent>\n );\n }\n\n return (\n <AccordionMotionContent\n className={className}\n contentInnerClassName={contentInnerClassName}\n contextMotionProps={contextMotionProps}\n isOpen={isOpen}\n skipInitialAnimation={skipInitialAnimation}\n style={style}\n >\n {children}\n </AccordionMotionContent>\n );\n },\n);\n\nAccordionItemContent.displayName = 'AccordionItemContent';\n\nconst AccordionItem = memo<AccordionItemProps>(\n ({\n itemKey,\n title,\n children,\n action,\n alwaysShowAction = false,\n disabled = false,\n allowExpand = true,\n hideIndicator: itemHideIndicator,\n indicatorPlacement: itemIndicatorPlacement,\n indicator: customIndicator,\n classNames,\n paddingInline = 16,\n paddingBlock = 8,\n padding,\n ref,\n variant: customVariant,\n styles: customStyles,\n headerWrapper,\n defaultExpand,\n expand,\n onExpandChange,\n }) => {\n // Per-item state context: only this item's provider re-emits when its\n // own isOpen flips, so siblings stay stable across toggles.\n const itemStateContext = useAccordionItemState();\n const configContext = useAccordionConfig();\n\n // Determine if using standalone mode (has expand or defaultExpand props)\n const isStandalone = expand !== undefined || defaultExpand !== undefined;\n\n // Standalone state management\n const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\n defaultExpand ?? false,\n {\n onChange: onExpandChange,\n value: expand,\n },\n );\n\n const contextHideIndicator = configContext?.hideIndicator;\n const contextIndicatorPlacement = configContext?.indicatorPlacement;\n const contextKeepContentMounted = configContext?.keepContentMounted;\n const contextDisableAnimation = configContext?.disableAnimation;\n const contextMotionProps = configContext?.motionProps;\n const contextVariant = configContext?.variant ?? 'borderless';\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n isInitialRenderRef.current = false;\n }, []);\n\n const isDirectContextItem = itemStateContext?.itemKey === itemKey;\n\n // Determine expanded state\n let isOpen = false;\n if (isStandalone) {\n isOpen = isExpandedStandalone;\n } else if (itemStateContext) {\n isOpen = isDirectContextItem\n ? itemStateContext.isOpen\n : itemStateContext.isOpen || itemStateContext.isOpenKey(itemKey);\n }\n\n // Determine other props with fallbacks\n const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n const keepContentMounted = contextKeepContentMounted ?? true;\n const disableAnimation = contextDisableAnimation ?? false;\n const variant = customVariant || contextVariant;\n\n const contextOnToggle = useCallback(() => {\n if (!itemStateContext) return;\n if (itemStateContext.itemKey === itemKey) {\n itemStateContext.onToggle();\n return;\n }\n itemStateContext.onToggleNestedKey(itemKey);\n }, [itemStateContext, itemKey]);\n\n const handleToggle = useCallback(() => {\n // If allowExpand is false, only allow controlled expansion via expand prop\n if (!allowExpand) return;\n\n if (!disabled) {\n if (isStandalone) {\n setIsExpandedStandalone(!isExpandedStandalone);\n } else if (contextOnToggle) {\n contextOnToggle();\n }\n }\n }, [\n allowExpand,\n disabled,\n isStandalone,\n setIsExpandedStandalone,\n isExpandedStandalone,\n contextOnToggle,\n ]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n // If allowExpand is false, disable keyboard toggle\n if (!allowExpand || disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ': {\n e.preventDefault();\n handleToggle();\n break;\n }\n }\n },\n [allowExpand, disabled, handleToggle],\n );\n\n const preventTitleTextSelection = useCallback((e: any) => {\n // Prevent browser from creating a selection range on double/multi click,\n // which can accidentally select the content region.\n if (e?.detail > 1) e.preventDefault();\n }, []);\n\n // Build indicator\n const indicator = useMemo(() => {\n if (!allowExpand || hideIndicatorFinal) return null;\n\n if (customIndicator) {\n if (typeof customIndicator === 'function') {\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n {customIndicator({ isDisabled: disabled, isOpen })}\n </span>\n );\n }\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n {customIndicator}\n </span>\n );\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cx(styles.indicator, classNames?.indicator)}\n style={customStyles?.indicator}\n >\n <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n </span>\n );\n }, [\n allowExpand,\n hideIndicatorFinal,\n customIndicator,\n disabled,\n isOpen,\n classNames,\n customStyles,\n ]);\n\n const skipInitialAnimation = isInitialRenderRef.current && isOpen;\n\n const contentClassName = useMemo(\n () => cx('accordion-content', styles.content, classNames?.content),\n [classNames?.content],\n );\n\n const titleNode = useMemo(\n () =>\n typeof title === 'string' ? (\n <Text ellipsis className={classNames?.title} style={customStyles?.title}>\n {title}\n </Text>\n ) : (\n title\n ),\n [title, classNames?.title, customStyles?.title],\n );\n\n const actionNode = useMemo(\n () =>\n action && (\n <Flexbox\n horizontal\n align={'center'}\n flex={'none'}\n gap={4}\n style={customStyles?.action}\n className={cx(\n 'accordion-action',\n styles.action,\n alwaysShowAction && styles.actionVisible,\n classNames?.action,\n )}\n onClick={stopPropagation}\n >\n {action}\n </Flexbox>\n ),\n [action, alwaysShowAction, classNames?.action, customStyles?.action],\n );\n\n const headerElement = useMemo(() => {\n const header = (\n <Block\n horizontal\n className={cx('accordion-header', styles.header, classNames?.header)}\n clickable={!disabled && allowExpand}\n gap={4}\n justify={'space-between'}\n padding={padding}\n paddingBlock={paddingBlock}\n paddingInline={paddingInline}\n ref={ref}\n variant={customVariant || variant}\n style={{\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : allowExpand ? 'pointer' : 'default',\n opacity: disabled ? 0.5 : undefined,\n overflow: 'hidden',\n width: '100%',\n ...customStyles?.header,\n }}\n onClick={handleToggle}\n onKeyDown={handleKeyDown}\n >\n {indicatorPlacementFinal === 'start' ? (\n <>\n <Flexbox\n horizontal\n align={'center'}\n className={styles.titleWrapper}\n flex={1}\n gap={2}\n style={{\n overflow: 'hidden',\n }}\n onDoubleClick={preventTitleTextSelection}\n onMouseDown={preventTitleTextSelection}\n >\n {titleNode}\n {indicator}\n </Flexbox>\n <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n {actionNode}\n </Flexbox>\n </>\n ) : (\n <>\n <Flexbox\n horizontal\n align={'center'}\n className={styles.titleWrapper}\n flex={1}\n gap={2}\n style={{\n overflow: 'hidden',\n }}\n onDoubleClick={preventTitleTextSelection}\n onMouseDown={preventTitleTextSelection}\n >\n {titleNode}\n </Flexbox>\n <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n {actionNode}\n {indicator}\n </Flexbox>\n </>\n )}\n </Block>\n );\n if (headerWrapper) {\n return headerWrapper(header);\n }\n return header;\n }, [\n classNames?.header,\n disabled,\n allowExpand,\n padding,\n paddingBlock,\n paddingInline,\n ref,\n customVariant,\n variant,\n customStyles?.header,\n handleToggle,\n handleKeyDown,\n indicatorPlacementFinal,\n preventTitleTextSelection,\n titleNode,\n indicator,\n actionNode,\n headerWrapper,\n ]);\n\n return (\n <div\n className={cx('accordion-item', styles.item, classNames?.base)}\n style={customStyles?.base}\n >\n {headerElement}\n <AccordionItemContent\n className={contentClassName}\n contentInnerClassName={styles.contentInner}\n contextMotionProps={contextMotionProps}\n disableAnimation={!!disableAnimation}\n isOpen={isOpen}\n keepContentMounted={!!keepContentMounted}\n skipInitialAnimation={skipInitialAnimation}\n style={customStyles?.content}\n >\n {children}\n </AccordionItemContent>\n </div>\n );\n },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}
|
package/es/Accordion/context.mjs
CHANGED
|
@@ -14,15 +14,23 @@ const AccordionItemStateContext = createContext(null);
|
|
|
14
14
|
const AccordionConfigContext = createContext(null);
|
|
15
15
|
const useAccordionItemState = () => use(AccordionItemStateContext);
|
|
16
16
|
const useAccordionConfig = () => use(AccordionConfigContext);
|
|
17
|
-
const AccordionItemStateProvider = memo(({ children, isOpen, itemKey, onToggleKey }) => {
|
|
17
|
+
const AccordionItemStateProvider = memo(({ children, expandedKeys, isOpenKey, isOpen, itemKey, onToggleKey, onToggleKeys, preferProviderKeyForNestedItems }) => {
|
|
18
18
|
return /* @__PURE__ */ jsx(AccordionItemStateContext, {
|
|
19
19
|
value: useMemo(() => ({
|
|
20
|
+
isOpenKey,
|
|
20
21
|
isOpen,
|
|
21
|
-
|
|
22
|
+
itemKey,
|
|
23
|
+
onToggle: () => onToggleKey(itemKey),
|
|
24
|
+
onToggleKey,
|
|
25
|
+
onToggleNestedKey: (key) => onToggleKeys([itemKey, key], preferProviderKeyForNestedItems ? itemKey : key)
|
|
22
26
|
}), [
|
|
27
|
+
expandedKeys,
|
|
28
|
+
isOpenKey,
|
|
23
29
|
isOpen,
|
|
24
30
|
itemKey,
|
|
25
|
-
onToggleKey
|
|
31
|
+
onToggleKey,
|
|
32
|
+
onToggleKeys,
|
|
33
|
+
preferProviderKeyForNestedItems
|
|
26
34
|
]),
|
|
27
35
|
children
|
|
28
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Accordion/context.tsx"],"sourcesContent":["import type { Key, ReactNode } from 'react';\nimport { createContext, memo, use, useMemo } from 'react';\n\ninterface AccordionItemStateValue {\n isOpen: boolean;\n onToggle: () => void;\n}\n\ninterface AccordionConfigValue {\n disableAnimation?: boolean;\n hideIndicator?: boolean;\n indicatorPlacement?: 'end' | 'start';\n keepContentMounted?: boolean;\n motionProps?: any;\n showDivider?: boolean;\n variant?: 'filled' | 'outlined' | 'borderless';\n}\n\n/**\n * Per-item context: each AccordionItem gets its own provider, so a toggle\n * only invalidates the value seen by that single item. Sibling items keep\n * the same context value identity and skip re-render.\n */\nexport const AccordionItemStateContext = createContext<AccordionItemStateValue | null>(null);\n\n/**\n * Static config shared by all items. Identity changes only when the user\n * changes config props on <Accordion>, which is rare.\n */\nexport const AccordionConfigContext = createContext<AccordionConfigValue | null>(null);\n\nexport const useAccordionItemState = () => use(AccordionItemStateContext);\nexport const useAccordionConfig = () => use(AccordionConfigContext);\n\ninterface AccordionItemStateProviderProps {\n children: ReactNode;\n isOpen: boolean;\n itemKey: Key;\n onToggleKey: (key: Key) => void;\n}\n\nexport const AccordionItemStateProvider = memo<AccordionItemStateProviderProps>(\n ({
|
|
1
|
+
{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Accordion/context.tsx"],"sourcesContent":["import type { Key, ReactNode } from 'react';\nimport { createContext, memo, use, useMemo } from 'react';\n\ninterface AccordionItemStateValue {\n isOpen: boolean;\n isOpenKey: (key: Key) => boolean;\n itemKey: Key;\n onToggle: () => void;\n onToggleKey: (key: Key) => void;\n onToggleNestedKey: (key: Key) => void;\n}\n\ninterface AccordionConfigValue {\n disableAnimation?: boolean;\n hideIndicator?: boolean;\n indicatorPlacement?: 'end' | 'start';\n keepContentMounted?: boolean;\n motionProps?: any;\n showDivider?: boolean;\n variant?: 'filled' | 'outlined' | 'borderless';\n}\n\n/**\n * Per-item context: each AccordionItem gets its own provider, so a toggle\n * only invalidates the value seen by that single item. Sibling items keep\n * the same context value identity and skip re-render.\n */\nexport const AccordionItemStateContext = createContext<AccordionItemStateValue | null>(null);\n\n/**\n * Static config shared by all items. Identity changes only when the user\n * changes config props on <Accordion>, which is rare.\n */\nexport const AccordionConfigContext = createContext<AccordionConfigValue | null>(null);\n\nexport const useAccordionItemState = () => use(AccordionItemStateContext);\nexport const useAccordionConfig = () => use(AccordionConfigContext);\n\ninterface AccordionItemStateProviderProps {\n children: ReactNode;\n // Used only to refresh the memoized context for wrapper children when\n // controlled expanded keys change; direct children use `isOpen`.\n expandedKeys?: Key[];\n isOpen: boolean;\n isOpenKey: (key: Key) => boolean;\n itemKey: Key;\n onToggleKey: (key: Key) => void;\n onToggleKeys: (keys: Key[], preferredKey: Key) => void;\n preferProviderKeyForNestedItems: boolean;\n}\n\nexport const AccordionItemStateProvider = memo<AccordionItemStateProviderProps>(\n ({\n children,\n expandedKeys,\n isOpenKey,\n isOpen,\n itemKey,\n onToggleKey,\n onToggleKeys,\n preferProviderKeyForNestedItems,\n }) => {\n const value = useMemo(\n () => ({\n isOpenKey,\n isOpen,\n itemKey,\n onToggle: () => onToggleKey(itemKey),\n onToggleKey,\n onToggleNestedKey: (key: Key) =>\n onToggleKeys([itemKey, key], preferProviderKeyForNestedItems ? itemKey : key),\n }),\n [\n expandedKeys,\n isOpenKey,\n isOpen,\n itemKey,\n onToggleKey,\n onToggleKeys,\n preferProviderKeyForNestedItems,\n ],\n );\n return <AccordionItemStateContext value={value}>{children}</AccordionItemStateContext>;\n },\n);\n\nAccordionItemStateProvider.displayName = 'AccordionItemStateProvider';\n"],"mappings":";;;;;;;;AA2BA,MAAa,4BAA4B,cAA8C,KAAK;;;;;AAM5F,MAAa,yBAAyB,cAA2C,KAAK;AAEtF,MAAa,8BAA8B,IAAI,0BAA0B;AACzE,MAAa,2BAA2B,IAAI,uBAAuB;AAenE,MAAa,6BAA6B,MACvC,EACC,UACA,cACA,WACA,QACA,SACA,aACA,cACA,sCACI;AAqBJ,QAAO,oBAAC,2BAAD;EAA2B,OApBpB,eACL;GACL;GACA;GACA;GACA,gBAAgB,YAAY,QAAQ;GACpC;GACA,oBAAoB,QAClB,aAAa,CAAC,SAAS,IAAI,EAAE,kCAAkC,UAAU,IAAI;GAChF,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAE2C;EAAG;EAAqC,CAAA;EAEzF;AAED,2BAA2B,cAAc"}
|