@daformat/react-number-flow-input 1.0.0

package/dist/utils/utils.js

@@ -0,0 +1,162 @@
+export const measureText = (text, referenceElement) => {
+    const computedStyle = window.getComputedStyle(referenceElement);
+    const tempMeasure = document.createElement("span");
+    tempMeasure.style.position = "absolute";
+    tempMeasure.style.visibility = "hidden";
+    tempMeasure.style.whiteSpace = "pre";
+    tempMeasure.style.font = computedStyle.font;
+    tempMeasure.style.fontSize = computedStyle.fontSize;
+    tempMeasure.style.fontFamily = computedStyle.fontFamily;
+    tempMeasure.style.fontWeight = computedStyle.fontWeight;
+    tempMeasure.style.fontStyle = computedStyle.fontStyle;
+    tempMeasure.style.letterSpacing = computedStyle.letterSpacing;
+    tempMeasure.style.textTransform = computedStyle.textTransform;
+    tempMeasure.style.lineHeight = computedStyle.lineHeight;
+    tempMeasure.textContent = text;
+    document.body.appendChild(tempMeasure);
+    const width = tempMeasure.getBoundingClientRect().width;
+    document.body.removeChild(tempMeasure);
+    return width;
+};
+export const getSelectionRange = (element, selection) => {
+    const range = selection.getRangeAt(0);
+    const preRange = document.createRange();
+    preRange.selectNodeContents(element);
+    preRange.setEnd(range.startContainer, range.startOffset);
+    const start = preRange.toString().length;
+    preRange.setEnd(range.endContainer, range.endOffset);
+    const end = preRange.toString().length;
+    return { start, end };
+};
+export const setCursorPositionInElement = (element, position) => {
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    const targetPos = Math.min(position, element.textContent?.length ?? 0);
+    const targetSpan = element.querySelector(`[data-char-index="${targetPos}"]`);
+    if (targetSpan) {
+        const textNode = targetSpan.firstChild;
+        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+            const range = document.createRange();
+            range.setStart(textNode, 0);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            return;
+        }
+    }
+    if (targetPos === element.textContent?.length &&
+        element.textContent.length > 0) {
+        const lastSpan = element.querySelector(`[data-char-index="${element.textContent.length - 1}"]`);
+        if (lastSpan) {
+            const textNode = lastSpan.firstChild;
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                const range = document.createRange();
+                range.setStart(textNode, textNode.textContent?.length ?? 0);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                return;
+            }
+        }
+    }
+    let currentPos = 0;
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+    let node;
+    while ((node = walker.nextNode())) {
+        const nodeLength = node.textContent?.length ?? 0;
+        if (currentPos + nodeLength >= targetPos) {
+            const offset = Math.min(targetPos - currentPos, nodeLength);
+            const range = document.createRange();
+            range.setStart(node, offset);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            return;
+        }
+        currentPos += nodeLength;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+};
+/**
+ * Returns true if the given element has a transparent text color.
+ */
+export const isTransparent = (element) => {
+    return (element.style.color === "transparent" ||
+        element.style.color === "rgba(0, 0, 0, 0)" ||
+        window.getComputedStyle(element).color === "rgba(0, 0, 0, 0)");
+};
+/**
+ * Remove transparent color from the given element.
+ */
+export const removeTransparentColor = (span) => {
+    if (span.style.color === "transparent" ||
+        span.style.color === "rgba(0, 0, 0, 0)" ||
+        span.style.color === "") {
+        span.style.color = "";
+        return;
+    }
+    // In case we missed other formats in style attribute
+    const computedColor = window.getComputedStyle(span).color;
+    if (computedColor === "rgba(0, 0, 0, 0)" || computedColor === "transparent") {
+        span.style.color = "";
+    }
+};
+/**
+ * Find the matching node at a given position in an element.
+ */
+export const findNodeAtPosition = (element, targetPos) => {
+    let currentPos = 0;
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+    let node;
+    while ((node = walker.nextNode())) {
+        const nodeLength = node.textContent?.length ?? 0;
+        if (currentPos + nodeLength >= targetPos) {
+            return { node, offset: Math.min(targetPos - currentPos, nodeLength) };
+        }
+        currentPos += nodeLength;
+    }
+    return null;
+};
+/**
+ * Set the cursor position in an element.
+ */
+export const setCursorAtPosition = (element, position, selection) => {
+    const sel = selection ?? window.getSelection();
+    if (!sel) {
+        return;
+    }
+    const found = findNodeAtPosition(element, position);
+    if (found) {
+        const range = document.createRange();
+        range.setStart(found.node, found.offset);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+};
+/**
+ * Clean up width animation styles from an element.
+ */
+export const clearWidthStyles = (element) => {
+    element.style.width = "";
+    element.style.minWidth = "";
+    element.style.maxWidth = "";
+    element.style.display = "";
+};
+/**
+ * Check if an element has width animation styles.
+ */
+export const hasWidthStyles = (element) => !!(element.style.width || element.style.minWidth || element.style.maxWidth);
+//# sourceMappingURL=utils.js.map

package/dist/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@daformat/react-number-flow-input",
+  "version": "1.0.0",
+  "license": "Zero-Clause BSD",
+  "description": "A react number flow input component, with no dependencies",
+  "keywords": [
+    "number-flow",
+    "input",
+    "animated",
+    "barrel-wheel",
+    "react-component",
+    "react"
+  ],
+  "homepage": "https://github.com/daformat/react-number-flow-input",
+  "bugs": {
+    "url": "https://github.com/daformat/react-number-flow-input/issues"
+  },
+  "author": "Mathieu Jouhet",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daformat/react-number-flow-input.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.57.2",
+    "@typescript-eslint/parser": "^8.57.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-testing-library": "^7.16.2",
+    "jsdom": "^29.0.1",
+    "prettier": "^3.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "ci": "pnpm build && pnpm format:check && pnpm test",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint:js": "eslint .",
+    "lint:js:fix": "eslint --fix .",
+    "local-release": "changeset version && changeset publish",
+    "test": "vitest run"
+  }
+}