@react-spectrum/accordion 3.0.0-alpha.32 → 3.0.0-alpha.34

package/dist/accordion_vars_css.module.js

@@ -6,8 +6,8 @@ var $cd9bb50514faf076$exports = {};
 
 $parcel$export($cd9bb50514faf076$exports, "focus-ring", () => $cd9bb50514faf076$export$f39a09f249340e2a, (v) => $cd9bb50514faf076$export$f39a09f249340e2a = v);
 $parcel$export($cd9bb50514faf076$exports, "is-disabled", () => $cd9bb50514faf076$export$d35bc1e505d1ebbf, (v) => $cd9bb50514faf076$export$d35bc1e505d1ebbf = v);
+$parcel$export($cd9bb50514faf076$exports, "is-expanded", () => $cd9bb50514faf076$export$911ebb89bba4b634, (v) => $cd9bb50514faf076$export$911ebb89bba4b634 = v);
 $parcel$export($cd9bb50514faf076$exports, "is-hovered", () => $cd9bb50514faf076$export$b8813cd5d7824ce7, (v) => $cd9bb50514faf076$export$b8813cd5d7824ce7 = v);
-$parcel$export($cd9bb50514faf076$exports, "is-open", () => $cd9bb50514faf076$export$a9781837241c946d, (v) => $cd9bb50514faf076$export$a9781837241c946d = v);
 $parcel$export($cd9bb50514faf076$exports, "spectrum-Accordion", () => $cd9bb50514faf076$export$bed6cbae852b32f0, (v) => $cd9bb50514faf076$export$bed6cbae852b32f0 = v);
 $parcel$export($cd9bb50514faf076$exports, "spectrum-Accordion-item", () => $cd9bb50514faf076$export$a1947cb8adf67515, (v) => $cd9bb50514faf076$export$a1947cb8adf67515 = v);
 $parcel$export($cd9bb50514faf076$exports, "spectrum-Accordion-itemContent", () => $cd9bb50514faf076$export$951cb9dc63743241, (v) => $cd9bb50514faf076$export$951cb9dc63743241 = v);
@@ -16,24 +16,24 @@ $parcel$export($cd9bb50514faf076$exports, "spectrum-Accordion-itemHeading", () =
 $parcel$export($cd9bb50514faf076$exports, "spectrum-Accordion-itemIndicator", () => $cd9bb50514faf076$export$35196e2132b47abd, (v) => $cd9bb50514faf076$export$35196e2132b47abd = v);
 var $cd9bb50514faf076$export$f39a09f249340e2a;
 var $cd9bb50514faf076$export$d35bc1e505d1ebbf;
+var $cd9bb50514faf076$export$911ebb89bba4b634;
 var $cd9bb50514faf076$export$b8813cd5d7824ce7;
-var $cd9bb50514faf076$export$a9781837241c946d;
 var $cd9bb50514faf076$export$bed6cbae852b32f0;
 var $cd9bb50514faf076$export$a1947cb8adf67515;
 var $cd9bb50514faf076$export$951cb9dc63743241;
 var $cd9bb50514faf076$export$4da8efb546c03356;
 var $cd9bb50514faf076$export$36876b8193439034;
 var $cd9bb50514faf076$export$35196e2132b47abd;
-$cd9bb50514faf076$export$f39a09f249340e2a = `_7gO6Sq_focus-ring`;
-$cd9bb50514faf076$export$d35bc1e505d1ebbf = `_7gO6Sq_is-disabled`;
-$cd9bb50514faf076$export$b8813cd5d7824ce7 = `_7gO6Sq_is-hovered`;
-$cd9bb50514faf076$export$a9781837241c946d = `_7gO6Sq_is-open`;
-$cd9bb50514faf076$export$bed6cbae852b32f0 = `_7gO6Sq_spectrum-Accordion`;
-$cd9bb50514faf076$export$a1947cb8adf67515 = `_7gO6Sq_spectrum-Accordion-item`;
-$cd9bb50514faf076$export$951cb9dc63743241 = `_7gO6Sq_spectrum-Accordion-itemContent`;
-$cd9bb50514faf076$export$4da8efb546c03356 = `_7gO6Sq_spectrum-Accordion-itemHeader`;
-$cd9bb50514faf076$export$36876b8193439034 = `_7gO6Sq_spectrum-Accordion-itemHeading`;
-$cd9bb50514faf076$export$35196e2132b47abd = `_7gO6Sq_spectrum-Accordion-itemIndicator`;
+$cd9bb50514faf076$export$f39a09f249340e2a = `spk0dG_focus-ring`;
+$cd9bb50514faf076$export$d35bc1e505d1ebbf = `spk0dG_is-disabled`;
+$cd9bb50514faf076$export$911ebb89bba4b634 = `spk0dG_is-expanded`;
+$cd9bb50514faf076$export$b8813cd5d7824ce7 = `spk0dG_is-hovered`;
+$cd9bb50514faf076$export$bed6cbae852b32f0 = `spk0dG_spectrum-Accordion`;
+$cd9bb50514faf076$export$a1947cb8adf67515 = `spk0dG_spectrum-Accordion-item`;
+$cd9bb50514faf076$export$951cb9dc63743241 = `spk0dG_spectrum-Accordion-itemContent`;
+$cd9bb50514faf076$export$4da8efb546c03356 = `spk0dG_spectrum-Accordion-itemHeader`;
+$cd9bb50514faf076$export$36876b8193439034 = `spk0dG_spectrum-Accordion-itemHeading`;
+$cd9bb50514faf076$export$35196e2132b47abd = `spk0dG_spectrum-Accordion-itemIndicator`;
 
 
 export {$cd9bb50514faf076$exports as default};

package/dist/accordion_vars_css.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AATA,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAAgC,CAAC,mBAAmB,CAAC;AACrD,4CAA+B,CAAC,kBAAkB,CAAC;AACnD,4CAA4B,CAAC,eAAe,CAAC;AAC7C,4CAAuC,CAAC,0BAA0B,CAAC;AACnE,4CAA4C,CAAC,+BAA+B,CAAC;AAC7E,4CAAmD,CAAC,sCAAsC,CAAC;AAC3F,4CAAkD,CAAC,qCAAqC,CAAC;AACzF,4CAAmD,CAAC,sCAAsC,CAAC;AAC3F,4CAAqD,CAAC,wCAAwC,CAAC","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":"accordion_vars_css.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AATA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAqD,CAAC,uCAAuC,CAAC","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":"accordion_vars_css.module.js.map"}

package/dist/import.mjs

@@ -1,5 +1,4 @@
-import {Accordion as $2a5a5b7faca81754$export$a766cd26d0d69044} from "./Accordion.mjs";
-import {Item as $8ae4d4d1aa0c5e03$re_export$Item} from "@react-stately/collections";
+import {Accordion as $2a5a5b7faca81754$export$a766cd26d0d69044, Disclosure as $2a5a5b7faca81754$export$74a362b31437ec83, DisclosureHeader as $2a5a5b7faca81754$export$1e037ddd32f5b8ac, DisclosurePanel as $2a5a5b7faca81754$export$feabaa331e1d464c} from "./Accordion.mjs";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,6 +14,5 @@ import {Item as $8ae4d4d1aa0c5e03$re_export$Item} from "@react-stately/collectio
 
 
 
-
-export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $8ae4d4d1aa0c5e03$re_export$Item as Item};
+export {$2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$1e037ddd32f5b8ac as DisclosureHeader, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel};
 //# sourceMappingURL=module.js.map

package/dist/main.js

@@ -1,13 +1,14 @@
 var $d8f45715b3ce327a$exports = require("./Accordion.main.js");
-var $6boyC$reactstatelycollections = require("@react-stately/collections");
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
+$parcel$export(module.exports, "Disclosure", () => $d8f45715b3ce327a$exports.Disclosure);
 $parcel$export(module.exports, "Accordion", () => $d8f45715b3ce327a$exports.Accordion);
-$parcel$export(module.exports, "Item", () => $6boyC$reactstatelycollections.Item);
+$parcel$export(module.exports, "DisclosureHeader", () => $d8f45715b3ce327a$exports.DisclosureHeader);
+$parcel$export(module.exports, "DisclosurePanel", () => $d8f45715b3ce327a$exports.DisclosurePanel);
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -22,5 +23,4 @@ $parcel$export(module.exports, "Item", () => $6boyC$reactstatelycollections.Item
 
 
 
-
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC,GACD,0CAA0C","sources":["packages/@react-spectrum/accordion/src/index.ts"],"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/// <reference types=\"css-module-types\" />\nexport {Accordion} from './Accordion';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumAccordionProps} from '@react-types/accordion';\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GACD,0CAA0C","sources":["packages/@react-spectrum/accordion/src/index.ts"],"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/// <reference types=\"css-module-types\" />\nexport {Disclosure, Accordion, DisclosureHeader, DisclosurePanel} from './Accordion';\nexport type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureHeaderProps} from './Accordion';\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,5 +1,4 @@
-import {Accordion as $2a5a5b7faca81754$export$a766cd26d0d69044} from "./Accordion.module.js";
-import {Item as $8ae4d4d1aa0c5e03$re_export$Item} from "@react-stately/collections";
+import {Accordion as $2a5a5b7faca81754$export$a766cd26d0d69044, Disclosure as $2a5a5b7faca81754$export$74a362b31437ec83, DisclosureHeader as $2a5a5b7faca81754$export$1e037ddd32f5b8ac, DisclosurePanel as $2a5a5b7faca81754$export$feabaa331e1d464c} from "./Accordion.module.js";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -15,6 +14,5 @@ import {Item as $8ae4d4d1aa0c5e03$re_export$Item} from "@react-stately/collectio
 
 
 
-
-export {$2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $8ae4d4d1aa0c5e03$re_export$Item as Item};
+export {$2a5a5b7faca81754$export$74a362b31437ec83 as Disclosure, $2a5a5b7faca81754$export$a766cd26d0d69044 as Accordion, $2a5a5b7faca81754$export$1e037ddd32f5b8ac as DisclosureHeader, $2a5a5b7faca81754$export$feabaa331e1d464c as DisclosurePanel};
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC,GACD,0CAA0C","sources":["packages/@react-spectrum/accordion/src/index.ts"],"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/// <reference types=\"css-module-types\" />\nexport {Accordion} from './Accordion';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumAccordionProps} from '@react-types/accordion';\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC,GACD,0CAA0C","sources":["packages/@react-spectrum/accordion/src/index.ts"],"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/// <reference types=\"css-module-types\" />\nexport {Disclosure, Accordion, DisclosureHeader, DisclosurePanel} from './Accordion';\nexport type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureHeaderProps} from './Accordion';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,11 +1,46 @@
-import { DOMRef } from "@react-types/shared";
+import { AriaLabelingProps, DOMProps, DOMRef, StyleProps } from "@react-types/shared";
+import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
 import React from "react";
-import { SpectrumAccordionProps } from "@react-types/accordion";
-export function Accordion<T extends object>(props: SpectrumAccordionProps<T>, ref: DOMRef<HTMLDivElement>): React.JSX.Element;
-export const Accordion: <T>(props: SpectrumAccordionProps<T> & {
+export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
+    /** The disclosures within the accordion group. */
+    children: React.ReactNode;
+}
+export function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>): React.JSX.Element;
+export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps {
+    /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
+    children: React.ReactNode;
+}
+export function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>): React.JSX.Element;
+export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps {
+    /** The contents of the accordion panel. */
+    children: React.ReactNode;
+}
+export function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>): React.JSX.Element;
+export interface SpectrumDisclosureHeaderProps extends DOMProps, AriaLabelingProps {
+    /**
+     * The heading level of the disclosure header.
+     * @default 3
+     */
+    level?: number;
+    /** The contents of the disclosure header. */
+    children: React.ReactNode;
+}
+export function DisclosureHeader(props: SpectrumDisclosureHeaderProps, ref: DOMRef<HTMLHeadingElement>): React.JSX.Element;
+/** A group of disclosures that can be expanded and collapsed. */
+export const Accordion: (props: SpectrumAccordionProps & {
     ref?: DOMRef<HTMLDivElement>;
 }) => ReturnType<typeof Accordion>;
