@basic-ui/core 0.0.60 → 0.0.61
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/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.d.ts.map +1 -1
- package/build/esm/Accordion/AccordionBody.js +6 -26
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.d.ts.map +1 -1
- package/build/esm/Accordion/AccordionHeader.js +21 -69
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.d.ts.map +1 -1
- package/build/esm/Accordion/AccordionItem.js +31 -18
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.d.ts +0 -8
- package/build/esm/Accordion/context.d.ts.map +1 -1
- package/build/esm/Accordion/context.js +0 -11
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/Accordion/scopeQuery.d.ts +1 -0
- package/build/esm/Accordion/scopeQuery.d.ts.map +1 -1
- package/build/esm/Accordion/scopeQuery.js +3 -0
- package/build/esm/Accordion/scopeQuery.js.map +1 -1
- package/build/esm/Collapsible/Collapsible.d.ts +13 -0
- package/build/esm/Collapsible/Collapsible.d.ts.map +1 -0
- package/build/esm/Collapsible/Collapsible.js +53 -0
- package/build/esm/Collapsible/Collapsible.js.map +1 -0
- package/build/esm/Collapsible/CollapsiblePanel.d.ts +10 -0
- package/build/esm/Collapsible/CollapsiblePanel.d.ts.map +1 -0
- package/build/esm/Collapsible/CollapsiblePanel.js +85 -0
- package/build/esm/Collapsible/CollapsiblePanel.js.map +1 -0
- package/build/esm/Collapsible/CollapsibleTrigger.d.ts +11 -0
- package/build/esm/Collapsible/CollapsibleTrigger.d.ts.map +1 -0
- package/build/esm/Collapsible/CollapsibleTrigger.js +51 -0
- package/build/esm/Collapsible/CollapsibleTrigger.js.map +1 -0
- package/build/esm/Collapsible/context.d.ts +16 -0
- package/build/esm/Collapsible/context.d.ts.map +1 -0
- package/build/esm/Collapsible/context.js +11 -0
- package/build/esm/Collapsible/context.js.map +1 -0
- package/build/esm/Collapsible/index.d.ts +4 -0
- package/build/esm/Collapsible/index.d.ts.map +1 -0
- package/build/esm/Collapsible/index.js +4 -0
- package/build/esm/Collapsible/index.js.map +1 -0
- package/build/esm/Menu/Menu.d.ts +3 -2
- package/build/esm/Menu/Menu.d.ts.map +1 -1
- package/build/esm/Menu/Menu.js +64 -4
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts.map +1 -1
- package/build/esm/Menu/MenuButton.js +85 -8
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts.map +1 -1
- package/build/esm/Menu/MenuItem.js +16 -4
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts.map +1 -1
- package/build/esm/Menu/MenuList.js +47 -12
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.d.ts.map +1 -1
- package/build/esm/Menu/MenuPopover.js +12 -1
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/MenuSubmenuTrigger.d.ts +8 -0
- package/build/esm/Menu/MenuSubmenuTrigger.d.ts.map +1 -0
- package/build/esm/Menu/MenuSubmenuTrigger.js +131 -0
- package/build/esm/Menu/MenuSubmenuTrigger.js.map +1 -0
- package/build/esm/Menu/context.d.ts +13 -3
- package/build/esm/Menu/context.d.ts.map +1 -1
- package/build/esm/Menu/context.js +1 -0
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Menu/index.d.ts +3 -0
- package/build/esm/Menu/index.d.ts.map +1 -1
- package/build/esm/Menu/index.js +2 -0
- package/build/esm/Menu/index.js.map +1 -1
- package/build/esm/Menu/scope.d.ts +1 -0
- package/build/esm/Menu/scope.d.ts.map +1 -1
- package/build/esm/Menu/scope.js +2 -1
- package/build/esm/Menu/scope.js.map +1 -1
- package/build/esm/MenuBar/MenuBar.d.ts +11 -0
- package/build/esm/MenuBar/MenuBar.d.ts.map +1 -0
- package/build/esm/MenuBar/MenuBar.js +153 -0
- package/build/esm/MenuBar/MenuBar.js.map +1 -0
- package/build/esm/MenuBar/context.d.ts +29 -0
- package/build/esm/MenuBar/context.d.ts.map +1 -0
- package/build/esm/MenuBar/context.js +7 -0
- package/build/esm/MenuBar/context.js.map +1 -0
- package/build/esm/MenuBar/index.d.ts +2 -0
- package/build/esm/MenuBar/index.d.ts.map +1 -0
- package/build/esm/MenuBar/index.js +2 -0
- package/build/esm/MenuBar/index.js.map +1 -0
- package/build/esm/Slider/Slider.d.ts +47 -1
- package/build/esm/Slider/Slider.d.ts.map +1 -1
- package/build/esm/Slider/Slider.js +91 -5
- package/build/esm/Slider/Slider.js.map +1 -1
- package/build/esm/ToggleGroup/ToggleGroup.d.ts +40 -0
- package/build/esm/ToggleGroup/ToggleGroup.d.ts.map +1 -0
- package/build/esm/ToggleGroup/ToggleGroup.js +113 -0
- package/build/esm/ToggleGroup/ToggleGroup.js.map +1 -0
- package/build/esm/ToggleGroup/ToggleGroupContext.d.ts +10 -0
- package/build/esm/ToggleGroup/ToggleGroupContext.d.ts.map +1 -0
- package/build/esm/ToggleGroup/ToggleGroupContext.js +6 -0
- package/build/esm/ToggleGroup/ToggleGroupContext.js.map +1 -0
- package/build/esm/ToggleGroup/index.d.ts +3 -0
- package/build/esm/ToggleGroup/index.d.ts.map +1 -0
- package/build/esm/ToggleGroup/index.js +3 -0
- package/build/esm/ToggleGroup/index.js.map +1 -0
- package/build/esm/Tree/Tree.d.ts +3 -0
- package/build/esm/Tree/Tree.d.ts.map +1 -0
- package/build/esm/Tree/Tree.js +730 -0
- package/build/esm/Tree/Tree.js.map +1 -0
- package/build/esm/Tree/TreeHeader.d.ts +3 -0
- package/build/esm/Tree/TreeHeader.d.ts.map +1 -0
- package/build/esm/Tree/TreeHeader.js +5 -0
- package/build/esm/Tree/TreeHeader.js.map +1 -0
- package/build/esm/Tree/TreeItem.d.ts +3 -0
- package/build/esm/Tree/TreeItem.d.ts.map +1 -0
- package/build/esm/Tree/TreeItem.js +5 -0
- package/build/esm/Tree/TreeItem.js.map +1 -0
- package/build/esm/Tree/TreeItemContent.d.ts +3 -0
- package/build/esm/Tree/TreeItemContent.d.ts.map +1 -0
- package/build/esm/Tree/TreeItemContent.js +69 -0
- package/build/esm/Tree/TreeItemContent.js.map +1 -0
- package/build/esm/Tree/TreeSection.d.ts +3 -0
- package/build/esm/Tree/TreeSection.d.ts.map +1 -0
- package/build/esm/Tree/TreeSection.js +5 -0
- package/build/esm/Tree/TreeSection.js.map +1 -0
- package/build/esm/Tree/collection.d.ts +18 -0
- package/build/esm/Tree/collection.d.ts.map +1 -0
- package/build/esm/Tree/collection.js +252 -0
- package/build/esm/Tree/collection.js.map +1 -0
- package/build/esm/Tree/context.d.ts +3 -0
- package/build/esm/Tree/context.d.ts.map +1 -0
- package/build/esm/Tree/context.js +3 -0
- package/build/esm/Tree/context.js.map +1 -0
- package/build/esm/Tree/index.d.ts +8 -0
- package/build/esm/Tree/index.d.ts.map +1 -0
- package/build/esm/Tree/index.js +7 -0
- package/build/esm/Tree/index.js.map +1 -0
- package/build/esm/Tree/types.d.ts +128 -0
- package/build/esm/Tree/types.d.ts.map +1 -0
- package/build/esm/Tree/types.js +2 -0
- package/build/esm/Tree/types.js.map +1 -0
- package/build/esm/hooks/index.d.ts +1 -0
- package/build/esm/hooks/index.d.ts.map +1 -1
- package/build/esm/hooks/index.js +1 -0
- package/build/esm/hooks/index.js.map +1 -1
- package/build/esm/hooks/useTransitionStatus.d.ts +7 -0
- package/build/esm/hooks/useTransitionStatus.d.ts.map +1 -0
- package/build/esm/hooks/useTransitionStatus.js +48 -0
- package/build/esm/hooks/useTransitionStatus.js.map +1 -0
- package/build/esm/index.d.ts +5 -0
- package/build/esm/index.d.ts.map +1 -1
- package/build/esm/index.js +5 -0
- package/build/esm/index.js.map +1 -1
- package/build/esm/toggle/Toggle.d.ts +28 -0
- package/build/esm/toggle/Toggle.d.ts.map +1 -0
- package/build/esm/toggle/Toggle.js +55 -0
- package/build/esm/toggle/Toggle.js.map +1 -0
- package/build/esm/toggle/index.d.ts +2 -0
- package/build/esm/toggle/index.d.ts.map +1 -0
- package/build/esm/toggle/index.js +2 -0
- package/build/esm/toggle/index.js.map +1 -0
- package/build/esm/utils/assign-ref.d.ts +3 -3
- package/build/esm/utils/assign-ref.d.ts.map +1 -1
- package/build/esm/utils/assign-ref.js +1 -1
- package/build/esm/utils/assign-ref.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -4
- package/src/Accordion/AccordionBody.tsx +6 -35
- package/src/Accordion/AccordionHeader.tsx +29 -103
- package/src/Accordion/AccordionItem.tsx +40 -29
- package/src/Accordion/context.ts +0 -18
- package/src/Accordion/scopeQuery.ts +4 -0
- package/src/Collapsible/Collapsible.story.tsx +153 -0
- package/src/Collapsible/Collapsible.tsx +79 -0
- package/src/Collapsible/CollapsiblePanel.tsx +103 -0
- package/src/Collapsible/CollapsibleTrigger.tsx +60 -0
- package/src/Collapsible/context.ts +28 -0
- package/src/Collapsible/index.ts +3 -0
- package/src/Menu/Menu.story.tsx +70 -1
- package/src/Menu/Menu.tsx +141 -65
- package/src/Menu/MenuButton.tsx +115 -9
- package/src/Menu/MenuItem.tsx +20 -3
- package/src/Menu/MenuList.tsx +50 -13
- package/src/Menu/MenuPopover.tsx +12 -2
- package/src/Menu/MenuSubmenuTrigger.tsx +167 -0
- package/src/Menu/context.ts +20 -10
- package/src/Menu/index.ts +3 -0
- package/src/Menu/scope.ts +4 -1
- package/src/Menu/styles.css +57 -22
- package/src/MenuBar/MenuBar.story.tsx +92 -0
- package/src/MenuBar/MenuBar.tsx +236 -0
- package/src/MenuBar/context.ts +46 -0
- package/src/MenuBar/index.ts +1 -0
- package/src/MenuBar/styles.css +78 -0
- package/src/Slider/Slider.story.tsx +1 -1
- package/src/Slider/Slider.tsx +145 -8
- package/src/Toggle/Toggle.story.tsx +42 -0
- package/src/Toggle/Toggle.tsx +95 -0
- package/src/Toggle/index.ts +1 -0
- package/src/Toggle/styles.css +39 -0
- package/src/ToggleGroup/ToggleGroup.story.tsx +86 -0
- package/src/ToggleGroup/ToggleGroup.tsx +185 -0
- package/src/ToggleGroup/ToggleGroupContext.ts +17 -0
- package/src/ToggleGroup/index.ts +2 -0
- package/src/ToggleGroup/styles.css +66 -0
- package/src/Tree/Tree.story.tsx +221 -0
- package/src/Tree/Tree.tsx +1081 -0
- package/src/Tree/TreeHeader.tsx +9 -0
- package/src/Tree/TreeItem.tsx +9 -0
- package/src/Tree/TreeItemContent.tsx +91 -0
- package/src/Tree/TreeSection.tsx +9 -0
- package/src/Tree/collection.tsx +371 -0
- package/src/Tree/context.ts +6 -0
- package/src/Tree/index.ts +7 -0
- package/src/Tree/styles.css +135 -0
- package/src/Tree/types.ts +161 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useTransitionStatus.ts +65 -0
- package/src/index.ts +5 -0
- package/src/utils/assign-ref.ts +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionBody.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,+GAazB,CAAC"}
|
|
@@ -1,36 +1,16 @@
|
|
|
1
|
-
import { forwardRef
|
|
2
|
-
import {
|
|
3
|
-
import { bodyScopeQuery as scopeQuery } from './scopeQuery';
|
|
4
|
-
import { assignMultipleRefs } from '../utils';
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { CollapsiblePanel } from '../Collapsible';
|
|
5
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
4
|
export const AccordionBody = /*#__PURE__*/forwardRef(function AccordionBody(props, forwardedRef) {
|
|
7
5
|
const {
|
|
8
6
|
as: Comp = 'div',
|
|
9
7
|
...otherProps
|
|
10
8
|
} = props;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const [index, setIndex] = useState();
|
|
15
|
-
if (!accordionItemContext) {
|
|
16
|
-
throw new Error('Missing parent <Accordion /> component');
|
|
17
|
-
}
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
if (accordionContext) {
|
|
20
|
-
const allHeaders = accordionContext.scope.current.queryAllNodes(scopeQuery);
|
|
21
|
-
const index = allHeaders.findIndex(e => e === ref.current);
|
|
22
|
-
setIndex(index);
|
|
23
|
-
}
|
|
24
|
-
}, [accordionContext]);
|
|
25
|
-
const expanded = Boolean(accordionItemContext.expanded || accordionContext && accordionContext.expandedIndex === index);
|
|
26
|
-
return /*#__PURE__*/_jsx(Comp, {
|
|
27
|
-
ref: assignMultipleRefs(forwardedRef, ref),
|
|
28
|
-
...otherProps,
|
|
29
|
-
"aria-labelledby": accordionItemContext.headerId,
|
|
30
|
-
id: accordionItemContext.bodyId,
|
|
31
|
-
role: "region",
|
|
9
|
+
return /*#__PURE__*/_jsx(CollapsiblePanel, {
|
|
10
|
+
as: Comp,
|
|
11
|
+
ref: forwardedRef,
|
|
32
12
|
"data-accordion-body": "",
|
|
33
|
-
|
|
13
|
+
...otherProps
|
|
34
14
|
});
|
|
35
15
|
});
|
|
36
16
|
//# sourceMappingURL=AccordionBody.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.js","names":["forwardRef","
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["forwardRef","CollapsiblePanel","jsx","_jsx","AccordionBody","props","forwardedRef","as","Comp","otherProps","ref"],"sources":["../../../src/Accordion/AccordionBody.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType } from 'react';\nimport { forwardRef } from 'react';\nimport { CollapsiblePanel } from '../Collapsible';\n\nexport interface AccordionBodyProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n}\n\nexport const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(\n function AccordionBody(props, forwardedRef) {\n const { as: Comp = 'div', ...otherProps } = props;\n\n return (\n <CollapsiblePanel\n as={Comp}\n ref={forwardedRef}\n data-accordion-body=\"\"\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":"AACA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,gBAAgB,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOlD,OAAO,MAAMC,aAAa,gBAAGJ,UAAU,CACrC,SAASI,aAAaA,CAACC,KAAK,EAAEC,YAAY,EAAE;EAC1C,MAAM;IAAEC,EAAE,EAAEC,IAAI,GAAG,KAAK;IAAE,GAAGC;EAAW,CAAC,GAAGJ,KAAK;EAEjD,oBACEF,IAAA,CAACF,gBAAgB;IACfM,EAAE,EAAEC,IAAK;IACTE,GAAG,EAAEJ,YAAa;IAClB,uBAAoB,EAAE;IAAA,GAClBG;EAAU,CACf,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAQ/F,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,iHA6E3B,CAAC"}
|
|
@@ -1,54 +1,20 @@
|
|
|
1
|
-
import { forwardRef
|
|
2
|
-
import { wrapEvent,
|
|
3
|
-
import { useAccordionContext
|
|
4
|
-
import {
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { wrapEvent, getCircularIndex } from '../utils';
|
|
3
|
+
import { useAccordionContext } from './context';
|
|
4
|
+
import { CollapsibleTrigger } from '../Collapsible';
|
|
5
|
+
import { headerScopeQuery } from './scopeQuery';
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
7
|
export const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(props, forwardedRef) {
|
|
7
8
|
const {
|
|
8
9
|
as: Comp = 'div',
|
|
9
10
|
onKeyDown,
|
|
10
|
-
onClick: onClickProp,
|
|
11
11
|
onFocus,
|
|
12
12
|
onBlur,
|
|
13
13
|
...otherProps
|
|
14
14
|
} = props;
|
|
15
15
|
const accordionContext = useAccordionContext();
|
|
16
|
-
const accordionItemContext = useAccordionItemContext();
|
|
17
|
-
const ref = useRef(null);
|
|
18
|
-
const [index, setIndex] = useState();
|
|
19
|
-
if (!accordionItemContext) {
|
|
20
|
-
throw new Error('Missing parent <Accordion /> component');
|
|
21
|
-
}
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (accordionContext) {
|
|
24
|
-
const allHeaders = accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
|
|
25
|
-
const index = allHeaders.findIndex(e => e === ref.current);
|
|
26
|
-
setIndex(index);
|
|
27
|
-
}
|
|
28
|
-
}, [accordionContext]);
|
|
29
|
-
const onClick = wrapEvent(onClickProp, e => {
|
|
30
|
-
let index = 0;
|
|
31
|
-
if (accordionItemContext.expanded) {
|
|
32
|
-
index = -1;
|
|
33
|
-
} else if (accordionContext) {
|
|
34
|
-
const allHeaders = accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
|
|
35
|
-
index = allHeaders.findIndex(e => e === ref.current);
|
|
36
|
-
if (index === accordionContext.expandedIndex) {
|
|
37
|
-
index = -1;
|
|
38
|
-
}
|
|
39
|
-
accordionContext.onChange && accordionContext.onChange(e, index);
|
|
40
|
-
}
|
|
41
|
-
accordionItemContext.onChange && accordionItemContext.onChange(e, index >= 0);
|
|
42
|
-
});
|
|
43
16
|
const handleKeyDown = e => {
|
|
44
17
|
switch (e.key) {
|
|
45
|
-
case 'Enter':
|
|
46
|
-
case ' ':
|
|
47
|
-
{
|
|
48
|
-
onClick(e);
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
break;
|
|
51
|
-
}
|
|
52
18
|
case 'ArrowUp':
|
|
53
19
|
case 'ArrowDown':
|
|
54
20
|
case 'Home':
|
|
@@ -57,18 +23,18 @@ export const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(
|
|
|
57
23
|
if (!accordionContext) {
|
|
58
24
|
return;
|
|
59
25
|
}
|
|
60
|
-
const allHeaders = accordionContext.scope.current.queryAllNodes(
|
|
61
|
-
e.preventDefault();
|
|
26
|
+
const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
|
|
62
27
|
if (allHeaders.length === 0) {
|
|
63
28
|
return;
|
|
64
29
|
}
|
|
65
|
-
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
let nextIndex = allHeaders.findIndex(el => el === e.currentTarget);
|
|
66
32
|
switch (e.key) {
|
|
67
33
|
case 'ArrowUp':
|
|
68
|
-
nextIndex
|
|
34
|
+
nextIndex -= 1;
|
|
69
35
|
break;
|
|
70
36
|
case 'ArrowDown':
|
|
71
|
-
nextIndex +=
|
|
37
|
+
nextIndex += 1;
|
|
72
38
|
break;
|
|
73
39
|
case 'Home':
|
|
74
40
|
nextIndex = 0;
|
|
@@ -77,51 +43,37 @@ export const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(
|
|
|
77
43
|
nextIndex = -1;
|
|
78
44
|
break;
|
|
79
45
|
}
|
|
80
|
-
|
|
81
|
-
// We're sure it will not be null, because we already checked for allHeaders.length > 0 above
|
|
82
46
|
nextIndex = getCircularIndex(nextIndex, allHeaders.length);
|
|
83
|
-
allHeaders[nextIndex]
|
|
47
|
+
allHeaders[nextIndex]?.focus();
|
|
84
48
|
break;
|
|
85
49
|
}
|
|
86
|
-
default:
|
|
87
|
-
return;
|
|
88
50
|
}
|
|
89
51
|
};
|
|
90
52
|
const handleFocus = () => {
|
|
91
|
-
if (accordionContext) {
|
|
92
|
-
|
|
93
|
-
// this is needed to avoid rerendering the parent and
|
|
94
|
-
// messing up with the internal count for children/parent count
|
|
95
|
-
accordionContext.setChildrenHeaderHasFocus(true);
|
|
96
|
-
}
|
|
53
|
+
if (accordionContext && !accordionContext.childrenHeaderHasFocus) {
|
|
54
|
+
accordionContext.setChildrenHeaderHasFocus(true);
|
|
97
55
|
}
|
|
98
56
|
};
|
|
99
57
|
const handleBlur = e => {
|
|
100
58
|
if (accordionContext) {
|
|
101
|
-
const allHeaders = accordionContext.scope.current.queryAllNodes(
|
|
59
|
+
const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
|
|
102
60
|
const newFocusIsHeader = allHeaders.findIndex(header => header === e.relatedTarget) >= 0;
|
|
103
|
-
|
|
104
|
-
// only remove focus flag if the focus went to some element
|
|
105
|
-
// that is not an accordion header
|
|
106
61
|
if (!newFocusIsHeader) {
|
|
107
62
|
accordionContext.setChildrenHeaderHasFocus(false);
|
|
108
63
|
}
|
|
109
64
|
}
|
|
110
65
|
};
|
|
111
|
-
const
|
|
112
|
-
return /*#__PURE__*/_jsx(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
id: accordionItemContext.headerId,
|
|
116
|
-
"aria-controls": accordionItemContext.bodyId,
|
|
117
|
-
role: "button",
|
|
66
|
+
const isNonButton = Comp !== 'button';
|
|
67
|
+
return /*#__PURE__*/_jsx(CollapsibleTrigger, {
|
|
68
|
+
as: Comp,
|
|
69
|
+
ref: forwardedRef,
|
|
118
70
|
"data-accordion-header": "",
|
|
119
|
-
|
|
71
|
+
role: isNonButton ? 'button' : undefined,
|
|
72
|
+
tabIndex: isNonButton ? 0 : undefined,
|
|
120
73
|
onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
|
|
121
74
|
onFocus: wrapEvent(onFocus, handleFocus),
|
|
122
75
|
onBlur: wrapEvent(onBlur, handleBlur),
|
|
123
|
-
|
|
124
|
-
"aria-expanded": String(expanded)
|
|
76
|
+
...otherProps
|
|
125
77
|
});
|
|
126
78
|
});
|
|
127
79
|
//# sourceMappingURL=AccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","names":["forwardRef","
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","names":["forwardRef","wrapEvent","getCircularIndex","useAccordionContext","CollapsibleTrigger","headerScopeQuery","jsx","_jsx","AccordionHeader","props","forwardedRef","as","Comp","onKeyDown","onFocus","onBlur","otherProps","accordionContext","handleKeyDown","e","key","allHeaders","scope","current","queryAllNodes","length","preventDefault","nextIndex","findIndex","el","currentTarget","focus","handleFocus","childrenHeaderHasFocus","setChildrenHeaderHasFocus","handleBlur","newFocusIsHeader","header","relatedTarget","isNonButton","ref","role","undefined","tabIndex"],"sources":["../../../src/Accordion/AccordionHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, ReactNode, KeyboardEvent, FocusEvent } from 'react';\nimport { forwardRef } from 'react';\n\nimport { wrapEvent, getCircularIndex } from '../utils';\nimport { useAccordionContext } from './context';\nimport { CollapsibleTrigger } from '../Collapsible';\nimport { headerScopeQuery } from './scopeQuery';\n\nexport interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(\n function AccordionHeader(props, forwardedRef) {\n const {\n as: Comp = 'div',\n onKeyDown,\n onFocus,\n onBlur,\n ...otherProps\n } = props;\n \n const accordionContext = useAccordionContext();\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n case 'Home':\n case 'End': {\n if (!accordionContext) {\n return;\n }\n const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);\n \n if (allHeaders.length === 0) {\n return;\n }\n\n e.preventDefault();\n let nextIndex = allHeaders.findIndex(el => el === e.currentTarget);\n \n switch (e.key) {\n case 'ArrowUp': nextIndex -= 1; break;\n case 'ArrowDown': nextIndex += 1; break;\n case 'Home': nextIndex = 0; break;\n case 'End': nextIndex = -1; break;\n }\n\n nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;\n allHeaders[nextIndex]?.focus();\n break;\n }\n }\n };\n\n const handleFocus = () => {\n if (accordionContext && !accordionContext.childrenHeaderHasFocus) {\n accordionContext.setChildrenHeaderHasFocus(true);\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLDivElement>) => {\n if (accordionContext) {\n const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);\n const newFocusIsHeader = allHeaders.findIndex(header => header === e.relatedTarget) >= 0;\n \n if (!newFocusIsHeader) {\n accordionContext.setChildrenHeaderHasFocus(false);\n }\n }\n };\n\n const isNonButton = Comp !== 'button';\n\n return (\n <CollapsibleTrigger\n as={Comp}\n ref={forwardedRef}\n data-accordion-header=\"\"\n role={isNonButton ? 'button' : undefined}\n tabIndex={isNonButton ? 0 : undefined}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n onFocus={wrapEvent(onFocus, handleFocus)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":"AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,gBAAgB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQhD,OAAO,MAAMC,eAAe,gBAAGR,UAAU,CACvC,SAASQ,eAAeA,CAACC,KAAK,EAAEC,YAAY,EAAE;EAC5C,MAAM;IACJC,EAAE,EAAEC,IAAI,GAAG,KAAK;IAChBC,SAAS;IACTC,OAAO;IACPC,MAAM;IACN,GAAGC;EACL,CAAC,GAAGP,KAAK;EAET,MAAMQ,gBAAgB,GAAGd,mBAAmB,CAAC,CAAC;EAE9C,MAAMe,aAAa,GAAIC,CAAgC,IAAK;IAC1D,QAAQA,CAAC,CAACC,GAAG;MACX,KAAK,SAAS;MACd,KAAK,WAAW;MAChB,KAAK,MAAM;MACX,KAAK,KAAK;QAAE;UACV,IAAI,CAACH,gBAAgB,EAAE;YACrB;UACF;UACA,MAAMI,UAAU,GAAGJ,gBAAgB,CAACK,KAAK,CAACC,OAAO,CAACC,aAAa,CAACnB,gBAAgB,CAAC;UAEjF,IAAIgB,UAAU,CAACI,MAAM,KAAK,CAAC,EAAE;YAC3B;UACF;UAEAN,CAAC,CAACO,cAAc,CAAC,CAAC;UAClB,IAAIC,SAAS,GAAGN,UAAU,CAACO,SAAS,CAACC,EAAE,IAAIA,EAAE,KAAKV,CAAC,CAACW,aAAa,CAAC;UAElE,QAAQX,CAAC,CAACC,GAAG;YACX,KAAK,SAAS;cAAEO,SAAS,IAAI,CAAC;cAAE;YAChC,KAAK,WAAW;cAAEA,SAAS,IAAI,CAAC;cAAE;YAClC,KAAK,MAAM;cAAEA,SAAS,GAAG,CAAC;cAAE;YAC5B,KAAK,KAAK;cAAEA,SAAS,GAAG,CAAC,CAAC;cAAE;UAC9B;UAEAA,SAAS,GAAGzB,gBAAgB,CAACyB,SAAS,EAAEN,UAAU,CAACI,MAAM,CAAE;UAC3DJ,UAAU,CAACM,SAAS,CAAC,EAAEI,KAAK,CAAC,CAAC;UAC9B;QACF;IACF;EACF,CAAC;EAED,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIf,gBAAgB,IAAI,CAACA,gBAAgB,CAACgB,sBAAsB,EAAE;MAChEhB,gBAAgB,CAACiB,yBAAyB,CAAC,IAAI,CAAC;IAClD;EACF,CAAC;EAED,MAAMC,UAAU,GAAIhB,CAA6B,IAAK;IACpD,IAAIF,gBAAgB,EAAE;MACpB,MAAMI,UAAU,GAAGJ,gBAAgB,CAACK,KAAK,CAACC,OAAO,CAACC,aAAa,CAACnB,gBAAgB,CAAC;MACjF,MAAM+B,gBAAgB,GAAGf,UAAU,CAACO,SAAS,CAACS,MAAM,IAAIA,MAAM,KAAKlB,CAAC,CAACmB,aAAa,CAAC,IAAI,CAAC;MAExF,IAAI,CAACF,gBAAgB,EAAE;QACrBnB,gBAAgB,CAACiB,yBAAyB,CAAC,KAAK,CAAC;MACnD;IACF;EACF,CAAC;EAED,MAAMK,WAAW,GAAG3B,IAAI,KAAK,QAAQ;EAErC,oBACEL,IAAA,CAACH,kBAAkB;IACjBO,EAAE,EAAEC,IAAK;IACT4B,GAAG,EAAE9B,YAAa;IAClB,yBAAsB,EAAE;IACxB+B,IAAI,EAAEF,WAAW,GAAG,QAAQ,GAAGG,SAAU;IACzCC,QAAQ,EAAEJ,WAAW,GAAG,CAAC,GAAGG,SAAU;IACtC7B,SAAS,EAAEZ,SAAS,CAACY,SAAS,EAAEK,aAAa,CAAE;IAC/CJ,OAAO,EAAEb,SAAS,CAACa,OAAO,EAAEkB,WAAW,CAAE;IACzCjB,MAAM,EAAEd,SAAS,CAACc,MAAM,EAAEoB,UAAU,CAAE;IAAA,GAClCnB;EAAU,CACf,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQ/F,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1F,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpG;AAED,eAAO,MAAM,aAAa,+GA4CzB,CAAC"}
|
|
@@ -1,28 +1,41 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { forwardRef, useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { useAccordionContext } from './context';
|
|
3
|
+
import { Collapsible } from '../Collapsible';
|
|
4
|
+
import { assignMultipleRefs } from '../utils';
|
|
5
|
+
import { itemScopeQuery } from './scopeQuery';
|
|
3
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
7
|
export const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(props, forwardedRef) {
|
|
5
8
|
const {
|
|
6
|
-
as: Comp =
|
|
7
|
-
|
|
9
|
+
as: Comp = 'div',
|
|
10
|
+
innerAs,
|
|
11
|
+
expanded: expandedProp = false,
|
|
8
12
|
onChange,
|
|
9
13
|
...otherProps
|
|
10
14
|
} = props;
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const accordionContext = useAccordionContext();
|
|
16
|
+
const ref = useRef(null);
|
|
17
|
+
const [index, setIndex] = useState();
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (accordionContext && ref.current) {
|
|
20
|
+
const allItems = accordionContext.scope.current.queryAllNodes(itemScopeQuery) || [];
|
|
21
|
+
setIndex(allItems.findIndex(e => e === ref.current));
|
|
22
|
+
}
|
|
23
|
+
}, [accordionContext]);
|
|
24
|
+
const isExpanded = Boolean(expandedProp || accordionContext && index !== undefined && accordionContext.expandedIndex === index);
|
|
25
|
+
const handleOpenChange = (e, isOpen) => {
|
|
26
|
+
onChange?.(e, isOpen);
|
|
27
|
+
if (accordionContext && index !== undefined) {
|
|
28
|
+
accordionContext.onChange?.(e, isOpen ? index : -1);
|
|
29
|
+
}
|
|
19
30
|
};
|
|
20
|
-
return /*#__PURE__*/_jsx(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
return /*#__PURE__*/_jsx(Collapsible, {
|
|
32
|
+
as: Comp,
|
|
33
|
+
innerAs: innerAs,
|
|
34
|
+
open: isExpanded,
|
|
35
|
+
onChange: handleOpenChange,
|
|
36
|
+
ref: assignMultipleRefs(forwardedRef, ref),
|
|
37
|
+
"data-accordion-item": "",
|
|
38
|
+
...otherProps
|
|
26
39
|
});
|
|
27
40
|
});
|
|
28
41
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","names":["
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","names":["forwardRef","useRef","useState","useEffect","useAccordionContext","Collapsible","assignMultipleRefs","itemScopeQuery","jsx","_jsx","AccordionItem","props","forwardedRef","as","Comp","innerAs","expanded","expandedProp","onChange","otherProps","accordionContext","ref","index","setIndex","current","allItems","scope","queryAllNodes","findIndex","e","isExpanded","Boolean","undefined","expandedIndex","handleOpenChange","isOpen","open"],"sources":["../../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, ReactNode, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useRef, useState, useEffect } from 'react';\n\nimport { useAccordionContext } from './context';\nimport { Collapsible } from '../Collapsible';\nimport { assignMultipleRefs } from '../utils';\nimport { itemScopeQuery } from './scopeQuery';\n\nexport interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n expanded?: boolean;\n onChange?: (e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>, value: boolean) => void;\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n function AccordionItem(props, forwardedRef) {\n const {\n as: Comp = 'div',\n innerAs,\n expanded: expandedProp = false,\n onChange,\n ...otherProps\n } = props;\n \n const accordionContext = useAccordionContext();\n const ref = useRef<HTMLDivElement | null>(null);\n const [index, setIndex] = useState<number | undefined>();\n\n useEffect(() => {\n if (accordionContext && ref.current) {\n const allItems = accordionContext.scope.current.queryAllNodes(itemScopeQuery) || [];\n setIndex(allItems.findIndex(e => e === ref.current));\n }\n }, [accordionContext]);\n\n const isExpanded = Boolean(\n expandedProp || (accordionContext && index !== undefined && accordionContext.expandedIndex === index)\n );\n\n const handleOpenChange = (e: any, isOpen: boolean) => {\n onChange?.(e, isOpen);\n if (accordionContext && index !== undefined) {\n accordionContext.onChange?.(e, isOpen ? index : -1);\n }\n };\n\n return (\n <Collapsible\n as={Comp}\n innerAs={innerAs}\n open={isExpanded}\n onChange={handleOpenChange}\n ref={assignMultipleRefs(forwardedRef, ref)}\n data-accordion-item=\"\"\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAE/D,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,cAAc,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU9C,OAAO,MAAMC,aAAa,gBAAGV,UAAU,CACrC,SAASU,aAAaA,CAACC,KAAK,EAAEC,YAAY,EAAE;EAC1C,MAAM;IACJC,EAAE,EAAEC,IAAI,GAAG,KAAK;IAChBC,OAAO;IACPC,QAAQ,EAAEC,YAAY,GAAG,KAAK;IAC9BC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAGR,KAAK;EAET,MAAMS,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,GAAG,GAAGpB,MAAM,CAAwB,IAAI,CAAC;EAC/C,MAAM,CAACqB,KAAK,EAAEC,QAAQ,CAAC,GAAGrB,QAAQ,CAAqB,CAAC;EAExDC,SAAS,CAAC,MAAM;IACd,IAAIiB,gBAAgB,IAAIC,GAAG,CAACG,OAAO,EAAE;MACnC,MAAMC,QAAQ,GAAGL,gBAAgB,CAACM,KAAK,CAACF,OAAO,CAACG,aAAa,CAACpB,cAAc,CAAC,IAAI,EAAE;MACnFgB,QAAQ,CAACE,QAAQ,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKR,GAAG,CAACG,OAAO,CAAC,CAAC;IACtD;EACF,CAAC,EAAE,CAACJ,gBAAgB,CAAC,CAAC;EAEtB,MAAMU,UAAU,GAAGC,OAAO,CACxBd,YAAY,IAAKG,gBAAgB,IAAIE,KAAK,KAAKU,SAAS,IAAIZ,gBAAgB,CAACa,aAAa,KAAKX,KACjG,CAAC;EAED,MAAMY,gBAAgB,GAAGA,CAACL,CAAM,EAAEM,MAAe,KAAK;IACpDjB,QAAQ,GAAGW,CAAC,EAAEM,MAAM,CAAC;IACrB,IAAIf,gBAAgB,IAAIE,KAAK,KAAKU,SAAS,EAAE;MAC3CZ,gBAAgB,CAACF,QAAQ,GAAGW,CAAC,EAAEM,MAAM,GAAGb,KAAK,GAAG,CAAC,CAAC,CAAC;IACrD;EACF,CAAC;EAED,oBACEb,IAAA,CAACJ,WAAW;IACVQ,EAAE,EAAEC,IAAK;IACTC,OAAO,EAAEA,OAAQ;IACjBqB,IAAI,EAAEN,UAAW;IACjBZ,QAAQ,EAAEgB,gBAAiB;IAC3Bb,GAAG,EAAEf,kBAAkB,CAACM,YAAY,EAAES,GAAG,CAAE;IAC3C,uBAAoB,EAAE;IAAA,GAClBF;EAAU,CACf,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|
|
@@ -9,12 +9,4 @@ export interface AccordionContextProps {
|
|
|
9
9
|
}
|
|
10
10
|
export declare const AccordionProvider: import("react").Provider<AccordionContextProps | null>;
|
|
11
11
|
export declare const useAccordionContext: () => AccordionContextProps | null;
|
|
12
|
-
export interface AccordionItemContextProps {
|
|
13
|
-
headerId: string | undefined;
|
|
14
|
-
bodyId: string | undefined;
|
|
15
|
-
expanded: boolean;
|
|
16
|
-
onChange?: (e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>, value: boolean) => void;
|
|
17
|
-
}
|
|
18
|
-
export declare const AccordionItemProvider: import("react").Provider<AccordionItemContextProps | null>;
|
|
19
|
-
export declare const useAccordionItemContext: () => AccordionItemContextProps | null;
|
|
20
12
|
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/Accordion/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/Accordion/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,WAAW,qBAAqB;IACpC,sBAAsB,EAAE,OAAO,CAAC;IAChC,yBAAyB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,EAC7D,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;CACX;AAGD,eAAO,MAAkB,iBAAiB,wDAAqB,CAAC;AAChE,eAAO,MAAM,mBAAmB,oCAAqC,CAAC"}
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
import { useContext, createContext } from 'react';
|
|
2
|
-
|
|
3
|
-
// AccordionGroup Component
|
|
4
|
-
|
|
5
2
|
const accordionContext = /*#__PURE__*/createContext(null);
|
|
6
3
|
export const {
|
|
7
4
|
Provider: AccordionProvider
|
|
8
5
|
} = accordionContext;
|
|
9
6
|
export const useAccordionContext = () => useContext(accordionContext);
|
|
10
|
-
|
|
11
|
-
// Accordion Component
|
|
12
|
-
|
|
13
|
-
const accordionItemContext = /*#__PURE__*/createContext(null);
|
|
14
|
-
export const {
|
|
15
|
-
Provider: AccordionItemProvider
|
|
16
|
-
} = accordionItemContext;
|
|
17
|
-
export const useAccordionItemContext = () => useContext(accordionItemContext);
|
|
18
7
|
//# sourceMappingURL=context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":["useContext","createContext","accordionContext","Provider","AccordionProvider","useAccordionContext"
|
|
1
|
+
{"version":3,"file":"context.js","names":["useContext","createContext","accordionContext","Provider","AccordionProvider","useAccordionContext"],"sources":["../../../src/Accordion/context.ts"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react';\nimport { useContext, createContext } from 'react';\n\nimport type { Scope } from '../hooks/useScope';\n\nexport interface AccordionContextProps {\n childrenHeaderHasFocus: boolean;\n setChildrenHeaderHasFocus: (value: boolean) => void;\n scope: Scope<HTMLElement>;\n expandedIndex: number;\n onChange?: (\n e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,\n index: number\n ) => void;\n}\n\nconst accordionContext = createContext<AccordionContextProps | null>(null);\nexport const { Provider: AccordionProvider } = accordionContext;\nexport const useAccordionContext = () => useContext(accordionContext);\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,aAAa,QAAQ,OAAO;AAejD,MAAMC,gBAAgB,gBAAGD,aAAa,CAA+B,IAAI,CAAC;AAC1E,OAAO,MAAM;EAAEE,QAAQ,EAAEC;AAAkB,CAAC,GAAGF,gBAAgB;AAC/D,OAAO,MAAMG,mBAAmB,GAAGA,CAAA,KAAML,UAAU,CAACE,gBAAgB,CAAC","ignoreList":[]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare function headerScopeQuery(type: string, props: Record<string, unknown>): boolean;
|
|
2
2
|
export declare function bodyScopeQuery(type: string, props: Record<string, unknown>): boolean;
|
|
3
|
+
export declare function itemScopeQuery(type: string, props: Record<string, unknown>): boolean;
|
|
3
4
|
//# sourceMappingURL=scopeQuery.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scopeQuery.d.ts","sourceRoot":"","sources":["../../../src/Accordion/scopeQuery.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAE5E;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAE1E"}
|
|
1
|
+
{"version":3,"file":"scopeQuery.d.ts","sourceRoot":"","sources":["../../../src/Accordion/scopeQuery.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAE5E;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAE1E;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAE1E"}
|
|
@@ -4,4 +4,7 @@ export function headerScopeQuery(type, props) {
|
|
|
4
4
|
export function bodyScopeQuery(type, props) {
|
|
5
5
|
return props['data-accordion-body'] === '';
|
|
6
6
|
}
|
|
7
|
+
export function itemScopeQuery(type, props) {
|
|
8
|
+
return props['data-accordion-item'] === '';
|
|
9
|
+
}
|
|
7
10
|
//# sourceMappingURL=scopeQuery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scopeQuery.js","names":["headerScopeQuery","type","props","bodyScopeQuery"],"sources":["../../../src/Accordion/scopeQuery.ts"],"sourcesContent":["export function headerScopeQuery(type: string, props: Record<string, unknown>) {\n return props['data-accordion-header'] === '';\n}\n\nexport function bodyScopeQuery(type: string, props: Record<string, unknown>) {\n return props['data-accordion-body'] === '';\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAgBA,CAACC,IAAY,EAAEC,KAA8B,EAAE;EAC7E,OAAOA,KAAK,CAAC,uBAAuB,CAAC,KAAK,EAAE;AAC9C;AAEA,OAAO,SAASC,cAAcA,CAACF,IAAY,EAAEC,KAA8B,EAAE;EAC3E,OAAOA,KAAK,CAAC,qBAAqB,CAAC,KAAK,EAAE;AAC5C","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"scopeQuery.js","names":["headerScopeQuery","type","props","bodyScopeQuery","itemScopeQuery"],"sources":["../../../src/Accordion/scopeQuery.ts"],"sourcesContent":["export function headerScopeQuery(type: string, props: Record<string, unknown>) {\n return props['data-accordion-header'] === '';\n}\n\nexport function bodyScopeQuery(type: string, props: Record<string, unknown>) {\n return props['data-accordion-body'] === '';\n}\n\nexport function itemScopeQuery(type: string, props: Record<string, unknown>) {\n return props['data-accordion-item'] === '';\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAgBA,CAACC,IAAY,EAAEC,KAA8B,EAAE;EAC7E,OAAOA,KAAK,CAAC,uBAAuB,CAAC,KAAK,EAAE;AAC9C;AAEA,OAAO,SAASC,cAAcA,CAACF,IAAY,EAAEC,KAA8B,EAAE;EAC3E,OAAOA,KAAK,CAAC,qBAAqB,CAAC,KAAK,EAAE;AAC5C;AAEA,OAAO,SAASE,cAAcA,CAACH,IAAY,EAAEC,KAA8B,EAAE;EAC3E,OAAOA,KAAK,CAAC,qBAAqB,CAAC,KAAK,EAAE;AAC5C","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ElementType, ReactNode, SyntheticEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, HTMLAttributes } from 'react';
|
|
2
|
+
export type CollapsibleTriggerEvent = ReactKeyboardEvent<any> | ReactMouseEvent<any> | Event | SyntheticEvent<any>;
|
|
3
|
+
export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
4
|
+
as?: ElementType<any>;
|
|
5
|
+
innerAs?: ElementType<any>;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
open?: boolean;
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
onChange?: (e: CollapsibleTriggerEvent, isOpen: boolean) => void;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLElement>>;
|
|
13
|
+
//# sourceMappingURL=Collapsible.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,IAAI,kBAAkB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKxJ,MAAM,MAAM,uBAAuB,GAC/B,kBAAkB,CAAC,GAAG,CAAC,GACvB,eAAe,CAAC,GAAG,CAAC,GACpB,KAAK,GACL,cAAc,CAAC,GAAG,CAAC,CAAC;AAExB,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACrF,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,0GAyDvB,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { forwardRef, Fragment, useState, useCallback } from 'react';
|
|
2
|
+
import { CollapsibleProvider } from './context';
|
|
3
|
+
import { useControlledState, useTransitionStatus } from '../hooks';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export const Collapsible = /*#__PURE__*/forwardRef(function Collapsible(props, forwardedRef) {
|
|
6
|
+
const {
|
|
7
|
+
as: Comp = 'div',
|
|
8
|
+
innerAs,
|
|
9
|
+
open: openProp,
|
|
10
|
+
defaultOpen = false,
|
|
11
|
+
onChange: onChangeProp,
|
|
12
|
+
disabled = false,
|
|
13
|
+
...otherProps
|
|
14
|
+
} = props;
|
|
15
|
+
const [openState, setOpenState] = useControlledState(openProp, onChangeProp, defaultOpen, setState => (e, isOpen) => {
|
|
16
|
+
setState(isOpen);
|
|
17
|
+
});
|
|
18
|
+
const [panelId, setPanelId] = useState();
|
|
19
|
+
const {
|
|
20
|
+
mounted,
|
|
21
|
+
setMounted,
|
|
22
|
+
transitionStatus
|
|
23
|
+
} = useTransitionStatus(openState, true, true);
|
|
24
|
+
const onChange = useCallback((e, isOpen) => {
|
|
25
|
+
if (!disabled) {
|
|
26
|
+
setOpenState(e, isOpen);
|
|
27
|
+
}
|
|
28
|
+
}, [setOpenState, disabled]);
|
|
29
|
+
const contextValue = {
|
|
30
|
+
open: openState,
|
|
31
|
+
mounted,
|
|
32
|
+
transitionStatus,
|
|
33
|
+
setMounted,
|
|
34
|
+
panelId,
|
|
35
|
+
disabled,
|
|
36
|
+
onChange,
|
|
37
|
+
setPanelId
|
|
38
|
+
};
|
|
39
|
+
return /*#__PURE__*/_jsx(CollapsibleProvider, {
|
|
40
|
+
value: contextValue,
|
|
41
|
+
children: /*#__PURE__*/_jsx(Comp, {
|
|
42
|
+
...(Comp !== Fragment ? {
|
|
43
|
+
as: innerAs,
|
|
44
|
+
ref: forwardedRef
|
|
45
|
+
} : {}),
|
|
46
|
+
"data-open": openState ? '' : undefined,
|
|
47
|
+
"data-disabled": disabled ? '' : undefined,
|
|
48
|
+
"data-state": openState ? 'open' : 'closed',
|
|
49
|
+
...otherProps
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=Collapsible.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.js","names":["forwardRef","Fragment","useState","useCallback","CollapsibleProvider","useControlledState","useTransitionStatus","jsx","_jsx","Collapsible","props","forwardedRef","as","Comp","innerAs","open","openProp","defaultOpen","onChange","onChangeProp","disabled","otherProps","openState","setOpenState","setState","e","isOpen","panelId","setPanelId","mounted","setMounted","transitionStatus","contextValue","value","children","ref","undefined"],"sources":["../../../src/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { ElementType, ReactNode, SyntheticEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, HTMLAttributes } from 'react';\nimport { forwardRef, Fragment, useState, useCallback } from 'react';\nimport { CollapsibleProvider } from './context';\nimport { useControlledState, useTransitionStatus } from '../hooks';\n\nexport type CollapsibleTriggerEvent =\n | ReactKeyboardEvent<any>\n | ReactMouseEvent<any>\n | Event\n | SyntheticEvent<any>;\n\nexport interface CollapsibleProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onChange?: (e: CollapsibleTriggerEvent, isOpen: boolean) => void;\n disabled?: boolean;\n}\n\nexport const Collapsible = forwardRef<HTMLElement, CollapsibleProps>(\n function Collapsible(props, forwardedRef) {\n const {\n as: Comp = 'div',\n innerAs,\n open: openProp,\n defaultOpen = false,\n onChange: onChangeProp,\n disabled = false,\n ...otherProps\n } = props;\n\n const [openState, setOpenState] = useControlledState(\n openProp,\n onChangeProp,\n defaultOpen,\n (setState) => (e, isOpen) => {\n setState(isOpen);\n }\n );\n\n const [panelId, setPanelId] = useState<string | undefined>();\n\n const { mounted, setMounted, transitionStatus } = useTransitionStatus(openState, true, true);\n\n const onChange = useCallback(\n (e: CollapsibleTriggerEvent, isOpen: boolean) => {\n if (!disabled) {\n setOpenState(e, isOpen);\n }\n },\n [setOpenState, disabled]\n );\n\n const contextValue = {\n open: openState,\n mounted,\n transitionStatus,\n setMounted,\n panelId,\n disabled,\n onChange,\n setPanelId,\n };\n\n return (\n <CollapsibleProvider value={contextValue}>\n <Comp\n {...(Comp !== Fragment ? { as: innerAs, ref: forwardedRef } : {})}\n data-open={openState ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n data-state={openState ? 'open' : 'closed'}\n {...otherProps}\n />\n </CollapsibleProvider>\n );\n }\n);\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AACnE,SAASC,mBAAmB,QAAQ,WAAW;AAC/C,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkBnE,OAAO,MAAMC,WAAW,gBAAGT,UAAU,CACnC,SAASS,WAAWA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACxC,MAAM;IACJC,EAAE,EAAEC,IAAI,GAAG,KAAK;IAChBC,OAAO;IACPC,IAAI,EAAEC,QAAQ;IACdC,WAAW,GAAG,KAAK;IACnBC,QAAQ,EAAEC,YAAY;IACtBC,QAAQ,GAAG,KAAK;IAChB,GAAGC;EACL,CAAC,GAAGX,KAAK;EAET,MAAM,CAACY,SAAS,EAAEC,YAAY,CAAC,GAAGlB,kBAAkB,CAClDW,QAAQ,EACRG,YAAY,EACZF,WAAW,EACVO,QAAQ,IAAK,CAACC,CAAC,EAAEC,MAAM,KAAK;IAC3BF,QAAQ,CAACE,MAAM,CAAC;EAClB,CACF,CAAC;EAED,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG1B,QAAQ,CAAqB,CAAC;EAE5D,MAAM;IAAE2B,OAAO;IAAEC,UAAU;IAAEC;EAAiB,CAAC,GAAGzB,mBAAmB,CAACgB,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC;EAE5F,MAAMJ,QAAQ,GAAGf,WAAW,CAC1B,CAACsB,CAA0B,EAAEC,MAAe,KAAK;IAC/C,IAAI,CAACN,QAAQ,EAAE;MACbG,YAAY,CAACE,CAAC,EAAEC,MAAM,CAAC;IACzB;EACF,CAAC,EACD,CAACH,YAAY,EAAEH,QAAQ,CACzB,CAAC;EAED,MAAMY,YAAY,GAAG;IACnBjB,IAAI,EAAEO,SAAS;IACfO,OAAO;IACPE,gBAAgB;IAChBD,UAAU;IACVH,OAAO;IACPP,QAAQ;IACRF,QAAQ;IACRU;EACF,CAAC;EAED,oBACEpB,IAAA,CAACJ,mBAAmB;IAAC6B,KAAK,EAAED,YAAa;IAAAE,QAAA,eACvC1B,IAAA,CAACK,IAAI;MAAA,IACEA,IAAI,KAAKZ,QAAQ,GAAG;QAAEW,EAAE,EAAEE,OAAO;QAAEqB,GAAG,EAAExB;MAAa,CAAC,GAAG,CAAC,CAAC;MAChE,aAAWW,SAAS,GAAG,EAAE,GAAGc,SAAU;MACtC,iBAAehB,QAAQ,GAAG,EAAE,GAAGgB,SAAU;MACzC,cAAYd,SAAS,GAAG,MAAM,GAAG,QAAS;MAAA,GACtCD;IAAU,CACf;EAAC,CACiB,CAAC;AAE1B,CACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ElementType, ReactNode, HTMLAttributes } from 'react';
|
|
2
|
+
export interface CollapsiblePanelProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
as?: ElementType<any>;
|
|
4
|
+
innerAs?: ElementType<any>;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
id?: string;
|
|
7
|
+
keepMounted?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const CollapsiblePanel: import("react").ForwardRefExoticComponent<CollapsiblePanelProps & import("react").RefAttributes<HTMLElement>>;
|
|
10
|
+
//# sourceMappingURL=CollapsiblePanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/Collapsible/CollapsiblePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKpE,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACxE,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,+GAyF5B,CAAC"}
|