@homebound/beam 2.345.0 → 2.346.0

package/dist/Css.d.ts

@@ -1470,82 +1470,94 @@ declare class CssBuilder<T extends Properties> {
     } & {
         width: import("csstype").Property.Width<string | 0> | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 1; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 1`. */
     get lineClamp1(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 2; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 2`. */
     get lineClamp2(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 3; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 3`. */
     get lineClamp3(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 4; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 4`. */
     get lineClamp4(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 5; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 5`. */
     get lineClamp5(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 6; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 6`. */
     get lineClamp6(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
     /** Sets `WebkitLineClamp: "unset"`. */
     get lineClampNone(): CssBuilder<T & {
         WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
+    /** Sets `WebkitLineClamp: value`. */
+    lineClamp(value: Properties["WebkitLineClamp"]): CssBuilder<T & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
+    } & {
+        overflow: import("csstype").Property.Overflow | undefined;
+    } & {
+        display: import("csstype").Property.Display | undefined;
+    } & {
+        WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
+    } & {
+        textOverflow: import("csstype").Property.TextOverflow | undefined;
+    }>;
     /** Sets `objectFit: "contain"`. */
     get objectContain(): CssBuilder<T & {
         objectFit: import("csstype").Property.ObjectFit | undefined;

package/dist/Css.js

@@ -1469,34 +1469,38 @@ class CssBuilder {
         return this.add("height", `${px}px`).add("width", `${px}px`);
     }
     // lineClamp
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 1; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 1`. */
     get lineClamp1() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 1).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 1);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 2; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 2`. */
     get lineClamp2() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 2).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 2);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 3; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 3`. */
     get lineClamp3() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 3).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 3);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 4; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 4`. */
     get lineClamp4() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 4).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 4);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 5; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 5`. */
     get lineClamp5() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 5).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 5);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 6; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 6`. */
     get lineClamp6() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 6).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 6);
     }
     /** Sets `WebkitLineClamp: "unset"`. */
     get lineClampNone() {
         return this.add("WebkitLineClamp", "unset");
     }
+    /** Sets `WebkitLineClamp: value`. */
+    lineClamp(value) {
+        return this.add("WebkitLineClamp", value).add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+    }
     // objectFit
     /** Sets `objectFit: "contain"`. */
     get objectContain() {

package/dist/components/MaxLines.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+export type MaxLinesProps = PropsWithChildren<{
+    maxLines: number;
+}>;
+export declare function MaxLines({ maxLines, children }: MaxLinesProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/MaxLines.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxLines = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const src_1 = require("..");
+const react_1 = require("react");
+const utils_1 = require("@react-aria/utils");
+function MaxLines({ maxLines, children }) {
+    const elRef = (0, react_1.useRef)(null);
+    const [hasMore, setHasMore] = (0, react_1.useState)(false);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    // When first rendered it will not be expanded and we'll have the `lineClamp` styles applied.
+    // Determine if we need the show more/less buttons.
+    // If the content is larger, then we need to set the height of the collapsed content to return to.
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!elRef.current)
+            return;
+        // If the content overflows, then set the `hasMore` state to true.
+        setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
+    }, []);
+    // Whenever the content changes, reset state
+    (0, react_1.useEffect)(() => {
+        setExpanded(false);
+    }, [children]);
+    const onResize = (0, react_1.useCallback)(() => {
+        // Listen for changes in the content height and determine if we still need the "show more/less" buttons.
+        // This content can change if the user resizes the window, or if the `props.children` change.
+        // The tricky part here is that setting `lineClamp` styles also triggers a resize event.
+        // We'll need to be aware of when this is triggered from our own `lineClamp` styles, vs externally.
+        if (!elRef.current)
+            return;
+        !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
+    }, [expanded]);
+    (0, utils_1.useResizeObserver)({ ref: elRef, onResize });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { ref: elRef, css: src_1.Css.if(!expanded).lineClamp(maxLines).$, children: children }), hasMore && ((0, jsx_runtime_1.jsx)("button", { css: src_1.Css.db.smMd.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" }))] }));
+}
+exports.MaxLines = MaxLines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.345.0",
+  "version": "2.346.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",