breaking(actions): move truncate action to src/Truncate (#1224)

* breaking: move truncate action to src/Truncate

* docs: update truncate docs

src/Truncate/index.js

@@ -1 +1,2 @@
 export { default as Truncate } from "./Truncate.svelte";
+export { truncate } from "./truncate";

src/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

src/Truncate/truncate.js

@@ -0,0 +1,29 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @example
+ * <h1 use:truncate>...</h1>
+ * <h1 use:truncate={{ clamp: "front" }}>...</h1>
+ */
+export function truncate(node, options = {}) {
+  const prefix = "bx--text-truncate--";
+
+  function toggleClass(front = false) {
+    const classes = [...node.classList]
+      .filter((name) => !name.startsWith(prefix))
+      .join(" ");
+
+    node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
+  }
+
+  toggleClass(options.clamp === "front");
+
+  return {
+    update(options) {
+      toggleClass(options.clamp === "front");
+    },
+  };
+}
+
+export default truncate;

src/index.js

@@ -128,6 +128,7 @@ export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
 export { Truncate } from "./Truncate";
+export { default as truncate } from "./Truncate/truncate";
 export {
   Header,
   HeaderAction,