-export { Item } from '@react-stately/collections';
-export type { SpectrumAccordionProps } from '@react-types/accordion';
+/** A collapsible section of content composed of a heading that expands and collapses a panel. */
+export const Disclosure: (props: SpectrumDisclosureProps & {
+    ref?: DOMRef<HTMLDivElement>;
+}) => ReturnType<typeof Disclosure>;
+/** The panel that contains the content of an disclosure. */
+export const DisclosurePanel: (props: SpectrumDisclosurePanelProps & {
+    ref?: DOMRef<HTMLDivElement>;
+}) => ReturnType<typeof DisclosurePanel>;
+/** The heading of the disclosure. */
+export const DisclosureHeader: (props: SpectrumDisclosureHeaderProps & {
+    ref?: DOMRef<HTMLDivElement>;
+}) => ReturnType<typeof DisclosureHeader>;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AA4BA,0BAAmB,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,cAAc,CAAC,qBAmBjG;AAmDD,OAAA,MAAM,WAAsC,CAAC,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,UAAU,CAAC,gBAAgB,CAAC,CAAC;ACrFnJ,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,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 {Accordion} from './Accordion';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumAccordionProps} from '@react-types/accordion';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AAsBA,uCAAwC,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,UAAU,EAAE,QAAQ;IAClI,kDAAkD;IAClD,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,0BAAmB,KAAK,EAAE,sBAAsB,EAAE,GAAG,EAAE,OAAO,cAAc,CAAC,qBAa5E;AAED,wCAAyC,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IAC3H,sHAAsH;IACtH,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,2BAAoB,KAAK,EAAE,uBAAuB,EAAE,GAAG,EAAE,OAAO,cAAc,CAAC,qBAc9E;AAED,6CAA8C,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,QAAQ,EAAE,iBAAiB;IAC/I,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,gCAAyB,KAAK,EAAE,4BAA4B,EAAE,GAAG,EAAE,OAAO,cAAc,CAAC,qBAOxF;AAED,8CAA+C,SAAQ,QAAQ,EAAE,iBAAiB;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAED,iCAA0B,KAAK,EAAE,6BAA6B,EAAE,GAAG,EAAE,OAAO,kBAAkB,CAAC,qBAyB9F;AAED,iEAAiE;AACjE,OAAA,MAAM,WAAsC,CAAC,KAAK,EAAE,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,UAAU,CAAC,gBAAgB,CAAC,CAAC;AAG7I,iGAAiG;AACjG,OAAA,MAAM,YAAwC,CAAC,KAAK,EAAE,uBAAuB,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,UAAU,CAAC,iBAAiB,CAAC,CAAC;AAGjJ,4DAA4D;AAC5D,OAAA,MAAM,iBAAkD,CAAC,KAAK,EAAE,4BAA4B,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAGrK,qCAAqC;AACrC,OAAA,MAAM,kBAAoD,CAAC,KAAK,EAAE,6BAA6B,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,UAAU,CAAC,uBAAuB,CAAC,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, DisclosureHeader, DisclosurePanel} from './Accordion';\nexport type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureHeaderProps} from './Accordion';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/vars.77b903e1.css

