Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@reach/accordion

Package Overview
Dependencies
Maintainers
4
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/accordion - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

91

dist/accordion.cjs.development.js

@@ -32,12 +32,4 @@ 'use strict';

var AccordionContext = /*#__PURE__*/utils.createNamedContext("AccordionContext", {});
var AccordionItemContext = /*#__PURE__*/utils.createNamedContext("AccordionItemContext", {});
var AccordionItemContext = /*#__PURE__*/utils.createNamedContext("AccordionItemContext", {}); ////////////////////////////////////////////////////////////////////////////////
var useAccordionContext = function useAccordionContext() {
return React.useContext(AccordionContext);
};
var useAccordionItemContext = function useAccordionItemContext() {
return React.useContext(AccordionItemContext);
}; ////////////////////////////////////////////////////////////////////////////////
(function (AccordionStates) {

@@ -114,3 +106,3 @@ AccordionStates["Open"] = "OPEN";

case collapsible:
return multiple ? [-1] : -1;
return multiple ? [] : -1;

@@ -248,6 +240,6 @@ default:

var _useAccordionContext = useAccordionContext(),
accordionId = _useAccordionContext.accordionId,
openPanels = _useAccordionContext.openPanels,
readOnly = _useAccordionContext.readOnly;
var _useContext = React.useContext(AccordionContext),
accordionId = _useContext.accordionId,
openPanels = _useContext.openPanels,
readOnly = _useContext.readOnly;

@@ -314,12 +306,12 @@ var buttonRef = React.useRef(null);

var _useAccordionContext2 = useAccordionContext(),
onSelectPanel = _useAccordionContext2.onSelectPanel;
var _useContext2 = React.useContext(AccordionContext),
onSelectPanel = _useContext2.onSelectPanel;
var _useAccordionItemCont = useAccordionItemContext(),
disabled = _useAccordionItemCont.disabled,
buttonId = _useAccordionItemCont.buttonId,
ownRef = _useAccordionItemCont.buttonRef,
index = _useAccordionItemCont.index,
panelId = _useAccordionItemCont.panelId,
state = _useAccordionItemCont.state;
var _useContext3 = React.useContext(AccordionItemContext),
disabled = _useContext3.disabled,
buttonId = _useContext3.buttonId,
ownRef = _useContext3.buttonRef,
index = _useContext3.index,
panelId = _useContext3.panelId,
state = _useContext3.state;

@@ -418,7 +410,7 @@ var ref = utils.useForkedRef(forwardedRef, ownRef);

var _useAccordionItemCont2 = useAccordionItemContext(),
disabled = _useAccordionItemCont2.disabled,
panelId = _useAccordionItemCont2.panelId,
buttonId = _useAccordionItemCont2.buttonId,
state = _useAccordionItemCont2.state;
var _useContext4 = React.useContext(AccordionItemContext),
disabled = _useContext4.disabled,
panelId = _useContext4.panelId,
buttonId = _useContext4.buttonId,
state = _useContext4.state;

@@ -458,3 +450,44 @@ return React__default.createElement(Comp, Object.assign({

/**
* A hook that exposes data for a given `Accordion` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordioncontext
*/
function useAccordionContext() {
var _useContext5 = React.useContext(AccordionContext),
openPanels = _useContext5.openPanels,
accordionId = _useContext5.accordionId;
return React.useMemo(function () {
return {
id: accordionId,
openPanels: [].concat(openPanels).filter(function (i) {
return i < 0;
})
};
}, [accordionId, openPanels]);
}
/**
* A hook that exposes data for a given `AccordionItem` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordionitemcontext
*/
function useAccordionItemContext() {
var _useContext6 = React.useContext(AccordionItemContext),
index = _useContext6.index,
state = _useContext6.state;
return React.useMemo(function () {
return {
index: index,
isExpanded: state === exports.AccordionStates.Open
};
}, [index, state]);
} ////////////////////////////////////////////////////////////////////////////////
function getDataState(state) {

@@ -468,2 +501,4 @@ return state === exports.AccordionStates.Open ? "open" : "collapsed";

exports.AccordionPanel = AccordionPanel;
exports.useAccordionContext = useAccordionContext;
exports.useAccordionItemContext = useAccordionItemContext;
//# sourceMappingURL=accordion.cjs.development.js.map

2

dist/accordion.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@reach/utils"),a=require("@reach/descendants"),o=require("@reach/auto-id");function d(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(a[t]=e[t]);return a}require("prop-types"),require("warning");var c,i=a.createDescendantContext("AccordionDescendantContext"),s=r.createNamedContext("AccordionContext",{}),l=r.createNamedContext("AccordionItemContext",{}),u=function(){return n.useContext(s)},f=function(){return n.useContext(l)};(c=exports.AccordionStates||(exports.AccordionStates={})).Open="OPEN",c.Collapsed="COLLAPSED";var p=n.forwardRef((function(e,c){var l=e.children,u=e.defaultIndex,f=e.index,p=e.onChange,x=e.readOnly,b=void 0!==x&&x,v=e.collapsible,h=void 0!==v&&v,A=e.multiple,m=void 0!==A&&A,y=d(e,["children","defaultIndex","index","onChange","readOnly","collapsible","multiple"]),I=n.useRef(void 0!==f).current,O=a.useDescendants(),C=O[0],w=O[1],D=o.useId(y.id),S=n.useState((function(){switch(!0){case I:return f;case null!=u:return m?Array.isArray(u)?u:[u]:Array.isArray(u)?null!==(e=u[0])&&void 0!==e?e:0:u;var e;case h:return m?[-1]:-1;default:return m?[0]:0}})),k=S[0],E=S[1],P=n.useCallback((function(e){p&&p(e),I||E((function(n){return e=e,m?(n=n).includes(e)?n.length>1||h?n.filter((function(n){return n!==e})):n:[].concat(n,[e]).sort():(n=n)===e&&h?-1:e}))}),[h,I,m,p]),g=n.useMemo((function(){return{accordionId:D,openPanels:I?f:k,onSelectPanel:b?r.noop:P,readOnly:b}}),[k,f,D,I,P,b]);return n.useEffect((function(){return r.checkStyles("accordion")}),[]),t.createElement(a.DescendantProvider,{context:i,items:C,set:w},t.createElement(s.Provider,{value:g},t.createElement("div",Object.assign({},y,{ref:c,"data-reach-accordion":""}),l)))})),x=r.forwardRefWithAs((function(e,o){var c=e.as,s=void 0===c?"div":c,f=e.children,p=e.disabled,x=void 0!==p&&p,b=d(e,["as","children","disabled"]),v=u(),A=v.accordionId,m=v.openPanels,y=v.readOnly,I=n.useRef(null),O=a.useDescendant({context:i,element:I.current,disabled:x}),C=r.makeId(A,O),w=r.makeId("panel",C),D=r.makeId("button",C),S=(Array.isArray(m)?m.includes(O)&&exports.AccordionStates.Open:m===O&&exports.AccordionStates.Open)||exports.AccordionStates.Collapsed;return t.createElement(l.Provider,{value:{disabled:x,buttonId:D,index:O,itemId:C,buttonRef:I,panelId:w,state:S}},t.createElement(s,Object.assign({},b,{ref:o,"data-reach-accordion-item":"","data-state":h(S),"data-disabled":x?"":void 0,"data-read-only":y?"":void 0}),f))})),b=r.forwardRefWithAs((function(e,n){var o=e.as,c=void 0===o?"button":o,s=e.children,l=e.onClick,p=e.onKeyDown,x=e.tabIndex,b=d(e,["as","children","onClick","onKeyDown","onMouseDown","onPointerDown","tabIndex"]),v=u().onSelectPanel,h=f(),A=h.disabled,m=h.buttonId,y=h.buttonRef,I=h.index,O=h.panelId,C=h.state,w=r.useForkedRef(n,y),D=a.useDescendantKeyDown(i,{currentIndex:I,orientation:"vertical",key:"element",rotate:!0,callback:function(e){e&&e.focus()},filter:function(e){return!e.disabled}});return t.createElement(c,Object.assign({"aria-controls":O,"aria-expanded":C===exports.AccordionStates.Open,tabIndex:A?-1:x},b,{ref:w,"data-reach-accordion-button":"",disabled:A||void 0,id:m,onClick:r.wrapEvent(l,(function(e){e.preventDefault(),A||(y.current.focus(),v(I))})),onKeyDown:r.wrapEvent(p,D)}),s)})),v=r.forwardRefWithAs((function(e,n){var r=e.as,a=void 0===r?"div":r,o=e.children,c=d(e,["as","children"]),i=f(),s=i.panelId,l=i.state;return t.createElement(a,Object.assign({hidden:l!==exports.AccordionStates.Open,role:"region","aria-labelledby":i.buttonId},c,{ref:n,"data-reach-accordion-panel":"","data-disabled":i.disabled||void 0,"data-state":h(l),id:s,tabIndex:-1}),o)}));function h(e){return e===exports.AccordionStates.Open?"open":"collapsed"}exports.Accordion=p,exports.AccordionButton=b,exports.AccordionItem=x,exports.AccordionPanel=v;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@reach/utils"),o=require("@reach/descendants"),a=require("@reach/auto-id");function d(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}require("prop-types"),require("warning");var c,i=o.createDescendantContext("AccordionDescendantContext"),s=r.createNamedContext("AccordionContext",{}),u=r.createNamedContext("AccordionItemContext",{});(c=exports.AccordionStates||(exports.AccordionStates={})).Open="OPEN",c.Collapsed="COLLAPSED";var l=n.forwardRef((function(e,c){var u=e.children,l=e.defaultIndex,f=e.index,p=e.onChange,x=e.readOnly,v=void 0!==x&&x,b=e.collapsible,A=void 0!==b&&b,h=e.multiple,m=void 0!==h&&h,I=d(e,["children","defaultIndex","index","onChange","readOnly","collapsible","multiple"]),C=n.useRef(void 0!==f).current,y=o.useDescendants(),O=y[0],w=y[1],D=a.useId(I.id),P=n.useState((function(){switch(!0){case C:return f;case null!=l:return m?Array.isArray(l)?l:[l]:Array.isArray(l)?null!==(e=l[0])&&void 0!==e?e:0:l;var e;case A:return m?[]:-1;default:return m?[0]:0}})),S=P[0],E=P[1],k=n.useCallback((function(e){p&&p(e),C||E((function(n){return e=e,m?(n=n).includes(e)?n.length>1||A?n.filter((function(n){return n!==e})):n:[].concat(n,[e]).sort():(n=n)===e&&A?-1:e}))}),[A,C,m,p]),g=n.useMemo((function(){return{accordionId:D,openPanels:C?f:S,onSelectPanel:v?r.noop:k,readOnly:v}}),[S,f,D,C,k,v]);return n.useEffect((function(){return r.checkStyles("accordion")}),[]),t.createElement(o.DescendantProvider,{context:i,items:O,set:w},t.createElement(s.Provider,{value:g},t.createElement("div",Object.assign({},I,{ref:c,"data-reach-accordion":""}),u)))})),f=r.forwardRefWithAs((function(e,a){var c=e.as,l=void 0===c?"div":c,f=e.children,p=e.disabled,x=void 0!==p&&p,b=d(e,["as","children","disabled"]),A=n.useContext(s),h=A.accordionId,m=A.openPanels,I=A.readOnly,C=n.useRef(null),y=o.useDescendant({context:i,element:C.current,disabled:x}),O=r.makeId(h,y),w=r.makeId("panel",O),D=r.makeId("button",O),P=(Array.isArray(m)?m.includes(y)&&exports.AccordionStates.Open:m===y&&exports.AccordionStates.Open)||exports.AccordionStates.Collapsed;return t.createElement(u.Provider,{value:{disabled:x,buttonId:D,index:y,itemId:O,buttonRef:C,panelId:w,state:P}},t.createElement(l,Object.assign({},b,{ref:a,"data-reach-accordion-item":"","data-state":v(P),"data-disabled":x?"":void 0,"data-read-only":I?"":void 0}),f))})),p=r.forwardRefWithAs((function(e,a){var c=e.as,l=void 0===c?"button":c,f=e.children,p=e.onClick,x=e.onKeyDown,v=e.tabIndex,b=d(e,["as","children","onClick","onKeyDown","onMouseDown","onPointerDown","tabIndex"]),A=n.useContext(s).onSelectPanel,h=n.useContext(u),m=h.disabled,I=h.buttonId,C=h.buttonRef,y=h.index,O=h.panelId,w=h.state,D=r.useForkedRef(a,C),P=o.useDescendantKeyDown(i,{currentIndex:y,orientation:"vertical",key:"element",rotate:!0,callback:function(e){e&&e.focus()},filter:function(e){return!e.disabled}});return t.createElement(l,Object.assign({"aria-controls":O,"aria-expanded":w===exports.AccordionStates.Open,tabIndex:m?-1:v},b,{ref:D,"data-reach-accordion-button":"",disabled:m||void 0,id:I,onClick:r.wrapEvent(p,(function(e){e.preventDefault(),m||(C.current.focus(),A(y))})),onKeyDown:r.wrapEvent(x,P)}),f)})),x=r.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"div":o,c=e.children,i=d(e,["as","children"]),s=n.useContext(u),l=s.panelId,f=s.state;return t.createElement(a,Object.assign({hidden:f!==exports.AccordionStates.Open,role:"region","aria-labelledby":s.buttonId},i,{ref:r,"data-reach-accordion-panel":"","data-disabled":s.disabled||void 0,"data-state":v(f),id:l,tabIndex:-1}),c)}));function v(e){return e===exports.AccordionStates.Open?"open":"collapsed"}exports.Accordion=l,exports.AccordionButton=p,exports.AccordionItem=f,exports.AccordionPanel=x,exports.useAccordionContext=function(){var e=n.useContext(s),t=e.openPanels,r=e.accordionId;return n.useMemo((function(){return{id:r,openPanels:[].concat(t).filter((function(e){return e<0}))}}),[r,t])},exports.useAccordionItemContext=function(){var e=n.useContext(u),t=e.index,r=e.state;return n.useMemo((function(){return{index:t,isExpanded:r===exports.AccordionStates.Open}}),[t,r])};
//# sourceMappingURL=accordion.cjs.production.min.js.map

92

dist/accordion.esm.js

@@ -25,13 +25,4 @@ import React, { forwardRef, useRef, useState, useCallback, useMemo, useEffect, useContext } from 'react';

var AccordionContext = /*#__PURE__*/createNamedContext("AccordionContext", {});
var AccordionItemContext = /*#__PURE__*/createNamedContext("AccordionItemContext", {});
var AccordionItemContext = /*#__PURE__*/createNamedContext("AccordionItemContext", {}); ////////////////////////////////////////////////////////////////////////////////
var useAccordionContext = function useAccordionContext() {
return useContext(AccordionContext);
};
var useAccordionItemContext = function useAccordionItemContext() {
return useContext(AccordionItemContext);
}; ////////////////////////////////////////////////////////////////////////////////
var AccordionStates;

@@ -110,3 +101,3 @@

case collapsible:
return multiple ? [-1] : -1;
return multiple ? [] : -1;

@@ -244,6 +235,6 @@ default:

var _useAccordionContext = useAccordionContext(),
accordionId = _useAccordionContext.accordionId,
openPanels = _useAccordionContext.openPanels,
readOnly = _useAccordionContext.readOnly;
var _useContext = useContext(AccordionContext),
accordionId = _useContext.accordionId,
openPanels = _useContext.openPanels,
readOnly = _useContext.readOnly;

@@ -310,12 +301,12 @@ var buttonRef = useRef(null);

var _useAccordionContext2 = useAccordionContext(),
onSelectPanel = _useAccordionContext2.onSelectPanel;
var _useContext2 = useContext(AccordionContext),
onSelectPanel = _useContext2.onSelectPanel;
var _useAccordionItemCont = useAccordionItemContext(),
disabled = _useAccordionItemCont.disabled,
buttonId = _useAccordionItemCont.buttonId,
ownRef = _useAccordionItemCont.buttonRef,
index = _useAccordionItemCont.index,
panelId = _useAccordionItemCont.panelId,
state = _useAccordionItemCont.state;
var _useContext3 = useContext(AccordionItemContext),
disabled = _useContext3.disabled,
buttonId = _useContext3.buttonId,
ownRef = _useContext3.buttonRef,
index = _useContext3.index,
panelId = _useContext3.panelId,
state = _useContext3.state;

@@ -414,7 +405,7 @@ var ref = useForkedRef(forwardedRef, ownRef);

var _useAccordionItemCont2 = useAccordionItemContext(),
disabled = _useAccordionItemCont2.disabled,
panelId = _useAccordionItemCont2.panelId,
buttonId = _useAccordionItemCont2.buttonId,
state = _useAccordionItemCont2.state;
var _useContext4 = useContext(AccordionItemContext),
disabled = _useContext4.disabled,
panelId = _useContext4.panelId,
buttonId = _useContext4.buttonId,
state = _useContext4.state;

@@ -454,3 +445,44 @@ return React.createElement(Comp, Object.assign({

/**
* A hook that exposes data for a given `Accordion` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordioncontext
*/
function useAccordionContext() {
var _useContext5 = useContext(AccordionContext),
openPanels = _useContext5.openPanels,
accordionId = _useContext5.accordionId;
return useMemo(function () {
return {
id: accordionId,
openPanels: [].concat(openPanels).filter(function (i) {
return i < 0;
})
};
}, [accordionId, openPanels]);
}
/**
* A hook that exposes data for a given `AccordionItem` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordionitemcontext
*/
function useAccordionItemContext() {
var _useContext6 = useContext(AccordionItemContext),
index = _useContext6.index,
state = _useContext6.state;
return useMemo(function () {
return {
index: index,
isExpanded: state === AccordionStates.Open
};
}, [index, state]);
} ////////////////////////////////////////////////////////////////////////////////
function getDataState(state) {

@@ -460,3 +492,3 @@ return state === AccordionStates.Open ? "open" : "collapsed";

export { Accordion, AccordionButton, AccordionItem, AccordionPanel, AccordionStates };
export { Accordion, AccordionButton, AccordionItem, AccordionPanel, AccordionStates, useAccordionContext, useAccordionItemContext };
//# sourceMappingURL=accordion.esm.js.map

22

dist/index.d.ts

@@ -168,3 +168,25 @@ /**

};
/**
* A hook that exposes data for a given `Accordion` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordioncontext
*/
export declare function useAccordionContext(): AccordionContextValue;
/**
* A hook that exposes data for a given `AccordionItem` component to its
* descendants.
*
* @see Docs https://reacttraining.com/reach-ui/accordion#useaccordionitemcontext
*/
export declare function useAccordionItemContext(): AccordionItemContextValue;
export declare type AccordionContextValue = {
id: string | undefined;
openPanels: number[];
};
export declare type AccordionItemContextValue = {
index: number;
isExpanded: boolean;
};
declare type AccordionIndex = number | number[];
export {};

10

package.json
{
"name": "@reach/accordion",
"version": "0.9.1",
"version": "0.10.0",
"description": "Accessible React accordion component",

@@ -16,5 +16,5 @@ "author": "React Training <hello@reacttraining.com>",

"dependencies": {
"@reach/auto-id": "^0.9.0",
"@reach/descendants": "^0.9.1",
"@reach/utils": "^0.9.0",
"@reach/auto-id": "^0.10.0",
"@reach/descendants": "^0.10.0",
"@reach/utils": "^0.10.0",
"tslib": "^1.10.0",

@@ -35,3 +35,3 @@ "warning": "^4.0.3"

],
"gitHead": "19b5b1ec7682dfed613512f1592958a47d43ad4d"
"gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
}
dist/accordion.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/accordion.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/accordion.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc