@jsenv/navi 0.29.377 → 0.29.378
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/dev/jsenv_navi.js +45 -8
- package/dist/dev/jsenv_navi.js.map +5 -5
- package/dist/jsenv_navi.js +39 -8
- package/dist/jsenv_navi.js.map +5 -5
- package/docs/AI_INSTRUCTIONS.md +3 -1
- package/docs/typography.md +28 -3
- package/package.json +1 -1
package/dist/dev/jsenv_navi.js
CHANGED
|
@@ -45318,6 +45318,10 @@ time.navi_text {
|
|
|
45318
45318
|
border-radius: inherit;
|
|
45319
45319
|
}
|
|
45320
45320
|
|
|
45321
|
+
&[data-text-clamp] {
|
|
45322
|
+
min-width: 0;
|
|
45323
|
+
}
|
|
45324
|
+
|
|
45321
45325
|
&[data-text-overflow] {
|
|
45322
45326
|
text-overflow: ellipsis;
|
|
45323
45327
|
overflow-wrap: normal;
|
|
@@ -45691,6 +45695,10 @@ const shouldInjectSpacingBetween = (left, right) => {
|
|
|
45691
45695
|
* n lines. This is the only prop to use for that — `Box`'s `lineClamp` /
|
|
45692
45696
|
* `overflowEllipsis` are raw CSS mappings meant for elements that are not a
|
|
45693
45697
|
* `Text`, and `lineClamp={1}` is never the single-line truncation you want.
|
|
45698
|
+
* Either value states the `white-space` it needs — one line does not wrap,
|
|
45699
|
+
* n lines may — so it holds inside a single-line ancestor too (a `Picker`'s
|
|
45700
|
+
* value, a `Time`); an explicit `noWrap`/`pre`/`preLine` on this `Text`
|
|
45701
|
+
* still wins.
|
|
45694
45702
|
* Truncation only happens if the element may become narrower than its
|
|
45695
45703
|
* content: `maxLines` sets `min-width: 0` here, but each `Box` between this
|
|
45696
45704
|
* one and the element that carries the width must set it too.
|
|
@@ -45753,6 +45761,25 @@ const shouldInjectSpacingBetween = (left, right) => {
|
|
|
45753
45761
|
* internally for overlays such as the skeleton container.
|
|
45754
45762
|
*/
|
|
45755
45763
|
const Text = props => {
|
|
45764
|
+
if (props.maxLines > 1) {
|
|
45765
|
+
props = {
|
|
45766
|
+
...props,
|
|
45767
|
+
"data-text-clamp": ""
|
|
45768
|
+
};
|
|
45769
|
+
if (!saysWhiteSpace(props)) {
|
|
45770
|
+
// n lines means "you may wrap". white-space is inherited, so left unsaid
|
|
45771
|
+
// a single-line ancestor (a Picker's value, a Time) leaves the clamp one
|
|
45772
|
+
// line to cut, and the text runs past its box. Same tag rule as
|
|
45773
|
+
// TextOverflow: a paragraph keeps its line breaks.
|
|
45774
|
+
props = props.as === "p" ? {
|
|
45775
|
+
...props,
|
|
45776
|
+
preLine: true
|
|
45777
|
+
} : {
|
|
45778
|
+
...props,
|
|
45779
|
+
noWrap: false
|
|
45780
|
+
};
|
|
45781
|
+
}
|
|
45782
|
+
}
|
|
45756
45783
|
if (props.loading || props.skeleton) {
|
|
45757
45784
|
return jsx(TextSkeleton, {
|
|
45758
45785
|
...props
|
|
@@ -45964,6 +45991,14 @@ const TextOverflow = ({
|
|
|
45964
45991
|
children: children
|
|
45965
45992
|
});
|
|
45966
45993
|
};
|
|
45994
|
+
const saysWhiteSpace = ({
|
|
45995
|
+
noWrap,
|
|
45996
|
+
pre,
|
|
45997
|
+
preWrap,
|
|
45998
|
+
preLine
|
|
45999
|
+
}) => {
|
|
46000
|
+
return noWrap !== undefined || pre !== undefined || preWrap !== undefined || preLine !== undefined;
|
|
46001
|
+
};
|
|
45967
46002
|
const TextWithSelectRange = ({
|
|
45968
46003
|
ref,
|
|
45969
46004
|
selectRange,
|
|
@@ -60001,9 +60036,11 @@ const TimeRelative = ({
|
|
|
60001
60036
|
});
|
|
60002
60037
|
};
|
|
60003
60038
|
const TimeText = props => {
|
|
60039
|
+
// A date stays on one line, unless the caller grants it several.
|
|
60040
|
+
const noWrap = props.maxLines > 1 ? undefined : true;
|
|
60004
60041
|
return jsx(Text, {
|
|
60005
60042
|
as: "time",
|
|
60006
|
-
noWrap:
|
|
60043
|
+
noWrap: noWrap,
|
|
60007
60044
|
...props
|
|
60008
60045
|
});
|
|
60009
60046
|
};
|
|
@@ -76389,6 +76426,12 @@ const PickerFirstResolver = props => {
|
|
|
76389
76426
|
* press, the way a click is the innermost target's. Being a gesture, the open goes through
|
|
76390
76427
|
* the interaction gate as one: a `readOnly` picker refuses it and says so
|
|
76391
76428
|
* where the finger is, whatever `openWhileReadOnly` says.
|
|
76429
|
+
* @param {number} [maxLines=1] How many lines the value may take before it is
|
|
76430
|
+
* cut with an ellipsis — `Text`'s `maxLines`, put on the value box, and
|
|
76431
|
+
* granted to a `BadgeList` in the `ui`, which caps its rows to it (see
|
|
76432
|
+
* max_lines_context.js). `variant="text"` and `variant="bare"` are not
|
|
76433
|
+
* clamped: their drawing is the caller's own, a `Text` in the `ui` cuts
|
|
76434
|
+
* itself with its own `maxLines`. See docs/typography.md.
|
|
76392
76435
|
* @param {import("ignore:preact").ComponentChildren | "default" | import("ignore:preact").ComponentType} [ui] What the
|
|
76393
76436
|
* trigger draws in place of the value's default rendering (a date, a list
|
|
76394
76437
|
* joined by commas…) — and then all it draws: `placeholder` is not shown
|
|
@@ -78160,13 +78203,7 @@ const renderDayDefault = (day, {
|
|
|
78160
78203
|
type: "date",
|
|
78161
78204
|
format: format,
|
|
78162
78205
|
dayLabel: true,
|
|
78163
|
-
lang: lang
|
|
78164
|
-
// A Time keeps its date on one line by default; here a day too long for
|
|
78165
|
-
// the box is meant to wrap, so that is undone — except for maxLines={1},
|
|
78166
|
-
// which IS one line and cuts it itself (see Text's own TextOverflow):
|
|
78167
|
-
// saying "you may wrap" there would undo the truncation instead.
|
|
78168
|
-
,
|
|
78169
|
-
noWrap: maxLines === 1 || maxLines === "1" ? undefined : false,
|
|
78206
|
+
lang: lang,
|
|
78170
78207
|
maxLines: maxLines,
|
|
78171
78208
|
children: day
|
|
78172
78209
|
});
|