@daformat/react-number-flow-input 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.js +30 -0
- package/dist/styles.js.map +1 -1
- package/dist/utils/barrelWheel.js +13 -9
- package/dist/utils/barrelWheel.js.map +1 -1
- package/package.json +1 -1
package/dist/styles.js
CHANGED
|
@@ -2,9 +2,32 @@ import { cssEasing } from "./utils/cssEasing.js";
|
|
|
2
2
|
const STYLE_ID = "daformat-react-number-flow-input-styles";
|
|
3
3
|
const easeOutCubic = cssEasing["--ease-out-cubic"];
|
|
4
4
|
const css = `
|
|
5
|
+
[data-numberflow-input-root] {
|
|
6
|
+
/* Establish a stacking context so the browser can composite the whole
|
|
7
|
+
input subtree into its own layer without intermixing with surrounding
|
|
8
|
+
page paint. We deliberately do NOT add 'contain: paint' here: the
|
|
9
|
+
wrapper below uses a negative margin to bleed its mask-image fade
|
|
10
|
+
past the root's content box, and paint containment on the root would
|
|
11
|
+
clip that bleed. */
|
|
12
|
+
isolation: isolate;
|
|
13
|
+
}
|
|
14
|
+
|
|
5
15
|
[data-numberflow-input-root] [data-numberflow-input-wrapper] {
|
|
6
16
|
--overflow-size: 0.2em;
|
|
7
17
|
|
|
18
|
+
/* CSS containment scoped to the wrapper:
|
|
19
|
+
- 'layout' isolates internal layout: digit width tweens, barrel-wheel
|
|
20
|
+
insertions/removals and DOM shuffling cannot trigger reflow outside
|
|
21
|
+
this box. The wrapper itself still resizes to fit its contents
|
|
22
|
+
because containment only affects *internal* propagation, not the
|
|
23
|
+
element's own intrinsic size.
|
|
24
|
+
- 'paint' clips painting to the wrapper bounds, which is already what
|
|
25
|
+
the mask-image + overflow:hidden achieve visually. The added value
|
|
26
|
+
is that the compositor can skip per-frame invalidations of
|
|
27
|
+
surrounding page chrome when digits translate/scale/roll.
|
|
28
|
+
We intentionally avoid 'size' containment because the input must
|
|
29
|
+
grow and shrink as the user types. */
|
|
30
|
+
contain: layout paint;
|
|
8
31
|
margin: calc(var(--overflow-size) * -1);
|
|
9
32
|
mask-image: linear-gradient(
|
|
10
33
|
to bottom,
|
|
@@ -15,11 +38,18 @@ const css = `
|
|
|
15
38
|
);
|
|
16
39
|
padding: var(--overflow-size);
|
|
17
40
|
position: relative;
|
|
41
|
+
overflow: hidden;
|
|
18
42
|
}
|
|
19
43
|
|
|
20
44
|
[data-numberflow-input-root] [data-numberflow-input-contenteditable] {
|
|
21
45
|
display: inline-block;
|
|
22
46
|
outline: none;
|
|
47
|
+
/* Layout containment as a secondary hint: insertions/removals of digit
|
|
48
|
+
spans (and their width tweens) don't propagate layout beyond the
|
|
49
|
+
contenteditable's own outer box. We don't add paint containment here
|
|
50
|
+
because barrel wheels are SIBLINGS of the contenteditable (not
|
|
51
|
+
descendants) and must not be clipped to it. */
|
|
52
|
+
contain: layout;
|
|
23
53
|
}
|
|
24
54
|
|
|
25
55
|
[data-numberflow-input-root] [data-numberflow-input-contenteditable] span {
|
package/dist/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,QAAQ,GAAG,yCAAyC,CAAC;AAE3D,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAC;AAEnD,MAAM,GAAG,GAAG
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,QAAQ,GAAG,yCAAyC,CAAC;AAE3D,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAC;AAEnD,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6DS,YAAY;iBAChB,YAAY;qBACR,YAAY;qBACZ,YAAY;;;;;;;;;;;;;;iBAchB,YAAY;qBACR,YAAY;qBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAyCF,YAAY;;;;;;;;;;;;;;;;;;;;;;;;CAwB1C,CAAC;AAEF,IAAI,QAAQ,GAAG,KAAK,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAS,EAAE;IACrC,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;IACT,CAAC;IACD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IACD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACtC,QAAQ,GAAG,IAAI,CAAC;QAChB,OAAO;IACT,CAAC;IACD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,GAAG,IAAI,CAAC;AAClB,CAAC,CAAC"}
|
|
@@ -6,15 +6,19 @@ export const temporarilyRemoveAncestorsTransform = (element) => {
|
|
|
6
6
|
const cache = new Map();
|
|
7
7
|
let parent = element.parentElement;
|
|
8
8
|
while (parent) {
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
const computedStyle = window.getComputedStyle(parent);
|
|
10
|
+
const transform = computedStyle.transform;
|
|
11
|
+
const scale = computedStyle.scale;
|
|
12
|
+
const rotate = computedStyle.rotate;
|
|
13
|
+
const translate = computedStyle.translate;
|
|
14
|
+
const hasAny = [transform, scale, rotate, translate].some((v) => v !== "none");
|
|
15
|
+
if (hasAny) {
|
|
16
|
+
cache.set(parent, { transform, scale, rotate, translate });
|
|
17
|
+
parent.style.transform = "none";
|
|
18
|
+
parent.style.scale = "1";
|
|
19
|
+
parent.style.rotate = "0deg";
|
|
20
|
+
parent.style.translate = "0 0";
|
|
21
|
+
}
|
|
18
22
|
parent = parent.parentElement;
|
|
19
23
|
}
|
|
20
24
|
return () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"barrelWheel.js","sourceRoot":"","sources":["../../src/utils/barrelWheel.ts"],"names":[],"mappings":"AAOA,qFAAqF;AACrF,MAAM,CAAC,MAAM,mCAAmC,GAAG,CACjD,OAAuB,EACvB,EAAE;IACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,KAAK,GAAG,IAAI,GAAG,EAGlB,CAAC;IACJ,IAAI,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;IACnC,OAAO,MAAM,EAAE,CAAC;QACd,MAAM,
|
|
1
|
+
{"version":3,"file":"barrelWheel.js","sourceRoot":"","sources":["../../src/utils/barrelWheel.ts"],"names":[],"mappings":"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"}
|