@reach/disclosure - npm Package Compare versions

Comparing version 0.16.2 to 0.17.0

dist/declarations/src/index.d.ts

@@ -128,3 +128,3 @@ /**
 declare function useDisclosureContext(): {
-    id: string;
+    id: string | number;
     panelId: string;
@@ -131,0 +131,0 @@ open: boolean;

dist/reach-disclosure.cjs.dev.js

@@ -10,4 +10,4 @@ 'use strict';
 var composeEventHandlers = require('@reach/utils/compose-event-handlers');
+var useControlledState = require('@reach/utils/use-controlled-state');
 var autoId = require('@reach/auto-id');
-var warning = require('tiny-warning');
 var PropTypes = require('prop-types');
@@ -17,3 +17,2 @@
 
-var warning__default = /*#__PURE__*/_interopDefault(warning);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
@@ -57,4 +56,8 @@
     _excluded3 = ["as", "children"];
-var DisclosureContext = /*#__PURE__*/context.createNamedContext("DisclosureContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/context.createContext("Disclosure"),
+    DisclosureProvider = _createContext[0],
+    useDisclosureCtx = _createContext[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
  ////////////////////////////////////////////////////////////////////////////////
@@ -80,2 +83,4 @@
 var Disclosure = function Disclosure(_ref) {
+  var _props$id;
+
   var children = _ref.children,
@@ -88,44 +93,21 @@ _ref$defaultOpen = _ref.defaultOpen,
 
-  /*
-   * 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 = openProp != null;
+  var id = autoId.useId((_props$id = props.id) != null ? _props$id : "disclosure");
+  var panelId = makeId.makeId("panel", id);
 
-  var _React$useRef = React.useRef(wasControlled),
-      isControlled = _React$useRef.current;
+  var _useControlledState = useControlledState.useControlledState({
+    controlledValue: openProp,
+    defaultValue: defaultOpen,
+    calledFrom: "Disclosure"
+  }),
+      open = _useControlledState[0],
+      setOpen = _useControlledState[1];
 
-  var id = autoId.useId(props.id != null ? String(props.id) : undefined) || "disclosure";
-  var panelId = makeId.makeId("panel", id); // If a disclosure is uncontrolled, we set its initial state to `true` instead
-  // of using its default state prop. This is because we want disclosures to
-  // generally be accessible without JavaScript enabled. After the first render
-  // we will set state to the `defaultOpen` value.
-
-  var _React$useState = React.useState(isControlled ? openProp : true),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  React.useEffect(function () {
-    if (!isControlled) {
-      setOpen(defaultOpen);
-    } // explicitly only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning__default['default'](!(isControlled && !wasControlled || !isControlled && wasControlled), "Disclosure is changing from controlled to uncontrolled. Disclosure should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Disclosure for the lifetime of the component. Check the `open` prop being passed in.") : void 0;
-  }
-
   function onSelect() {
     onChange == null ? void 0 : onChange();
-
-    if (!isControlled) {
-      setOpen(function (open) {
-        return !open;
-      });
-    }
+    setOpen(function (open) {
+      return !open;
+    });
   }
 
-  var context = {
+  return /*#__PURE__*/React.createElement(DisclosureProvider, {
     disclosureId: id,
@@ -135,14 +117,2 @@ onSelect: onSelect,
     panelId: panelId
-  };
-
-  if (isControlled && openProp !== open) {
-    /*
-     * If the component is controlled, we'll sync internal state with the
-     * controlled state
-     */
-    setOpen(openProp);
-  }
-
-  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
   }, children);
@@ -179,6 +149,6 @@ };
 
-  var _React$useContext = React.useContext(DisclosureContext),
-      onSelect = _React$useContext.onSelect,
-      open = _React$useContext.open,
-      panelId = _React$useContext.panelId;
+  var _useDisclosureCtx = useDisclosureCtx("DisclosureButton"),
+      onSelect = _useDisclosureCtx.onSelect,
+      open = _useDisclosureCtx.open,
+      panelId = _useDisclosureCtx.panelId;
 
@@ -240,5 +210,5 @@ var ownRef = React.useRef(null);
 
-  var _React$useContext2 = React.useContext(DisclosureContext),
-      panelId = _React$useContext2.panelId,
-      open = _React$useContext2.open;
+  var _useDisclosureCtx2 = useDisclosureCtx("DisclosurePanel"),
+      panelId = _useDisclosureCtx2.panelId,
+      open = _useDisclosureCtx2.open;
 
@@ -273,6 +243,6 @@ return /*#__PURE__*/React.createElement(Comp, _extends({
 function useDisclosureContext() {
-  var _React$useContext3 = React.useContext(DisclosureContext),
-      open = _React$useContext3.open,
-      panelId = _React$useContext3.panelId,
-      disclosureId = _React$useContext3.disclosureId;
+  var _useDisclosureCtx3 = useDisclosureCtx("useDisclosureContext"),
+      open = _useDisclosureCtx3.open,
+      panelId = _useDisclosureCtx3.panelId,
+      disclosureId = _useDisclosureCtx3.disclosureId;
 
@@ -279,0 +249,0 @@ return React.useMemo(function () {

dist/reach-disclosure.cjs.prod.js

@@ -10,4 +10,4 @@ 'use strict';
 var composeEventHandlers = require('@reach/utils/compose-event-handlers');
+var useControlledState = require('@reach/utils/use-controlled-state');
 var autoId = require('@reach/auto-id');
-require('tiny-warning');
 require('prop-types');
@@ -51,4 +51,8 @@
     _excluded3 = ["as", "children"];
-var DisclosureContext = /*#__PURE__*/context.createNamedContext("DisclosureContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/context.createContext("Disclosure"),
+    DisclosureProvider = _createContext[0],
+    useDisclosureCtx = _createContext[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
  ////////////////////////////////////////////////////////////////////////////////
@@ -74,2 +78,4 @@
 var Disclosure = function Disclosure(_ref) {
+  var _props$id;
+
   var children = _ref.children,
@@ -82,40 +88,21 @@ _ref$defaultOpen = _ref.defaultOpen,
 
-  /*
-   * 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 = openProp != null;
+  var id = autoId.useId((_props$id = props.id) != null ? _props$id : "disclosure");
+  var panelId = makeId.makeId("panel", id);
 
-  var _React$useRef = React.useRef(wasControlled),
-      isControlled = _React$useRef.current;
+  var _useControlledState = useControlledState.useControlledState({
+    controlledValue: openProp,
+    defaultValue: defaultOpen,
+    calledFrom: "Disclosure"
+  }),
+      open = _useControlledState[0],
+      setOpen = _useControlledState[1];
 
-  var id = autoId.useId(props.id != null ? String(props.id) : undefined) || "disclosure";
-  var panelId = makeId.makeId("panel", id); // If a disclosure is uncontrolled, we set its initial state to `true` instead
-  // of using its default state prop. This is because we want disclosures to
-  // generally be accessible without JavaScript enabled. After the first render
-  // we will set state to the `defaultOpen` value.
-
-  var _React$useState = React.useState(isControlled ? openProp : true),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  React.useEffect(function () {
-    if (!isControlled) {
-      setOpen(defaultOpen);
-    } // explicitly only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-
   function onSelect() {
     onChange == null ? void 0 : onChange();
-
-    if (!isControlled) {
-      setOpen(function (open) {
-        return !open;
-      });
-    }
+    setOpen(function (open) {
+      return !open;
+    });
   }
 
-  var context = {
+  return /*#__PURE__*/React.createElement(DisclosureProvider, {
     disclosureId: id,
@@ -125,14 +112,2 @@ onSelect: onSelect,
     panelId: panelId
-  };
-
-  if (isControlled && openProp !== open) {
-    /*
-     * If the component is controlled, we'll sync internal state with the
-     * controlled state
-     */
-    setOpen(openProp);
-  }
-
-  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
   }, children);
@@ -159,6 +134,6 @@ };
 
-  var _React$useContext = React.useContext(DisclosureContext),
-      onSelect = _React$useContext.onSelect,
-      open = _React$useContext.open,
-      panelId = _React$useContext.panelId;
+  var _useDisclosureCtx = useDisclosureCtx("DisclosureButton"),
+      onSelect = _useDisclosureCtx.onSelect,
+      open = _useDisclosureCtx.open,
+      panelId = _useDisclosureCtx.panelId;
 
@@ -209,5 +184,5 @@ var ownRef = React.useRef(null);
 
-  var _React$useContext2 = React.useContext(DisclosureContext),
-      panelId = _React$useContext2.panelId,
-      open = _React$useContext2.open;
+  var _useDisclosureCtx2 = useDisclosureCtx("DisclosurePanel"),
+      panelId = _useDisclosureCtx2.panelId,
+      open = _useDisclosureCtx2.open;
 
@@ -237,6 +212,6 @@ return /*#__PURE__*/React.createElement(Comp, _extends({
 function useDisclosureContext() {
-  var _React$useContext3 = React.useContext(DisclosureContext),
-      open = _React$useContext3.open,
-      panelId = _React$useContext3.panelId,
-      disclosureId = _React$useContext3.disclosureId;
+  var _useDisclosureCtx3 = useDisclosureCtx("useDisclosureContext"),
+      open = _useDisclosureCtx3.open,
+      panelId = _useDisclosureCtx3.panelId,
+      disclosureId = _useDisclosureCtx3.disclosureId;
 
@@ -243,0 +218,0 @@ return React.useMemo(function () {

dist/reach-disclosure.esm.js

@@ -1,8 +0,8 @@
-import { useRef, useState, useEffect, createElement, forwardRef, useContext, useMemo } from 'react';
-import { createNamedContext } from '@reach/utils/context';
+import { createElement, forwardRef, useRef, useMemo } from 'react';
+import { createContext } from '@reach/utils/context';
 import { makeId } from '@reach/utils/make-id';
 import { useComposedRefs } from '@reach/utils/compose-refs';
 import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
+import { useControlledState } from '@reach/utils/use-controlled-state';
 import { useId } from '@reach/auto-id';
-import warning from 'tiny-warning';
 import PropTypes from 'prop-types';
@@ -46,4 +46,8 @@
     _excluded3 = ["as", "children"];
-var DisclosureContext = /*#__PURE__*/createNamedContext("DisclosureContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
+var _createContext = /*#__PURE__*/createContext("Disclosure"),
+    DisclosureProvider = _createContext[0],
+    useDisclosureCtx = _createContext[1]; ////////////////////////////////////////////////////////////////////////////////
+
+
 var DisclosureStates; ////////////////////////////////////////////////////////////////////////////////
@@ -69,2 +73,4 @@
 var Disclosure = function Disclosure(_ref) {
+  var _props$id;
+
   var children = _ref.children,
@@ -77,44 +83,21 @@ _ref$defaultOpen = _ref.defaultOpen,
 
-  /*
-   * 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 = openProp != null;
+  var id = useId((_props$id = props.id) != null ? _props$id : "disclosure");
+  var panelId = makeId("panel", id);
 
-  var _React$useRef = useRef(wasControlled),
-      isControlled = _React$useRef.current;
+  var _useControlledState = useControlledState({
+    controlledValue: openProp,
+    defaultValue: defaultOpen,
+    calledFrom: "Disclosure"
+  }),
+      open = _useControlledState[0],
+      setOpen = _useControlledState[1];
 
-  var id = useId(props.id != null ? String(props.id) : undefined) || "disclosure";
-  var panelId = makeId("panel", id); // If a disclosure is uncontrolled, we set its initial state to `true` instead
-  // of using its default state prop. This is because we want disclosures to
-  // generally be accessible without JavaScript enabled. After the first render
-  // we will set state to the `defaultOpen` value.
-
-  var _React$useState = useState(isControlled ? openProp : true),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  useEffect(function () {
-    if (!isControlled) {
-      setOpen(defaultOpen);
-    } // explicitly only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(!(isControlled && !wasControlled || !isControlled && wasControlled), "Disclosure is changing from controlled to uncontrolled. Disclosure should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Disclosure for the lifetime of the component. Check the `open` prop being passed in.") : void 0;
-  }
-
   function onSelect() {
     onChange == null ? void 0 : onChange();
-
-    if (!isControlled) {
-      setOpen(function (open) {
-        return !open;
-      });
-    }
+    setOpen(function (open) {
+      return !open;
+    });
   }
 
-  var context = {
+  return /*#__PURE__*/createElement(DisclosureProvider, {
     disclosureId: id,
@@ -124,14 +107,2 @@ onSelect: onSelect,
     panelId: panelId
-  };
-
-  if (isControlled && openProp !== open) {
-    /*
-     * If the component is controlled, we'll sync internal state with the
-     * controlled state
-     */
-    setOpen(openProp);
-  }
-
-  return /*#__PURE__*/createElement(DisclosureContext.Provider, {
-    value: context
   }, children);
@@ -168,6 +139,6 @@ };
 
-  var _React$useContext = useContext(DisclosureContext),
-      onSelect = _React$useContext.onSelect,
-      open = _React$useContext.open,
-      panelId = _React$useContext.panelId;
+  var _useDisclosureCtx = useDisclosureCtx("DisclosureButton"),
+      onSelect = _useDisclosureCtx.onSelect,
+      open = _useDisclosureCtx.open,
+      panelId = _useDisclosureCtx.panelId;
 
@@ -229,5 +200,5 @@ var ownRef = useRef(null);
 
-  var _React$useContext2 = useContext(DisclosureContext),
-      panelId = _React$useContext2.panelId,
-      open = _React$useContext2.open;
+  var _useDisclosureCtx2 = useDisclosureCtx("DisclosurePanel"),
+      panelId = _useDisclosureCtx2.panelId,
+      open = _useDisclosureCtx2.open;
 
@@ -262,6 +233,6 @@ return /*#__PURE__*/createElement(Comp, _extends({
 function useDisclosureContext() {
-  var _React$useContext3 = useContext(DisclosureContext),
-      open = _React$useContext3.open,
-      panelId = _React$useContext3.panelId,
-      disclosureId = _React$useContext3.disclosureId;
+  var _useDisclosureCtx3 = useDisclosureCtx("useDisclosureContext"),
+      open = _useDisclosureCtx3.open,
+      panelId = _useDisclosureCtx3.panelId,
+      disclosureId = _useDisclosureCtx3.disclosureId;
 
@@ -268,0 +239,0 @@ return useMemo(function () {

package.json

 {
   "name": "@reach/disclosure",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Accessible React disclosure component",
@@ -16,4 +16,4 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "0.16.0",
-    "@reach/utils": "0.16.0",
+    "@reach/auto-id": "0.17.0",
+    "@reach/utils": "0.17.0",
     "prop-types": "^15.7.2",
@@ -42,3 +42,3 @@ "tiny-warning": "^1.0.3",
   ],
-  "gitHead": "d81d4627145952b415b42537ef6497838567baa2"
+  "gitHead": "d206aefac2bede58c06a54b18d48eee7537096e0"
 }

No alert changes

Improved metrics

Number of low supply chain risk alerts

7

decreased by-36.36%

Worsened metrics

Total package byte prevSize

29722

decreased by-10.52%

Lines of code

735

decreased by-8.92%

Dependency changes

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

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

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

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

• Updated@reach/auto-id@0.17.0

• Updated@reach/utils@0.17.0