@react-spectrum/accordion 3.0.0-nightly.5042 → 3.0.1

package/src/Accordion.tsx

@@ -10,91 +10,128 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType, StyleProps} from '@react-types/shared';
+import {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, 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, {createContext, 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 {
+  /** Whether the Accordion should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /** The disclosures within the accordion group. */
+  children: React.ReactNode
+}
+
+const InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);
 
-function Accordion<T extends object>(props: SpectrumAccordionProps<T>, ref: DOMRef<HTMLDivElement>) {
+/** A group of disclosures that can be expanded and collapsed. */
+export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(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 (
+    <InternalAccordionContext.Provider value={{isQuiet: props.isQuiet || false}}>
+      <DisclosureGroup
+        {...props}
+        {...styleProps}
+        ref={domRef}
+        className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>
+        {props.children}
+      </DisclosureGroup>
+    </InternalAccordionContext.Provider>
+  );
+});
+
+export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps, StyleProps {
+  /** Whether the Disclosure should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
+  children: React.ReactNode
+}
 
+/** A collapsible section of content composed of a heading that expands and collapses a panel. */
+export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
+  props = useProviderProps(props);
+  let {styleProps} = useStyleProps(props);
+  let domRef = useDOMRef(ref);
+  let accordionContext = React.useContext(InternalAccordionContext)!;
   return (
-    <div
-      {...filterDOMProps(props)}
-      {...accordionProps}
+    <RACDisclosure
+      {...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>
+      className={({isExpanded, isDisabled}) => classNames(styles, 'spectrum-Accordion-item', {
+        'spectrum-Accordion-item--quiet': accordionContext?.isQuiet ?? props.isQuiet,
+        'is-expanded': isExpanded,
+        'is-disabled': isDisabled,
+        'in-accordion': accordionContext != null
+      }, styleProps.className)}>
+      {props.children}
+    </RACDisclosure>
   );
+});
+
+export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps, StyleProps {
+  /** The contents of the accordion panel. */
+  children: React.ReactNode
 }
 
-interface AccordionItemProps<T> {
-  item: Node<T>,
-  state: TreeState<T>
+/** The panel that contains the content of the disclosure. */
+export const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+  let {styleProps} = useStyleProps(props);
+  let domRef = useDOMRef(ref);
+  return (
+    <RACDisclosurePanel
+      ref={domRef}
+      {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'role'>}
+      className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)} 
+      {...props}>
+      {props.children}
+    </RACDisclosurePanel>
+  );
+});
+
+export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * The heading level of the disclosure header.
+   * @default 3
+   */
+  level?: number,
+  /** The contents of the disclosure header. */
+  children: React.ReactNode
 }
 
-function AccordionItem<T>(props: AccordionItemProps<T>) {
-  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});
+/** The heading of the disclosure. */
+export const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
+  let {styleProps} = useStyleProps(props);
+  let {level = 3} = props;
   let {direction} = useLocale();
-
+  let domRef = useDOMRef(ref);
   return (
-    <div
-      className={classNames(styles, 'spectrum-Accordion-item', {
-        'is-open': isOpen,
-        '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')} />
+    <Heading ref={domRef} level={level} {...styleProps} className={classNames(styles, 'spectrum-Accordion-itemHeading', styleProps.className)}>
+      <Button
+        slot="trigger"
+        className={({isHovered, isFocusVisible, isPressed}) => classNames(styles, 'spectrum-Accordion-itemHeader', {
+          'is-hovered': isHovered,
+          'is-pressed': isPressed,
+          '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>;
-export {_Accordion as Accordion};
+});

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, DisclosureTitle, DisclosurePanel} from './Accordion';
+export type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps} from './Accordion';

package/dist/vars.1361683a.css

@@ -1,144 +0,0 @@
-._7gO6Sq_spectrum-Accordion {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: block;
-}
-
-._7gO6Sq_spectrum-Accordion-itemIndicator {
-  transition: transform ease var(--spectrum-global-animation-duration-100, .13s);
-  padding-inline-start: var(--spectrum-accordion-icon-spacing, 16px);
-  padding-inline-end: var(--spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100));
-  display: block;
-}
-
-._7gO6Sq_spectrum-Accordion-item {
-  z-index: inherit;
-  border-bottom: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid transparent;
-  margin: 0;
-  display: list-item;
-  position: relative;
-}
-
-._7gO6Sq_spectrum-Accordion-item:first-of-type {
-  border-top: var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) solid transparent;
-}
-
-._7gO6Sq_spectrum-Accordion-itemHeading {
-  margin: 0;
-}
-
-._7gO6Sq_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: 2px;
-  padding-inline-end: var(--spectrum-accordion-item-padding, 16px);
-  font-family: inherit;
-  display: flex;
-  position: relative;
-}
-
-._7gO6Sq_spectrum-Accordion-itemHeader:focus {
-  outline: none;
-}
-
-._7gO6Sq_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;
-}
-
-._7gO6Sq_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;
-}
-
-._7gO6Sq_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;
-}
-
-._7gO6Sq_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;
-}
-
-._7gO6Sq_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;
-}
-
-._7gO6Sq_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(._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-open > ._7gO6Sq_spectrum-Accordion-itemHeading > ._7gO6Sq_spectrum-Accordion-itemHeader > ._7gO6Sq_spectrum-Accordion-itemIndicator) {
-  transform: rotate(90deg);
-}
-
-[dir="rtl"] :is(._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-open > ._7gO6Sq_spectrum-Accordion-itemHeading > ._7gO6Sq_spectrum-Accordion-itemHeader > ._7gO6Sq_spectrum-Accordion-itemIndicator) {
-  transform: rotate(-90deg);
-}
-
-._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-open > ._7gO6Sq_spectrum-Accordion-itemHeader:after {
-  height: calc(var(--spectrum-accordion-item-height, 40px)  - var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));
-}
-
-._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-open > ._7gO6Sq_spectrum-Accordion-itemContent {
-  display: block;
-}
-
-._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-disabled ._7gO6Sq_spectrum-Accordion-itemHeader {
-  cursor: default;
-}
-
-._7gO6Sq_spectrum-Accordion-item {
-  border-color: var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
-}
-
-._7gO6Sq_spectrum-Accordion-item:first-of-type {
-  border-top-color: var(--spectrum-accordion-border-color, var(--spectrum-global-color-gray-300));
-}
-
-._7gO6Sq_spectrum-Accordion-itemHeader {
-  color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));
-}
-
-._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_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));
-}
-
-._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_focus-ring:after {
-  background-color: var(--spectrum-accordion-border-left-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
-
-._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-open ._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_is-hovered {
-  background-color: #0000;
-}
-
-._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-disabled ._7gO6Sq_spectrum-Accordion-itemHeader, ._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-disabled ._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_is-hovered, ._7gO6Sq_spectrum-Accordion-item._7gO6Sq_is-disabled ._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_focus-ring {
-  color: var(--spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500));
-  background-color: #0000;
-}
-
-@media (forced-colors: active) {
-  ._7gO6Sq_spectrum-Accordion-itemHeader._7gO6Sq_focus-ring {
-    outline: 3px solid canvastext;
-  }
-}
-/*# sourceMappingURL=vars.1361683a.css.map */

package/dist/vars.1361683a.css.map

@@ -1 +0,0 @@
-{"mappings":"AAwBA;;;;;;;AAOA;;;;;;;AASA;;;;;;;;AASE;;;;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.1361683a.css.map"}