@kkcompany/app-ui 0.1.29 → 0.1.30

package/dist/index.cjs

@@ -808,17 +808,19 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [expandedHeight, setExpandedHeight] = (0, react.useState)();
 	const rootRef = (0, react.useRef)(null);
 	const containeRef = (0, react.useRef)();
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (!rootRef.current) return;
-		return onResize(rootRef.current, () => {
+		const updateExpandStatus = () => {
 			if (!containeRef.current) return;
 			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
 			const lineCount = getLineCount(containeRef.current);
 			const scrollable = lineCount > collapsedLines;
 			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
-			setExpandedHeight(containeRef.current?.scrollHeight);
-		});
+			setExpandedHeight(containeRef.current.scrollHeight);
+		};
+		updateExpandStatus();
+		return onResize(rootRef.current, updateExpandStatus);
 	}, []);
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react0 from "react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
-import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime2 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import Link from "next/link";
 
@@ -65,7 +65,7 @@ declare const HiddenToggle: ({
   defaultEnabled?: boolean;
   children: any;
   onChange: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/Icon.d.ts
 declare const Icon: ({
@@ -74,7 +74,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
@@ -90,7 +90,7 @@ declare const SeeMore: ({
   style?: CSSObject;
   messages?: typeof defaultMessages;
   children?: ReactNode;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/VideoItem.d.ts
 type VideoDetail = {
@@ -154,6 +154,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
@@ -808,17 +808,19 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [expandedHeight, setExpandedHeight] = useState();
 	const rootRef = useRef(null);
 	const containeRef = useRef();
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!rootRef.current) return;
-		return onResize(rootRef.current, () => {
+		const updateExpandStatus = () => {
 			if (!containeRef.current) return;
 			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
 			const lineCount = getLineCount(containeRef.current);
 			const scrollable = lineCount > collapsedLines;
 			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
-			setExpandedHeight(containeRef.current?.scrollHeight);
-		});
+			setExpandedHeight(containeRef.current.scrollHeight);
+		};
+		updateExpandStatus();
+		return onResize(rootRef.current, updateExpandStatus);
 	}, []);
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkcompany/app-ui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "module": "dist/index.mjs",
   "main": "dist/index.js",
   "types": "dist/index.d.mts",