@grahlnn/comps 0.1.4 → 0.1.6
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/index.js +5 -125
- package/dist/torph/src/components/Torph.d.ts +0 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3692,15 +3692,6 @@ function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
|
|
|
3692
3692
|
function resolveFlowText(committedMeasurement, stateMeasurement, text) {
|
|
3693
3693
|
return committedMeasurement?.snapshot.text ?? stateMeasurement?.snapshot.text ?? text;
|
|
3694
3694
|
}
|
|
3695
|
-
function resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, stateMeasurement, text) {
|
|
3696
|
-
return pendingBootstrapText ?? resolveFlowText(committedMeasurement, stateMeasurement, text);
|
|
3697
|
-
}
|
|
3698
|
-
function resolveActivationBootstrapText(isActivated, previousText, nextText) {
|
|
3699
|
-
if (!isActivated && nextText !== previousText) {
|
|
3700
|
-
return previousText;
|
|
3701
|
-
}
|
|
3702
|
-
return null;
|
|
3703
|
-
}
|
|
3704
3695
|
function getOverlayStyle(plan) {
|
|
3705
3696
|
return {
|
|
3706
3697
|
...OVERLAY_STYLE,
|
|
@@ -3788,20 +3779,15 @@ function MeasurementLayer({
|
|
|
3788
3779
|
}, segment.key, false, undefined, this))
|
|
3789
3780
|
}, undefined, false, undefined, this);
|
|
3790
3781
|
}
|
|
3791
|
-
function useMorphTransition(text, className
|
|
3782
|
+
function useMorphTransition(text, className) {
|
|
3792
3783
|
const { ref, layoutContext } = useObservedLayoutContext([className]);
|
|
3793
3784
|
const measurementLayerRef = useRef(null);
|
|
3794
|
-
const bootstrapMeasurementLayerRef = useRef(null);
|
|
3795
3785
|
const completedDomMeasurementKeyRef = useRef(null);
|
|
3796
3786
|
const domMeasurementSnapshotCacheRef = useRef(new Map);
|
|
3797
|
-
const pendingBootstrapTextRef = useRef(bootstrapText);
|
|
3798
3787
|
const sessionRef = useRef({ ...EMPTY_SESSION });
|
|
3799
3788
|
const timelineRef = useRef({ ...EMPTY_TIMELINE });
|
|
3800
3789
|
const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState(null);
|
|
3801
3790
|
const [state, setState] = useState(EMPTY_STATE);
|
|
3802
|
-
if (pendingBootstrapTextRef.current === null && bootstrapText !== null && bootstrapText !== text && sessionRef.current.committed === null) {
|
|
3803
|
-
pendingBootstrapTextRef.current = bootstrapText;
|
|
3804
|
-
}
|
|
3805
3791
|
let measurementHint = sessionRef.current.committed;
|
|
3806
3792
|
if (sessionRef.current.animating) {
|
|
3807
3793
|
measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
|
|
@@ -3811,26 +3797,11 @@ function useMorphTransition(text, className, bootstrapText = null) {
|
|
|
3811
3797
|
layoutContext,
|
|
3812
3798
|
layoutHint: measurementHint
|
|
3813
3799
|
}), [text, layoutContext, measurementHint]);
|
|
3814
|
-
let pendingBootstrapText = null;
|
|
3815
|
-
if (sessionRef.current.committed === null) {
|
|
3816
|
-
pendingBootstrapText = pendingBootstrapTextRef.current;
|
|
3817
|
-
}
|
|
3818
|
-
const bootstrapMeasurementRequest = useMemo(() => {
|
|
3819
|
-
if (pendingBootstrapText === null) {
|
|
3820
|
-
return null;
|
|
3821
|
-
}
|
|
3822
|
-
return createMorphMeasurementRequest({
|
|
3823
|
-
text: pendingBootstrapText,
|
|
3824
|
-
layoutContext,
|
|
3825
|
-
layoutHint: null
|
|
3826
|
-
});
|
|
3827
|
-
}, [pendingBootstrapText, layoutContext]);
|
|
3828
3800
|
const renderText = measurementRequest?.renderText ?? text;
|
|
3829
3801
|
const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
|
|
3830
3802
|
const measurementBackend = measurementRequest?.measurementBackend ?? null;
|
|
3831
3803
|
const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
|
|
3832
3804
|
const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
|
|
3833
|
-
const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.domMeasurementKey !== null;
|
|
3834
3805
|
useLayoutEffect(() => {
|
|
3835
3806
|
if (ref.current === null || layoutContext === null) {
|
|
3836
3807
|
completedDomMeasurementKeyRef.current = null;
|
|
@@ -3852,36 +3823,6 @@ function useMorphTransition(text, className, bootstrapText = null) {
|
|
|
3852
3823
|
});
|
|
3853
3824
|
return;
|
|
3854
3825
|
}
|
|
3855
|
-
if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== null) {
|
|
3856
|
-
let bootstrapDomSnapshot = null;
|
|
3857
|
-
if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
|
|
3858
|
-
bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
|
|
3859
|
-
}
|
|
3860
|
-
if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && bootstrapMeasurementLayerRef.current === null) {
|
|
3861
|
-
return;
|
|
3862
|
-
}
|
|
3863
|
-
const bootstrapMeasurement = measureFromNodes({
|
|
3864
|
-
root: ref.current,
|
|
3865
|
-
layoutContext,
|
|
3866
|
-
layoutHint: null,
|
|
3867
|
-
layer: bootstrapMeasurementLayerRef.current,
|
|
3868
|
-
measurementBackend: bootstrapMeasurementRequest.measurementBackend,
|
|
3869
|
-
snapshotOverride: bootstrapDomSnapshot,
|
|
3870
|
-
text: bootstrapMeasurementRequest.text,
|
|
3871
|
-
renderText: bootstrapMeasurementRequest.renderText,
|
|
3872
|
-
segments: bootstrapMeasurementRequest.segments
|
|
3873
|
-
});
|
|
3874
|
-
if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
|
|
3875
|
-
rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey, bootstrapMeasurement.snapshot);
|
|
3876
|
-
}
|
|
3877
|
-
completedDomMeasurementKeyRef.current = null;
|
|
3878
|
-
pendingBootstrapTextRef.current = null;
|
|
3879
|
-
if (domMeasurementRequestKey !== null) {
|
|
3880
|
-
setDomMeasurementRequestKey(null);
|
|
3881
|
-
}
|
|
3882
|
-
commitStaticMeasurement(sessionRef.current, bootstrapMeasurement, setState);
|
|
3883
|
-
return;
|
|
3884
|
-
}
|
|
3885
3826
|
if (domMeasurementKey !== null) {
|
|
3886
3827
|
let cachedSnapshot = null;
|
|
3887
3828
|
if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
|
|
@@ -3968,8 +3909,6 @@ function useMorphTransition(text, className, bootstrapText = null) {
|
|
|
3968
3909
|
layoutContext,
|
|
3969
3910
|
measurementBackend,
|
|
3970
3911
|
measurementRequest,
|
|
3971
|
-
pendingBootstrapText,
|
|
3972
|
-
bootstrapMeasurementRequest,
|
|
3973
3912
|
domMeasurementKey,
|
|
3974
3913
|
domMeasurementRequestKey
|
|
3975
3914
|
]);
|
|
@@ -3990,70 +3929,33 @@ function useMorphTransition(text, className, bootstrapText = null) {
|
|
|
3990
3929
|
committedMeasurement: sessionRef.current.committed,
|
|
3991
3930
|
domMeasurementRequestKey,
|
|
3992
3931
|
ref,
|
|
3993
|
-
bootstrapMeasurementLayerRef,
|
|
3994
|
-
measurementBackend,
|
|
3995
3932
|
measurementLayerRef,
|
|
3996
3933
|
renderText,
|
|
3997
3934
|
segments,
|
|
3998
3935
|
layoutContext,
|
|
3999
3936
|
state,
|
|
4000
|
-
pendingBootstrapText,
|
|
4001
|
-
shouldRenderBootstrapSourceMeasurementLayer,
|
|
4002
|
-
bootstrapMeasurementRequest,
|
|
4003
3937
|
useContentInlineSize
|
|
4004
3938
|
};
|
|
4005
3939
|
}
|
|
4006
|
-
function StaticTorph({ text, className }) {
|
|
4007
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
4008
|
-
className,
|
|
4009
|
-
children: [
|
|
4010
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
4011
|
-
style: SCREEN_READER_ONLY_STYLE,
|
|
4012
|
-
children: text
|
|
4013
|
-
}, undefined, false, undefined, this),
|
|
4014
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
4015
|
-
"aria-hidden": "true",
|
|
4016
|
-
style: FALLBACK_TEXT_STYLE,
|
|
4017
|
-
children: text
|
|
4018
|
-
}, undefined, false, undefined, this)
|
|
4019
|
-
]
|
|
4020
|
-
}, undefined, true, undefined, this);
|
|
4021
|
-
}
|
|
4022
3940
|
function ActiveTorph({
|
|
4023
3941
|
text,
|
|
4024
|
-
className
|
|
4025
|
-
bootstrapText
|
|
3942
|
+
className
|
|
4026
3943
|
}) {
|
|
4027
3944
|
const {
|
|
4028
3945
|
committedMeasurement,
|
|
4029
3946
|
domMeasurementRequestKey,
|
|
4030
3947
|
ref,
|
|
4031
|
-
bootstrapMeasurementLayerRef,
|
|
4032
|
-
measurementBackend,
|
|
4033
3948
|
measurementLayerRef,
|
|
4034
3949
|
renderText,
|
|
4035
3950
|
segments,
|
|
4036
3951
|
layoutContext,
|
|
4037
3952
|
state,
|
|
4038
|
-
pendingBootstrapText,
|
|
4039
|
-
shouldRenderBootstrapSourceMeasurementLayer,
|
|
4040
|
-
bootstrapMeasurementRequest,
|
|
4041
3953
|
useContentInlineSize
|
|
4042
|
-
} = useMorphTransition(text, className
|
|
3954
|
+
} = useMorphTransition(text, className);
|
|
4043
3955
|
const plan = state.plan;
|
|
4044
3956
|
const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
|
|
4045
3957
|
const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
|
|
4046
|
-
const flowText =
|
|
4047
|
-
let bootstrapMeasurementLayer = null;
|
|
4048
|
-
if (shouldRenderBootstrapSourceMeasurementLayer && bootstrapMeasurementRequest !== null) {
|
|
4049
|
-
bootstrapMeasurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
|
|
4050
|
-
layerRef: bootstrapMeasurementLayerRef,
|
|
4051
|
-
layoutContext,
|
|
4052
|
-
text: bootstrapMeasurementRequest.renderText,
|
|
4053
|
-
segments: bootstrapMeasurementRequest.segments,
|
|
4054
|
-
useContentInlineSize: bootstrapMeasurementRequest.useContentInlineSize
|
|
4055
|
-
}, undefined, false, undefined, this);
|
|
4056
|
-
}
|
|
3958
|
+
const flowText = resolveFlowText(committedMeasurement, state.measurement, text);
|
|
4057
3959
|
let measurementLayer = null;
|
|
4058
3960
|
if (shouldRenderMeasurementLayer) {
|
|
4059
3961
|
measurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
|
|
@@ -4085,7 +3987,6 @@ function ActiveTorph({
|
|
|
4085
3987
|
style: getFallbackTextStyle(shouldRenderOverlay),
|
|
4086
3988
|
children: flowText
|
|
4087
3989
|
}, undefined, false, undefined, this),
|
|
4088
|
-
bootstrapMeasurementLayer,
|
|
4089
3990
|
measurementLayer,
|
|
4090
3991
|
overlay
|
|
4091
3992
|
]
|
|
@@ -4095,36 +3996,15 @@ function Torph({
|
|
|
4095
3996
|
text,
|
|
4096
3997
|
className
|
|
4097
3998
|
}) {
|
|
4098
|
-
|
|
4099
|
-
const previousTextRef = useRef(text);
|
|
4100
|
-
const bootstrapText = resolveActivationBootstrapText(isActivated, previousTextRef.current, text);
|
|
4101
|
-
const shouldActivate = isActivated || bootstrapText !== null;
|
|
4102
|
-
useLayoutEffect(() => {
|
|
4103
|
-
if (!isActivated && text !== previousTextRef.current) {
|
|
4104
|
-
previousTextRef.current = text;
|
|
4105
|
-
setIsActivated(true);
|
|
4106
|
-
return;
|
|
4107
|
-
}
|
|
4108
|
-
previousTextRef.current = text;
|
|
4109
|
-
}, [isActivated, text]);
|
|
4110
|
-
if (shouldActivate) {
|
|
4111
|
-
return /* @__PURE__ */ jsxDEV(ActiveTorph, {
|
|
4112
|
-
text,
|
|
4113
|
-
className,
|
|
4114
|
-
bootstrapText
|
|
4115
|
-
}, undefined, false, undefined, this);
|
|
4116
|
-
}
|
|
4117
|
-
return /* @__PURE__ */ jsxDEV(StaticTorph, {
|
|
3999
|
+
return /* @__PURE__ */ jsxDEV(ActiveTorph, {
|
|
4118
4000
|
text,
|
|
4119
4001
|
className
|
|
4120
4002
|
}, undefined, false, undefined, this);
|
|
4121
4003
|
}
|
|
4122
4004
|
export {
|
|
4123
4005
|
supportsIntrinsicWidthLock,
|
|
4124
|
-
resolveVisibleFlowText,
|
|
4125
4006
|
resolveMorphFrameBounds,
|
|
4126
4007
|
resolveFlowText,
|
|
4127
|
-
resolveActivationBootstrapText,
|
|
4128
4008
|
pairMorphCharacters,
|
|
4129
4009
|
needsMeasurementLayer,
|
|
4130
4010
|
measureMorphSnapshotFromLayer,
|
|
@@ -95,8 +95,6 @@ export declare function getRootDisplay(layoutContext: LayoutContext | null): "gr
|
|
|
95
95
|
export declare function getRootStyle(stage: MorphStage, plan: MorphRenderPlan | null, measurement: MorphMeasurement | null, layoutContext: LayoutContext | null): CSSProperties;
|
|
96
96
|
export declare function getMeasurementLayerStyle(layoutContext: LayoutContext | null, useContentInlineSize?: boolean): CSSProperties;
|
|
97
97
|
export declare function resolveFlowText(committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
|
|
98
|
-
export declare function resolveVisibleFlowText(pendingBootstrapText: string | null, committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
|
|
99
|
-
export declare function resolveActivationBootstrapText(isActivated: boolean, previousText: string, nextText: string): string | null;
|
|
100
98
|
export declare function Torph({ text, className, }: {
|
|
101
99
|
text: string;
|
|
102
100
|
className?: string;
|