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

@radix-ui/react-accordion

Package Overview
Dependencies
Maintainers
6
Versions
192
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@radix-ui/react-accordion - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0-rc.1

71

dist/index.d.ts

@@ -1,14 +0,27 @@

import React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
type Direction = 'ltr' | 'rtl';
export const createAccordionScope: import("@radix-ui/react-context").CreateScope;
export interface AccordionSingleProps extends AccordionImplSingleProps {
import * as React from 'react';
import React__default from 'react';
import * as Radix from '@radix-ui/react-primitive';
import { Primitive } from '@radix-ui/react-primitive';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
declare type Scope<C = any> = {
[scopeName: string]: React.Context<C>[];
} | undefined;
declare type ScopeHook = (scope: Scope) => {
[__scopeProp: string]: Scope;
};
interface CreateScope {
scopeName: string;
(): ScopeHook;
}
declare type Direction = 'ltr' | 'rtl';
declare const createAccordionScope: CreateScope;
interface AccordionSingleProps extends AccordionImplSingleProps {
type: 'single';
}
export interface AccordionMultipleProps extends AccordionImplMultipleProps {
interface AccordionMultipleProps extends AccordionImplMultipleProps {
type: 'multiple';
}
export const Accordion: React.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
declare const Accordion: React__default.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
interface AccordionImplSingleProps extends AccordionImplProps {

@@ -49,3 +62,3 @@ /**

}
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
interface AccordionImplProps extends PrimitiveDivProps {

@@ -62,3 +75,3 @@ /**

*/
orientation?: React.AriaAttributes['aria-orientation'];
orientation?: React__default.AriaAttributes['aria-orientation'];
/**

@@ -69,4 +82,4 @@ * The language read direction.

}
type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
export interface AccordionItemProps extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
declare type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
interface AccordionItemProps extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
/**

@@ -86,5 +99,5 @@ * Whether or not an accordion item is disabled from user interaction.

*/
export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>;
export interface AccordionHeaderProps extends PrimitiveHeading3Props {
declare const AccordionItem: React__default.ForwardRefExoticComponent<AccordionItemProps & React__default.RefAttributes<HTMLDivElement>>;
declare type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>;
interface AccordionHeaderProps extends PrimitiveHeading3Props {
}

@@ -95,5 +108,5 @@ /**

*/
export const AccordionHeader: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
export interface AccordionTriggerProps extends CollapsibleTriggerProps {
declare const AccordionHeader: React__default.ForwardRefExoticComponent<AccordionHeaderProps & React__default.RefAttributes<HTMLHeadingElement>>;
declare type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
interface AccordionTriggerProps extends CollapsibleTriggerProps {
}

@@ -104,5 +117,5 @@ /**

*/
export const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
export interface AccordionContentProps extends CollapsibleContentProps {
declare const AccordionTrigger: React__default.ForwardRefExoticComponent<AccordionTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
declare type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
interface AccordionContentProps extends CollapsibleContentProps {
}

@@ -112,9 +125,9 @@ /**

*/
export const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
export const Item: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
export const Header: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
export const Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
declare const AccordionContent: React__default.ForwardRefExoticComponent<AccordionContentProps & React__default.RefAttributes<HTMLDivElement>>;
declare const Root: React__default.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React__default.RefAttributes<HTMLDivElement>>;
declare const Item: React__default.ForwardRefExoticComponent<AccordionItemProps & React__default.RefAttributes<HTMLDivElement>>;
declare const Header: React__default.ForwardRefExoticComponent<AccordionHeaderProps & React__default.RefAttributes<HTMLHeadingElement>>;
declare const Trigger: React__default.ForwardRefExoticComponent<AccordionTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
declare const Content: React__default.ForwardRefExoticComponent<AccordionContentProps & React__default.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map
export { Accordion, AccordionContent, type AccordionContentProps, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionSingleProps, AccordionTrigger, type AccordionTriggerProps, Content, Header, Item, Root, Trigger, createAccordionScope };

654

dist/index.js

@@ -1,169 +0,163 @@

var $47SRi$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $47SRi$react = require("react");
var $47SRi$radixuireactcontext = require("@radix-ui/react-context");
var $47SRi$radixuireactcollection = require("@radix-ui/react-collection");
var $47SRi$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $47SRi$radixuiprimitive = require("@radix-ui/primitive");
var $47SRi$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
var $47SRi$radixuireactprimitive = require("@radix-ui/react-primitive");
var $47SRi$radixuireactcollapsible = require("@radix-ui/react-collapsible");
var $47SRi$radixuireactid = require("@radix-ui/react-id");
var $47SRi$radixuireactdirection = require("@radix-ui/react-direction");
"use strict";
(() => {
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
if (typeof require !== "undefined") return require.apply(this, arguments);
throw Error('Dynamic require of "' + x + '" is not supported');
});
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "createAccordionScope", () => $0f4a20de0660bfd8$export$9748edc328a73be1);
$parcel$export(module.exports, "Accordion", () => $0f4a20de0660bfd8$export$a766cd26d0d69044);
$parcel$export(module.exports, "AccordionItem", () => $0f4a20de0660bfd8$export$d99097c13d4dac9f);
$parcel$export(module.exports, "AccordionHeader", () => $0f4a20de0660bfd8$export$5e3e5deaaf81ee41);
$parcel$export(module.exports, "AccordionTrigger", () => $0f4a20de0660bfd8$export$94e939b1f85bdd73);
$parcel$export(module.exports, "AccordionContent", () => $0f4a20de0660bfd8$export$985b9a77379b54a0);
$parcel$export(module.exports, "Root", () => $0f4a20de0660bfd8$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Item", () => $0f4a20de0660bfd8$export$6d08773d2e66f8f2);
$parcel$export(module.exports, "Header", () => $0f4a20de0660bfd8$export$8b251419efc915eb);
$parcel$export(module.exports, "Trigger", () => $0f4a20de0660bfd8$export$41fb9f06171c75f4);
$parcel$export(module.exports, "Content", () => $0f4a20de0660bfd8$export$7c6e2c02157bb7d2);
/* -------------------------------------------------------------------------------------------------
* Accordion
* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$ACCORDION_NAME = 'Accordion';
const $0f4a20de0660bfd8$var$ACCORDION_KEYS = [
'Home',
'End',
'ArrowDown',
'ArrowUp',
'ArrowLeft',
'ArrowRight'
];
const [$0f4a20de0660bfd8$var$Collection, $0f4a20de0660bfd8$var$useCollection, $0f4a20de0660bfd8$var$createCollectionScope] = $47SRi$radixuireactcollection.createCollection($0f4a20de0660bfd8$var$ACCORDION_NAME);
const [$0f4a20de0660bfd8$var$createAccordionContext, $0f4a20de0660bfd8$export$9748edc328a73be1] = $47SRi$radixuireactcontext.createContextScope($0f4a20de0660bfd8$var$ACCORDION_NAME, [
$0f4a20de0660bfd8$var$createCollectionScope,
$47SRi$radixuireactcollapsible.createCollapsibleScope
]);
const $0f4a20de0660bfd8$var$useCollapsibleScope = $47SRi$radixuireactcollapsible.createCollapsibleScope();
const $0f4a20de0660bfd8$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { type: type , ...accordionProps } = props;
const singleProps = accordionProps;
const multipleProps = accordionProps;
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$Collection.Provider, {
scope: props.__scopeAccordion
}, type === 'multiple' ? /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionImplMultiple, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({}, multipleProps, {
ref: forwardedRef
})) : /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionImplSingle, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({}, singleProps, {
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($0f4a20de0660bfd8$export$a766cd26d0d69044, {
displayName: $0f4a20de0660bfd8$var$ACCORDION_NAME
});
$0f4a20de0660bfd8$export$a766cd26d0d69044.propTypes = {
type (props) {
const value = props.value || props.defaultValue;
if (props.type && ![
'single',
'multiple'
].includes(props.type)) return new Error('Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.');
if (props.type === 'multiple' && typeof value === 'string') return new Error('Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.');
if (props.type === 'single' && Array.isArray(value)) return new Error('Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.');
return null;
// packages/react/accordion/src/Accordion.tsx
var import_react = __toESM(__require("react"));
var import_react_context = __require("@radix-ui/react-context");
var import_react_collection = __require("@radix-ui/react-collection");
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
var import_primitive = __require("@radix-ui/primitive");
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
var import_react_primitive = __require("@radix-ui/react-primitive");
var CollapsiblePrimitive = __toESM(__require("@radix-ui/react-collapsible"));
var import_react_collapsible = __require("@radix-ui/react-collapsible");
var import_react_id = __require("@radix-ui/react-id");
var import_react_direction = __require("@radix-ui/react-direction");
var import_jsx_runtime = __require("react/jsx-runtime");
var ACCORDION_NAME = "Accordion";
var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(ACCORDION_NAME);
var [createAccordionContext, createAccordionScope] = (0, import_react_context.createContextScope)(ACCORDION_NAME, [
createCollectionScope,
import_react_collapsible.createCollapsibleScope
]);
var useCollapsibleScope = (0, import_react_collapsible.createCollapsibleScope)();
var Accordion = import_react.default.forwardRef(
(props, forwardedRef) => {
const { type, ...accordionProps } = props;
const singleProps = accordionProps;
const multipleProps = accordionProps;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
}
};
/* -----------------------------------------------------------------------------------------------*/ const [$0f4a20de0660bfd8$var$AccordionValueProvider, $0f4a20de0660bfd8$var$useAccordionValueContext] = $0f4a20de0660bfd8$var$createAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME);
const [$0f4a20de0660bfd8$var$AccordionCollapsibleProvider, $0f4a20de0660bfd8$var$useAccordionCollapsibleContext] = $0f4a20de0660bfd8$var$createAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME, {
collapsible: false
});
const $0f4a20de0660bfd8$var$AccordionImplSingle = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange = ()=>{} , collapsible: collapsible = false , ...accordionSingleProps } = props;
const [value, setValue] = $47SRi$radixuireactusecontrollablestate.useControllableState({
);
Accordion.displayName = ACCORDION_NAME;
Accordion.propTypes = {
type(props) {
const value = props.value || props.defaultValue;
if (props.type && !["single", "multiple"].includes(props.type)) {
return new Error(
"Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`."
);
}
if (props.type === "multiple" && typeof value === "string") {
return new Error(
"Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."
);
}
if (props.type === "single" && Array.isArray(value)) {
return new Error(
"Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."
);
}
return null;
}
};
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
ACCORDION_NAME,
{ collapsible: false }
);
var AccordionImplSingle = import_react.default.forwardRef(
(props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
collapsible = false,
...accordionSingleProps
} = props;
const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
prop: valueProp,
defaultProp: defaultValue,
onChange: onValueChange
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value: value ? [value] : [],
onItemOpen: setValue,
onItemClose: import_react.default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
}
);
}
);
var AccordionImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
...accordionMultipleProps
} = props;
const [value = [], setValue] = (0, import_react_use_controllable_state.useControllableState)({
prop: valueProp,
defaultProp: defaultValue,
onChange: onValueChange
});
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionValueProvider, {
const handleItemOpen = import_react.default.useCallback(
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
[setValue]
);
const handleItemClose = import_react.default.useCallback(
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
[setValue]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value: value ? [
value
] : [],
onItemOpen: setValue,
onItemClose: ($parcel$interopDefault($47SRi$react)).useCallback(()=>collapsible && setValue('')
, [
collapsible,
setValue
])
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionCollapsibleProvider, {
scope: props.__scopeAccordion,
collapsible: collapsible
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionImpl, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({}, accordionSingleProps, {
ref: forwardedRef
}))));
});
/* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$AccordionImplMultiple = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange = ()=>{} , ...accordionMultipleProps } = props;
const [value1 = [], setValue] = $47SRi$radixuireactusecontrollablestate.useControllableState({
prop: valueProp,
defaultProp: defaultValue,
onChange: onValueChange
});
const handleItemOpen = ($parcel$interopDefault($47SRi$react)).useCallback((itemValue)=>setValue((prevValue = [])=>[
...prevValue,
itemValue
]
)
, [
setValue
]);
const handleItemClose = ($parcel$interopDefault($47SRi$react)).useCallback((itemValue)=>setValue((prevValue = [])=>prevValue.filter((value)=>value !== itemValue
)
)
, [
setValue
]);
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionValueProvider, {
scope: props.__scopeAccordion,
value: value1,
value,
onItemOpen: handleItemOpen,
onItemClose: handleItemClose
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionCollapsibleProvider, {
scope: props.__scopeAccordion,
collapsible: true
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionImpl, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({}, accordionMultipleProps, {
ref: forwardedRef
}))));
});
/* -----------------------------------------------------------------------------------------------*/ const [$0f4a20de0660bfd8$var$AccordionImplProvider, $0f4a20de0660bfd8$var$useAccordionContext] = $0f4a20de0660bfd8$var$createAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME);
const $0f4a20de0660bfd8$var$AccordionImpl = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { __scopeAccordion: __scopeAccordion , disabled: disabled , dir: dir , orientation: orientation = 'vertical' , ...accordionProps } = props;
const accordionRef = ($parcel$interopDefault($47SRi$react)).useRef(null);
const composedRefs = $47SRi$radixuireactcomposerefs.useComposedRefs(accordionRef, forwardedRef);
const getItems = $0f4a20de0660bfd8$var$useCollection(__scopeAccordion);
const direction = $47SRi$radixuireactdirection.useDirection(dir);
const isDirectionLTR = direction === 'ltr';
const handleKeyDown = $47SRi$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
var _triggerCollection$cl;
if (!$0f4a20de0660bfd8$var$ACCORDION_KEYS.includes(event.key)) return;
onItemClose: handleItemClose,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
}
);
});
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
var AccordionImpl = import_react.default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
const accordionRef = import_react.default.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
const getItems = useCollection(__scopeAccordion);
const direction = (0, import_react_direction.useDirection)(dir);
const isDirectionLTR = direction === "ltr";
const handleKeyDown = (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
if (!ACCORDION_KEYS.includes(event.key)) return;
const target = event.target;
const triggerCollection = getItems().filter((item)=>{
var _item$ref$current;
return !((_item$ref$current = item.ref.current) !== null && _item$ref$current !== void 0 && _item$ref$current.disabled);
});
const triggerIndex = triggerCollection.findIndex((item)=>item.ref.current === target
);
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
const triggerCount = triggerCollection.length;
if (triggerIndex === -1) return; // Prevents page scroll while user is navigating
if (triggerIndex === -1) return;
event.preventDefault();

@@ -173,171 +167,191 @@ let nextIndex = triggerIndex;

const endIndex = triggerCount - 1;
const moveNext = ()=>{
nextIndex = triggerIndex + 1;
if (nextIndex > endIndex) nextIndex = homeIndex;
const moveNext = () => {
nextIndex = triggerIndex + 1;
if (nextIndex > endIndex) {
nextIndex = homeIndex;
}
};
const movePrev = ()=>{
nextIndex = triggerIndex - 1;
if (nextIndex < homeIndex) nextIndex = endIndex;
const movePrev = () => {
nextIndex = triggerIndex - 1;
if (nextIndex < homeIndex) {
nextIndex = endIndex;
}
};
switch(event.key){
case 'Home':
nextIndex = homeIndex;
break;
case 'End':
nextIndex = endIndex;
break;
case 'ArrowRight':
if (orientation === 'horizontal') {
if (isDirectionLTR) moveNext();
else movePrev();
}
break;
case 'ArrowDown':
if (orientation === 'vertical') moveNext();
break;
case 'ArrowLeft':
if (orientation === 'horizontal') {
if (isDirectionLTR) movePrev();
else moveNext();
}
break;
case 'ArrowUp':
if (orientation === 'vertical') movePrev();
break;
switch (event.key) {
case "Home":
nextIndex = homeIndex;
break;
case "End":
nextIndex = endIndex;
break;
case "ArrowRight":
if (orientation === "horizontal") {
if (isDirectionLTR) {
moveNext();
} else {
movePrev();
}
}
break;
case "ArrowDown":
if (orientation === "vertical") {
moveNext();
}
break;
case "ArrowLeft":
if (orientation === "horizontal") {
if (isDirectionLTR) {
movePrev();
} else {
moveNext();
}
}
break;
case "ArrowUp":
if (orientation === "vertical") {
movePrev();
}
break;
}
const clampedIndex = nextIndex % triggerCount;
(_triggerCollection$cl = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection$cl === void 0 || _triggerCollection$cl.focus();
});
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionImplProvider, {
scope: __scopeAccordion,
disabled: disabled,
direction: dir,
orientation: orientation
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$Collection.Slot, {
scope: __scopeAccordion
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($47SRi$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({}, accordionProps, {
"data-orientation": orientation,
ref: composedRefs,
onKeyDown: disabled ? undefined : handleKeyDown
}))));
});
/* -------------------------------------------------------------------------------------------------
* AccordionItem
* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$ITEM_NAME = 'AccordionItem';
const [$0f4a20de0660bfd8$var$AccordionItemProvider, $0f4a20de0660bfd8$var$useAccordionItemContext] = $0f4a20de0660bfd8$var$createAccordionContext($0f4a20de0660bfd8$var$ITEM_NAME);
/**
* `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
*/ const $0f4a20de0660bfd8$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { __scopeAccordion: __scopeAccordion , value: value , ...accordionItemProps } = props;
const accordionContext = $0f4a20de0660bfd8$var$useAccordionContext($0f4a20de0660bfd8$var$ITEM_NAME, __scopeAccordion);
const valueContext = $0f4a20de0660bfd8$var$useAccordionValueContext($0f4a20de0660bfd8$var$ITEM_NAME, __scopeAccordion);
const collapsibleScope = $0f4a20de0660bfd8$var$useCollapsibleScope(__scopeAccordion);
const triggerId = $47SRi$radixuireactid.useId();
const open1 = value && valueContext.value.includes(value) || false;
const disabled = accordionContext.disabled || props.disabled;
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$AccordionItemProvider, {
scope: __scopeAccordion,
open: open1,
disabled: disabled,
triggerId: triggerId
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($47SRi$radixuireactcollapsible.Root, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({
"data-orientation": accordionContext.orientation,
"data-state": $0f4a20de0660bfd8$var$getState(open1)
}, collapsibleScope, accordionItemProps, {
ref: forwardedRef,
disabled: disabled,
open: open1,
onOpenChange: (open)=>{
if (open) valueContext.onItemOpen(value);
else valueContext.onItemClose(value);
triggerCollection[clampedIndex].ref.current?.focus();
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AccordionImplProvider,
{
scope: __scopeAccordion,
disabled,
direction: dir,
orientation,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.div,
{
...accordionProps,
"data-orientation": orientation,
ref: composedRefs,
onKeyDown: disabled ? void 0 : handleKeyDown
}
) })
}
})));
});
/*#__PURE__*/ Object.assign($0f4a20de0660bfd8$export$d99097c13d4dac9f, {
displayName: $0f4a20de0660bfd8$var$ITEM_NAME
});
/* -------------------------------------------------------------------------------------------------
* AccordionHeader
* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$HEADER_NAME = 'AccordionHeader';
/**
* `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
* whether or not its content is collapsed.
*/ const $0f4a20de0660bfd8$export$5e3e5deaaf81ee41 = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { __scopeAccordion: __scopeAccordion , ...headerProps } = props;
const accordionContext = $0f4a20de0660bfd8$var$useAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME, __scopeAccordion);
const itemContext = $0f4a20de0660bfd8$var$useAccordionItemContext($0f4a20de0660bfd8$var$HEADER_NAME, __scopeAccordion);
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($47SRi$radixuireactprimitive.Primitive.h3, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({
"data-orientation": accordionContext.orientation,
"data-state": $0f4a20de0660bfd8$var$getState(itemContext.open),
"data-disabled": itemContext.disabled ? '' : undefined
}, headerProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($0f4a20de0660bfd8$export$5e3e5deaaf81ee41, {
displayName: $0f4a20de0660bfd8$var$HEADER_NAME
});
/* -------------------------------------------------------------------------------------------------
* AccordionTrigger
* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$TRIGGER_NAME = 'AccordionTrigger';
/**
* `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
* should always be nested inside of an `AccordionHeader`.
*/ const $0f4a20de0660bfd8$export$94e939b1f85bdd73 = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { __scopeAccordion: __scopeAccordion , ...triggerProps } = props;
const accordionContext = $0f4a20de0660bfd8$var$useAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME, __scopeAccordion);
const itemContext = $0f4a20de0660bfd8$var$useAccordionItemContext($0f4a20de0660bfd8$var$TRIGGER_NAME, __scopeAccordion);
const collapsibleContext = $0f4a20de0660bfd8$var$useAccordionCollapsibleContext($0f4a20de0660bfd8$var$TRIGGER_NAME, __scopeAccordion);
const collapsibleScope = $0f4a20de0660bfd8$var$useCollapsibleScope(__scopeAccordion);
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($0f4a20de0660bfd8$var$Collection.ItemSlot, {
scope: __scopeAccordion
}, /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($47SRi$radixuireactcollapsible.Trigger, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || undefined,
"data-orientation": accordionContext.orientation,
id: itemContext.triggerId
}, collapsibleScope, triggerProps, {
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($0f4a20de0660bfd8$export$94e939b1f85bdd73, {
displayName: $0f4a20de0660bfd8$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* AccordionContent
* -----------------------------------------------------------------------------------------------*/ const $0f4a20de0660bfd8$var$CONTENT_NAME = 'AccordionContent';
/**
* `AccordionContent` contains the collapsible content for an `AccordionItem`.
*/ const $0f4a20de0660bfd8$export$985b9a77379b54a0 = /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).forwardRef((props, forwardedRef)=>{
const { __scopeAccordion: __scopeAccordion , ...contentProps } = props;
const accordionContext = $0f4a20de0660bfd8$var$useAccordionContext($0f4a20de0660bfd8$var$ACCORDION_NAME, __scopeAccordion);
const itemContext = $0f4a20de0660bfd8$var$useAccordionItemContext($0f4a20de0660bfd8$var$CONTENT_NAME, __scopeAccordion);
const collapsibleScope = $0f4a20de0660bfd8$var$useCollapsibleScope(__scopeAccordion);
return /*#__PURE__*/ ($parcel$interopDefault($47SRi$react)).createElement($47SRi$radixuireactcollapsible.Content, ($parcel$interopDefault($47SRi$babelruntimehelpersextends))({
role: "region",
"aria-labelledby": itemContext.triggerId,
"data-orientation": accordionContext.orientation
}, collapsibleScope, contentProps, {
ref: forwardedRef,
style: {
['--radix-accordion-content-height']: 'var(--radix-collapsible-content-height)',
['--radix-accordion-content-width']: 'var(--radix-collapsible-content-width)',
);
}
);
var ITEM_NAME = "AccordionItem";
var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
var AccordionItem = import_react.default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, value, ...accordionItemProps } = props;
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
const triggerId = (0, import_react_id.useId)();
const open = value && valueContext.value.includes(value) || false;
const disabled = accordionContext.disabled || props.disabled;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AccordionItemProvider,
{
scope: __scopeAccordion,
open,
disabled,
triggerId,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CollapsiblePrimitive.Root,
{
"data-orientation": accordionContext.orientation,
"data-state": getState(open),
...collapsibleScope,
...accordionItemProps,
ref: forwardedRef,
disabled,
open,
onOpenChange: (open2) => {
if (open2) {
valueContext.onItemOpen(value);
} else {
valueContext.onItemClose(value);
}
}
}
)
}
);
}
);
AccordionItem.displayName = ITEM_NAME;
var HEADER_NAME = "AccordionHeader";
var AccordionHeader = import_react.default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...headerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.h3,
{
"data-orientation": accordionContext.orientation,
"data-state": getState(itemContext.open),
"data-disabled": itemContext.disabled ? "" : void 0,
...headerProps,
ref: forwardedRef
}
);
}
);
AccordionHeader.displayName = HEADER_NAME;
var TRIGGER_NAME = "AccordionTrigger";
var AccordionTrigger = import_react.default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...triggerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CollapsiblePrimitive.Trigger,
{
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
"data-orientation": accordionContext.orientation,
id: itemContext.triggerId,
...collapsibleScope,
...triggerProps,
ref: forwardedRef
}
) });
}
);
AccordionTrigger.displayName = TRIGGER_NAME;
var CONTENT_NAME = "AccordionContent";
var AccordionContent = import_react.default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...contentProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CollapsiblePrimitive.Content,
{
role: "region",
"aria-labelledby": itemContext.triggerId,
"data-orientation": accordionContext.orientation,
...collapsibleScope,
...contentProps,
ref: forwardedRef,
style: {
["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
...props.style
}
}
}));
});
/*#__PURE__*/ Object.assign($0f4a20de0660bfd8$export$985b9a77379b54a0, {
displayName: $0f4a20de0660bfd8$var$CONTENT_NAME
});
/* -----------------------------------------------------------------------------------------------*/ function $0f4a20de0660bfd8$var$getState(open) {
return open ? 'open' : 'closed';
}
const $0f4a20de0660bfd8$export$be92b6f5f03c0fe9 = $0f4a20de0660bfd8$export$a766cd26d0d69044;
const $0f4a20de0660bfd8$export$6d08773d2e66f8f2 = $0f4a20de0660bfd8$export$d99097c13d4dac9f;
const $0f4a20de0660bfd8$export$8b251419efc915eb = $0f4a20de0660bfd8$export$5e3e5deaaf81ee41;
const $0f4a20de0660bfd8$export$41fb9f06171c75f4 = $0f4a20de0660bfd8$export$94e939b1f85bdd73;
const $0f4a20de0660bfd8$export$7c6e2c02157bb7d2 = $0f4a20de0660bfd8$export$985b9a77379b54a0;
);
}
);
AccordionContent.displayName = CONTENT_NAME;
function getState(open) {
return open ? "open" : "closed";
}
var Root2 = Accordion;
var Item = AccordionItem;
var Header = AccordionHeader;
var Trigger2 = AccordionTrigger;
var Content2 = AccordionContent;
})();
//# sourceMappingURL=index.js.map

24

package.json
{
"name": "@radix-ui/react-accordion",
"version": "1.1.2",
"version": "1.2.0-rc.1",
"license": "MIT",

@@ -31,12 +31,11 @@ "exports": {

"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collapsible": "1.0.3",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1"
"@radix-ui/primitive": "1.1.0-rc.1",
"@radix-ui/react-collapsible": "1.1.0-rc.1",
"@radix-ui/react-collection": "1.1.0-rc.1",
"@radix-ui/react-compose-refs": "1.1.0-rc.1",
"@radix-ui/react-context": "1.1.0-rc.1",
"@radix-ui/react-direction": "1.1.0-rc.1",
"@radix-ui/react-id": "1.1.0-rc.1",
"@radix-ui/react-primitive": "1.1.0-rc.1",
"@radix-ui/react-use-controllable-state": "1.1.0-rc.1"
},

@@ -64,3 +63,4 @@ "peerDependencies": {

"url": "https://github.com/radix-ui/primitives/issues"
}
},
"stableVersion": "1.1.2"
}
dist/index.d.ts.map
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.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