351 lines
14 KiB
JavaScript
351 lines
14 KiB
JavaScript
"use strict";
|
|
"use client";
|
|
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 __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
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
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// packages/react/accordion/src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
Accordion: () => Accordion,
|
|
AccordionContent: () => AccordionContent,
|
|
AccordionHeader: () => AccordionHeader,
|
|
AccordionItem: () => AccordionItem,
|
|
AccordionTrigger: () => AccordionTrigger,
|
|
Content: () => Content2,
|
|
Header: () => Header,
|
|
Item: () => Item,
|
|
Root: () => Root2,
|
|
Trigger: () => Trigger2,
|
|
createAccordionScope: () => createAccordionScope
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
|
|
// 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 }) });
|
|
}
|
|
);
|
|
Accordion.displayName = ACCORDION_NAME;
|
|
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
|
|
});
|
|
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,
|
|
onItemOpen: handleItemOpen,
|
|
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) => !item.ref.current?.disabled);
|
|
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
|
|
const triggerCount = triggerCollection.length;
|
|
if (triggerIndex === -1) return;
|
|
event.preventDefault();
|
|
let nextIndex = triggerIndex;
|
|
const homeIndex = 0;
|
|
const endIndex = triggerCount - 1;
|
|
const moveNext = () => {
|
|
nextIndex = triggerIndex + 1;
|
|
if (nextIndex > endIndex) {
|
|
nextIndex = homeIndex;
|
|
}
|
|
};
|
|
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;
|
|
}
|
|
const clampedIndex = nextIndex % triggerCount;
|
|
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
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
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
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
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
|