lecom-ui 5.3.6 → 5.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -45,26 +45,32 @@ const AccordionTrigger = React.forwardRef(
|
|
|
45
45
|
asChild,
|
|
46
46
|
iconPosition = "end",
|
|
47
47
|
ghost = false,
|
|
48
|
+
mode,
|
|
49
|
+
header,
|
|
50
|
+
extra,
|
|
48
51
|
...props
|
|
49
52
|
}, ref) => {
|
|
50
|
-
const
|
|
53
|
+
const isCollapseMode = mode === "collapse";
|
|
54
|
+
const finalVariant = isCollapseMode || ghost ? "collapse" : variant;
|
|
55
|
+
const finalIconPosition = isCollapseMode ? "start" : iconPosition;
|
|
51
56
|
const allowedSizes = ["small", "medium", "large"];
|
|
52
57
|
let finalSize = size;
|
|
53
|
-
if (ghost && size && allowedSizes.includes(size) && typeof size === "string") {
|
|
58
|
+
if ((isCollapseMode || ghost) && size && allowedSizes.includes(size) && typeof size === "string") {
|
|
54
59
|
if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
|
|
55
60
|
finalSize = size;
|
|
56
61
|
} else {
|
|
57
62
|
finalSize = `collapse-${size}`;
|
|
58
63
|
}
|
|
59
64
|
}
|
|
65
|
+
const content = isCollapseMode ? header : children;
|
|
60
66
|
const renderTriggerContent = () => {
|
|
61
67
|
if (asChild) {
|
|
62
|
-
return
|
|
68
|
+
return content;
|
|
63
69
|
}
|
|
64
|
-
if (ghost &&
|
|
65
|
-
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal" }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })), /* @__PURE__ */ React.createElement("span", { className: "font-normal" },
|
|
70
|
+
if (isCollapseMode || ghost && finalIconPosition === "start") {
|
|
71
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal" }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, content)), extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra));
|
|
66
72
|
}
|
|
67
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null,
|
|
73
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, finalIconPosition === "start" && /* @__PURE__ */ React.createElement(
|
|
68
74
|
ChevronDown,
|
|
69
75
|
{
|
|
70
76
|
className: cn(
|
|
@@ -72,7 +78,7 @@ const AccordionTrigger = React.forwardRef(
|
|
|
72
78
|
disabled && "text-grey-300"
|
|
73
79
|
)
|
|
74
80
|
}
|
|
75
|
-
), /* @__PURE__ */ React.createElement("span", { className: "flex-1" },
|
|
81
|
+
), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, content), finalIconPosition === "end" && /* @__PURE__ */ React.createElement(
|
|
76
82
|
ChevronDown,
|
|
77
83
|
{
|
|
78
84
|
className: cn(
|
|
@@ -90,10 +96,10 @@ const AccordionTrigger = React.forwardRef(
|
|
|
90
96
|
accordionVariants({
|
|
91
97
|
variant: finalVariant,
|
|
92
98
|
size: finalSize,
|
|
93
|
-
iconPosition,
|
|
99
|
+
iconPosition: finalIconPosition,
|
|
94
100
|
className
|
|
95
101
|
}),
|
|
96
|
-
ghost && "group"
|
|
102
|
+
(isCollapseMode || ghost) && "group"
|
|
97
103
|
),
|
|
98
104
|
...props,
|
|
99
105
|
disabled,
|
package/dist/index.d.ts
CHANGED
|
@@ -51,11 +51,16 @@ declare const accordionVariants: (props?: ({
|
|
|
51
51
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
52
52
|
declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
|
|
53
53
|
declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
54
|
+
interface CollapseModeProps {
|
|
55
|
+
mode?: 'collapse';
|
|
56
|
+
header?: React$1.ReactNode;
|
|
57
|
+
extra?: React$1.ReactNode;
|
|
58
|
+
}
|
|
54
59
|
declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
55
60
|
variant?: "default" | "collapse" | null | undefined;
|
|
56
61
|
size?: "small" | "medium" | "large" | "collapse-small" | "collapse-medium" | "collapse-large" | null | undefined;
|
|
57
62
|
iconPosition?: "start" | "end" | null | undefined;
|
|
58
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
63
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & CollapseModeProps & {
|
|
59
64
|
children?: React$1.ReactNode;
|
|
60
65
|
ghost?: boolean;
|
|
61
66
|
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -891,7 +896,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
891
896
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
892
897
|
|
|
893
898
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
894
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement |
|
|
899
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
895
900
|
className?: string;
|
|
896
901
|
collapsedSize?: number | undefined;
|
|
897
902
|
collapsible?: boolean | undefined;
|