@brytdesigns/web-component-collapsible 1.0.1 → 1.0.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.
- package/dist/esm/index.js +21 -16
- package/dist/esm/index.js.map +1 -1
- package/dist/main/components/collapsible-content.js +6 -0
- package/dist/main/components/collapsible-content.js.map +1 -1
- package/dist/main/hooks/useCollapsibleItem.js +15 -16
- package/dist/main/hooks/useCollapsibleItem.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createWithElementContext, customShadowlessElement, correctElementType, toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
|
|
2
2
|
import { animate } from 'motion';
|
|
3
|
-
import { splitProps,
|
|
3
|
+
import { splitProps, createEffect, on, batch, untrack, mergeProps, onCleanup } from 'solid-js';
|
|
4
4
|
import { controlsToPromise } from '@brytdesigns/web-component-core/animation';
|
|
5
5
|
import { createContext, provide, consume } from 'component-register';
|
|
6
6
|
|
|
@@ -38,6 +38,17 @@ function initializeCollapsibleItemContext(props) {
|
|
|
38
38
|
if (`${currentValue}` === `${value}`) return;
|
|
39
39
|
return element.root.setAttribute(toHyphenated(key), `${value}`);
|
|
40
40
|
}
|
|
41
|
+
createEffect(
|
|
42
|
+
on(
|
|
43
|
+
() => stateProps.isExpanded,
|
|
44
|
+
(isExpanded) => {
|
|
45
|
+
batch(() => {
|
|
46
|
+
setElementState("ariaExpanded", isExpanded);
|
|
47
|
+
setElementState("isAnimating", true);
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
);
|
|
41
52
|
return [stateProps, { setElementState }];
|
|
42
53
|
}
|
|
43
54
|
var CollapsibleItemContextState = createContext(
|
|
@@ -50,25 +61,13 @@ var provideCollapsibleItemContext = (initialState, element) => {
|
|
|
50
61
|
var useCollapsibleItemContext = (context) => {
|
|
51
62
|
const [state, { setElementState }] = context;
|
|
52
63
|
function expand() {
|
|
53
|
-
|
|
54
|
-
setElementState("isExpanded", true);
|
|
55
|
-
setElementState("ariaExpanded", true);
|
|
56
|
-
setElementState("isAnimating", true);
|
|
57
|
-
});
|
|
64
|
+
setElementState("isExpanded", true);
|
|
58
65
|
}
|
|
59
66
|
function collapse() {
|
|
60
|
-
|
|
61
|
-
setElementState("isExpanded", false);
|
|
62
|
-
setElementState("ariaExpanded", false);
|
|
63
|
-
setElementState("isAnimating", true);
|
|
64
|
-
});
|
|
67
|
+
setElementState("isExpanded", false);
|
|
65
68
|
}
|
|
66
69
|
function toggle() {
|
|
67
|
-
|
|
68
|
-
setElementState("isExpanded", (v) => !v);
|
|
69
|
-
setElementState("ariaExpanded", (v) => !v);
|
|
70
|
-
setElementState("isAnimating", true);
|
|
71
|
-
});
|
|
70
|
+
setElementState("isExpanded", (v) => !v);
|
|
72
71
|
}
|
|
73
72
|
function finish() {
|
|
74
73
|
setElementState("isAnimating", false);
|
|
@@ -186,6 +185,7 @@ var Component = (props, { element }) => {
|
|
|
186
185
|
() => state.isExpanded,
|
|
187
186
|
(isExpanded) => {
|
|
188
187
|
if (!isExpanded) {
|
|
188
|
+
isFirstRender = false;
|
|
189
189
|
const animation2 = collapse(element);
|
|
190
190
|
controlsToPromise(animation2).finally(methods.finish);
|
|
191
191
|
return onCleanup(() => animation2.complete());
|
|
@@ -193,6 +193,11 @@ var Component = (props, { element }) => {
|
|
|
193
193
|
if (isFirstRender) {
|
|
194
194
|
isFirstRender = false;
|
|
195
195
|
showElement(element);
|
|
196
|
+
Array.from(element.children).forEach((child) => {
|
|
197
|
+
child.style.opacity = "1";
|
|
198
|
+
});
|
|
199
|
+
element.style.maxHeight = `max-content`;
|
|
200
|
+
methods.finish();
|
|
196
201
|
return;
|
|
197
202
|
}
|
|
198
203
|
const animation = expand(element);
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/collapsible-content.ts","../../src/hooks/useCollapsibleItem.ts","../../src/components/collapsible-trigger.ts","../../src/components/collapsible-item.ts","../../src/index.ts"],"names":["element","animation","Component","Name","createEffect","onCleanup"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: none;\n opacity: 0;\n visibility: hidden;\n max-height: 0px;\n `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: block;\n opacity: 1;\n visibility: visible;\n `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n","import {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport { batch, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n\ttoHyphenated,\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisExpanded: boolean;\n\tariaExpanded: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype CollapsibleItemContext = ReturnType<\n\ttypeof initializeCollapsibleItemContext\n>;\n\nfunction initializeCollapsibleItemContext(props: CreateContextOptions) {\n\tconst [element, _, stateProps] = splitProps(\n\t\tprops,\n\t\t[\"root\"],\n\t\t[\"ariaExpanded\"],\n\t);\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | number | ((v: boolean | number) => boolean | number),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tlet result: boolean | number = false;\n\t\t\tif (typeof currentValue === \"number\") {\n\t\t\t\tresult = value(currentValue || 0);\n\t\t\t} else if (typeof currentValue === \"boolean\") {\n\t\t\t\tresult = value(currentValue || false);\n\t\t\t}\n\t\t\tif (`${currentValue}` === `${value}`) return;\n\t\t\telement.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn element.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\treturn [stateProps, { setElementState }] as const;\n}\n\nconst CollapsibleItemContextState = createContext(\n\tinitializeCollapsibleItemContext,\n);\n\nexport const provideCollapsibleItemContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): CollapsibleItemContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(CollapsibleItemContextState, props, element);\n};\n\nexport const useCollapsibleItemContext = (context: CollapsibleItemContext) => {\n\tconst [state, { setElementState }] = context;\n\n\tfunction expand() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", true);\n\t\t\tsetElementState(\"ariaExpanded\", true);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction collapse() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", false);\n\t\t\tsetElementState(\"ariaExpanded\", false);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction toggle() {\n\t\tbatch(() => {\n\t\t\tsetElementState(\"isExpanded\", (v) => !v);\n\t\t\tsetElementState(\"ariaExpanded\", (v) => !v);\n\t\t\tsetElementState(\"isAnimating\", true);\n\t\t});\n\t}\n\n\tfunction finish() {\n\t\tsetElementState(\"isAnimating\", false);\n\t}\n\n\treturn [state, { expand, collapse, toggle, finish }] as const;\n};\n\nexport const useCollapsibleItem = (element: HTMLElement & ICustomElement) => {\n\tconst context: CollapsibleItemContext = consume(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n\t\t);\n\t}\n\n\treturn useCollapsibleItemContext(context);\n};\n\nexport const withCollapsibleItemElementContext = createWithElementContext<\n\ttypeof CollapsibleItemContextState,\n\tCollapsibleItemContext\n>(CollapsibleItemContextState);\n\nexport const getCollapsibleItemContext = (element: Element) => {\n\tconst context = getContextFromProvider<CollapsibleItemContext>(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\treturn useCollapsibleItemContext(context);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tpreventDefault: boolean;\n};\n\nexport const Name = `collapsible-trigger`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tcreateEffect(() => {\n\t\tconst isAnimating = state.isAnimating;\n\t\tif (isAnimating) return;\n\n\t\tconst controller = new AbortController(),\n\t\t\tpreventDefault = props.preventDefault;\n\n\t\telement.addEventListener(\n\t\t\t\"click\",\n\t\t\t(event) => {\n\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\tmethods.toggle();\n\t\t\t},\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\treturn onCleanup(() => {\n\t\t\tcontroller.abort();\n\t\t});\n\t});\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { provideCollapsibleItemContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\tisExpanded: boolean;\n\tisAnimating: boolean;\n\tariaExpanded: boolean;\n};\n\nexport const Name = `collapsible-item`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tprovideCollapsibleItemContext(props, element);\n};\n","import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tCollapsibleItem,\n\tCollapsibleContent,\n\tCollapsibleTrigger,\n} from \"./components/index.js\";\n\nexport type CollapsibleItemProps = CollapsibleContent.Props;\nexport type CollapsibleTriggerProps = CollapsibleTrigger.Props;\nexport type CollapsibleContentProps = CollapsibleContent.Props;\n\ncustomShadowlessElement(\n\tCollapsibleItem.Name,\n\t{ index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },\n\tcorrectElementType(CollapsibleItem.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleTrigger.Name,\n\t{ preventDefault: true },\n\tcorrectElementType(CollapsibleTrigger.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleContent.Name,\n\t{ shouldScrollIntoView: false },\n\tcorrectElementType(CollapsibleContent.Component),\n);\n\nexport * from \"./hooks/index.js\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/collapsible-content.ts","../../src/hooks/useCollapsibleItem.ts","../../src/components/collapsible-trigger.ts","../../src/components/collapsible-item.ts","../../src/index.ts"],"names":["element","createEffect","on","animation","Component","Name","onCleanup"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: none;\n opacity: 0;\n visibility: hidden;\n max-height: 0px;\n `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: block;\n opacity: 1;\n visibility: visible;\n `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\t\t\t\tchild.style.opacity = \"1\";\n\t\t\t\t\t});\n\t\t\t\t\telement.style.maxHeight = `max-content`;\n\t\t\t\t\tmethods.finish();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n","import {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport {\n\tbatch,\n\tcreateEffect,\n\tmergeProps,\n\ton,\n\tsplitProps,\n\tuntrack,\n} from \"solid-js\";\nimport {\n\ttoHyphenated,\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisExpanded: boolean;\n\tariaExpanded: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype CollapsibleItemContext = ReturnType<\n\ttypeof initializeCollapsibleItemContext\n>;\n\nfunction initializeCollapsibleItemContext(props: CreateContextOptions) {\n\tconst [element, _, stateProps] = splitProps(\n\t\tprops,\n\t\t[\"root\"],\n\t\t[\"ariaExpanded\"],\n\t);\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | number | ((v: boolean | number) => boolean | number),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tlet result: boolean | number = false;\n\t\t\tif (typeof currentValue === \"number\") {\n\t\t\t\tresult = value(currentValue || 0);\n\t\t\t} else if (typeof currentValue === \"boolean\") {\n\t\t\t\tresult = value(currentValue || false);\n\t\t\t}\n\t\t\tif (`${currentValue}` === `${value}`) return;\n\t\t\telement.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn element.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => stateProps.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tbatch(() => {\n\t\t\t\t\tsetElementState(\"ariaExpanded\", isExpanded);\n\t\t\t\t\tsetElementState(\"isAnimating\", true);\n\t\t\t\t});\n\t\t\t},\n\t\t),\n\t);\n\n\treturn [stateProps, { setElementState }] as const;\n}\n\nconst CollapsibleItemContextState = createContext(\n\tinitializeCollapsibleItemContext,\n);\n\nexport const provideCollapsibleItemContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): CollapsibleItemContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(CollapsibleItemContextState, props, element);\n};\n\nexport const useCollapsibleItemContext = (context: CollapsibleItemContext) => {\n\tconst [state, { setElementState }] = context;\n\n\tfunction expand() {\n\t\tsetElementState(\"isExpanded\", true);\n\t}\n\n\tfunction collapse() {\n\t\tsetElementState(\"isExpanded\", false);\n\t}\n\n\tfunction toggle() {\n\t\tsetElementState(\"isExpanded\", (v) => !v);\n\t}\n\n\tfunction finish() {\n\t\tsetElementState(\"isAnimating\", false);\n\t}\n\n\treturn [state, { expand, collapse, toggle, finish }] as const;\n};\n\nexport const useCollapsibleItem = (element: HTMLElement & ICustomElement) => {\n\tconst context: CollapsibleItemContext = consume(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n\t\t);\n\t}\n\n\treturn useCollapsibleItemContext(context);\n};\n\nexport const withCollapsibleItemElementContext = createWithElementContext<\n\ttypeof CollapsibleItemContextState,\n\tCollapsibleItemContext\n>(CollapsibleItemContextState);\n\nexport const getCollapsibleItemContext = (element: Element) => {\n\tconst context = getContextFromProvider<CollapsibleItemContext>(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\treturn useCollapsibleItemContext(context);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tpreventDefault: boolean;\n};\n\nexport const Name = `collapsible-trigger`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tcreateEffect(() => {\n\t\tconst isAnimating = state.isAnimating;\n\t\tif (isAnimating) return;\n\n\t\tconst controller = new AbortController(),\n\t\t\tpreventDefault = props.preventDefault;\n\n\t\telement.addEventListener(\n\t\t\t\"click\",\n\t\t\t(event) => {\n\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\tmethods.toggle();\n\t\t\t},\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\treturn onCleanup(() => {\n\t\t\tcontroller.abort();\n\t\t});\n\t});\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { provideCollapsibleItemContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\tisExpanded: boolean;\n\tisAnimating: boolean;\n\tariaExpanded: boolean;\n};\n\nexport const Name = `collapsible-item`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tprovideCollapsibleItemContext(props, element);\n};\n","import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tCollapsibleItem,\n\tCollapsibleContent,\n\tCollapsibleTrigger,\n} from \"./components/index.js\";\n\nexport type CollapsibleItemProps = CollapsibleContent.Props;\nexport type CollapsibleTriggerProps = CollapsibleTrigger.Props;\nexport type CollapsibleContentProps = CollapsibleContent.Props;\n\ncustomShadowlessElement(\n\tCollapsibleItem.Name,\n\t{ index: 0, isExpanded: false, ariaExpanded: false, isAnimating: false },\n\tcorrectElementType(CollapsibleItem.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleTrigger.Name,\n\t{ preventDefault: true },\n\tcorrectElementType(CollapsibleTrigger.Component),\n);\n\ncustomShadowlessElement(\n\tCollapsibleContent.Name,\n\t{ shouldScrollIntoView: false },\n\tcorrectElementType(CollapsibleContent.Component),\n);\n\nexport * from \"./hooks/index.js\";\n"]}
|
|
@@ -92,6 +92,7 @@ const Component = (props, { element }) => {
|
|
|
92
92
|
() => state.isExpanded,
|
|
93
93
|
(isExpanded) => {
|
|
94
94
|
if (!isExpanded) {
|
|
95
|
+
isFirstRender = false;
|
|
95
96
|
const animation2 = collapse(element);
|
|
96
97
|
controlsToPromise(animation2).finally(methods.finish);
|
|
97
98
|
return onCleanup(() => animation2.complete());
|
|
@@ -99,6 +100,11 @@ const Component = (props, { element }) => {
|
|
|
99
100
|
if (isFirstRender) {
|
|
100
101
|
isFirstRender = false;
|
|
101
102
|
showElement(element);
|
|
103
|
+
Array.from(element.children).forEach((child) => {
|
|
104
|
+
child.style.opacity = "1";
|
|
105
|
+
});
|
|
106
|
+
element.style.maxHeight = `max-content`;
|
|
107
|
+
methods.finish();
|
|
102
108
|
return;
|
|
103
109
|
}
|
|
104
110
|
const animation = expand(element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/collapsible-content.ts"],"names":["element","animation"],"mappings":"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","file":"collapsible-content.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: none;\n opacity: 0;\n visibility: hidden;\n max-height: 0px;\n `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: block;\n opacity: 1;\n visibility: visible;\n `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/collapsible-content.ts"],"names":["element","animation"],"mappings":"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","file":"collapsible-content.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate } from \"motion\";\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\n\nimport { controlsToPromise } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useCollapsibleItem } from \"../hooks/index.js\";\n\nexport type Props = {\n\tshouldScrollIntoView: boolean;\n};\n\nconst hideElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: none;\n opacity: 0;\n visibility: hidden;\n max-height: 0px;\n `;\n\telement.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n\telement.style.cssText = `\n display: block;\n opacity: 1;\n visibility: visible;\n `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n\tel.style.maxHeight = \"max-content\";\n\tconst height = el.getBoundingClientRect().height;\n\tel.style.maxHeight = `${0}`;\n\treturn height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingTop);\n\treturn paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n\tconst paddingY = parseInt(getComputedStyle(element).paddingBottom);\n\treturn paddingY;\n};\n\nexport const Name = `collapsible-content`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [state, methods] = useCollapsibleItem(element);\n\n\tlet isFirstRender = true;\n\n\tconst expand = (element: ICustomElement & HTMLElement) => {\n\t\tshowElement(element);\n\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"1\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [\"0px\", `${height}px`],\n\t\t\t\tpaddingTop: [\"0px\", `${pt}px`],\n\t\t\t\tpaddingBottom: [\"0px\", `${pb}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => {\n\t\t\telement.style.maxHeight = \"max-content\";\n\t\t\t//@ts-ignore\n\t\t\telement.style.overflow = null;\n\t\t\tif (props.shouldScrollIntoView)\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tblock: \"start\",\n\t\t\t\t\tinline: \"nearest\",\n\t\t\t\t});\n\t\t\treturn;\n\t\t});\n\n\t\treturn animation;\n\t};\n\n\tconst collapse = (element: ICustomElement & HTMLElement) => {\n\t\tconst height = getHeight(element),\n\t\t\tpt = getPaddingTop(element),\n\t\t\tpb = getPaddingBottom(element);\n\n\t\telement.style.overflow = \"hidden\";\n\n\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\tchild.style.opacity = \"0\";\n\t\t});\n\n\t\tconst animation = animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\tmaxHeight: [`${height}px`, \"0px\"],\n\t\t\t\tpaddingTop: [`${pt}px`, \"0px\"],\n\t\t\t\tpaddingBottom: [`${pb}px`, \"0px\"],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: 0.35,\n\t\t\t},\n\t\t);\n\n\t\tanimation.then(() => hideElement(element));\n\n\t\treturn animation;\n\t};\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => state.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tif (!isExpanded) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tconst animation = collapse(element);\n\t\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t\t}\n\n\t\t\t\tif (isFirstRender) {\n\t\t\t\t\tisFirstRender = false;\n\t\t\t\t\tshowElement(element);\n\t\t\t\t\t(Array.from(element.children) as HTMLElement[]).forEach((child) => {\n\t\t\t\t\t\tchild.style.opacity = \"1\";\n\t\t\t\t\t});\n\t\t\t\t\telement.style.maxHeight = `max-content`;\n\t\t\t\t\tmethods.finish();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst animation = expand(element);\n\t\t\t\tcontrolsToPromise(animation).finally(methods.finish);\n\t\t\t\treturn onCleanup(() => animation.complete());\n\t\t\t},\n\t\t),\n\t);\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createContext, provide, consume } from 'component-register';
|
|
2
|
-
import { splitProps,
|
|
2
|
+
import { splitProps, createEffect, on, batch, untrack, mergeProps } from 'solid-js';
|
|
3
3
|
import { createWithElementContext, toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
|
|
4
4
|
|
|
5
5
|
function initializeCollapsibleItemContext(props) {
|
|
@@ -24,6 +24,17 @@ function initializeCollapsibleItemContext(props) {
|
|
|
24
24
|
if (`${currentValue}` === `${value}`) return;
|
|
25
25
|
return element.root.setAttribute(toHyphenated(key), `${value}`);
|
|
26
26
|
}
|
|
27
|
+
createEffect(
|
|
28
|
+
on(
|
|
29
|
+
() => stateProps.isExpanded,
|
|
30
|
+
(isExpanded) => {
|
|
31
|
+
batch(() => {
|
|
32
|
+
setElementState("ariaExpanded", isExpanded);
|
|
33
|
+
setElementState("isAnimating", true);
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
);
|
|
27
38
|
return [stateProps, { setElementState }];
|
|
28
39
|
}
|
|
29
40
|
const CollapsibleItemContextState = createContext(
|
|
@@ -36,25 +47,13 @@ const provideCollapsibleItemContext = (initialState, element) => {
|
|
|
36
47
|
const useCollapsibleItemContext = (context) => {
|
|
37
48
|
const [state, { setElementState }] = context;
|
|
38
49
|
function expand() {
|
|
39
|
-
|
|
40
|
-
setElementState("isExpanded", true);
|
|
41
|
-
setElementState("ariaExpanded", true);
|
|
42
|
-
setElementState("isAnimating", true);
|
|
43
|
-
});
|
|
50
|
+
setElementState("isExpanded", true);
|
|
44
51
|
}
|
|
45
52
|
function collapse() {
|
|
46
|
-
|
|
47
|
-
setElementState("isExpanded", false);
|
|
48
|
-
setElementState("ariaExpanded", false);
|
|
49
|
-
setElementState("isAnimating", true);
|
|
50
|
-
});
|
|
53
|
+
setElementState("isExpanded", false);
|
|
51
54
|
}
|
|
52
55
|
function toggle() {
|
|
53
|
-
|
|
54
|
-
setElementState("isExpanded", (v) => !v);
|
|
55
|
-
setElementState("ariaExpanded", (v) => !v);
|
|
56
|
-
setElementState("isAnimating", true);
|
|
57
|
-
});
|
|
56
|
+
setElementState("isExpanded", (v) => !v);
|
|
58
57
|
}
|
|
59
58
|
function finish() {
|
|
60
59
|
setElementState("isAnimating", false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useCollapsibleItem.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useCollapsibleItem.ts"],"names":[],"mappings":"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","file":"useCollapsibleItem.js","sourcesContent":["import {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport {\n\tbatch,\n\tcreateEffect,\n\tmergeProps,\n\ton,\n\tsplitProps,\n\tuntrack,\n} from \"solid-js\";\nimport {\n\ttoHyphenated,\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisExpanded: boolean;\n\tariaExpanded: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype CollapsibleItemContext = ReturnType<\n\ttypeof initializeCollapsibleItemContext\n>;\n\nfunction initializeCollapsibleItemContext(props: CreateContextOptions) {\n\tconst [element, _, stateProps] = splitProps(\n\t\tprops,\n\t\t[\"root\"],\n\t\t[\"ariaExpanded\"],\n\t);\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | number | ((v: boolean | number) => boolean | number),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tlet result: boolean | number = false;\n\t\t\tif (typeof currentValue === \"number\") {\n\t\t\t\tresult = value(currentValue || 0);\n\t\t\t} else if (typeof currentValue === \"boolean\") {\n\t\t\t\tresult = value(currentValue || false);\n\t\t\t}\n\t\t\tif (`${currentValue}` === `${value}`) return;\n\t\t\telement.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn element.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\tcreateEffect(\n\t\ton(\n\t\t\t() => stateProps.isExpanded,\n\t\t\t(isExpanded) => {\n\t\t\t\tbatch(() => {\n\t\t\t\t\tsetElementState(\"ariaExpanded\", isExpanded);\n\t\t\t\t\tsetElementState(\"isAnimating\", true);\n\t\t\t\t});\n\t\t\t},\n\t\t),\n\t);\n\n\treturn [stateProps, { setElementState }] as const;\n}\n\nconst CollapsibleItemContextState = createContext(\n\tinitializeCollapsibleItemContext,\n);\n\nexport const provideCollapsibleItemContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): CollapsibleItemContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(CollapsibleItemContextState, props, element);\n};\n\nexport const useCollapsibleItemContext = (context: CollapsibleItemContext) => {\n\tconst [state, { setElementState }] = context;\n\n\tfunction expand() {\n\t\tsetElementState(\"isExpanded\", true);\n\t}\n\n\tfunction collapse() {\n\t\tsetElementState(\"isExpanded\", false);\n\t}\n\n\tfunction toggle() {\n\t\tsetElementState(\"isExpanded\", (v) => !v);\n\t}\n\n\tfunction finish() {\n\t\tsetElementState(\"isAnimating\", false);\n\t}\n\n\treturn [state, { expand, collapse, toggle, finish }] as const;\n};\n\nexport const useCollapsibleItem = (element: HTMLElement & ICustomElement) => {\n\tconst context: CollapsibleItemContext = consume(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n\t\t);\n\t}\n\n\treturn useCollapsibleItemContext(context);\n};\n\nexport const withCollapsibleItemElementContext = createWithElementContext<\n\ttypeof CollapsibleItemContextState,\n\tCollapsibleItemContext\n>(CollapsibleItemContextState);\n\nexport const getCollapsibleItemContext = (element: Element) => {\n\tconst context = getContextFromProvider<CollapsibleItemContext>(\n\t\tCollapsibleItemContextState,\n\t\telement,\n\t);\n\treturn useCollapsibleItemContext(context);\n};\n"]}
|