diff --git a/actions/index.js b/actions/index.js
deleted file mode 100644
index 6a270efa..00000000
--- a/actions/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { truncate } from "./truncate";
diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx
index 41c0ce4a..071ec970 100644
--- a/docs/src/pages/components/Truncate.svx
+++ b/docs/src/pages/components/Truncate.svx
@@ -1,7 +1,6 @@
@@ -25,9 +24,7 @@ Set `clamp` to `"front"` to clamp the text from the front.
### use:truncate
-The `truncate` action can be used on other HTML elements.
-
-Import path: `import { truncate } from "carbon-components-svelte/actions";`
+The `truncate` action can be used on plain HTML elements.
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
diff --git a/package.json b/package.json
index a9a11dc4..aaf2414d 100644
--- a/package.json
+++ b/package.json
@@ -75,8 +75,7 @@
"lib",
"src",
"types",
- "css",
- "actions"
+ "css"
],
"contributors": [
"Eric Liu (https://github.com/metonym)",
diff --git a/src/Truncate/index.js b/src/Truncate/index.js
index ae315be0..803c92f2 100644
--- a/src/Truncate/index.js
+++ b/src/Truncate/index.js
@@ -1 +1,2 @@
export { default as Truncate } from "./Truncate.svelte";
+export { truncate } from "./truncate";
diff --git a/src/Truncate/truncate.d.ts b/src/Truncate/truncate.d.ts
new file mode 100644
index 00000000..35557fc0
--- /dev/null
+++ b/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;
diff --git a/actions/truncate.js b/src/Truncate/truncate.js
similarity index 56%
rename from actions/truncate.js
rename to src/Truncate/truncate.js
index 51fdfb9e..42723c09 100644
--- a/actions/truncate.js
+++ b/src/Truncate/truncate.js
@@ -1,16 +1,12 @@
/**
* Svelte action that applies single-line text truncation to an element
- * @param {HTMLElement} node
- * @param {{ clamp?: "end" | "front" }} params
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
* @example
- *
- *
* ...
* ...
*/
-export function truncate(node, params = {}) {
+export function truncate(node, options = {}) {
const prefix = "bx--text-truncate--";
function toggleClass(front = false) {
@@ -21,11 +17,13 @@ export function truncate(node, params = {}) {
node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
}
- toggleClass(params.clamp === "front");
+ toggleClass(options.clamp === "front");
return {
- update(params) {
- toggleClass(params.clamp === "front");
+ update(options) {
+ toggleClass(options.clamp === "front");
},
};
}
+
+export default truncate;
diff --git a/src/index.js b/src/index.js
index eab6202d..ea1a84cf 100644
--- a/src/index.js
+++ b/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,
diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte
index 35e90c8b..4e8adc65 100644
--- a/tests/Truncate.test.svelte
+++ b/tests/Truncate.test.svelte
@@ -1,6 +1,6 @@
diff --git a/types/Truncate/truncate.d.ts b/types/Truncate/truncate.d.ts
new file mode 100644
index 00000000..35557fc0
--- /dev/null
+++ b/types/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;
diff --git a/types/index.d.ts b/types/index.d.ts
index 598b9f0b..1174ce26 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -144,6 +144,7 @@ export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinit
export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
export { default as TreeView } from "./TreeView/TreeView.svelte";
export { default as Truncate } from "./Truncate/Truncate.svelte";
+export { default as truncate } from "./Truncate/truncate";
export { default as Header } from "./UIShell/Header.svelte";
export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";