@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/Expandable/index.js

@@ -1,146 +1,122 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { animationDurationVar, expandable } from "./styles.css.js";
 import { cn } from "@ultraviolet/utils";
+import { useEffect, useRef, useState } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useRef, useEffect } from "react";
-import { animationDurationVar, expandable } from "./styles.css.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Expandable/index.tsx
 const ANIMATION_DURATION = 300;
-const NoAnimationExpandable = ({
-  children,
-  opened,
-  minHeight,
-  className,
-  "data-testid": dataTestId,
-  style
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className,
-    "data-testid": dataTestId,
-    style: { display: opened ? void 0 : "none", minHeight, ...style },
-    children
-  }
-);
-const AnimatedExpandable = ({
-  children,
-  opened,
-  minHeight = 0,
-  className,
-  "data-testid": dataTestId,
-  style,
-  animationDuration = ANIMATION_DURATION
-}) => {
-  const [height, setHeight] = useState(null);
-  const transitionTimer = useRef(
-    null
-  );
-  const ref = useRef(null);
-  const shouldBeAnimated = animationDuration > 0;
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    setTimeout(() => {
-      if (isFirstRender.current) {
-        isFirstRender.current = false;
-      }
-    }, 0);
-  }, []);
-  useEffect(() => {
-    if (ref.current) {
-      setHeight(ref.current.scrollHeight ?? 0);
-    }
-  }, [ref.current?.scrollHeight]);
-  useEffect(() => {
-    if (isFirstRender.current && !opened && ref.current) {
-      ref.current.style.maxHeight = `${minHeight ?? 0}px`;
-      ref.current.style.overflow = "hidden";
-    } else if (opened && ref.current && height) {
-      ref.current.style.maxHeight = `${height}px`;
-      ref.current.style.visibility = "";
-      transitionTimer.current = setTimeout(() => {
-        if (ref.current) {
-          ref.current.style.maxHeight = "initial";
-          ref.current.style.overflow = "visible";
-          ref.current.style.visibility = "";
-        }
-      }, ANIMATION_DURATION);
-    } else {
-      if (transitionTimer?.current) {
-        clearTimeout(transitionTimer.current);
-      }
-      if (ref.current && height) {
-        ref.current.style.maxHeight = `${height}px`;
-        transitionTimer.current = setTimeout(() => {
-          if (ref.current) {
-            ref.current.style.maxHeight = `${minHeight}px`;
-            ref.current.style.overflow = "hidden";
-            setTimeout(() => {
-              if (ref.current && !minHeight) {
-                ref.current.style.visibility = "hidden";
-              }
-            }, ANIMATION_DURATION);
-          }
-        }, 0);
-      }
-    }
-    return () => {
-      if (transitionTimer?.current) {
-        clearTimeout(transitionTimer.current);
-      }
-    };
-  }, [animationDuration, height, minHeight, opened, shouldBeAnimated]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(className, expandable),
-      "data-is-animated": shouldBeAnimated && !isFirstRender.current,
-      "data-testid": dataTestId,
-      ref,
-      style: {
-        ...assignInlineVars({
-          [animationDurationVar]: `${animationDuration}ms`
-        }),
-        ...style
-      },
-      children
-    }
-  );
-};
-const Expandable = ({
-  children,
-  opened,
-  minHeight,
-  className,
-  "data-testid": dataTestId,
-  animationDuration = ANIMATION_DURATION,
-  style
-}) => {
-  if (animationDuration > 0) {
-    return /* @__PURE__ */ jsx(
-      AnimatedExpandable,
-      {
-        animationDuration,
-        className,
-        "data-testid": dataTestId,
-        minHeight,
-        opened,
-        style,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    NoAnimationExpandable,
-    {
-      className,
-      "data-testid": dataTestId,
-      minHeight,
-      opened,
-      style,
-      children
-    }
-  );
+const NoAnimationExpandable = ({ children, opened, minHeight, className, "data-testid": dataTestId, style }) => /* @__PURE__ */ jsx("div", {
+	className,
+	"data-testid": dataTestId,
+	style: _objectSpread2({
+		display: opened ? void 0 : "none",
+		minHeight
+	}, style),
+	children
+});
+const AnimatedExpandable = ({ children, opened, minHeight = 0, className, "data-testid": dataTestId, style, animationDuration = ANIMATION_DURATION }) => {
+	var _ref$current;
+	const [height, setHeight] = useState(null);
+	const transitionTimer = useRef(null);
+	const ref = useRef(null);
+	const shouldBeAnimated = animationDuration > 0;
+	const isFirstRender = useRef(true);
+	useEffect(() => {
+		setTimeout(() => {
+			if (isFirstRender.current) isFirstRender.current = false;
+		}, 0);
+	}, []);
+	/**
+	* At mount, we set the height variable to the height of the content only if the component is closed.
+	* This is to ensure we don't have animation when the component is opened at mount.
+	*/
+	useEffect(() => {
+		if (ref.current) {
+			var _ref$current$scrollHe;
+			setHeight((_ref$current$scrollHe = ref.current.scrollHeight) !== null && _ref$current$scrollHe !== void 0 ? _ref$current$scrollHe : 0);
+		}
+	}, [(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight]);
+	/**
+	* Here we set maxHeight to the height of the content when the component is opened
+	* and after 300ms we set maxHeight to initial to let the content grow with animation.
+	* Setting it to initial is required to be able to have nested expandable or the height won't follow.
+	*/
+	useEffect(() => {
+		if (isFirstRender.current && !opened && ref.current) {
+			ref.current.style.maxHeight = `${minHeight !== null && minHeight !== void 0 ? minHeight : 0}px`;
+			ref.current.style.overflow = "hidden";
+		} else if (opened && ref.current && height) {
+			ref.current.style.maxHeight = `${height}px`;
+			ref.current.style.visibility = "";
+			transitionTimer.current = setTimeout(() => {
+				if (ref.current) {
+					ref.current.style.maxHeight = "initial";
+					ref.current.style.overflow = "visible";
+					ref.current.style.visibility = "";
+				}
+			}, ANIMATION_DURATION);
+		} else {
+			if (transitionTimer === null || transitionTimer === void 0 ? void 0 : transitionTimer.current) clearTimeout(transitionTimer.current);
+			if (ref.current && height) {
+				ref.current.style.maxHeight = `${height}px`;
+				transitionTimer.current = setTimeout(() => {
+					if (ref.current) {
+						ref.current.style.maxHeight = `${minHeight}px`;
+						ref.current.style.overflow = "hidden";
+						setTimeout(() => {
+							if (ref.current && !minHeight) ref.current.style.visibility = "hidden";
+						}, ANIMATION_DURATION);
+					}
+				}, 0);
+			}
+		}
+		return () => {
+			if (transitionTimer === null || transitionTimer === void 0 ? void 0 : transitionTimer.current) clearTimeout(transitionTimer.current);
+		};
+	}, [
+		animationDuration,
+		height,
+		minHeight,
+		opened,
+		shouldBeAnimated
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className, expandable),
+		"data-is-animated": shouldBeAnimated && !isFirstRender.current,
+		"data-testid": dataTestId,
+		ref,
+		style: _objectSpread2(_objectSpread2({}, assignInlineVars({ [animationDurationVar]: `${animationDuration}ms` })), style),
+		children
+	});
 };
-export {
-  AnimatedExpandable,
-  Expandable
+/**
+* The Expandable component is a dynamic React component that allows for the expansion of its children content
+* based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
+* user experience.
+*/
+const Expandable = ({ children, opened, minHeight, className, "data-testid": dataTestId, animationDuration = ANIMATION_DURATION, style }) => {
+	if (animationDuration > 0) return /* @__PURE__ */ jsx(AnimatedExpandable, {
+		animationDuration,
+		className,
+		"data-testid": dataTestId,
+		minHeight,
+		opened,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(NoAnimationExpandable, {
+		className,
+		"data-testid": dataTestId,
+		minHeight,
+		opened,
+		style,
+		children
+	});
 };
+
+//#endregion
+export { Expandable };

package/dist/components/Expandable/styles.css.js

@@ -1,7 +1,8 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/Expandable/styles.css.ts
 var animationDurationVar = "var(--uv_mlltm90)";
 var expandable = "uv_mlltm91";
-export {
-  animationDurationVar,
-  expandable
-};
+
+//#endregion
+export { animationDurationVar, expandable };

package/dist/components/ExpandableCard/components/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpandableCard/components/Title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC,GAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC,CAAA;AAC/C,eAAO,MAAM,mBAAmB,GAAI,0CAMjC,wBAAwB,4CAU1B,CAAA"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpandableCard/components/Title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC,GAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC,CAAA;AAC/C,eAAO,MAAM,mBAAmB,iHAgB/B,CAAA"}

package/dist/components/ExpandableCard/components/Title.js

@@ -1,23 +1,17 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
 import { Text } from "../../Text/index.js";
-const ExpandableCardTitle = ({
-  as,
-  size = "medium",
-  children,
-  disabled,
-  style
-}) => /* @__PURE__ */ jsx(
-  Text,
-  {
-    as: as ?? "h2",
-    disabled,
-    sentiment: "neutral",
-    style,
-    variant: size === "medium" ? "bodyStrong" : "headingSmallStrong",
-    children
-  }
-);
-export {
-  ExpandableCardTitle
-};
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ExpandableCard/components/Title.tsx
+const ExpandableCardTitle = ({ as, size = "medium", children, disabled, style }) => /* @__PURE__ */ jsx(Text, {
+	as: as !== null && as !== void 0 ? as : "h2",
+	disabled,
+	sentiment: "neutral",
+	style,
+	variant: size === "medium" ? "bodyStrong" : "headingSmallStrong",
+	children
+});
+
+//#endregion
+export { ExpandableCardTitle };

package/dist/components/ExpandableCard/index.d.ts

@@ -34,13 +34,13 @@ type CommonProps = {
     open?: DetailsHTMLAttributes<HTMLDetailsElement>['open'];
     style?: CSSProperties;
 } & DraggableProps;
-export declare const ExpandableCard: import("react").ForwardRefExoticComponent<(({
-    expanded?: undefined;
-    onToggleExpand?: undefined;
-} & CommonProps) | ({} & (CommonProps & {
+export declare const ExpandableCard: import("react").ForwardRefExoticComponent<(({} & (CommonProps & {
     expanded: boolean;
     onToggleExpand: () => void;
-}))) & import("react").RefAttributes<HTMLDetailsElement>> & {
+})) | ({
+    expanded?: undefined;
+    onToggleExpand?: undefined;
+} & CommonProps)) & import("react").RefAttributes<HTMLDetailsElement>> & {
     Title: ({ as, size, children, disabled, style, }: import("./components/Title").ExpandableCardTitleProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/ExpandableCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,aAAa,EACb,qBAAqB,EAGrB,aAAa,EACb,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYvD,KAAK,kBAAkB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/D,KAAK,cAAc,GACf;IACE,SAAS,EAAE,IAAI,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;CAC3D,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,KAAK,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,CAAA;AACL,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;IACxD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,cAAc,CAAA;AAiOlB,eAAO,MAAM,cAAc;;;;cA9NE,OAAO;oBAAkB,MAAM,IAAI;;;CAgO9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,aAAa,EACb,qBAAqB,EAGrB,aAAa,EACb,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYvD,KAAK,kBAAkB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/D,KAAK,cAAc,GACf;IACE,SAAS,EAAE,IAAI,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;CAC3D,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,KAAK,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,CAAA;AACL,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;IACxD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,cAAc,CAAA;AAiOlB,eAAO,MAAM,cAAc;;;;;;;;CAEzB,CAAA"}