@reach/accordion - npm Package Compare versions

Comparing version 0.16.1 to 0.17.0

dist/reach-accordion.cjs.dev.js

@@ -12,5 +12,5 @@ 'use strict';
 var composeRefs = require('@reach/utils/compose-refs');
+var useControlledState = require('@reach/utils/use-controlled-state');
 var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
-var warning = require('tiny-warning');
 var descendants = require('@reach/descendants');
@@ -22,3 +22,2 @@ var autoId = require('@reach/auto-id');
 
-var warning__default = /*#__PURE__*/_interopDefault(warning);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
@@ -64,5 +63,12 @@
 var AccordionDescendantContext = /*#__PURE__*/descendants.createDescendantContext("AccordionDescendantContext");
-var AccordionContext = /*#__PURE__*/context.createNamedContext("AccordionContext", {});
-var AccordionItemContext = /*#__PURE__*/context.createNamedContext("AccordionItemContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/context.createContext("Accordion"),
+    AccordionProvider = _createContext[0],
+    useAccordionCtx = _createContext[1];
+
+var _createContext2 = /*#__PURE__*/context.createContext("AccordionItem"),
+    AccordionItemProvider = _createContext2[0],
+    useAccordionItemCtx = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
  ////////////////////////////////////////////////////////////////////////////////
@@ -100,31 +106,8 @@
 
-  /*
-   * You shouldn't switch between controlled/uncontrolled. We'll check for a
-   * controlled component and track any changes in a ref to show a warning.
-   */
-  var wasControlled = typeof controlledIndex !== "undefined";
-
-  var _React$useRef = React.useRef(wasControlled),
-      isControlled = _React$useRef.current;
-
-  var _useDescendantsInit = descendants.useDescendantsInit(),
-      descendants$1 = _useDescendantsInit[0],
-      setDescendants = _useDescendantsInit[1];
-
-  var id = autoId.useId(props.id); // Define our default starting index
-
-  var _React$useState = React.useState(function () {
-    switch (true) {
-      case isControlled:
-        return controlledIndex;
-      // If we have a defaultIndex, we need to do a few checks
-
-      // If we have a defaultIndex, we need to do a few checks
-      case defaultIndex != null:
-        /*
-         * If multiple is set to true, we need to make sure the `defaultIndex`
-         * is an array (and vice versa). We'll handle console warnings in
-         * our propTypes, but this will at least keep the component from
-         * blowing up.
-         */
+  var _useControlledState = useControlledState.useControlledState({
+    controlledValue: controlledIndex,
+    defaultValue: function defaultValue() {
+      if (defaultIndex != null) {
+        // If multiple is set to true, we need to make sure the `defaultIndex`
+        // is an array (and vice versa).
         if (multiple) {
@@ -137,74 +120,58 @@ return Array.isArray(defaultIndex) ? defaultIndex : [defaultIndex];
         }
+      }
 
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-      case collapsible:
+      if (collapsible) {
+        // Collapsible accordions with no defaultIndex will start with all
+        // panels collapsed.
         return multiple ? [] : -1;
+      } // Otherwise the first panel will be our default.
 
-      default:
-        return multiple ? [0] : 0;
-    }
+
+      // Otherwise the first panel will be our default.
+      return multiple ? [0] : 0;
+    },
+    calledFrom: "Tabs"
   }),
-      openPanels = _React$useState[0],
-      setOpenPanels = _React$useState[1];
+      openPanels = _useControlledState[0],
+      setOpenPanels = _useControlledState[1];
 
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning__default['default'](!(!isControlled && wasControlled), "Accordion is changing from controlled to uncontrolled. Accordion should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Accordion for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning__default['default'](!(isControlled && !wasControlled), "Accordion is changing from uncontrolled to controlled. Accordion should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Accordion for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning__default['default'](!(isControlled && collapsible), "The `collapsible` prop on Accordion has no effect when the state of the component is controlled.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning__default['default'](!(isControlled && multiple), "The `multiple` prop on Accordion has no effect when the state of the component is controlled.") : void 0;
-  }
+  var _useDescendantsInit = descendants.useDescendantsInit(),
+      descendants$1 = _useDescendantsInit[0],
+      setDescendants = _useDescendantsInit[1];
 
+  var id = autoId.useId(props.id);
   var onSelectPanel = React.useCallback(function (index) {
     onChange && onChange(index);
+    setOpenPanels(function (prevOpenPanels) {
+      /*
+       * If we're dealing with an uncontrolled component, the index arg
+       * in selectChange will always be a number rather than an array.
+       */
+      index = index; // multiple allowed
 
-    if (!isControlled) {
-      setOpenPanels(function (prevOpenPanels) {
-        /*
-         * If we're dealing with an uncontrolled component, the index arg
-         * in selectChange will always be a number rather than an array.
-         */
-        index = index; // multiple allowed
+      if (multiple) {
+        // state will always be an array here
+        prevOpenPanels = prevOpenPanels;
 
-        if (multiple) {
-          // state will always be an array here
-          prevOpenPanels = prevOpenPanels;
-
-          if ( // User is clicking on an already-open button
-          prevOpenPanels.includes(index)) {
-            // Other panels are open OR accordion is allowed to collapse
-            if (prevOpenPanels.length > 1 || collapsible) {
-              // Close the panel by filtering it from the array
-              return prevOpenPanels.filter(function (i) {
-                return i !== index;
-              });
-            }
-          } else {
-            // Open the panel by adding it to the array.
-            return [].concat(prevOpenPanels, [index]).sort();
+        if ( // User is clicking on an already-open button
+        prevOpenPanels.includes(index)) {
+          // Other panels are open OR accordion is allowed to collapse
+          if (prevOpenPanels.length > 1 || collapsible) {
+            // Close the panel by filtering it from the array
+            return prevOpenPanels.filter(function (i) {
+              return i !== index;
+            });
           }
         } else {
-          prevOpenPanels = prevOpenPanels;
-          return prevOpenPanels === index && collapsible ? -1 : index;
+          // Open the panel by adding it to the array.
+          return [].concat(prevOpenPanels, [index]).sort();
         }
+      } else {
+        prevOpenPanels = prevOpenPanels;
+        return prevOpenPanels === index && collapsible ? -1 : index;
+      }
 
-        return prevOpenPanels;
-      });
-    }
-  }, [collapsible, isControlled, multiple, onChange]);
-  var context = React.useMemo(function () {
-    return {
-      accordionId: id,
-      openPanels: isControlled ? controlledIndex : openPanels,
-      onSelectPanel: readOnly ? noop.noop : onSelectPanel,
-      readOnly: readOnly
-    };
-  }, [openPanels, controlledIndex, id, isControlled, onSelectPanel, readOnly]);
+      return prevOpenPanels;
+    });
+  }, [collapsible, multiple, onChange, setOpenPanels]);
   devUtils.useCheckStyles("accordion");
@@ -215,4 +182,7 @@ return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
     set: setDescendants
-  }, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
-    value: context
+  }, /*#__PURE__*/React.createElement(AccordionProvider, {
+    accordionId: id,
+    openPanels: openPanels,
+    onSelectPanel: readOnly ? noop.noop : onSelectPanel,
+    readOnly: readOnly
   }, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
@@ -285,6 +255,6 @@ ref: forwardedRef,
 
-  var _React$useContext = React.useContext(AccordionContext),
-      accordionId = _React$useContext.accordionId,
-      openPanels = _React$useContext.openPanels,
-      readOnly = _React$useContext.readOnly;
+  var _useAccordionCtx = useAccordionCtx("AccordionItem"),
+      accordionId = _useAccordionCtx.accordionId,
+      openPanels = _useAccordionCtx.openPanels,
+      readOnly = _useAccordionCtx.readOnly;
 
@@ -319,5 +289,3 @@ var buttonRef = React.useRef(null);
   };
-  return /*#__PURE__*/React.createElement(AccordionItemContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AccordionItemProvider, context, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
     ref: forwardedRef,
@@ -363,13 +331,13 @@ "data-reach-accordion-item": "",
 
-  var _React$useContext2 = React.useContext(AccordionContext),
-      onSelectPanel = _React$useContext2.onSelectPanel;
+  var _useAccordionCtx2 = useAccordionCtx("AccordionButton"),
+      onSelectPanel = _useAccordionCtx2.onSelectPanel;
 
-  var _React$useContext3 = React.useContext(AccordionItemContext),
-      disabled = _React$useContext3.disabled,
-      buttonId = _React$useContext3.buttonId,
-      ownRef = _React$useContext3.buttonRef,
-      handleButtonRefSet = _React$useContext3.handleButtonRefSet,
-      index = _React$useContext3.index,
-      panelId = _React$useContext3.panelId,
-      state = _React$useContext3.state;
+  var _useAccordionItemCtx = useAccordionItemCtx("AccordionButton"),
+      disabled = _useAccordionItemCtx.disabled,
+      buttonId = _useAccordionItemCtx.buttonId,
+      ownRef = _useAccordionItemCtx.buttonRef,
+      handleButtonRefSet = _useAccordionItemCtx.handleButtonRefSet,
+      index = _useAccordionItemCtx.index,
+      panelId = _useAccordionItemCtx.panelId,
+      state = _useAccordionItemCtx.state;
 
@@ -477,7 +445,7 @@ var ref = composeRefs.useComposedRefs(forwardedRef, handleButtonRefSet);
 
-  var _React$useContext4 = React.useContext(AccordionItemContext),
-      disabled = _React$useContext4.disabled,
-      panelId = _React$useContext4.panelId,
-      buttonId = _React$useContext4.buttonId,
-      state = _React$useContext4.state;
+  var _useAccordionItemCtx2 = useAccordionItemCtx("AccordionPanel"),
+      disabled = _useAccordionItemCtx2.disabled,
+      panelId = _useAccordionItemCtx2.panelId,
+      buttonId = _useAccordionItemCtx2.buttonId,
+      state = _useAccordionItemCtx2.state;
 
@@ -528,5 +496,5 @@ return /*#__PURE__*/React.createElement(Comp, _extends({
 function useAccordionContext() {
-  var _React$useContext5 = React.useContext(AccordionContext),
-      openPanels = _React$useContext5.openPanels,
-      accordionId = _React$useContext5.accordionId;
+  var _useAccordionCtx3 = useAccordionCtx("useAccordionContext"),
+      openPanels = _useAccordionCtx3.openPanels,
+      accordionId = _useAccordionCtx3.accordionId;
 
@@ -552,5 +520,5 @@ return React.useMemo(function () {
 function useAccordionItemContext() {
-  var _React$useContext6 = React.useContext(AccordionItemContext),
-      index = _React$useContext6.index,
-      state = _React$useContext6.state;
+  var _useAccordionItemCtx3 = useAccordionItemCtx("useAccordionItemContext"),
+      index = _useAccordionItemCtx3.index,
+      state = _useAccordionItemCtx3.state;
 
@@ -557,0 +525,0 @@ return React.useMemo(function () {

dist/reach-accordion.cjs.prod.js

@@ -12,5 +12,5 @@ 'use strict';
 var composeRefs = require('@reach/utils/compose-refs');
+var useControlledState = require('@reach/utils/use-controlled-state');
 var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
-require('tiny-warning');
 var descendants = require('@reach/descendants');
@@ -58,5 +58,12 @@ var autoId = require('@reach/auto-id');
 var AccordionDescendantContext = /*#__PURE__*/descendants.createDescendantContext("AccordionDescendantContext");
-var AccordionContext = /*#__PURE__*/context.createNamedContext("AccordionContext", {});
-var AccordionItemContext = /*#__PURE__*/context.createNamedContext("AccordionItemContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/context.createContext("Accordion"),
+    AccordionProvider = _createContext[0],
+    useAccordionCtx = _createContext[1];
+
+var _createContext2 = /*#__PURE__*/context.createContext("AccordionItem"),
+    AccordionItemProvider = _createContext2[0],
+    useAccordionItemCtx = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
  ////////////////////////////////////////////////////////////////////////////////
@@ -94,31 +101,8 @@
 
-  /*
-   * You shouldn't switch between controlled/uncontrolled. We'll check for a
-   * controlled component and track any changes in a ref to show a warning.
-   */
-  var wasControlled = typeof controlledIndex !== "undefined";
-
-  var _React$useRef = React.useRef(wasControlled),
-      isControlled = _React$useRef.current;
-
-  var _useDescendantsInit = descendants.useDescendantsInit(),
-      descendants$1 = _useDescendantsInit[0],
-      setDescendants = _useDescendantsInit[1];
-
-  var id = autoId.useId(props.id); // Define our default starting index
-
-  var _React$useState = React.useState(function () {
-    switch (true) {
-      case isControlled:
-        return controlledIndex;
-      // If we have a defaultIndex, we need to do a few checks
-
-      // If we have a defaultIndex, we need to do a few checks
-      case defaultIndex != null:
-        /*
-         * If multiple is set to true, we need to make sure the `defaultIndex`
-         * is an array (and vice versa). We'll handle console warnings in
-         * our propTypes, but this will at least keep the component from
-         * blowing up.
-         */
+  var _useControlledState = useControlledState.useControlledState({
+    controlledValue: controlledIndex,
+    defaultValue: function defaultValue() {
+      if (defaultIndex != null) {
+        // If multiple is set to true, we need to make sure the `defaultIndex`
+        // is an array (and vice versa).
         if (multiple) {
@@ -131,67 +115,58 @@ return Array.isArray(defaultIndex) ? defaultIndex : [defaultIndex];
         }
+      }
 
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-      case collapsible:
+      if (collapsible) {
+        // Collapsible accordions with no defaultIndex will start with all
+        // panels collapsed.
         return multiple ? [] : -1;
+      } // Otherwise the first panel will be our default.
 
-      default:
-        return multiple ? [0] : 0;
-    }
+
+      // Otherwise the first panel will be our default.
+      return multiple ? [0] : 0;
+    },
+    calledFrom: "Tabs"
   }),
-      openPanels = _React$useState[0],
-      setOpenPanels = _React$useState[1];
+      openPanels = _useControlledState[0],
+      setOpenPanels = _useControlledState[1];
 
+  var _useDescendantsInit = descendants.useDescendantsInit(),
+      descendants$1 = _useDescendantsInit[0],
+      setDescendants = _useDescendantsInit[1];
+
+  var id = autoId.useId(props.id);
   var onSelectPanel = React.useCallback(function (index) {
     onChange && onChange(index);
+    setOpenPanels(function (prevOpenPanels) {
+      /*
+       * If we're dealing with an uncontrolled component, the index arg
+       * in selectChange will always be a number rather than an array.
+       */
+      index = index; // multiple allowed
 
-    if (!isControlled) {
-      setOpenPanels(function (prevOpenPanels) {
-        /*
-         * If we're dealing with an uncontrolled component, the index arg
-         * in selectChange will always be a number rather than an array.
-         */
-        index = index; // multiple allowed
+      if (multiple) {
+        // state will always be an array here
+        prevOpenPanels = prevOpenPanels;
 
-        if (multiple) {
-          // state will always be an array here
-          prevOpenPanels = prevOpenPanels;
-
-          if ( // User is clicking on an already-open button
-          prevOpenPanels.includes(index)) {
-            // Other panels are open OR accordion is allowed to collapse
-            if (prevOpenPanels.length > 1 || collapsible) {
-              // Close the panel by filtering it from the array
-              return prevOpenPanels.filter(function (i) {
-                return i !== index;
-              });
-            }
-          } else {
-            // Open the panel by adding it to the array.
-            return [].concat(prevOpenPanels, [index]).sort();
+        if ( // User is clicking on an already-open button
+        prevOpenPanels.includes(index)) {
+          // Other panels are open OR accordion is allowed to collapse
+          if (prevOpenPanels.length > 1 || collapsible) {
+            // Close the panel by filtering it from the array
+            return prevOpenPanels.filter(function (i) {
+              return i !== index;
+            });
           }
         } else {
-          prevOpenPanels = prevOpenPanels;
-          return prevOpenPanels === index && collapsible ? -1 : index;
+          // Open the panel by adding it to the array.
+          return [].concat(prevOpenPanels, [index]).sort();
         }
+      } else {
+        prevOpenPanels = prevOpenPanels;
+        return prevOpenPanels === index && collapsible ? -1 : index;
+      }
 
-        return prevOpenPanels;
-      });
-    }
-  }, [collapsible, isControlled, multiple, onChange]);
-  var context = React.useMemo(function () {
-    return {
-      accordionId: id,
-      openPanels: isControlled ? controlledIndex : openPanels,
-      onSelectPanel: readOnly ? noop.noop : onSelectPanel,
-      readOnly: readOnly
-    };
-  }, [openPanels, controlledIndex, id, isControlled, onSelectPanel, readOnly]);
+      return prevOpenPanels;
+    });
+  }, [collapsible, multiple, onChange, setOpenPanels]);
   devUtils.useCheckStyles("accordion");
@@ -202,4 +177,7 @@ return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
     set: setDescendants
-  }, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
-    value: context
+  }, /*#__PURE__*/React.createElement(AccordionProvider, {
+    accordionId: id,
+    openPanels: openPanels,
+    onSelectPanel: readOnly ? noop.noop : onSelectPanel,
+    readOnly: readOnly
   }, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
@@ -228,6 +206,6 @@ ref: forwardedRef,
 
-  var _React$useContext = React.useContext(AccordionContext),
-      accordionId = _React$useContext.accordionId,
-      openPanels = _React$useContext.openPanels,
-      readOnly = _React$useContext.readOnly;
+  var _useAccordionCtx = useAccordionCtx("AccordionItem"),
+      accordionId = _useAccordionCtx.accordionId,
+      openPanels = _useAccordionCtx.openPanels,
+      readOnly = _useAccordionCtx.readOnly;
 
@@ -262,5 +240,3 @@ var buttonRef = React.useRef(null);
   };
-  return /*#__PURE__*/React.createElement(AccordionItemContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AccordionItemProvider, context, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
     ref: forwardedRef,
@@ -296,13 +272,13 @@ "data-reach-accordion-item": "",
 
-  var _React$useContext2 = React.useContext(AccordionContext),
-      onSelectPanel = _React$useContext2.onSelectPanel;
+  var _useAccordionCtx2 = useAccordionCtx("AccordionButton"),
+      onSelectPanel = _useAccordionCtx2.onSelectPanel;
 
-  var _React$useContext3 = React.useContext(AccordionItemContext),
-      disabled = _React$useContext3.disabled,
-      buttonId = _React$useContext3.buttonId,
-      ownRef = _React$useContext3.buttonRef,
-      handleButtonRefSet = _React$useContext3.handleButtonRefSet,
-      index = _React$useContext3.index,
-      panelId = _React$useContext3.panelId,
-      state = _React$useContext3.state;
+  var _useAccordionItemCtx = useAccordionItemCtx("AccordionButton"),
+      disabled = _useAccordionItemCtx.disabled,
+      buttonId = _useAccordionItemCtx.buttonId,
+      ownRef = _useAccordionItemCtx.buttonRef,
+      handleButtonRefSet = _useAccordionItemCtx.handleButtonRefSet,
+      index = _useAccordionItemCtx.index,
+      panelId = _useAccordionItemCtx.panelId,
+      state = _useAccordionItemCtx.state;
 
@@ -399,7 +375,7 @@ var ref = composeRefs.useComposedRefs(forwardedRef, handleButtonRefSet);
 
-  var _React$useContext4 = React.useContext(AccordionItemContext),
-      disabled = _React$useContext4.disabled,
-      panelId = _React$useContext4.panelId,
-      buttonId = _React$useContext4.buttonId,
-      state = _React$useContext4.state;
+  var _useAccordionItemCtx2 = useAccordionItemCtx("AccordionPanel"),
+      disabled = _useAccordionItemCtx2.disabled,
+      panelId = _useAccordionItemCtx2.panelId,
+      buttonId = _useAccordionItemCtx2.buttonId,
+      state = _useAccordionItemCtx2.state;
 
@@ -440,5 +416,5 @@ return /*#__PURE__*/React.createElement(Comp, _extends({
 function useAccordionContext() {
-  var _React$useContext5 = React.useContext(AccordionContext),
-      openPanels = _React$useContext5.openPanels,
-      accordionId = _React$useContext5.accordionId;
+  var _useAccordionCtx3 = useAccordionCtx("useAccordionContext"),
+      openPanels = _useAccordionCtx3.openPanels,
+      accordionId = _useAccordionCtx3.accordionId;
 
@@ -464,5 +440,5 @@ return React.useMemo(function () {
 function useAccordionItemContext() {
-  var _React$useContext6 = React.useContext(AccordionItemContext),
-      index = _React$useContext6.index,
-      state = _React$useContext6.state;
+  var _useAccordionItemCtx3 = useAccordionItemCtx("useAccordionItemContext"),
+      index = _useAccordionItemCtx3.index,
+      state = _useAccordionItemCtx3.state;
 
@@ -469,0 +445,0 @@ return React.useMemo(function () {

dist/reach-accordion.esm.js

@@ -1,3 +0,3 @@
-import { forwardRef, useRef, useState, useCallback, useMemo, createElement, useContext } from 'react';
-import { createNamedContext } from '@reach/utils/context';
+import { forwardRef, useCallback, createElement, useRef, useMemo } from 'react';
+import { createContext } from '@reach/utils/context';
 import { isNumber, isBoolean } from '@reach/utils/type-check';
@@ -8,5 +8,5 @@ import { makeId } from '@reach/utils/make-id';
 import { useComposedRefs } from '@reach/utils/compose-refs';
+import { useControlledState } from '@reach/utils/use-controlled-state';
 import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 import { useStatefulRefValue } from '@reach/utils/use-stateful-ref-value';
-import warning from 'tiny-warning';
 import { createDescendantContext, useDescendantsInit, DescendantProvider, useDescendant, useDescendantKeyDown } from '@reach/descendants';
@@ -54,5 +54,12 @@ import { useId } from '@reach/auto-id';
 var AccordionDescendantContext = /*#__PURE__*/createDescendantContext("AccordionDescendantContext");
-var AccordionContext = /*#__PURE__*/createNamedContext("AccordionContext", {});
-var AccordionItemContext = /*#__PURE__*/createNamedContext("AccordionItemContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/createContext("Accordion"),
+    AccordionProvider = _createContext[0],
+    useAccordionCtx = _createContext[1];
+
+var _createContext2 = /*#__PURE__*/createContext("AccordionItem"),
+    AccordionItemProvider = _createContext2[0],
+    useAccordionItemCtx = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
 var AccordionStates; ////////////////////////////////////////////////////////////////////////////////
@@ -90,31 +97,8 @@
 
-  /*
-   * You shouldn't switch between controlled/uncontrolled. We'll check for a
-   * controlled component and track any changes in a ref to show a warning.
-   */
-  var wasControlled = typeof controlledIndex !== "undefined";
-
-  var _React$useRef = useRef(wasControlled),
-      isControlled = _React$useRef.current;
-
-  var _useDescendantsInit = useDescendantsInit(),
-      descendants = _useDescendantsInit[0],
-      setDescendants = _useDescendantsInit[1];
-
-  var id = useId(props.id); // Define our default starting index
-
-  var _React$useState = useState(function () {
-    switch (true) {
-      case isControlled:
-        return controlledIndex;
-      // If we have a defaultIndex, we need to do a few checks
-
-      // If we have a defaultIndex, we need to do a few checks
-      case defaultIndex != null:
-        /*
-         * If multiple is set to true, we need to make sure the `defaultIndex`
-         * is an array (and vice versa). We'll handle console warnings in
-         * our propTypes, but this will at least keep the component from
-         * blowing up.
-         */
+  var _useControlledState = useControlledState({
+    controlledValue: controlledIndex,
+    defaultValue: function defaultValue() {
+      if (defaultIndex != null) {
+        // If multiple is set to true, we need to make sure the `defaultIndex`
+        // is an array (and vice versa).
         if (multiple) {
@@ -127,74 +111,58 @@ return Array.isArray(defaultIndex) ? defaultIndex : [defaultIndex];
         }
+      }
 
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-
-      /*
-       * Collapsible accordions with no defaultIndex will start with all
-       * panels collapsed. Otherwise the first panel will be our default.
-       */
-      case collapsible:
+      if (collapsible) {
+        // Collapsible accordions with no defaultIndex will start with all
+        // panels collapsed.
         return multiple ? [] : -1;
+      } // Otherwise the first panel will be our default.
 
-      default:
-        return multiple ? [0] : 0;
-    }
+
+      // Otherwise the first panel will be our default.
+      return multiple ? [0] : 0;
+    },
+    calledFrom: "Tabs"
   }),
-      openPanels = _React$useState[0],
-      setOpenPanels = _React$useState[1];
+      openPanels = _useControlledState[0],
+      setOpenPanels = _useControlledState[1];
 
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(!(!isControlled && wasControlled), "Accordion is changing from controlled to uncontrolled. Accordion should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Accordion for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning(!(isControlled && !wasControlled), "Accordion is changing from uncontrolled to controlled. Accordion should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Accordion for the lifetime of the component. Check the `index` prop being passed in.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning(!(isControlled && collapsible), "The `collapsible` prop on Accordion has no effect when the state of the component is controlled.") : void 0;
-    process.env.NODE_ENV !== "production" ? warning(!(isControlled && multiple), "The `multiple` prop on Accordion has no effect when the state of the component is controlled.") : void 0;
-  }
+  var _useDescendantsInit = useDescendantsInit(),
+      descendants = _useDescendantsInit[0],
+      setDescendants = _useDescendantsInit[1];
 
+  var id = useId(props.id);
   var onSelectPanel = useCallback(function (index) {
     onChange && onChange(index);
+    setOpenPanels(function (prevOpenPanels) {
+      /*
+       * If we're dealing with an uncontrolled component, the index arg
+       * in selectChange will always be a number rather than an array.
+       */
+      index = index; // multiple allowed
 
-    if (!isControlled) {
-      setOpenPanels(function (prevOpenPanels) {
-        /*
-         * If we're dealing with an uncontrolled component, the index arg
-         * in selectChange will always be a number rather than an array.
-         */
-        index = index; // multiple allowed
+      if (multiple) {
+        // state will always be an array here
+        prevOpenPanels = prevOpenPanels;
 
-        if (multiple) {
-          // state will always be an array here
-          prevOpenPanels = prevOpenPanels;
-
-          if ( // User is clicking on an already-open button
-          prevOpenPanels.includes(index)) {
-            // Other panels are open OR accordion is allowed to collapse
-            if (prevOpenPanels.length > 1 || collapsible) {
-              // Close the panel by filtering it from the array
-              return prevOpenPanels.filter(function (i) {
-                return i !== index;
-              });
-            }
-          } else {
-            // Open the panel by adding it to the array.
-            return [].concat(prevOpenPanels, [index]).sort();
+        if ( // User is clicking on an already-open button
+        prevOpenPanels.includes(index)) {
+          // Other panels are open OR accordion is allowed to collapse
+          if (prevOpenPanels.length > 1 || collapsible) {
+            // Close the panel by filtering it from the array
+            return prevOpenPanels.filter(function (i) {
+              return i !== index;
+            });
           }
         } else {
-          prevOpenPanels = prevOpenPanels;
-          return prevOpenPanels === index && collapsible ? -1 : index;
+          // Open the panel by adding it to the array.
+          return [].concat(prevOpenPanels, [index]).sort();
         }
+      } else {
+        prevOpenPanels = prevOpenPanels;
+        return prevOpenPanels === index && collapsible ? -1 : index;
+      }
 
-        return prevOpenPanels;
-      });
-    }
-  }, [collapsible, isControlled, multiple, onChange]);
-  var context = useMemo(function () {
-    return {
-      accordionId: id,
-      openPanels: isControlled ? controlledIndex : openPanels,
-      onSelectPanel: readOnly ? noop : onSelectPanel,
-      readOnly: readOnly
-    };
-  }, [openPanels, controlledIndex, id, isControlled, onSelectPanel, readOnly]);
+      return prevOpenPanels;
+    });
+  }, [collapsible, multiple, onChange, setOpenPanels]);
   useCheckStyles("accordion");
@@ -205,4 +173,7 @@ return /*#__PURE__*/createElement(DescendantProvider, {
     set: setDescendants
-  }, /*#__PURE__*/createElement(AccordionContext.Provider, {
-    value: context
+  }, /*#__PURE__*/createElement(AccordionProvider, {
+    accordionId: id,
+    openPanels: openPanels,
+    onSelectPanel: readOnly ? noop : onSelectPanel,
+    readOnly: readOnly
   }, /*#__PURE__*/createElement(Comp, _extends({}, props, {
@@ -275,6 +246,6 @@ ref: forwardedRef,
 
-  var _React$useContext = useContext(AccordionContext),
-      accordionId = _React$useContext.accordionId,
-      openPanels = _React$useContext.openPanels,
-      readOnly = _React$useContext.readOnly;
+  var _useAccordionCtx = useAccordionCtx("AccordionItem"),
+      accordionId = _useAccordionCtx.accordionId,
+      openPanels = _useAccordionCtx.openPanels,
+      readOnly = _useAccordionCtx.readOnly;
 
@@ -309,5 +280,3 @@ var buttonRef = useRef(null);
   };
-  return /*#__PURE__*/createElement(AccordionItemContext.Provider, {
-    value: context
-  }, /*#__PURE__*/createElement(Comp, _extends({}, props, {
+  return /*#__PURE__*/createElement(AccordionItemProvider, context, /*#__PURE__*/createElement(Comp, _extends({}, props, {
     ref: forwardedRef,
@@ -353,13 +322,13 @@ "data-reach-accordion-item": "",
 
-  var _React$useContext2 = useContext(AccordionContext),
-      onSelectPanel = _React$useContext2.onSelectPanel;
+  var _useAccordionCtx2 = useAccordionCtx("AccordionButton"),
+      onSelectPanel = _useAccordionCtx2.onSelectPanel;
 
-  var _React$useContext3 = useContext(AccordionItemContext),
-      disabled = _React$useContext3.disabled,
-      buttonId = _React$useContext3.buttonId,
-      ownRef = _React$useContext3.buttonRef,
-      handleButtonRefSet = _React$useContext3.handleButtonRefSet,
-      index = _React$useContext3.index,
-      panelId = _React$useContext3.panelId,
-      state = _React$useContext3.state;
+  var _useAccordionItemCtx = useAccordionItemCtx("AccordionButton"),
+      disabled = _useAccordionItemCtx.disabled,
+      buttonId = _useAccordionItemCtx.buttonId,
+      ownRef = _useAccordionItemCtx.buttonRef,
+      handleButtonRefSet = _useAccordionItemCtx.handleButtonRefSet,
+      index = _useAccordionItemCtx.index,
+      panelId = _useAccordionItemCtx.panelId,
+      state = _useAccordionItemCtx.state;
 
@@ -467,7 +436,7 @@ var ref = useComposedRefs(forwardedRef, handleButtonRefSet);
 
-  var _React$useContext4 = useContext(AccordionItemContext),
-      disabled = _React$useContext4.disabled,
-      panelId = _React$useContext4.panelId,
-      buttonId = _React$useContext4.buttonId,
-      state = _React$useContext4.state;
+  var _useAccordionItemCtx2 = useAccordionItemCtx("AccordionPanel"),
+      disabled = _useAccordionItemCtx2.disabled,
+      panelId = _useAccordionItemCtx2.panelId,
+      buttonId = _useAccordionItemCtx2.buttonId,
+      state = _useAccordionItemCtx2.state;
 
@@ -518,5 +487,5 @@ return /*#__PURE__*/createElement(Comp, _extends({
 function useAccordionContext() {
-  var _React$useContext5 = useContext(AccordionContext),
-      openPanels = _React$useContext5.openPanels,
-      accordionId = _React$useContext5.accordionId;
+  var _useAccordionCtx3 = useAccordionCtx("useAccordionContext"),
+      openPanels = _useAccordionCtx3.openPanels,
+      accordionId = _useAccordionCtx3.accordionId;
 
@@ -542,5 +511,5 @@ return useMemo(function () {
 function useAccordionItemContext() {
-  var _React$useContext6 = useContext(AccordionItemContext),
-      index = _React$useContext6.index,
-      state = _React$useContext6.state;
+  var _useAccordionItemCtx3 = useAccordionItemCtx("useAccordionItemContext"),
+      index = _useAccordionItemCtx3.index,
+      state = _useAccordionItemCtx3.state;
 
@@ -547,0 +516,0 @@ return useMemo(function () {

package.json

 {
   "name": "@reach/accordion",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Accessible React accordion component",
@@ -16,5 +16,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "0.16.0",
-    "@reach/descendants": "0.16.1",
-    "@reach/utils": "0.16.0",
+    "@reach/auto-id": "0.17.0",
+    "@reach/descendants": "0.17.0",
+    "@reach/utils": "0.17.0",
     "prop-types": "^15.7.2",
@@ -44,3 +44,3 @@ "tiny-warning": "^1.0.3",
   ],
-  "gitHead": "def3e4a96c6bc184ff78725e37854e542225d371"
+  "gitHead": "d206aefac2bede58c06a54b18d48eee7537096e0"
 }

No alert changes

Improved metrics

Number of low supply chain risk alerts

9

decreased by-52.63%

Worsened metrics

Total package byte prevSize

66100

decreased by-6.91%

Lines of code

1518

decreased by-5.18%

Dependency changes

• + Added@reach/auto-id@0.17.0(transitive)

• + Added@reach/descendants@0.17.0(transitive)

• + Added@reach/utils@0.17.0(transitive)

• - Removed@reach/auto-id@0.16.0(transitive)

• - Removed@reach/descendants@0.16.1(transitive)

• - Removed@reach/utils@0.16.0(transitive)

• Updated@reach/auto-id@0.17.0

• Updated@reach/descendants@0.17.0

• Updated@reach/utils@0.17.0