@react-spectrum/accordion 3.0.0 → 3.0.1
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 +9 -13
- package/dist/Accordion.main.js.map +1 -1
- package/dist/Accordion.mjs +9 -13
- package/dist/Accordion.module.js +9 -13
- package/dist/Accordion.module.js.map +1 -1
- package/dist/accordion_vars_css.main.js +13 -13
- package/dist/accordion_vars_css.mjs +13 -13
- package/dist/accordion_vars_css.module.js +13 -13
- package/dist/types.d.ts +8 -20
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.27b25cc7.css → vars.7a67bcf5.css} +25 -28
- package/dist/vars.7a67bcf5.css.map +1 -0
- package/package.json +2 -2
- package/src/Accordion.tsx +13 -25
- package/dist/vars.27b25cc7.css.map +0 -1
package/dist/Accordion.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.7a67bcf5.css");
|
|
2
2
|
var $5ab573b23bc1d039$exports = require("./accordion_vars_css.main.js");
|
|
3
3
|
var $52xbb$reactariacomponents = require("react-aria-components");
|
|
4
4
|
var $52xbb$spectrumiconsuiChevronLeftMedium = require("@spectrum-icons/ui/ChevronLeftMedium");
|
|
@@ -40,7 +40,7 @@ $parcel$export(module.exports, "DisclosureTitle", () => $d8f45715b3ce327a$export
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
const $d8f45715b3ce327a$var$InternalAccordionContext = /*#__PURE__*/ (0, $52xbb$react.createContext)(null);
|
|
43
|
-
|
|
43
|
+
const $d8f45715b3ce327a$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)(function Accordion(props, ref) {
|
|
44
44
|
props = (0, $52xbb$reactspectrumprovider.useProviderProps)(props);
|
|
45
45
|
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
46
46
|
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -54,8 +54,8 @@ function $d8f45715b3ce327a$var$Accordion(props, ref) {
|
|
|
54
54
|
ref: domRef,
|
|
55
55
|
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion', styleProps.className)
|
|
56
56
|
}, props.children));
|
|
57
|
-
}
|
|
58
|
-
|
|
57
|
+
});
|
|
58
|
+
const $d8f45715b3ce327a$export$74a362b31437ec83 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)(function Disclosure(props, ref) {
|
|
59
59
|
props = (0, $52xbb$reactspectrumprovider.useProviderProps)(props);
|
|
60
60
|
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
61
61
|
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -74,8 +74,8 @@ function $d8f45715b3ce327a$var$Disclosure(props, ref) {
|
|
|
74
74
|
}, styleProps.className);
|
|
75
75
|
}
|
|
76
76
|
}, props.children);
|
|
77
|
-
}
|
|
78
|
-
|
|
77
|
+
});
|
|
78
|
+
const $d8f45715b3ce327a$export$feabaa331e1d464c = /*#__PURE__*/ (0, $52xbb$react.forwardRef)(function DisclosurePanel(props, ref) {
|
|
79
79
|
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
80
80
|
let domRef = (0, $52xbb$reactspectrumutils.useDOMRef)(ref);
|
|
81
81
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($52xbb$react))).createElement((0, $52xbb$reactariacomponents.DisclosurePanel), {
|
|
@@ -84,8 +84,8 @@ function $d8f45715b3ce327a$var$DisclosurePanel(props, ref) {
|
|
|
84
84
|
className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
85
85
|
...props
|
|
86
86
|
}, props.children);
|
|
87
|
-
}
|
|
88
|
-
|
|
87
|
+
});
|
|
88
|
+
const $d8f45715b3ce327a$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $52xbb$react.forwardRef)(function DisclosureTitle(props, ref) {
|
|
89
89
|
let { styleProps: styleProps } = (0, $52xbb$reactspectrumutils.useStyleProps)(props);
|
|
90
90
|
let { level: level = 3 } = props;
|
|
91
91
|
let { direction: direction } = (0, $52xbb$reactariai18n.useLocale)();
|
|
@@ -109,11 +109,7 @@ function $d8f45715b3ce327a$var$DisclosureTitle(props, ref) {
|
|
|
109
109
|
"aria-hidden": "true",
|
|
110
110
|
UNSAFE_className: (0, $52xbb$reactspectrumutils.classNames)((0, ($parcel$interopDefault($5ab573b23bc1d039$exports))), 'spectrum-Accordion-itemIndicator')
|
|
111
111
|
}), props.children));
|
|
112
|
-
}
|
|
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);
|
|
112
|
+
});
|
|
117
113
|
|
|
118
114
|
|
|
119
115
|
//# sourceMappingURL=Accordion.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAmBD,MAAM,+DAA2B,CAAA,GAAA,0BAAY,EAA6B;
|
|
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, forwardRefType, 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\n/** A group of disclosures that can be expanded and collapsed. */\nexport const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** A collapsible section of content composed of a heading that expands and collapses a panel. */\nexport const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** The panel that contains the content of the disclosure. */\nexport const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** The heading of the disclosure. */\nexport const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function 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"],"names":[],"version":3,"file":"Accordion.main.js.map"}
|
package/dist/Accordion.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.7a67bcf5.css";
|
|
2
2
|
import $aMy5K$accordion_vars_cssmodulejs from "./accordion_vars_css.mjs";
|
|
3
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";
|
|
4
4
|
import $aMy5K$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
const $2a5a5b7faca81754$var$InternalAccordionContext = /*#__PURE__*/ (0, $aMy5K$createContext)(null);
|
|
34
|
-
|
|
34
|
+
const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function Accordion(props, ref) {
|
|
35
35
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
36
36
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
37
37
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
@@ -45,8 +45,8 @@ function $2a5a5b7faca81754$var$Accordion(props, ref) {
|
|
|
45
45
|
ref: domRef,
|
|
46
46
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion', styleProps.className)
|
|
47
47
|
}, props.children));
|
|
48
|
-
}
|
|
49
|
-
|
|
48
|
+
});
|
|
49
|
+
const $2a5a5b7faca81754$export$74a362b31437ec83 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function Disclosure(props, ref) {
|
|
50
50
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
51
51
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
52
52
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
@@ -65,8 +65,8 @@ function $2a5a5b7faca81754$var$Disclosure(props, ref) {
|
|
|
65
65
|
}, styleProps.className);
|
|
66
66
|
}
|
|
67
67
|
}, props.children);
|
|
68
|
-
}
|
|
69
|
-
|
|
68
|
+
});
|
|
69
|
+
const $2a5a5b7faca81754$export$feabaa331e1d464c = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function DisclosurePanel(props, ref) {
|
|
70
70
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
71
71
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
72
72
|
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosurePanel), {
|
|
@@ -75,8 +75,8 @@ function $2a5a5b7faca81754$var$DisclosurePanel(props, ref) {
|
|
|
75
75
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
76
76
|
...props
|
|
77
77
|
}, props.children);
|
|
78
|
-
}
|
|
79
|
-
|
|
78
|
+
});
|
|
79
|
+
const $2a5a5b7faca81754$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function DisclosureTitle(props, ref) {
|
|
80
80
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
81
81
|
let { level: level = 3 } = props;
|
|
82
82
|
let { direction: direction } = (0, $aMy5K$useLocale)();
|
|
@@ -100,11 +100,7 @@ function $2a5a5b7faca81754$var$DisclosureTitle(props, ref) {
|
|
|
100
100
|
"aria-hidden": "true",
|
|
101
101
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
102
102
|
}), props.children));
|
|
103
|
-
}
|
|
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);
|
|
103
|
+
});
|
|
108
104
|
|
|
109
105
|
|
|
110
106
|
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel, $2a5a5b7faca81754$export$7843c6a5b3e340a2 as DisclosureTitle};
|
package/dist/Accordion.module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.7a67bcf5.css";
|
|
2
2
|
import $aMy5K$accordion_vars_cssmodulejs from "./accordion_vars_css.module.js";
|
|
3
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";
|
|
4
4
|
import $aMy5K$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
const $2a5a5b7faca81754$var$InternalAccordionContext = /*#__PURE__*/ (0, $aMy5K$createContext)(null);
|
|
34
|
-
|
|
34
|
+
const $2a5a5b7faca81754$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function Accordion(props, ref) {
|
|
35
35
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
36
36
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
37
37
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
@@ -45,8 +45,8 @@ function $2a5a5b7faca81754$var$Accordion(props, ref) {
|
|
|
45
45
|
ref: domRef,
|
|
46
46
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion', styleProps.className)
|
|
47
47
|
}, props.children));
|
|
48
|
-
}
|
|
49
|
-
|
|
48
|
+
});
|
|
49
|
+
const $2a5a5b7faca81754$export$74a362b31437ec83 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function Disclosure(props, ref) {
|
|
50
50
|
props = (0, $aMy5K$useProviderProps)(props);
|
|
51
51
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
52
52
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
@@ -65,8 +65,8 @@ function $2a5a5b7faca81754$var$Disclosure(props, ref) {
|
|
|
65
65
|
}, styleProps.className);
|
|
66
66
|
}
|
|
67
67
|
}, props.children);
|
|
68
|
-
}
|
|
69
|
-
|
|
68
|
+
});
|
|
69
|
+
const $2a5a5b7faca81754$export$feabaa331e1d464c = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function DisclosurePanel(props, ref) {
|
|
70
70
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
71
71
|
let domRef = (0, $aMy5K$useDOMRef)(ref);
|
|
72
72
|
return /*#__PURE__*/ (0, $aMy5K$react).createElement((0, $aMy5K$DisclosurePanel), {
|
|
@@ -75,8 +75,8 @@ function $2a5a5b7faca81754$var$DisclosurePanel(props, ref) {
|
|
|
75
75
|
className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemContent', styleProps.className),
|
|
76
76
|
...props
|
|
77
77
|
}, props.children);
|
|
78
|
-
}
|
|
79
|
-
|
|
78
|
+
});
|
|
79
|
+
const $2a5a5b7faca81754$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $aMy5K$forwardRef)(function DisclosureTitle(props, ref) {
|
|
80
80
|
let { styleProps: styleProps } = (0, $aMy5K$useStyleProps)(props);
|
|
81
81
|
let { level: level = 3 } = props;
|
|
82
82
|
let { direction: direction } = (0, $aMy5K$useLocale)();
|
|
@@ -100,11 +100,7 @@ function $2a5a5b7faca81754$var$DisclosureTitle(props, ref) {
|
|
|
100
100
|
"aria-hidden": "true",
|
|
101
101
|
UNSAFE_className: (0, $aMy5K$classNames)((0, ($parcel$interopDefault($aMy5K$accordion_vars_cssmodulejs))), 'spectrum-Accordion-itemIndicator')
|
|
102
102
|
}), props.children));
|
|
103
|
-
}
|
|
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);
|
|
103
|
+
});
|
|
108
104
|
|
|
109
105
|
|
|
110
106
|
export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel, $2a5a5b7faca81754$export$7843c6a5b3e340a2 as DisclosureTitle};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAmBD,MAAM,+DAA2B,CAAA,GAAA,oBAAY,EAA6B;
|
|
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, forwardRefType, 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\n/** A group of disclosures that can be expanded and collapsed. */\nexport const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** A collapsible section of content composed of a heading that expands and collapses a panel. */\nexport const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** The panel that contains the content of the disclosure. */\nexport const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function 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\n/** The heading of the disclosure. */\nexport const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function 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"],"names":[],"version":3,"file":"Accordion.module.js.map"}
|
|
@@ -29,19 +29,19 @@ var $5ab573b23bc1d039$export$951cb9dc63743241;
|
|
|
29
29
|
var $5ab573b23bc1d039$export$4da8efb546c03356;
|
|
30
30
|
var $5ab573b23bc1d039$export$36876b8193439034;
|
|
31
31
|
var $5ab573b23bc1d039$export$35196e2132b47abd;
|
|
32
|
-
$5ab573b23bc1d039$export$f39a09f249340e2a = `
|
|
33
|
-
$5ab573b23bc1d039$export$3751b3d197266426 = `
|
|
34
|
-
$5ab573b23bc1d039$export$d35bc1e505d1ebbf = `
|
|
35
|
-
$5ab573b23bc1d039$export$911ebb89bba4b634 = `
|
|
36
|
-
$5ab573b23bc1d039$export$b8813cd5d7824ce7 = `
|
|
37
|
-
$5ab573b23bc1d039$export$15b73a232798b8d3 = `
|
|
38
|
-
$5ab573b23bc1d039$export$bed6cbae852b32f0 = `
|
|
39
|
-
$5ab573b23bc1d039$export$a1947cb8adf67515 = `
|
|
40
|
-
$5ab573b23bc1d039$export$834b47eea3b7caa7 = `
|
|
41
|
-
$5ab573b23bc1d039$export$951cb9dc63743241 = `
|
|
42
|
-
$5ab573b23bc1d039$export$4da8efb546c03356 = `
|
|
43
|
-
$5ab573b23bc1d039$export$36876b8193439034 = `
|
|
44
|
-
$5ab573b23bc1d039$export$35196e2132b47abd = `
|
|
32
|
+
$5ab573b23bc1d039$export$f39a09f249340e2a = `l4OyFa_focus-ring`;
|
|
33
|
+
$5ab573b23bc1d039$export$3751b3d197266426 = `l4OyFa_in-accordion`;
|
|
34
|
+
$5ab573b23bc1d039$export$d35bc1e505d1ebbf = `l4OyFa_is-disabled`;
|
|
35
|
+
$5ab573b23bc1d039$export$911ebb89bba4b634 = `l4OyFa_is-expanded`;
|
|
36
|
+
$5ab573b23bc1d039$export$b8813cd5d7824ce7 = `l4OyFa_is-hovered`;
|
|
37
|
+
$5ab573b23bc1d039$export$15b73a232798b8d3 = `l4OyFa_is-pressed`;
|
|
38
|
+
$5ab573b23bc1d039$export$bed6cbae852b32f0 = `l4OyFa_spectrum-Accordion`;
|
|
39
|
+
$5ab573b23bc1d039$export$a1947cb8adf67515 = `l4OyFa_spectrum-Accordion-item`;
|
|
40
|
+
$5ab573b23bc1d039$export$834b47eea3b7caa7 = `l4OyFa_spectrum-Accordion-item--quiet`;
|
|
41
|
+
$5ab573b23bc1d039$export$951cb9dc63743241 = `l4OyFa_spectrum-Accordion-itemContent`;
|
|
42
|
+
$5ab573b23bc1d039$export$4da8efb546c03356 = `l4OyFa_spectrum-Accordion-itemHeader`;
|
|
43
|
+
$5ab573b23bc1d039$export$36876b8193439034 = `l4OyFa_spectrum-Accordion-itemHeading`;
|
|
44
|
+
$5ab573b23bc1d039$export$35196e2132b47abd = `l4OyFa_spectrum-Accordion-itemIndicator`;
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
//# sourceMappingURL=accordion_vars_css.main.js.map
|
|
@@ -30,19 +30,19 @@ var $cd9bb50514faf076$export$951cb9dc63743241;
|
|
|
30
30
|
var $cd9bb50514faf076$export$4da8efb546c03356;
|
|
31
31
|
var $cd9bb50514faf076$export$36876b8193439034;
|
|
32
32
|
var $cd9bb50514faf076$export$35196e2132b47abd;
|
|
33
|
-
$cd9bb50514faf076$export$f39a09f249340e2a = `
|
|
34
|
-
$cd9bb50514faf076$export$3751b3d197266426 = `
|
|
35
|
-
$cd9bb50514faf076$export$d35bc1e505d1ebbf = `
|
|
36
|
-
$cd9bb50514faf076$export$911ebb89bba4b634 = `
|
|
37
|
-
$cd9bb50514faf076$export$b8813cd5d7824ce7 = `
|
|
38
|
-
$cd9bb50514faf076$export$15b73a232798b8d3 = `
|
|
39
|
-
$cd9bb50514faf076$export$bed6cbae852b32f0 = `
|
|
40
|
-
$cd9bb50514faf076$export$a1947cb8adf67515 = `
|
|
41
|
-
$cd9bb50514faf076$export$834b47eea3b7caa7 = `
|
|
42
|
-
$cd9bb50514faf076$export$951cb9dc63743241 = `
|
|
43
|
-
$cd9bb50514faf076$export$4da8efb546c03356 = `
|
|
44
|
-
$cd9bb50514faf076$export$36876b8193439034 = `
|
|
45
|
-
$cd9bb50514faf076$export$35196e2132b47abd = `
|
|
33
|
+
$cd9bb50514faf076$export$f39a09f249340e2a = `l4OyFa_focus-ring`;
|
|
34
|
+
$cd9bb50514faf076$export$3751b3d197266426 = `l4OyFa_in-accordion`;
|
|
35
|
+
$cd9bb50514faf076$export$d35bc1e505d1ebbf = `l4OyFa_is-disabled`;
|
|
36
|
+
$cd9bb50514faf076$export$911ebb89bba4b634 = `l4OyFa_is-expanded`;
|
|
37
|
+
$cd9bb50514faf076$export$b8813cd5d7824ce7 = `l4OyFa_is-hovered`;
|
|
38
|
+
$cd9bb50514faf076$export$15b73a232798b8d3 = `l4OyFa_is-pressed`;
|
|
39
|
+
$cd9bb50514faf076$export$bed6cbae852b32f0 = `l4OyFa_spectrum-Accordion`;
|
|
40
|
+
$cd9bb50514faf076$export$a1947cb8adf67515 = `l4OyFa_spectrum-Accordion-item`;
|
|
41
|
+
$cd9bb50514faf076$export$834b47eea3b7caa7 = `l4OyFa_spectrum-Accordion-item--quiet`;
|
|
42
|
+
$cd9bb50514faf076$export$951cb9dc63743241 = `l4OyFa_spectrum-Accordion-itemContent`;
|
|
43
|
+
$cd9bb50514faf076$export$4da8efb546c03356 = `l4OyFa_spectrum-Accordion-itemHeader`;
|
|
44
|
+
$cd9bb50514faf076$export$36876b8193439034 = `l4OyFa_spectrum-Accordion-itemHeading`;
|
|
45
|
+
$cd9bb50514faf076$export$35196e2132b47abd = `l4OyFa_spectrum-Accordion-itemIndicator`;
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
export {$cd9bb50514faf076$exports as default};
|
|
@@ -30,19 +30,19 @@ var $cd9bb50514faf076$export$951cb9dc63743241;
|
|
|
30
30
|
var $cd9bb50514faf076$export$4da8efb546c03356;
|
|
31
31
|
var $cd9bb50514faf076$export$36876b8193439034;
|
|
32
32
|
var $cd9bb50514faf076$export$35196e2132b47abd;
|
|
33
|
-
$cd9bb50514faf076$export$f39a09f249340e2a = `
|
|
34
|
-
$cd9bb50514faf076$export$3751b3d197266426 = `
|
|
35
|
-
$cd9bb50514faf076$export$d35bc1e505d1ebbf = `
|
|
36
|
-
$cd9bb50514faf076$export$911ebb89bba4b634 = `
|
|
37
|
-
$cd9bb50514faf076$export$b8813cd5d7824ce7 = `
|
|
38
|
-
$cd9bb50514faf076$export$15b73a232798b8d3 = `
|
|
39
|
-
$cd9bb50514faf076$export$bed6cbae852b32f0 = `
|
|
40
|
-
$cd9bb50514faf076$export$a1947cb8adf67515 = `
|
|
41
|
-
$cd9bb50514faf076$export$834b47eea3b7caa7 = `
|
|
42
|
-
$cd9bb50514faf076$export$951cb9dc63743241 = `
|
|
43
|
-
$cd9bb50514faf076$export$4da8efb546c03356 = `
|
|
44
|
-
$cd9bb50514faf076$export$36876b8193439034 = `
|
|
45
|
-
$cd9bb50514faf076$export$35196e2132b47abd = `
|
|
33
|
+
$cd9bb50514faf076$export$f39a09f249340e2a = `l4OyFa_focus-ring`;
|
|
34
|
+
$cd9bb50514faf076$export$3751b3d197266426 = `l4OyFa_in-accordion`;
|
|
35
|
+
$cd9bb50514faf076$export$d35bc1e505d1ebbf = `l4OyFa_is-disabled`;
|
|
36
|
+
$cd9bb50514faf076$export$911ebb89bba4b634 = `l4OyFa_is-expanded`;
|
|
37
|
+
$cd9bb50514faf076$export$b8813cd5d7824ce7 = `l4OyFa_is-hovered`;
|
|
38
|
+
$cd9bb50514faf076$export$15b73a232798b8d3 = `l4OyFa_is-pressed`;
|
|
39
|
+
$cd9bb50514faf076$export$bed6cbae852b32f0 = `l4OyFa_spectrum-Accordion`;
|
|
40
|
+
$cd9bb50514faf076$export$a1947cb8adf67515 = `l4OyFa_spectrum-Accordion-item`;
|
|
41
|
+
$cd9bb50514faf076$export$834b47eea3b7caa7 = `l4OyFa_spectrum-Accordion-item--quiet`;
|
|
42
|
+
$cd9bb50514faf076$export$951cb9dc63743241 = `l4OyFa_spectrum-Accordion-itemContent`;
|
|
43
|
+
$cd9bb50514faf076$export$4da8efb546c03356 = `l4OyFa_spectrum-Accordion-itemHeader`;
|
|
44
|
+
$cd9bb50514faf076$export$36876b8193439034 = `l4OyFa_spectrum-Accordion-itemHeading`;
|
|
45
|
+
$cd9bb50514faf076$export$35196e2132b47abd = `l4OyFa_spectrum-Accordion-itemIndicator`;
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
export {$cd9bb50514faf076$exports as default};
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AriaLabelingProps, DOMProps,
|
|
1
|
+
import { AriaLabelingProps, DOMProps, StyleProps, DOMRefValue } from "@react-types/shared";
|
|
2
2
|
import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
|
|
3
3
|
import React from "react";
|
|
4
4
|
export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
|
|
@@ -7,19 +7,22 @@ export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'clas
|
|
|
7
7
|
/** The disclosures within the accordion group. */
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
/** A group of disclosures that can be expanded and collapsed. */
|
|
11
|
+
export const Accordion: (props: SpectrumAccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null;
|
|
11
12
|
export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {
|
|
12
13
|
/** Whether the Disclosure should be displayed with a quiet style. */
|
|
13
14
|
isQuiet?: boolean;
|
|
14
15
|
/** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
|
|
15
16
|
children: React.ReactNode;
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
+
/** A collapsible section of content composed of a heading that expands and collapses a panel. */
|
|
19
|
+
export const Disclosure: (props: SpectrumDisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null;
|
|
18
20
|
export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {
|
|
19
21
|
/** The contents of the accordion panel. */
|
|
20
22
|
children: React.ReactNode;
|
|
21
23
|
}
|
|
22
|
-
|
|
24
|
+
/** The panel that contains the content of the disclosure. */
|
|
25
|
+
export const DisclosurePanel: (props: SpectrumDisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null;
|
|
23
26
|
export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps {
|
|
24
27
|
/**
|
|
25
28
|
* The heading level of the disclosure header.
|
|
@@ -29,22 +32,7 @@ export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProp
|
|
|
29
32
|
/** The contents of the disclosure header. */
|
|
30
33
|
children: React.ReactNode;
|
|
31
34
|
}
|
|
32
|
-
export function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>): React.JSX.Element;
|
|
33
|
-
/** A group of disclosures that can be expanded and collapsed. */
|
|
34
|
-
export const Accordion: (props: SpectrumAccordionProps & {
|
|
35
|
-
ref?: DOMRef<HTMLDivElement>;
|
|
36
|
-
}) => ReturnType<typeof Accordion>;
|
|
37
|
-
/** A collapsible section of content composed of a heading that expands and collapses a panel. */
|
|
38
|
-
export const Disclosure: (props: SpectrumDisclosureProps & {
|
|
39
|
-
ref?: DOMRef<HTMLDivElement>;
|
|
40
|
-
}) => ReturnType<typeof Disclosure>;
|
|
41
|
-
/** The panel that contains the content of the disclosure. */
|
|
42
|
-
export const DisclosurePanel: (props: SpectrumDisclosurePanelProps & {
|
|
43
|
-
ref?: DOMRef<HTMLDivElement>;
|
|
44
|
-
}) => ReturnType<typeof DisclosurePanel>;
|
|
45
35
|
/** The heading of the disclosure. */
|
|
46
|
-
export const DisclosureTitle: (props: SpectrumDisclosureTitleProps &
|
|
47
|
-
ref?: DOMRef<HTMLDivElement>;
|
|
48
|
-
}) => ReturnType<typeof DisclosureTitle>;
|
|
36
|
+
export const DisclosureTitle: (props: SpectrumDisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLHeadingElement>>) => React.ReactElement | null;
|
|
49
37
|
|
|
50
38
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAsBA,uCAAwC,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,UAAU,EAAE,QAAQ;IAClI,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAID,
|
|
1
|
+
{"mappings":";;;AAsBA,uCAAwC,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,UAAU,EAAE,QAAQ;IAClI,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAID,iEAAiE;AACjE,OAAO,MAAM,0HAeX,CAAC;AAEH,wCAAyC,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB,EAAE,UAAU;IACvI,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sHAAsH;IACtH,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,iGAAiG;AACjG,OAAO,MAAM,4HAmBX,CAAC;AAEH,6CAA8C,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC3J,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,6DAA6D;AAC7D,OAAO,MAAM,sIAYX,CAAC;AAEH,6CAA8C,SAAQ,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC3F;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,qCAAqC;AACrC,OAAO,MAAM,0IA2BX,CAAC","sources":["packages/@react-spectrum/accordion/src/packages/@react-spectrum/accordion/src/Accordion.tsx","packages/@react-spectrum/accordion/src/packages/@react-spectrum/accordion/src/index.ts","packages/@react-spectrum/accordion/src/index.ts"],"sourcesContent":[null,null,"/*\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/// <reference types=\"css-module-types\" />\nexport {Disclosure, Accordion, DisclosureTitle, DisclosurePanel} from './Accordion';\nexport type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps} from './Accordion';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
.
|
|
1
|
+
.l4OyFa_spectrum-Accordion {
|
|
2
2
|
margin: 0;
|
|
3
3
|
padding: 0;
|
|
4
4
|
list-style: none;
|
|
5
5
|
display: block;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.
|
|
8
|
+
.l4OyFa_spectrum-Accordion-itemIndicator {
|
|
9
9
|
transition: transform ease var(--spectrum-global-animation-duration-100, .13s);
|
|
10
|
+
box-sizing: content-box;
|
|
10
11
|
padding-inline-start: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
|
|
11
12
|
padding-inline-end: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
|
|
12
13
|
display: block;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
.
|
|
16
|
+
.l4OyFa_spectrum-Accordion-item {
|
|
16
17
|
z-index: inherit;
|
|
17
18
|
border-bottom: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
|
|
18
19
|
border-top: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
|
|
@@ -22,24 +23,24 @@
|
|
|
22
23
|
position: relative;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
.
|
|
26
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_in-accordion:not(:first-of-type) {
|
|
26
27
|
border-top-width: 0;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
.
|
|
30
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_spectrum-Accordion-item--quiet {
|
|
30
31
|
border-top-width: 0;
|
|
31
32
|
border-bottom-width: 0;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
.
|
|
35
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_spectrum-Accordion-item--quiet:first-of-type {
|
|
35
36
|
border-top-width: 0;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
.
|
|
39
|
+
.l4OyFa_spectrum-Accordion-itemHeading {
|
|
39
40
|
margin: 0;
|
|
40
41
|
}
|
|
41
42
|
|
|
42
|
-
.
|
|
43
|
+
.l4OyFa_spectrum-Accordion-itemHeader {
|
|
43
44
|
box-sizing: border-box;
|
|
44
45
|
padding-block: var(--spectrum-global-dimension-size-150);
|
|
45
46
|
min-height: calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));
|
|
@@ -52,12 +53,12 @@
|
|
|
52
53
|
appearance: none;
|
|
53
54
|
background-color: inherit;
|
|
54
55
|
text-align: start;
|
|
56
|
+
width: 100%;
|
|
55
57
|
border-style: solid;
|
|
56
58
|
border-color: #0000;
|
|
57
59
|
outline: none;
|
|
58
60
|
justify-content: flex-start;
|
|
59
61
|
align-items: center;
|
|
60
|
-
width: 100%;
|
|
61
62
|
margin: 0;
|
|
62
63
|
padding-inline-start: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
|
|
63
64
|
padding-inline-end: var(--spectrum-accordion-item-padding, 16px);
|
|
@@ -66,70 +67,66 @@
|
|
|
66
67
|
position: relative;
|
|
67
68
|
}
|
|
68
69
|
|
|
69
|
-
.
|
|
70
|
+
.l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_focus-ring {
|
|
70
71
|
border-radius: var(--spectrum-global-dimension-static-size-100, 8px);
|
|
71
72
|
outline: solid 2px var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
|
|
72
73
|
outline-offset: -2px;
|
|
73
74
|
}
|
|
74
75
|
|
|
75
|
-
.
|
|
76
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_is-expanded .l4OyFa_spectrum-Accordion-itemContent {
|
|
76
77
|
padding: 8px 9px 16px;
|
|
77
78
|
}
|
|
78
79
|
|
|
79
|
-
.
|
|
80
|
-
box-sizing: content-box;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
[dir="ltr"] :is(.xCyAvq_spectrum-Accordion-item.xCyAvq_is-expanded > .xCyAvq_spectrum-Accordion-itemHeading > .xCyAvq_spectrum-Accordion-itemHeader > .xCyAvq_spectrum-Accordion-itemIndicator) {
|
|
80
|
+
[dir="ltr"] :is(.l4OyFa_spectrum-Accordion-item.l4OyFa_is-expanded > .l4OyFa_spectrum-Accordion-itemHeading > .l4OyFa_spectrum-Accordion-itemHeader > .l4OyFa_spectrum-Accordion-itemIndicator) {
|
|
84
81
|
transform: rotate(90deg);
|
|
85
82
|
}
|
|
86
83
|
|
|
87
|
-
[dir="rtl"] :is(.
|
|
84
|
+
[dir="rtl"] :is(.l4OyFa_spectrum-Accordion-item.l4OyFa_is-expanded > .l4OyFa_spectrum-Accordion-itemHeading > .l4OyFa_spectrum-Accordion-itemHeader > .l4OyFa_spectrum-Accordion-itemIndicator) {
|
|
88
85
|
transform: rotate(-90deg);
|
|
89
86
|
}
|
|
90
87
|
|
|
91
|
-
.
|
|
88
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_is-expanded > .l4OyFa_spectrum-Accordion-itemHeader:after {
|
|
92
89
|
height: calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));
|
|
93
90
|
}
|
|
94
91
|
|
|
95
|
-
.
|
|
92
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_is-expanded > .l4OyFa_spectrum-Accordion-itemContent {
|
|
96
93
|
display: block;
|
|
97
94
|
}
|
|
98
95
|
|
|
99
|
-
.
|
|
96
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_is-disabled .l4OyFa_spectrum-Accordion-itemHeader {
|
|
100
97
|
cursor: default;
|
|
101
98
|
}
|
|
102
99
|
|
|
103
|
-
.
|
|
100
|
+
.l4OyFa_spectrum-Accordion-itemHeader {
|
|
104
101
|
color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));
|
|
105
102
|
}
|
|
106
103
|
|
|
107
|
-
.
|
|
104
|
+
.l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_is-hovered, .l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_focus-ring {
|
|
108
105
|
color: var(--spectrum-alias-text-color-hover, var(--spectrum-global-color-gray-900));
|
|
109
106
|
background-color: var(--spectrum-accordion-background-color-hover, var(--spectrum-global-color-gray-200));
|
|
110
107
|
}
|
|
111
108
|
|
|
112
|
-
.
|
|
109
|
+
.l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_is-pressed {
|
|
113
110
|
color: var(--spectrum-accordion-text-color-down, var(--spectrum-global-color-gray-900));
|
|
114
111
|
background-color: var(--spectrum-global-color-gray-300);
|
|
115
112
|
}
|
|
116
113
|
|
|
117
|
-
.
|
|
114
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_is-disabled .l4OyFa_spectrum-Accordion-itemHeader, .l4OyFa_spectrum-Accordion-item.l4OyFa_is-disabled .l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_is-hovered, .l4OyFa_spectrum-Accordion-item.l4OyFa_is-disabled .l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_focus-ring {
|
|
118
115
|
color: var(--spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500));
|
|
119
116
|
background-color: #0000;
|
|
120
117
|
}
|
|
121
118
|
|
|
122
119
|
@media (forced-colors: active) {
|
|
123
|
-
.
|
|
120
|
+
.l4OyFa_spectrum-Accordion-itemHeader {
|
|
124
121
|
border: none;
|
|
125
122
|
}
|
|
126
123
|
|
|
127
|
-
.
|
|
124
|
+
.l4OyFa_spectrum-Accordion-itemHeader.l4OyFa_focus-ring {
|
|
128
125
|
outline: 2px solid canvastext;
|
|
129
126
|
}
|
|
130
127
|
|
|
131
|
-
.
|
|
128
|
+
.l4OyFa_spectrum-Accordion-item.l4OyFa_spectrum-Accordion-item--quiet {
|
|
132
129
|
border: none;
|
|
133
130
|
}
|
|
134
131
|
}
|
|
135
|
-
/*# sourceMappingURL=vars.
|
|
132
|
+
/*# sourceMappingURL=vars.7a67bcf5.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAwBA;;;;;;;AAOA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;AAIA;;;;;AAIE;;;;AAMJ;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCE;;;;;;AAQA;;;;AAUQ;;;;AAGA;;;;AAON;;;;AAKA;;;;AAMA;;;;AAkBJ;;;;AAGE;;;;;AAKA;;;;;AAQE;;;;;AASJ;EACE;;;;EAEE;;;;EAKF","sources":["packages/@adobe/spectrum-css-temp/components/accordion/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.7a67bcf5.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/accordion",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "b37f2790b77543a447fb0dc1833b5d0cfa8d7da5"
|
|
58
58
|
}
|
package/src/Accordion.tsx
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
|
|
13
|
+
import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType, StyleProps} from '@react-types/shared';
|
|
14
14
|
import {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
|
|
15
15
|
import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
|
|
16
16
|
import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
|
|
@@ -29,7 +29,8 @@ export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'clas
|
|
|
29
29
|
|
|
30
30
|
const InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
/** A group of disclosures that can be expanded and collapsed. */
|
|
33
|
+
export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
|
|
33
34
|
props = useProviderProps(props);
|
|
34
35
|
let {styleProps} = useStyleProps(props);
|
|
35
36
|
let domRef = useDOMRef(ref);
|
|
@@ -44,7 +45,7 @@ function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
|
|
|
44
45
|
</DisclosureGroup>
|
|
45
46
|
</InternalAccordionContext.Provider>
|
|
46
47
|
);
|
|
47
|
-
}
|
|
48
|
+
});
|
|
48
49
|
|
|
49
50
|
export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {
|
|
50
51
|
/** Whether the Disclosure should be displayed with a quiet style. */
|
|
@@ -53,7 +54,8 @@ export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'classNam
|
|
|
53
54
|
children: React.ReactNode
|
|
54
55
|
}
|
|
55
56
|
|
|
56
|
-
|
|
57
|
+
/** A collapsible section of content composed of a heading that expands and collapses a panel. */
|
|
58
|
+
export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
|
|
57
59
|
props = useProviderProps(props);
|
|
58
60
|
let {styleProps} = useStyleProps(props);
|
|
59
61
|
let domRef = useDOMRef(ref);
|
|
@@ -72,14 +74,15 @@ function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>)
|
|
|
72
74
|
{props.children}
|
|
73
75
|
</RACDisclosure>
|
|
74
76
|
);
|
|
75
|
-
}
|
|
77
|
+
});
|
|
76
78
|
|
|
77
79
|
export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {
|
|
78
80
|
/** The contents of the accordion panel. */
|
|
79
81
|
children: React.ReactNode
|
|
80
82
|
}
|
|
81
83
|
|
|
82
|
-
|
|
84
|
+
/** The panel that contains the content of the disclosure. */
|
|
85
|
+
export const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
|
|
83
86
|
let {styleProps} = useStyleProps(props);
|
|
84
87
|
let domRef = useDOMRef(ref);
|
|
85
88
|
return (
|
|
@@ -91,7 +94,7 @@ function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDi
|
|
|
91
94
|
{props.children}
|
|
92
95
|
</RACDisclosurePanel>
|
|
93
96
|
);
|
|
94
|
-
}
|
|
97
|
+
});
|
|
95
98
|
|
|
96
99
|
export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps {
|
|
97
100
|
/**
|
|
@@ -103,7 +106,8 @@ export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProp
|
|
|
103
106
|
children: React.ReactNode
|
|
104
107
|
}
|
|
105
108
|
|
|
106
|
-
|
|
109
|
+
/** The heading of the disclosure. */
|
|
110
|
+
export const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
|
|
107
111
|
let {styleProps} = useStyleProps(props);
|
|
108
112
|
let {level = 3} = props;
|
|
109
113
|
let {direction} = useLocale();
|
|
@@ -130,20 +134,4 @@ function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHe
|
|
|
130
134
|
</Button>
|
|
131
135
|
</Heading>
|
|
132
136
|
);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/** A group of disclosures that can be expanded and collapsed. */
|
|
136
|
-
const _Accordion = forwardRef(Accordion) as (props: SpectrumAccordionProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Accordion>;
|
|
137
|
-
export {_Accordion as Accordion};
|
|
138
|
-
|
|
139
|
-
/** A collapsible section of content composed of a heading that expands and collapses a panel. */
|
|
140
|
-
const _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Disclosure>;
|
|
141
|
-
export {_Disclosure as Disclosure};
|
|
142
|
-
|
|
143
|
-
/** The panel that contains the content of the disclosure. */
|
|
144
|
-
const _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosurePanel>;
|
|
145
|
-
export {_DisclosurePanel as DisclosurePanel};
|
|
146
|
-
|
|
147
|
-
/** The heading of the disclosure. */
|
|
148
|
-
const _DisclosureTitle = forwardRef(DisclosureTitle) as (props: SpectrumDisclosureTitleProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosureTitle>;
|
|
149
|
-
export {_DisclosureTitle as DisclosureTitle};
|
|
137
|
+
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAwBA;;;;;;;AAOA;;;;;;;AASA;;;;;;;;;;AAWE;;;;AAIA;;;;;AAIE;;;;AAMJ;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCE;;;;;;AAQA;;;;AASM;;;;AAGE;;;;AAGA;;;;AAON;;;;AAKA;;;;AAMA;;;;AAkBJ;;;;AAGE;;;;;AAKA;;;;;AAQE;;;;;AASJ;EACE;;;;EAEE;;;;EAKF","sources":["packages/@adobe/spectrum-css-temp/components/accordion/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.27b25cc7.css.map"}
|