@kkcompany/app-ui 0.1.26 → 0.1.27

package/dist/index.cjs

@@ -783,6 +783,16 @@ const onResize = (container, handler) => {
 	observer.observe(container);
 	return () => observer.disconnect();
 };
+const getLineCount = (el) => {
+	const style = window.getComputedStyle(el);
+	let lineHeight = Number.parseFloat(style.lineHeight);
+	if (Number.isNaN(lineHeight) || lineHeight <= 0) {
+		const fontSize = Number.parseFloat(style.fontSize);
+		lineHeight = fontSize > 0 ? fontSize * 1.2 : 0;
+	}
+	if (!lineHeight) return 0;
+	return Math.max(1, Math.round(el.scrollHeight / lineHeight));
+};
 const defaultMessages = {
 	seeMore: "もっと見る",
 	seeLess: "閉じる"
@@ -790,15 +800,16 @@ const defaultMessages = {
 const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [status, setStatus] = (0, react.useState)("no-expand");
 	const [expandedHeight, setExpandedHeight] = (0, react.useState)();
+	const rootRef = (0, react.useRef)(null);
 	const containeRef = (0, react.useRef)();
 	(0, react.useEffect)(() => {
-		if (!containeRef.current) return;
-		return onResize(containeRef.current, () => {
+		if (!rootRef.current) return;
+		return onResize(rootRef.current, () => {
 			if (!containeRef.current) return;
-			const { scrollHeight, clientHeight } = containeRef.current;
-			const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
-			const scrollable = scrollHeight > clientHeight * 1.3;
-			const fit = fontSize * 3 > scrollHeight;
+			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);
 		});
@@ -806,6 +817,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 		css: [containerStyle, { div: addonStyles[status] }],
+		ref: rootRef,
 		...rest,
 		children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 			css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],

package/dist/index.d.cts

@@ -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_runtime1 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_runtime1.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_runtime1.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_runtime1.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_runtime1.JSX.Element;
 //#endregion
 export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

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_runtime2 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime1 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_runtime2.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/Icon.d.ts
 declare const Icon: ({
@@ -74,7 +74,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime2.JSX.Element;
+}) => _emotion_react_jsx_runtime1.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_runtime2.JSX.Element;
+}) => _emotion_react_jsx_runtime1.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_runtime2.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -783,6 +783,16 @@ const onResize = (container, handler) => {
 	observer.observe(container);
 	return () => observer.disconnect();
 };
+const getLineCount = (el) => {
+	const style = window.getComputedStyle(el);
+	let lineHeight = Number.parseFloat(style.lineHeight);
+	if (Number.isNaN(lineHeight) || lineHeight <= 0) {
+		const fontSize = Number.parseFloat(style.fontSize);
+		lineHeight = fontSize > 0 ? fontSize * 1.2 : 0;
+	}
+	if (!lineHeight) return 0;
+	return Math.max(1, Math.round(el.scrollHeight / lineHeight));
+};
 const defaultMessages = {
 	seeMore: "もっと見る",
 	seeLess: "閉じる"
@@ -790,15 +800,16 @@ const defaultMessages = {
 const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [status, setStatus] = useState("no-expand");
 	const [expandedHeight, setExpandedHeight] = useState();
+	const rootRef = useRef(null);
 	const containeRef = useRef();
 	useEffect(() => {
-		if (!containeRef.current) return;
-		return onResize(containeRef.current, () => {
+		if (!rootRef.current) return;
+		return onResize(rootRef.current, () => {
 			if (!containeRef.current) return;
-			const { scrollHeight, clientHeight } = containeRef.current;
-			const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
-			const scrollable = scrollHeight > clientHeight * 1.3;
-			const fit = fontSize * 3 > scrollHeight;
+			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);
 		});
@@ -806,6 +817,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ jsxs("div", {
 		css: [containerStyle, { div: addonStyles[status] }],
+		ref: rootRef,
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
 			css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],

package/package.json

@@ -1,39 +1,39 @@
 {
-	"name": "@kkcompany/app-ui",
-	"version": "0.1.26",
-	"module": "dist/index.mjs",
-	"main": "dist/index.js",
-	"types": "dist/index.d.mts",
-	"files": [
-		"dist"
-	],
-	"sideEffects": false,
-	"exports": {
-		".": {
-			"import": "./dist/index.mjs",
-			"module": "./dist/index.mjs",
-			"types": "./dist/index.d.mts",
-			"require": "./dist/index.cjs"
-		}
-	},
-	"license": "MIT",
-	"scripts": {
-		"dev": "next",
-		"build": "tsdown --format esm --format cjs"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.14.0"
-	},
-	"peerDependencies": {
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.3.5",
-		"binary-base64-loader": "^1.0.0",
-		"next": "^16.0.2",
-		"rollup-plugin-base64": "^1.0.1",
-		"tsdown": "^0.16.4",
-		"typescript": "^5.9.3"
-	}
+  "name": "@kkcompany/app-ui",
+  "version": "0.1.27",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "types": "./dist/index.d.mts",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "tsdown --format esm --format cjs"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.5",
+    "binary-base64-loader": "^1.0.0",
+    "next": "^16.0.2",
+    "rollup-plugin-base64": "^1.0.1",
+    "tsdown": "^0.16.4",
+    "typescript": "^5.9.3"
+  }
 }