ivt
Version:
Ivt Components Library
332 lines (328 loc) • 13.6 kB
JavaScript
import React__default from 'react';
import { c as createContextScope, u as useComposedRefs } from './index-D4jPaBZ2.mjs';
import { createCollection } from '@radix-ui/react-collection';
import { P as Primitive, c as composeEventHandlers } from './index-Dsw02Eup.mjs';
import { u as useControllableState } from './index-1toTCGyr.mjs';
import { c as createCollapsibleScope, R as Root, T as Trigger, b as Content } from './index-BWXpaxmG.mjs';
import { u as useId } from './index-gX0V59dZ.mjs';
import { u as useDirection } from './index-UxWlwQlk.mjs';
import { jsx } from 'react/jsx-runtime';
import { c as cn } from './utils-BDcRwQMd.mjs';
import { C as ChevronDown } from './chevron-down-CDFTds2-.mjs';
var ACCORDION_NAME = "Accordion";
var ACCORDION_KEYS = [
"Home",
"End",
"ArrowDown",
"ArrowUp",
"ArrowLeft",
"ArrowRight"
];
var [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
var [createAccordionContext] = createContextScope(ACCORDION_NAME, [
createCollectionScope,
createCollapsibleScope
]);
var useCollapsibleScope = createCollapsibleScope();
var Accordion$1 = React__default.forwardRef((props, forwardedRef)=>{
const { type, ...accordionProps } = props;
const singleProps = accordionProps;
const multipleProps = accordionProps;
return /* @__PURE__ */ jsx(Collection.Provider, {
scope: props.__scopeAccordion,
children: type === "multiple" ? /* @__PURE__ */ jsx(AccordionImplMultiple, {
...multipleProps,
ref: forwardedRef
}) : /* @__PURE__ */ jsx(AccordionImplSingle, {
...singleProps,
ref: forwardedRef
})
});
});
Accordion$1.displayName = ACCORDION_NAME;
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(ACCORDION_NAME, {
collapsible: false
});
var AccordionImplSingle = React__default.forwardRef((props, forwardedRef)=>{
const { value: valueProp, defaultValue, onValueChange = ()=>{}, collapsible = false, ...accordionSingleProps } = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? "",
onChange: onValueChange,
caller: ACCORDION_NAME
});
return /* @__PURE__ */ jsx(AccordionValueProvider, {
scope: props.__scopeAccordion,
value: React__default.useMemo(()=>value ? [
value
] : [], [
value
]),
onItemOpen: setValue,
onItemClose: React__default.useCallback(()=>collapsible && setValue(""), [
collapsible,
setValue
]),
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
scope: props.__scopeAccordion,
collapsible,
children: /* @__PURE__ */ jsx(AccordionImpl, {
...accordionSingleProps,
ref: forwardedRef
})
})
});
});
var AccordionImplMultiple = React__default.forwardRef((props, forwardedRef)=>{
const { value: valueProp, defaultValue, onValueChange = ()=>{}, ...accordionMultipleProps } = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? [],
onChange: onValueChange,
caller: ACCORDION_NAME
});
const handleItemOpen = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>[
...prevValue,
itemValue
]), [
setValue
]);
const handleItemClose = React__default.useCallback((itemValue)=>setValue((prevValue = [])=>prevValue.filter((value2)=>value2 !== itemValue)), [
setValue
]);
return /* @__PURE__ */ jsx(AccordionValueProvider, {
scope: props.__scopeAccordion,
value,
onItemOpen: handleItemOpen,
onItemClose: handleItemClose,
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
scope: props.__scopeAccordion,
collapsible: true,
children: /* @__PURE__ */ jsx(AccordionImpl, {
...accordionMultipleProps,
ref: forwardedRef
})
})
});
});
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
var AccordionImpl = React__default.forwardRef((props, forwardedRef)=>{
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
const accordionRef = React__default.useRef(null);
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
const getItems = useCollection(__scopeAccordion);
const direction = useDirection(dir);
const isDirectionLTR = direction === "ltr";
const handleKeyDown = 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__ */ jsx(AccordionImplProvider, {
scope: __scopeAccordion,
disabled,
direction: dir,
orientation,
children: /* @__PURE__ */ jsx(Collection.Slot, {
scope: __scopeAccordion,
children: /* @__PURE__ */ jsx(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$1 = 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 = useId();
const open = value && valueContext.value.includes(value) || false;
const disabled = accordionContext.disabled || props.disabled;
return /* @__PURE__ */ jsx(AccordionItemProvider, {
scope: __scopeAccordion,
open,
disabled,
triggerId,
children: /* @__PURE__ */ jsx(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$1.displayName = ITEM_NAME;
var HEADER_NAME = "AccordionHeader";
var AccordionHeader = React__default.forwardRef((props, forwardedRef)=>{
const { __scopeAccordion, ...headerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
return /* @__PURE__ */ jsx(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$1 = 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__ */ jsx(Collection.ItemSlot, {
scope: __scopeAccordion,
children: /* @__PURE__ */ jsx(Trigger, {
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
"data-orientation": accordionContext.orientation,
id: itemContext.triggerId,
...collapsibleScope,
...triggerProps,
ref: forwardedRef
})
});
});
AccordionTrigger$1.displayName = TRIGGER_NAME;
var CONTENT_NAME = "AccordionContent";
var AccordionContent$1 = 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__ */ jsx(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$1.displayName = CONTENT_NAME;
function getState(open) {
return open ? "open" : "closed";
}
var Root2 = Accordion$1;
var Item = AccordionItem$1;
var Header = AccordionHeader;
var Trigger2 = AccordionTrigger$1;
var Content2 = AccordionContent$1;
function Accordion({ ...props }) {
return /*#__PURE__*/ React__default.createElement(Root2, {
"data-slot": "accordion",
...props
});
}
function AccordionItem({ className, ...props }) {
return /*#__PURE__*/ React__default.createElement(Item, {
"data-slot": "accordion-item",
className: cn("border-b last:border-b-0", className),
...props
});
}
function AccordionTrigger({ className, children, iconPosition, iconSize = "size-4", ...props }) {
return /*#__PURE__*/ React__default.createElement(Header, {
className: "flex"
}, /*#__PURE__*/ React__default.createElement(Trigger2, {
"data-slot": "accordion-trigger",
className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className),
...props
}, iconPosition === "left" ? /*#__PURE__*/ React__default.createElement(ChevronDown, {
className: cn(iconSize, "shrink-0 transition-transform duration-200")
}) : null, children, iconPosition !== "left" ? /*#__PURE__*/ React__default.createElement(ChevronDown, {
className: cn(iconSize, "shrink-0 transition-transform duration-200")
}) : null));
}
function AccordionContent({ className, children, ...props }) {
return /*#__PURE__*/ React__default.createElement(Content2, {
"data-slot": "accordion-content",
className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
...props
}, /*#__PURE__*/ React__default.createElement("div", {
className: cn("pt-0 pb-4", className)
}, children));
}
export { Accordion as A, AccordionItem as a, AccordionTrigger as b, AccordionContent as c };
//# sourceMappingURL=accordion-BcAmhbBS.mjs.map