@@ -0,0 +1,145 @@
+.spk0dG_spectrum-Accordion {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.spk0dG_spectrum-Accordion-itemIndicator {
+  transition: transform ease var(--spectrum-global-animation-duration-100, .13s);
+  padding-inline-start: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
+  padding-inline-end: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
+  display: block;
+}
+
+.spk0dG_spectrum-Accordion-item {
+  z-index: inherit;
+  border-bottom: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid transparent;
+  margin: 0;
+  list-style: none;
+  display: list-item;
+  position: relative;
+}
+
+.spk0dG_spectrum-Accordion-item:first-of-type {
+  border-top: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid transparent;
+}
+
+.spk0dG_spectrum-Accordion-itemHeading {
+  margin: 0;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader {
+  box-sizing: border-box;
+  padding-block: var(--spectrum-global-dimension-size-150);
+  min-height: calc(var(--spectrum-accordion-item-height, 40px)  - var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));
+  font-size: var(--spectrum-global-dimension-font-size-300);
+  text-overflow: ellipsis;
+  cursor: default;
+  line-height: 1.3;
+  font-weight: var(--spectrum-global-font-weight-bold, 700);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: inherit;
+  text-align: start;
+  border: 0;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding-inline-start: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
+  padding-inline-end: var(--spectrum-accordion-item-padding, 16px);
+  font-family: inherit;
+  display: flex;
+  position: relative;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus {
+  outline: none;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus:after {
+  content: "";
+  top: calc(var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) * -1);
+  bottom: calc(var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) * -1);
+  width: var(--spectrum-accordion-item-border-size-key-focus, 2px);
+  position: absolute;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  left: 0;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  left: 0;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  right: 0;
+}
+
+.spk0dG_spectrum-Accordion-itemHeader:focus:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  right: 0;
+}
+
+.spk0dG_spectrum-Accordion-itemContent {
+  padding: 0 var(--spectrum-accordion-item-content-padding, var(--spectrum-global-dimension-size-200)) var(--spectrum-accordion-item-content-padding, var(--spectrum-global-dimension-size-200)) var(--spectrum-accordion-item-content-padding, var(--spectrum-global-dimension-size-200));
+  display: none;
+}
+
+[dir="ltr"] :is(.spk0dG_spectrum-Accordion-item.spk0dG_is-expanded > .spk0dG_spectrum-Accordion-itemHeading > .spk0dG_spectrum-Accordion-itemHeader > .spk0dG_spectrum-Accordion-itemIndicator) {
+  transform: rotate(90deg);
+}
+
+[dir="rtl"] :is(.spk0dG_spectrum-Accordion-item.spk0dG_is-expanded > .spk0dG_spectrum-Accordion-itemHeading > .spk0dG_spectrum-Accordion-itemHeader > .spk0dG_spectrum-Accordion-itemIndicator) {
+  transform: rotate(-90deg);
+}
+
+.spk0dG_spectrum-Accordion-item.spk0dG_is-expanded > .spk0dG_spectrum-Accordion-itemHeader:after {
+  height: calc(var(--spectrum-accordion-item-height, 40px)  - var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));
+}
+
+.spk0dG_spectrum-Accordion-item.spk0dG_is-expanded > .spk0dG_spectrum-Accordion-itemContent {
+  display: block;
+}
+
+.spk0dG_spectrum-Accordion-item.spk0dG_is-disabled .spk0dG_spectrum-Accordion-itemHeader {
+  cursor: default;
+}
+
+.spk0dG_spectrum-Accordion-item {
+  border-color: var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
+}
+
+.spk0dG_spectrum-Accordion-item:first-of-type {
+  border-top-color: var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
+}
+
+.spk0dG_spectrum-Accordion-itemHeader {
+  color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));
+}
+
+.spk0dG_spectrum-Accordion-itemHeader.spk0dG_is-hovered {
+  color: var(--spectrum-alias-text-color-hover, var(--spectrum-global-color-gray-900));
+  background-color: var(--spectrum-accordion-background-color-hover, var(--spectrum-global-color-gray-200));
+}
+
+.spk0dG_spectrum-Accordion-itemHeader.spk0dG_focus-ring:after {
+  background-color: var(--spectrum-accordion-border-left-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.spk0dG_spectrum-Accordion-item.spk0dG_is-expanded .spk0dG_spectrum-Accordion-itemHeader.spk0dG_is-hovered {
+  background-color: #0000;
+}
+
+.spk0dG_spectrum-Accordion-item.spk0dG_is-disabled .spk0dG_spectrum-Accordion-itemHeader, .spk0dG_spectrum-Accordion-item.spk0dG_is-disabled .spk0dG_spectrum-Accordion-itemHeader.spk0dG_is-hovered, .spk0dG_spectrum-Accordion-item.spk0dG_is-disabled .spk0dG_spectrum-Accordion-itemHeader.spk0dG_focus-ring {
+  color: var(--spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500));
+  background-color: #0000;
+}
+
+@media (forced-colors: active) {
+  .spk0dG_spectrum-Accordion-itemHeader.spk0dG_focus-ring {
+    outline: 3px solid canvastext;
+  }
+}
+/*# sourceMappingURL=vars.77b903e1.css.map */

package/dist/vars.77b903e1.css.map

@@ -0,0 +1 @@
+{"mappings":"AAwBA;;;;;;;AAOA;;;;;;;AASA;;;;;;;;;AAUE;;;;AAKF;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;AAiCE;;;;AAGE;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaJ;;;;;AAUU;;;;AAGA;;;;AAON;;;;AAKA;;;;AAMA;;;;AAkBJ;;;;AAGE;;;;AAKF;;;;AAGE;;;;;AAOE;;;;AASE;;;;AASF;;;;;AASJ;EAEI","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.77b903e1.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/accordion",
-  "version": "3.0.0-alpha.32",
+  "version": "3.0.0-alpha.34",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,18 +36,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/accordion": "3.0.0-alpha.30",
-    "@react-aria/focus": "^3.18.0",
-    "@react-aria/i18n": "^3.12.0",
-    "@react-aria/interactions": "^3.22.0",
-    "@react-aria/utils": "^3.25.0",
-    "@react-spectrum/utils": "^3.11.8",
-    "@react-stately/collections": "^3.10.8",
-    "@react-stately/tree": "^3.8.2",
-    "@react-types/accordion": "3.0.0-alpha.22",
-    "@react-types/shared": "^3.24.0",
-    "@spectrum-icons/ui": "^3.6.8",
-    "@swc/helpers": "^0.5.0"
+    "@react-aria/accordion": "3.0.0-alpha.34",
+    "@react-aria/focus": "^3.18.3",
+    "@react-aria/i18n": "^3.12.3",
+    "@react-aria/interactions": "^3.22.3",
+    "@react-aria/utils": "^3.25.3",
+    "@react-spectrum/utils": "^3.11.11",
+    "@react-stately/collections": "^3.11.0",
+    "@react-stately/tree": "^3.8.5",
+    "@react-types/shared": "^3.25.0",
+    "@spectrum-icons/ui": "^3.6.10",
+    "@swc/helpers": "^0.5.0",
+    "react-aria-components": "^1.4.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
@@ -59,6 +59,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
-}
+  }
+}

package/src/Accordion.tsx

@@ -10,91 +10,120 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
+import {Button, UNSTABLE_DisclosureGroup as DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, Node} from '@react-types/shared';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {FocusRing} from '@react-aria/focus';
-import React, {forwardRef, useRef} from 'react';
-import {SpectrumAccordionProps} from '@react-types/accordion';
+import React, {forwardRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
-import {TreeState, useTreeState} from '@react-stately/tree';
-import {useAccordion, useAccordionItem} from '@react-aria/accordion';
-import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
+export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
+  /** The disclosures within the accordion group. */
+  children: React.ReactNode
+}
 
-function Accordion<T extends object>(props: SpectrumAccordionProps<T>, ref: DOMRef<HTMLDivElement>) {
+function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
-  let state = useTreeState<T>(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
-  let {accordionProps} = useAccordion(props, state, domRef);
-
   return (
-    <div
-      {...filterDOMProps(props)}
-      {...accordionProps}
+    <DisclosureGroup
+      {...props}
       {...styleProps}
       ref={domRef}
       className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>
-      {[...state.collection].map(item => (
-        <AccordionItem<T> key={item.key} item={item} state={state} />
-      ))}
-    </div>
+      {props.children}
+    </DisclosureGroup>
   );
 }
 
-interface AccordionItemProps<T> {
-  item: Node<T>,
-  state: TreeState<T>
+export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps  {
+  /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
+  children: React.ReactNode
 }
 
-function AccordionItem<T>(props: AccordionItemProps<T>) {
+function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
-  let ref = useRef<HTMLButtonElement>(null);
-  let {state, item} = props;
-  let {buttonProps, regionProps} = useAccordionItem<T>(props, state, ref);
-  let isOpen = state.expandedKeys.has(item.key);
-  let isDisabled = state.disabledKeys.has(item.key);
-  let {isHovered, hoverProps} = useHover({isDisabled});
-  let {direction} = useLocale();
-
+  let domRef = useDOMRef(ref);
   return (
-    <div
-      className={classNames(styles, 'spectrum-Accordion-item', {
-        'is-open': isOpen,
+    <RACDisclosure
+      {...props}
+      ref={domRef}
+      className={({isExpanded, isDisabled}) => classNames(styles, 'spectrum-Accordion-item', {
+        'is-expanded': isExpanded,
         'is-disabled': isDisabled
       })}>
-      <h3 className={classNames(styles, 'spectrum-Accordion-itemHeading')}>
-        <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
-          <button
-            {...mergeProps(buttonProps, hoverProps)}
-            ref={ref}
-            className={classNames(styles, 'spectrum-Accordion-itemHeader', {
-              'is-hovered': isHovered
-            })}>
-            {direction === 'ltr' ? (
-              <ChevronRightMedium
-                aria-hidden="true"
-                UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />
+      {props.children}
+    </RACDisclosure>
+  );
+}
+
+export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps {
+  /** The contents of the accordion panel. */
+  children: React.ReactNode
+}
+
+function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+  let domRef = useDOMRef(ref);
+  return (
+    <RACDisclosurePanel ref={domRef} className={classNames(styles, 'spectrum-Accordion-itemContent')} {...props}>
+      {props.children}
+    </RACDisclosurePanel>
+  );
+}
+
+export interface SpectrumDisclosureHeaderProps extends DOMProps, AriaLabelingProps {
+  /**
+   * The heading level of the disclosure header.
+   * @default 3
+   */
+  level?: number,
+  /** The contents of the disclosure header. */
+  children: React.ReactNode
+}
+
+function DisclosureHeader(props: SpectrumDisclosureHeaderProps, ref: DOMRef<HTMLHeadingElement>) {
+  let {level = 3} = props;
+  let {direction} = useLocale();
+  let domRef = useDOMRef(ref);
+  return (
+    <Heading ref={domRef} level={level} className={classNames(styles, 'spectrum-Accordion-itemHeading')}>
+      <Button
+        slot="trigger"
+        className={({isHovered, isFocusVisible}) => classNames(styles, 'spectrum-Accordion-itemHeader', {
+          'is-hovered': isHovered,
+          'focus-ring': isFocusVisible
+        })}>
+        {direction === 'ltr' ? (
+          <ChevronRightMedium
+            aria-hidden="true"
+            UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />
               ) : (
                 <ChevronLeftMedium
                   aria-hidden="true"
                   UNSAFE_className={classNames(styles, 'spectrum-Accordion-itemIndicator')} />
               )}
-            {item.props.title}
-          </button>
-        </FocusRing>
-      </h3>
-      <div {...regionProps} className={classNames(styles, 'spectrum-Accordion-itemContent')}>
-        {item.props.children}
-      </div>
-    </div>
+        {props.children}
+      </Button>
+    </Heading>
   );
 }
 
-const _Accordion = forwardRef(Accordion) as <T>(props: SpectrumAccordionProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Accordion>;
+/** A group of disclosures that can be expanded and collapsed. */
+const _Accordion = forwardRef(Accordion) as (props: SpectrumAccordionProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Accordion>;
 export {_Accordion as Accordion};
+
+/** A collapsible section of content composed of a heading that expands and collapses a panel. */
+const _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Disclosure>;
+export {_Disclosure as Disclosure};
+
+/** The panel that contains the content of an disclosure. */
+const _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosurePanel>;
+export {_DisclosurePanel as DisclosurePanel};
+
+/** The heading of the disclosure. */
+const _DisclosureHeader = forwardRef(DisclosureHeader) as (props: SpectrumDisclosureHeaderProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosureHeader>;
+export {_DisclosureHeader as DisclosureHeader};

package/src/index.ts

@@ -10,6 +10,5 @@
  * governing permissions and limitations under the License.
  */
 /// <reference types="css-module-types" />
-export {Accordion} from './Accordion';
-export {Item} from '@react-stately/collections';
-export type {SpectrumAccordionProps} from '@react-types/accordion';
+export {Disclosure, Accordion, DisclosureHeader, DisclosurePanel} from './Accordion';
+export type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureHeaderProps} from './Accordion';