@react-spectrum/accordion 3.0.0-nightly.5038 → 3.0.0
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/Accordion.main.js +63 -52
- package/dist/Accordion.main.js.map +1 -1
- package/dist/Accordion.mjs +62 -54
- package/dist/Accordion.module.js +62 -54
- package/dist/Accordion.module.js.map +1 -1
- package/dist/accordion_vars_css.main.js +21 -12
- package/dist/accordion_vars_css.main.js.map +1 -1
- package/dist/accordion_vars_css.mjs +21 -12
- package/dist/accordion_vars_css.module.js +21 -12
- package/dist/accordion_vars_css.module.js.map +1 -1
- package/dist/import.mjs +2 -4
- package/dist/main.js +3 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -4
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +45 -6
- package/dist/types.d.ts.map +1 -1
- package/dist/vars.27b25cc7.css +135 -0
- package/dist/vars.27b25cc7.css.map +1 -0
- package/package.json +11 -17
- package/src/Accordion.tsx +106 -57
- package/src/index.ts +2 -3
- package/dist/vars.1361683a.css +0 -144
- package/dist/vars.1361683a.css.map +0 -1
package/dist/Accordion.main.js
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.27b25cc7.css");
|
|
2
2
|
var $5ab573b23bc1d039$exports = require("./accordion_vars_css.main.js");
|
|
3
|
+
var $52xbb$reactariacomponents = require("react-aria-components");
|
|
3
4
|
var $52xbb$spectrumiconsuiChevronLeftMedium = require("@spectrum-icons/ui/ChevronLeftMedium");
|
|
4
5
|
var $52xbb$spectrumiconsuiChevronRightMedium = require("@spectrum-icons/ui/ChevronRightMedium");
|
|
5
6
|
var $52xbb$reactspectrumutils = require("@react-spectrum/utils");
|
|
6
|
-
var $52xbb$reactariautils = require("@react-aria/utils");
|
|
7
|
-
var $52xbb$reactariafocus = require("@react-aria/focus");
|
|
8
7
|
var $52xbb$react = require("react");
|
|
9
|
-
var $52xbb$reactstatelytree = require("@react-stately/tree");
|
|
10
|
-
var $52xbb$reactariaaccordion = require("@react-aria/accordion");
|
|
11
|
-
var $52xbb$reactariainteractions = require("@react-aria/interactions");
|
|
12
8
|
var $52xbb$reactariai18n = require("@react-aria/i18n");
|
|
13
9
|
var $52xbb$reactspectrumprovider = require("@react-spectrum/provider");
|
|
14
10
|
|
|
@@ -22,6 +18,9 @@ function $parcel$export(e, n, v, s) {
|
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
$parcel$export(module.exports, "Accordion", () => $d8f45715b3ce327a$export$a766cd26d0d69044);
|
|
21
|
+
$parcel$export(module.exports, "Disclosure", () => $d8f45715b3ce327a$export$74a362b31437ec83);
|
|
22
|
+
$parcel$export(module.exports, "DisclosurePanel", () => $d8f45715b3ce327a$export$feabaa331e1d464c);
|
|
23
|
+
$parcel$export(module.exports, "DisclosureTitle", () => $d8f45715b3ce327a$export$7843c6a5b3e340a2);
|
|
25
24
|
/*
|
|
26
25
|
* Copyright 2020 Adobe. All rights reserved.
|
|
27
26
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -40,69 +39,81 @@ $parcel$export(module.exports, "Accordion", () => $d8f45715b3ce327a$export$a766c
|
|
|
40
39
|
|
|
41
40
|
|
|
42
41
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
const $d8f45715b3ce327a$var$InternalAccordionContext = /*#__PURE__*/ (0, $52xbb$react.createContext)(null);
|
|
47
43
|
function $d8f45715b3ce327a$var$Accordion(props, ref) {
|
|
48
44
|
props = (0, $52xbb$reactspectrumprovider.useProviderProps)(props);
|
|
49
|
-
let state = (0, $52xbb$reactstatelytree.useTreeState)(props);
|
|
50
45
|
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
51
46
|
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
47
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement($d8f45715b3ce327a$var$InternalAccordionContext.Provider, {
|
|
48
|
+
value: {
|
|
49
|
+
isQuiet: props.isQuiet || false
|
|
50
|
+
}
|
|
51
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.DisclosureGroup), {
|
|
52
|
+
...props,
|
|
56
53
|
...styleProps,
|
|
57
54
|
ref: domRef,
|
|
58
55
|
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion', styleProps.className)
|
|
59
|
-
},
|
|
60
|
-
...state.collection
|
|
61
|
-
].map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement($d8f45715b3ce327a$var$AccordionItem, {
|
|
62
|
-
key: item.key,
|
|
63
|
-
item: item,
|
|
64
|
-
state: state
|
|
65
|
-
})));
|
|
56
|
+
}, props.children));
|
|
66
57
|
}
|
|
67
|
-
function $d8f45715b3ce327a$var$
|
|
58
|
+
function $d8f45715b3ce327a$var$Disclosure(props, ref) {
|
|
68
59
|
props = (0, $52xbb$reactspectrumprovider.useProviderProps)(props);
|
|
69
|
-
let
|
|
70
|
-
let
|
|
71
|
-
let
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
61
|
+
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
62
|
+
let accordionContext = (0, ($parcel$interopDefault($52xbb$react))).useContext($d8f45715b3ce327a$var$InternalAccordionContext);
|
|
63
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.Disclosure), {
|
|
64
|
+
...props,
|
|
65
|
+
...styleProps,
|
|
66
|
+
ref: domRef,
|
|
67
|
+
className: ({ isExpanded: isExpanded, isDisabled: isDisabled })=>{
|
|
68
|
+
var _accordionContext_isQuiet;
|
|
69
|
+
return (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-item', {
|
|
70
|
+
'spectrum-Accordion-item--quiet': (_accordionContext_isQuiet = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.isQuiet) !== null && _accordionContext_isQuiet !== void 0 ? _accordionContext_isQuiet : props.isQuiet,
|
|
71
|
+
'is-expanded': isExpanded,
|
|
72
|
+
'is-disabled': isDisabled,
|
|
73
|
+
'in-accordion': accordionContext != null
|
|
74
|
+
}, styleProps.className);
|
|
75
|
+
}
|
|
76
|
+
}, props.children);
|
|
77
|
+
}
|
|
78
|
+
function $d8f45715b3ce327a$var$DisclosurePanel(props, ref) {
|
|
79
|
+
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
80
|
+
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
81
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.DisclosurePanel), {
|
|
82
|
+
ref: domRef,
|
|
83
|
+
...styleProps,
|
|
84
|
+
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
85
|
+
...props
|
|
86
|
+
}, props.children);
|
|
87
|
+
}
|
|
88
|
+
function $d8f45715b3ce327a$var$DisclosureTitle(props, ref) {
|
|
89
|
+
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
90
|
+
let { level: level = 3 } = props;
|
|
77
91
|
let { direction: direction } = (0, $52xbb$reactariai18n.useLocale)();
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemHeader', {
|
|
92
|
-
'is-hovered': isHovered
|
|
93
|
-
})
|
|
92
|
+
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
93
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.Heading), {
|
|
94
|
+
ref: domRef,
|
|
95
|
+
level: level,
|
|
96
|
+
...styleProps,
|
|
97
|
+
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemHeading', styleProps.className)
|
|
98
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.Button), {
|
|
99
|
+
slot: "trigger",
|
|
100
|
+
className: ({ isHovered: isHovered, isFocusVisible: isFocusVisible, isPressed: isPressed })=>(0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemHeader', {
|
|
101
|
+
'is-hovered': isHovered,
|
|
102
|
+
'is-pressed': isPressed,
|
|
103
|
+
'focus-ring': isFocusVisible
|
|
104
|
+
})
|
|
94
105
|
}, direction === 'ltr' ? /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, ($parcel$interopDefault($52xbb$spectrumiconsuiChevronRightMedium))), {
|
|
95
106
|
"aria-hidden": "true",
|
|
96
107
|
UNSAFE_className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemIndicator')
|
|
97
108
|
}) : /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, ($parcel$interopDefault($52xbb$spectrumiconsuiChevronLeftMedium))), {
|
|
98
109
|
"aria-hidden": "true",
|
|
99
110
|
UNSAFE_className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemIndicator')
|
|
100
|
-
}),
|
|
101
|
-
...regionProps,
|
|
102
|
-
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemContent')
|
|
103
|
-
}, item.props.children));
|
|
111
|
+
}), props.children));
|
|
104
112
|
}
|
|
105
|
-
const $d8f45715b3ce327a$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)($d8f45715b3ce327a$var$Accordion);
|
|
113
|
+
/** A group of disclosures that can be expanded and collapsed. */ const $d8f45715b3ce327a$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)($d8f45715b3ce327a$var$Accordion);
|
|
114
|
+
/** A collapsible section of content composed of a heading that expands and collapses a panel. */ const $d8f45715b3ce327a$export$74a362b31437ec83 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)($d8f45715b3ce327a$var$Disclosure);
|
|
115
|
+
/** The panel that contains the content of the disclosure. */ const $d8f45715b3ce327a$export$feabaa331e1d464c = /*#__PURE__*/ (0, $52xbb$react.forwardRef)($d8f45715b3ce327a$var$DisclosurePanel);
|
|
116
|
+
/** The heading of the disclosure. */ const $d8f45715b3ce327a$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)($d8f45715b3ce327a$var$DisclosureTitle);
|
|
106
117
|
|
|
107
118
|
|
|
108
119
|
//# sourceMappingURL=Accordion.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/accordion/src/Accordion.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport React, {createContext, forwardRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nexport interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {\n /** Whether the Accordion should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The disclosures within the accordion group. */\n children: React.ReactNode\n}\n\nconst InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);\n\nfunction Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n return (\n <InternalAccordionContext.Provider value={{isQuiet: props.isQuiet || false}}>\n <DisclosureGroup\n {...props}\n {...styleProps}\n ref={domRef}\n className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>\n {props.children}\n </DisclosureGroup>\n </InternalAccordionContext.Provider>\n );\n}\n\nexport interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {\n /** Whether the Disclosure should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */\n children: React.ReactNode\n}\n\nfunction Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let accordionContext = React.useContext(InternalAccordionContext)!;\n return (\n <RACDisclosure\n {...props}\n {...styleProps}\n ref={domRef}\n className={({isExpanded, isDisabled}) => classNames(styles, 'spectrum-Accordion-item', {\n 'spectrum-Accordion-item--quiet': accordionContext?.isQuiet ?? props.isQuiet,\n 'is-expanded': isExpanded,\n 'is-disabled': isDisabled,\n 'in-accordion': accordionContext != null\n }, styleProps.className)}>\n {props.children}\n </RACDisclosure>\n );\n}\n\nexport interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {\n /** The contents of the accordion panel. */\n children: React.ReactNode\n}\n\nfunction DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n return (\n <RACDisclosurePanel\n ref={domRef}\n {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'role'>}\n className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)} \n {...props}>\n {props.children}\n </RACDisclosurePanel>\n );\n}\n\nexport interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps {\n /**\n * The heading level of the disclosure header.\n * @default 3\n */\n level?: number,\n /** The contents of the disclosure header. */\n children: React.ReactNode\n}\n\nfunction DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {\n let {styleProps} = useStyleProps(props);\n let {level = 3} = props;\n let {direction} = useLocale();\n let domRef = useDOMRef(ref);\n return (\n <Heading ref={domRef} level={level} {...styleProps} className={classNames(styles, 'spectrum-Accordion-itemHeading', styleProps.className)}>\n <Button\n slot=\"trigger\"\n className={({isHovered, isFocusVisible, isPressed}) => classNames(styles, 'spectrum-Accordion-itemHeader', {\n 'is-hovered': isHovered,\n 'is-pressed': isPressed,\n 'focus-ring': isFocusVisible\n })}>\n {direction === 'ltr' ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />\n ) : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />\n )}\n {props.children}\n </Button>\n </Heading>\n );\n}\n\n/** A group of disclosures that can be expanded and collapsed. */\nconst _Accordion = forwardRef(Accordion) as (props: SpectrumAccordionProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Accordion>;\nexport {_Accordion as Accordion};\n\n/** A collapsible section of content composed of a heading that expands and collapses a panel. */\nconst _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Disclosure>;\nexport {_Disclosure as Disclosure};\n\n/** The panel that contains the content of the disclosure. */\nconst _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosurePanel>;\nexport {_DisclosurePanel as DisclosurePanel};\n\n/** The heading of the disclosure. */\nconst _DisclosureTitle = forwardRef(DisclosureTitle) as (props: SpectrumDisclosureTitleProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosureTitle>;\nexport {_DisclosureTitle as DisclosureTitle};\n"],"names":[],"version":3,"file":"Accordion.main.js.map"}
|
package/dist/Accordion.mjs
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.27b25cc7.css";
|
|
2
2
|
import $aMy5K$accordion_vars_cssmodulejs from "./accordion_vars_css.mjs";
|
|
3
|
+
import {DisclosureGroup as $aMy5K$DisclosureGroup, Disclosure as $aMy5K$Disclosure, DisclosurePanel as $aMy5K$DisclosurePanel, Heading as $aMy5K$Heading, Button as $aMy5K$Button} from "react-aria-components";
|
|
3
4
|
import $aMy5K$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
4
5
|
import $aMy5K$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
5
6
|
import {useStyleProps as $aMy5K$useStyleProps, useDOMRef as $aMy5K$useDOMRef, classNames as $aMy5K$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {
|
|
7
|
-
import {FocusRing as $aMy5K$FocusRing} from "@react-aria/focus";
|
|
8
|
-
import $aMy5K$react, {useRef as $aMy5K$useRef, forwardRef as $aMy5K$forwardRef} from "react";
|
|
9
|
-
import {useTreeState as $aMy5K$useTreeState} from "@react-stately/tree";
|
|
10
|
-
import {useAccordion as $aMy5K$useAccordion, useAccordionItem as $aMy5K$useAccordionItem} from "@react-aria/accordion";
|
|
11
|
-
import {useHover as $aMy5K$useHover} from "@react-aria/interactions";
|
|
7
|
+
import $aMy5K$react, {createContext as $aMy5K$createContext, forwardRef as $aMy5K$forwardRef} from "react";
|
|
12
8
|
import {useLocale as $aMy5K$useLocale} from "@react-aria/i18n";
|
|
13
9
|
import {useProviderProps as $aMy5K$useProviderProps} from "@react-spectrum/provider";
|
|
14
10
|
|
|
@@ -34,70 +30,82 @@ function $parcel$interopDefault(a) {
|
|
|
34
30
|
|
|
35
31
|
|
|
36
32
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
const $2a5a5b7faca81754$var$InternalAccordionContext = /*#__PURE__*/ (0, $aMy5K$createContext)(null);
|
|
41
34
|
function $2a5a5b7faca81754$var$Accordion(props, ref) {
|
|
42
35
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
43
|
-
let state = (0, $aMy5K$useTreeState)(props);
|
|
44
36
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
45
37
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement($2a5a5b7faca81754$var$InternalAccordionContext.Provider, {
|
|
39
|
+
value: {
|
|
40
|
+
isQuiet: props.isQuiet || false
|
|
41
|
+
}
|
|
42
|
+
}, /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosureGroup), {
|
|
43
|
+
...props,
|
|
50
44
|
...styleProps,
|
|
51
45
|
ref: domRef,
|
|
52
46
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion', styleProps.className)
|
|
53
|
-
},
|
|
54
|
-
...state.collection
|
|
55
|
-
].map((item)=>/*#__PURE__*/ (0, $aMy5K$react).createElement($2a5a5b7faca81754$var$AccordionItem, {
|
|
56
|
-
key: item.key,
|
|
57
|
-
item: item,
|
|
58
|
-
state: state
|
|
59
|
-
})));
|
|
47
|
+
}, props.children));
|
|
60
48
|
}
|
|
61
|
-
function $2a5a5b7faca81754$var$
|
|
49
|
+
function $2a5a5b7faca81754$var$Disclosure(props, ref) {
|
|
62
50
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
63
|
-
let
|
|
64
|
-
let
|
|
65
|
-
let
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
51
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
52
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
53
|
+
let accordionContext = (0, $aMy5K$react).useContext($2a5a5b7faca81754$var$InternalAccordionContext);
|
|
54
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Disclosure), {
|
|
55
|
+
...props,
|
|
56
|
+
...styleProps,
|
|
57
|
+
ref: domRef,
|
|
58
|
+
className: ({ isExpanded: isExpanded, isDisabled: isDisabled })=>{
|
|
59
|
+
var _accordionContext_isQuiet;
|
|
60
|
+
return (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-item', {
|
|
61
|
+
'spectrum-Accordion-item--quiet': (_accordionContext_isQuiet = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.isQuiet) !== null && _accordionContext_isQuiet !== void 0 ? _accordionContext_isQuiet : props.isQuiet,
|
|
62
|
+
'is-expanded': isExpanded,
|
|
63
|
+
'is-disabled': isDisabled,
|
|
64
|
+
'in-accordion': accordionContext != null
|
|
65
|
+
}, styleProps.className);
|
|
66
|
+
}
|
|
67
|
+
}, props.children);
|
|
68
|
+
}
|
|
69
|
+
function $2a5a5b7faca81754$var$DisclosurePanel(props, ref) {
|
|
70
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
71
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
72
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosurePanel), {
|
|
73
|
+
ref: domRef,
|
|
74
|
+
...styleProps,
|
|
75
|
+
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
76
|
+
...props
|
|
77
|
+
}, props.children);
|
|
78
|
+
}
|
|
79
|
+
function $2a5a5b7faca81754$var$DisclosureTitle(props, ref) {
|
|
80
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
81
|
+
let { level: level = 3 } = props;
|
|
71
82
|
let { direction: direction } = (0, $aMy5K$useLocale)();
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeader', {
|
|
86
|
-
'is-hovered': isHovered
|
|
87
|
-
})
|
|
83
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
84
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Heading), {
|
|
85
|
+
ref: domRef,
|
|
86
|
+
level: level,
|
|
87
|
+
...styleProps,
|
|
88
|
+
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeading', styleProps.className)
|
|
89
|
+
}, /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Button), {
|
|
90
|
+
slot: "trigger",
|
|
91
|
+
className: ({ isHovered: isHovered, isFocusVisible: isFocusVisible, isPressed: isPressed })=>(0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeader', {
|
|
92
|
+
'is-hovered': isHovered,
|
|
93
|
+
'is-pressed': isPressed,
|
|
94
|
+
'focus-ring': isFocusVisible
|
|
95
|
+
})
|
|
88
96
|
}, direction === 'ltr' ? /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$spectrumiconsuiChevronRightMedium), {
|
|
89
97
|
"aria-hidden": "true",
|
|
90
98
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
91
99
|
}) : /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$spectrumiconsuiChevronLeftMedium), {
|
|
92
100
|
"aria-hidden": "true",
|
|
93
101
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
94
|
-
}),
|
|
95
|
-
...regionProps,
|
|
96
|
-
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent')
|
|
97
|
-
}, item.props.children));
|
|
102
|
+
}), props.children));
|
|
98
103
|
}
|
|
99
|
-
const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Accordion);
|
|
104
|
+
/** A group of disclosures that can be expanded and collapsed. */ const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Accordion);
|
|
105
|
+
/** A collapsible section of content composed of a heading that expands and collapses a panel. */ const $2a5a5b7faca81754$export$74a362b31437ec83 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Disclosure);
|
|
106
|
+
/** The panel that contains the content of the disclosure. */ const $2a5a5b7faca81754$export$feabaa331e1d464c = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$DisclosurePanel);
|
|
107
|
+
/** The heading of the disclosure. */ const $2a5a5b7faca81754$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$DisclosureTitle);
|
|
100
108
|
|
|
101
109
|
|
|
102
|
-
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion};
|
|
110
|
+
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel, $2a5a5b7faca81754$export$7843c6a5b3e340a2 as DisclosureTitle};
|
|
103
111
|
//# sourceMappingURL=Accordion.module.js.map
|
package/dist/Accordion.module.js
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.27b25cc7.css";
|
|
2
2
|
import $aMy5K$accordion_vars_cssmodulejs from "./accordion_vars_css.module.js";
|
|
3
|
+
import {DisclosureGroup as $aMy5K$DisclosureGroup, Disclosure as $aMy5K$Disclosure, DisclosurePanel as $aMy5K$DisclosurePanel, Heading as $aMy5K$Heading, Button as $aMy5K$Button} from "react-aria-components";
|
|
3
4
|
import $aMy5K$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
4
5
|
import $aMy5K$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
5
6
|
import {useStyleProps as $aMy5K$useStyleProps, useDOMRef as $aMy5K$useDOMRef, classNames as $aMy5K$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {
|
|
7
|
-
import {FocusRing as $aMy5K$FocusRing} from "@react-aria/focus";
|
|
8
|
-
import $aMy5K$react, {useRef as $aMy5K$useRef, forwardRef as $aMy5K$forwardRef} from "react";
|
|
9
|
-
import {useTreeState as $aMy5K$useTreeState} from "@react-stately/tree";
|
|
10
|
-
import {useAccordion as $aMy5K$useAccordion, useAccordionItem as $aMy5K$useAccordionItem} from "@react-aria/accordion";
|
|
11
|
-
import {useHover as $aMy5K$useHover} from "@react-aria/interactions";
|
|
7
|
+
import $aMy5K$react, {createContext as $aMy5K$createContext, forwardRef as $aMy5K$forwardRef} from "react";
|
|
12
8
|
import {useLocale as $aMy5K$useLocale} from "@react-aria/i18n";
|
|
13
9
|
import {useProviderProps as $aMy5K$useProviderProps} from "@react-spectrum/provider";
|
|
14
10
|
|
|
@@ -34,70 +30,82 @@ function $parcel$interopDefault(a) {
|
|
|
34
30
|
|
|
35
31
|
|
|
36
32
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
const $2a5a5b7faca81754$var$InternalAccordionContext = /*#__PURE__*/ (0, $aMy5K$createContext)(null);
|
|
41
34
|
function $2a5a5b7faca81754$var$Accordion(props, ref) {
|
|
42
35
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
43
|
-
let state = (0, $aMy5K$useTreeState)(props);
|
|
44
36
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
45
37
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement($2a5a5b7faca81754$var$InternalAccordionContext.Provider, {
|
|
39
|
+
value: {
|
|
40
|
+
isQuiet: props.isQuiet || false
|
|
41
|
+
}
|
|
42
|
+
}, /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosureGroup), {
|
|
43
|
+
...props,
|
|
50
44
|
...styleProps,
|
|
51
45
|
ref: domRef,
|
|
52
46
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion', styleProps.className)
|
|
53
|
-
},
|
|
54
|
-
...state.collection
|
|
55
|
-
].map((item)=>/*#__PURE__*/ (0, $aMy5K$react).createElement($2a5a5b7faca81754$var$AccordionItem, {
|
|
56
|
-
key: item.key,
|
|
57
|
-
item: item,
|
|
58
|
-
state: state
|
|
59
|
-
})));
|
|
47
|
+
}, props.children));
|
|
60
48
|
}
|
|
61
|
-
function $2a5a5b7faca81754$var$
|
|
49
|
+
function $2a5a5b7faca81754$var$Disclosure(props, ref) {
|
|
62
50
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
63
|
-
let
|
|
64
|
-
let
|
|
65
|
-
let
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
51
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
52
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
53
|
+
let accordionContext = (0, $aMy5K$react).useContext($2a5a5b7faca81754$var$InternalAccordionContext);
|
|
54
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Disclosure), {
|
|
55
|
+
...props,
|
|
56
|
+
...styleProps,
|
|
57
|
+
ref: domRef,
|
|
58
|
+
className: ({ isExpanded: isExpanded, isDisabled: isDisabled })=>{
|
|
59
|
+
var _accordionContext_isQuiet;
|
|
60
|
+
return (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-item', {
|
|
61
|
+
'spectrum-Accordion-item--quiet': (_accordionContext_isQuiet = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.isQuiet) !== null && _accordionContext_isQuiet !== void 0 ? _accordionContext_isQuiet : props.isQuiet,
|
|
62
|
+
'is-expanded': isExpanded,
|
|
63
|
+
'is-disabled': isDisabled,
|
|
64
|
+
'in-accordion': accordionContext != null
|
|
65
|
+
}, styleProps.className);
|
|
66
|
+
}
|
|
67
|
+
}, props.children);
|
|
68
|
+
}
|
|
69
|
+
function $2a5a5b7faca81754$var$DisclosurePanel(props, ref) {
|
|
70
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
71
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
72
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosurePanel), {
|
|
73
|
+
ref: domRef,
|
|
74
|
+
...styleProps,
|
|
75
|
+
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
76
|
+
...props
|
|
77
|
+
}, props.children);
|
|
78
|
+
}
|
|
79
|
+
function $2a5a5b7faca81754$var$DisclosureTitle(props, ref) {
|
|
80
|
+
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
81
|
+
let { level: level = 3 } = props;
|
|
71
82
|
let { direction: direction } = (0, $aMy5K$useLocale)();
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeader', {
|
|
86
|
-
'is-hovered': isHovered
|
|
87
|
-
})
|
|
83
|
+
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
84
|
+
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Heading), {
|
|
85
|
+
ref: domRef,
|
|
86
|
+
level: level,
|
|
87
|
+
...styleProps,
|
|
88
|
+
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeading', styleProps.className)
|
|
89
|
+
}, /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$Button), {
|
|
90
|
+
slot: "trigger",
|
|
91
|
+
className: ({ isHovered: isHovered, isFocusVisible: isFocusVisible, isPressed: isPressed })=>(0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemHeader', {
|
|
92
|
+
'is-hovered': isHovered,
|
|
93
|
+
'is-pressed': isPressed,
|
|
94
|
+
'focus-ring': isFocusVisible
|
|
95
|
+
})
|
|
88
96
|
}, direction === 'ltr' ? /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$spectrumiconsuiChevronRightMedium), {
|
|
89
97
|
"aria-hidden": "true",
|
|
90
98
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
91
99
|
}) : /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$spectrumiconsuiChevronLeftMedium), {
|
|
92
100
|
"aria-hidden": "true",
|
|
93
101
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
94
|
-
}),
|
|
95
|
-
...regionProps,
|
|
96
|
-
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent')
|
|
97
|
-
}, item.props.children));
|
|
102
|
+
}), props.children));
|
|
98
103
|
}
|
|
99
|
-
const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Accordion);
|
|
104
|
+
/** A group of disclosures that can be expanded and collapsed. */ const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Accordion);
|
|
105
|
+
/** A collapsible section of content composed of a heading that expands and collapses a panel. */ const $2a5a5b7faca81754$export$74a362b31437ec83 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$Disclosure);
|
|
106
|
+
/** The panel that contains the content of the disclosure. */ const $2a5a5b7faca81754$export$feabaa331e1d464c = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$DisclosurePanel);
|
|
107
|
+
/** The heading of the disclosure. */ const $2a5a5b7faca81754$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $aMy5K$forwardRef)($2a5a5b7faca81754$var$DisclosureTitle);
|
|
100
108
|
|
|
101
109
|
|
|
102
|
-
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion};
|
|
110
|
+
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel, $2a5a5b7faca81754$export$7843c6a5b3e340a2 as DisclosureTitle};
|
|
103
111
|
//# sourceMappingURL=Accordion.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/accordion/src/Accordion.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport React, {createContext, forwardRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nexport interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {\n /** Whether the Accordion should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The disclosures within the accordion group. */\n children: React.ReactNode\n}\n\nconst InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);\n\nfunction Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n return (\n <InternalAccordionContext.Provider value={{isQuiet: props.isQuiet || false}}>\n <DisclosureGroup\n {...props}\n {...styleProps}\n ref={domRef}\n className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>\n {props.children}\n </DisclosureGroup>\n </InternalAccordionContext.Provider>\n );\n}\n\nexport interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {\n /** Whether the Disclosure should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */\n children: React.ReactNode\n}\n\nfunction Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let accordionContext = React.useContext(InternalAccordionContext)!;\n return (\n <RACDisclosure\n {...props}\n {...styleProps}\n ref={domRef}\n className={({isExpanded, isDisabled}) => classNames(styles, 'spectrum-Accordion-item', {\n 'spectrum-Accordion-item--quiet': accordionContext?.isQuiet ?? props.isQuiet,\n 'is-expanded': isExpanded,\n 'is-disabled': isDisabled,\n 'in-accordion': accordionContext != null\n }, styleProps.className)}>\n {props.children}\n </RACDisclosure>\n );\n}\n\nexport interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {\n /** The contents of the accordion panel. */\n children: React.ReactNode\n}\n\nfunction DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n return (\n <RACDisclosurePanel\n ref={domRef}\n {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'role'>}\n className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)} \n {...props}>\n {props.children}\n </RACDisclosurePanel>\n );\n}\n\nexport interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps {\n /**\n * The heading level of the disclosure header.\n * @default 3\n */\n level?: number,\n /** The contents of the disclosure header. */\n children: React.ReactNode\n}\n\nfunction DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {\n let {styleProps} = useStyleProps(props);\n let {level = 3} = props;\n let {direction} = useLocale();\n let domRef = useDOMRef(ref);\n return (\n <Heading ref={domRef} level={level} {...styleProps} className={classNames(styles, 'spectrum-Accordion-itemHeading', styleProps.className)}>\n <Button\n slot=\"trigger\"\n className={({isHovered, isFocusVisible, isPressed}) => classNames(styles, 'spectrum-Accordion-itemHeader', {\n 'is-hovered': isHovered,\n 'is-pressed': isPressed,\n 'focus-ring': isFocusVisible\n })}>\n {direction === 'ltr' ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />\n ) : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />\n )}\n {props.children}\n </Button>\n </Heading>\n );\n}\n\n/** A group of disclosures that can be expanded and collapsed. */\nconst _Accordion = forwardRef(Accordion) as (props: SpectrumAccordionProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Accordion>;\nexport {_Accordion as Accordion};\n\n/** A collapsible section of content composed of a heading that expands and collapses a panel. */\nconst _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Disclosure>;\nexport {_Disclosure as Disclosure};\n\n/** The panel that contains the content of the disclosure. */\nconst _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosurePanel>;\nexport {_DisclosurePanel as DisclosurePanel};\n\n/** The heading of the disclosure. */\nconst _DisclosureTitle = forwardRef(DisclosureTitle) as (props: SpectrumDisclosureTitleProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosureTitle>;\nexport {_DisclosureTitle as DisclosureTitle};\n"],"names":[],"version":3,"file":"Accordion.module.js.map"}
|