@brytdesigns/web-component-accordion 1.0.1 → 1.0.3

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.
Files changed (3) hide show
  1. package/dist/main/hooks/useAccordionItem.js +6 -1
  2. package/dist/main/hooks/useAccordionItem.js.map +1 -1
  3. package/package.json +3 -3
package/dist/main/hooks/useAccordionItem.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createContext, provide, consume } from 'component-register';
2
- import { splitProps, createEffect, batch, mergeProps, untrack } from 'solid-js';
2
+ import { splitProps, createEffect, batch, untrack, mergeProps } from 'solid-js';
3
3
  import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
4
4
  import { useAccordion } from './useAccordion.js';
5
5
 
@@ -33,6 +33,11 @@ function initializeAccordionItemContext(props) {
33
33
  setElementState("ariaExpanded", isActive);
34
34
  });
35
35
  });
36
+ createEffect(() => {
37
+ const index = untrack(() => stateProps.index);
38
+ const isExpanded = stateProps.isExpanded;
39
+ if (isExpanded) methods.item.update(index);
40
+ });
36
41
  function setActive(index) {
37
42
  methods.item.update(index);
38
43
  }
package/dist/main/hooks/useAccordionItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useAccordionItem.ts"],"names":[],"mappings":"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","file":"useAccordionItem.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { batch, createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\nimport { useAccordion } from \"./useAccordion.js\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isExpanded: boolean;\n index: number;\n ariaExpanded: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;\n\nfunction initializeAccordionItemContext(props: CreateContextOptions) {\n const [element, privateProps, stateProps] = splitProps(\n props,\n [\"root\"],\n [\"ariaExpanded\"],\n );\n const [context, methods] = useAccordion(element.root);\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | number | ((v: boolean | number) => boolean | number),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n let result: boolean | number = false;\n if (typeof currentValue === \"number\") {\n result = value(currentValue || 0);\n } else if (typeof currentValue === \"boolean\") {\n result = value(currentValue || false);\n }\n if (`${currentValue}` === `${value}`) return;\n element.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return element.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n createEffect(() => {\n const isActive = methods.item.isActive(props.index);\n batch(() => {\n setElementState(\"isExpanded\", isActive);\n setElementState(\"ariaExpanded\", isActive);\n });\n });\n\n function setActive(index: number) {\n methods.item.update(index);\n }\n\n return [\n mergeProps(stateProps, {\n get isAnimating() {\n return context.isAnimating;\n },\n }),\n { setElementState, setActive },\n ] as const;\n}\n\nconst AccordionItemContextState = createContext(initializeAccordionItemContext);\n\nexport const provideAccordionItemContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): AccordionItemContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(AccordionItemContextState, props, element);\n};\n\nexport const useAccordionItemContext = (context: AccordionItemContext) => {\n const [state, { setElementState, setActive }] = context;\n\n function expand() {\n const index = untrack(() => state.index);\n batch(() => {\n setActive(index);\n setElementState(\"isExpanded\", true);\n });\n }\n\n function collapse() {\n batch(() => {\n setActive(-1);\n setElementState(\"isExpanded\", false);\n });\n }\n\n function toggle() {\n setElementState(\"isExpanded\", (v) => {\n const index = untrack(() => state.index);\n const newValue = !v;\n if (newValue) setActive(index);\n else setActive(-1);\n return newValue;\n });\n }\n\n return [state, { expand, collapse, toggle }] as const;\n};\n\nexport const useAccordionItem = (element: HTMLElement & ICustomElement) => {\n const context: AccordionItemContext = consume(\n AccordionItemContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n );\n }\n\n return useAccordionItemContext(context);\n};\n\nexport const getAccordionItemContext = (element: Element) => {\n const context = getContextFromProvider<AccordionItemContext>(\n AccordionItemContextState,\n element,\n );\n return useAccordionItemContext(context);\n};\n"]}
1
+ {"version":3,"sources":["../../../src/hooks/useAccordionItem.ts"],"names":[],"mappings":"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","file":"useAccordionItem.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { batch, createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\nimport { useAccordion } from \"./useAccordion.js\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isExpanded: boolean;\n index: number;\n ariaExpanded: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;\n\nfunction initializeAccordionItemContext(props: CreateContextOptions) {\n const [element, privateProps, stateProps] = splitProps(\n props,\n [\"root\"],\n [\"ariaExpanded\"],\n );\n const [context, methods] = useAccordion(element.root);\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | number | ((v: boolean | number) => boolean | number),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n let result: boolean | number = false;\n if (typeof currentValue === \"number\") {\n result = value(currentValue || 0);\n } else if (typeof currentValue === \"boolean\") {\n result = value(currentValue || false);\n }\n if (`${currentValue}` === `${value}`) return;\n element.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return element.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n createEffect(() => {\n const isActive = methods.item.isActive(props.index);\n batch(() => {\n setElementState(\"isExpanded\", isActive);\n setElementState(\"ariaExpanded\", isActive);\n });\n });\n\n createEffect(() => {\n const index = untrack(() => stateProps.index);\n const isExpanded = stateProps.isExpanded;\n if (isExpanded) methods.item.update(index);\n });\n\n function setActive(index: number) {\n methods.item.update(index);\n }\n\n return [\n mergeProps(stateProps, {\n get isAnimating() {\n return context.isAnimating;\n },\n }),\n { setElementState, setActive },\n ] as const;\n}\n\nconst AccordionItemContextState = createContext(initializeAccordionItemContext);\n\nexport const provideAccordionItemContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): AccordionItemContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(AccordionItemContextState, props, element);\n};\n\nexport const useAccordionItemContext = (context: AccordionItemContext) => {\n const [state, { setElementState, setActive }] = context;\n\n function expand() {\n const index = untrack(() => state.index);\n batch(() => {\n setActive(index);\n setElementState(\"isExpanded\", true);\n });\n }\n\n function collapse() {\n batch(() => {\n setActive(-1);\n setElementState(\"isExpanded\", false);\n });\n }\n\n function toggle() {\n setElementState(\"isExpanded\", (v) => {\n const index = untrack(() => state.index);\n const newValue = !v;\n if (newValue) setActive(index);\n else setActive(-1);\n return newValue;\n });\n }\n\n return [state, { expand, collapse, toggle }] as const;\n};\n\nexport const useAccordionItem = (element: HTMLElement & ICustomElement) => {\n const context: AccordionItemContext = consume(\n AccordionItemContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n );\n }\n\n return useAccordionItemContext(context);\n};\n\nexport const getAccordionItemContext = (element: Element) => {\n const context = getContextFromProvider<AccordionItemContext>(\n AccordionItemContextState,\n element,\n );\n return useAccordionItemContext(context);\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-accordion",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Headless accordion web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -22,8 +22,8 @@
22
22
  "component-register": "^0.8.7",
23
23
  "motion": "^12.5.0",
24
24
  "solid-element": "^1.9.1",
25
- "solid-js": "^1.9.5",
26
- "@brytdesigns/web-component-utils": "0.1.8"
25
+ "solid-js": "^1.9.6",
26
+ "@brytdesigns/web-component-utils": "0.1.9"
27
27
  },
28
28
  "devDependencies": {
29
29
  "dts-bundle-generator": "^9.5.1",