@multiplatform.one/components 7.83.1 → 7.83.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/cjs/Alert/index.cjs +1 -1
- package/dist/cjs/Alert/index.native.js +1 -1
- package/dist/cjs/Alert/index.native.js.map +1 -1
- package/dist/cjs/Chip/index.cjs +2 -1
- package/dist/cjs/Chip/index.native.js +2 -1
- package/dist/cjs/Chip/index.native.js.map +1 -1
- package/dist/cjs/layouts/tags.cjs +25 -12
- package/dist/cjs/layouts/tags.native.js +25 -16
- package/dist/cjs/layouts/tags.native.js.map +1 -1
- package/dist/esm/Alert/index.mjs +1 -1
- package/dist/esm/Alert/index.mjs.map +1 -1
- package/dist/esm/Alert/index.native.js +1 -1
- package/dist/esm/Alert/index.native.js.map +1 -1
- package/dist/esm/Chip/index.mjs +3 -2
- package/dist/esm/Chip/index.mjs.map +1 -1
- package/dist/esm/Chip/index.native.js +3 -2
- package/dist/esm/Chip/index.native.js.map +1 -1
- package/dist/esm/layouts/tags.mjs +28 -15
- package/dist/esm/layouts/tags.mjs.map +1 -1
- package/dist/esm/layouts/tags.native.js +28 -19
- package/dist/esm/layouts/tags.native.js.map +1 -1
- package/dist/jsx/Alert/index.mjs +1 -1
- package/dist/jsx/Alert/index.mjs.map +1 -1
- package/dist/jsx/Alert/index.native.js +1 -1
- package/dist/jsx/Alert/index.native.js.map +1 -1
- package/dist/jsx/Chip/index.mjs +3 -2
- package/dist/jsx/Chip/index.mjs.map +1 -1
- package/dist/jsx/Chip/index.native.js +2 -1
- package/dist/jsx/Chip/index.native.js.map +1 -1
- package/dist/jsx/layouts/tags.mjs +28 -15
- package/dist/jsx/layouts/tags.mjs.map +1 -1
- package/dist/jsx/layouts/tags.native.js +25 -16
- package/dist/jsx/layouts/tags.native.js.map +1 -1
- package/package.json +9 -9
- package/src/Alert/Alert.spec.tsx +82 -1
- package/src/Alert/index.tsx +1 -1
- package/src/Chip/Chip.spec.tsx +33 -0
- package/src/Chip/index.tsx +10 -5
- package/src/hoverTouchPath.coarse.spec.tsx +166 -0
- package/src/layouts/tags-token-field.spec.tsx +21 -5
- package/src/layouts/tags.tsx +36 -20
- package/types/Chip/index.d.ts.map +1 -1
- package/types/layouts/tags.d.ts.map +1 -1
package/src/layouts/tags.tsx
CHANGED
|
@@ -6,7 +6,9 @@ import {
|
|
|
6
6
|
ensureKeyboardModalityTracking,
|
|
7
7
|
menuRowFrame,
|
|
8
8
|
sizeKeyBelow,
|
|
9
|
+
sizeRecipeForToken,
|
|
9
10
|
sizeTokenStep,
|
|
11
|
+
textFieldInset,
|
|
10
12
|
useGlyphColor,
|
|
11
13
|
useResolvedKnobs,
|
|
12
14
|
} from "@multiplatform.one/theme";
|
|
@@ -23,16 +25,21 @@ import {
|
|
|
23
25
|
XStack,
|
|
24
26
|
YStack,
|
|
25
27
|
isWeb,
|
|
28
|
+
styled,
|
|
26
29
|
type InputProps,
|
|
27
30
|
type SizeTokens,
|
|
28
31
|
type YStackProps,
|
|
29
32
|
} from "tamagui";
|
|
30
33
|
import { ScrollView } from "../ScrollView";
|
|
31
|
-
import { Chip,
|
|
34
|
+
import { Chip, chipFrameGeometry, type ChipColor, type ChipSize, type ChipVariant } from "../Chip";
|
|
32
35
|
import { componentColors } from "../componentColors";
|
|
33
36
|
import { withInterp } from "../shared/t";
|
|
34
37
|
import { Text } from "../Text";
|
|
35
38
|
|
|
39
|
+
// The text field's component theme, so the token field's fill and edge are the
|
|
40
|
+
// sibling text field's in every preset (FZ-8018 round 3).
|
|
41
|
+
const TagsFieldFrame = styled(XStack, { name: "InputContainerFrame" });
|
|
42
|
+
|
|
36
43
|
// ---------------------------------------------------------------------------
|
|
37
44
|
// Types (generic -- no Frappe dependency)
|
|
38
45
|
// ---------------------------------------------------------------------------
|
|
@@ -163,7 +170,12 @@ export function Tags({
|
|
|
163
170
|
ensureKeyboardModalityTracking();
|
|
164
171
|
}
|
|
165
172
|
|
|
166
|
-
const chipSize =
|
|
173
|
+
const chipSize = sizeKeyBelow(knobProps.sizeToken) as ChipSize;
|
|
174
|
+
const fieldRecipe = sizeRecipeForToken(String(knobProps.sizeToken));
|
|
175
|
+
const [chipHeight, setChipHeight] = useState<number | null>(null);
|
|
176
|
+
// The entry's text starts where a chip's label would: the chip's 1px edge
|
|
177
|
+
// plus its padding, so it gets the room a tag gets (FZ-8018 round 3b).
|
|
178
|
+
const entryInset = tags.length > 0 ? 1 + chipFrameGeometry(chipSize).paddingHorizontal : 0;
|
|
167
179
|
|
|
168
180
|
const [inputValue, setInputValue] = useState("");
|
|
169
181
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
@@ -361,6 +373,11 @@ export function Tags({
|
|
|
361
373
|
? (chipTheme as ChipColor)
|
|
362
374
|
: "gray";
|
|
363
375
|
|
|
376
|
+
const onChipLayout = (e: { nativeEvent: { layout: { height: number } } }) => {
|
|
377
|
+
const h = e.nativeEvent.layout.height;
|
|
378
|
+
if (h > 0 && Math.abs((chipHeight ?? 0) - h) > 0.5) setChipHeight(h);
|
|
379
|
+
};
|
|
380
|
+
|
|
364
381
|
const renderTagItem = (tag: TagItem) => {
|
|
365
382
|
const actions = {
|
|
366
383
|
onRemove: () => onRemove?.(tag),
|
|
@@ -385,6 +402,7 @@ export function Tags({
|
|
|
385
402
|
key={tag.id}
|
|
386
403
|
cursor="pointer"
|
|
387
404
|
data-tag-chip=""
|
|
405
|
+
onLayout={onChipLayout}
|
|
388
406
|
onPress={(e) => {
|
|
389
407
|
e.stopPropagation?.();
|
|
390
408
|
onTagClick(tag);
|
|
@@ -397,7 +415,9 @@ export function Tags({
|
|
|
397
415
|
{chip}
|
|
398
416
|
</XStack>
|
|
399
417
|
) : (
|
|
400
|
-
<View data-tag-chip=""
|
|
418
|
+
<View data-tag-chip="" onLayout={onChipLayout}>
|
|
419
|
+
{chip}
|
|
420
|
+
</View>
|
|
401
421
|
);
|
|
402
422
|
|
|
403
423
|
if (renderTag) {
|
|
@@ -512,27 +532,25 @@ export function Tags({
|
|
|
512
532
|
setIsPopoverOpen(true);
|
|
513
533
|
}, [canAdd]);
|
|
514
534
|
|
|
515
|
-
const fieldPadH = small ? ("$2" as const) : ("$2.5" as const);
|
|
516
|
-
const fieldPadV = small ? ("$1.5" as const) : ("$2" as const);
|
|
517
|
-
|
|
518
535
|
const field = (
|
|
519
|
-
<
|
|
536
|
+
<TagsFieldFrame
|
|
520
537
|
data-testid="tags-field"
|
|
521
538
|
flexWrap="wrap"
|
|
522
539
|
alignItems="center"
|
|
523
|
-
|
|
540
|
+
alignContent="center"
|
|
541
|
+
gap="$2"
|
|
524
542
|
width="100%"
|
|
525
|
-
minHeight={
|
|
526
|
-
paddingHorizontal={
|
|
527
|
-
paddingVertical=
|
|
528
|
-
backgroundColor={
|
|
543
|
+
minHeight={fieldRecipe.height}
|
|
544
|
+
paddingHorizontal={textFieldInset(fieldRecipe)}
|
|
545
|
+
paddingVertical="$2"
|
|
546
|
+
backgroundColor={knobProps.inputBackground}
|
|
529
547
|
{...knobProps.inputSurface}
|
|
530
548
|
{...knobProps.borderRadius}
|
|
531
549
|
overflow="hidden"
|
|
532
550
|
cursor={canAdd ? "text" : "default"}
|
|
533
551
|
{...(isWeb ? { className: "mp-composite-ring" } : {})}
|
|
534
552
|
outlineWidth={0}
|
|
535
|
-
hoverStyle={canAdd ? { borderColor:
|
|
553
|
+
hoverStyle={canAdd ? { borderColor: "$borderColorHover" } : undefined}
|
|
536
554
|
focusStyle={{ outlineWidth: 0 }}
|
|
537
555
|
focusVisibleStyle={{ outlineWidth: 0 }}
|
|
538
556
|
{...(disabled
|
|
@@ -566,21 +584,19 @@ export function Tags({
|
|
|
566
584
|
flexBasis={96}
|
|
567
585
|
minWidth={96}
|
|
568
586
|
height="auto"
|
|
587
|
+
minHeight={chipHeight ?? undefined}
|
|
569
588
|
padding={0}
|
|
570
589
|
margin={0}
|
|
590
|
+
paddingLeft={entryInset}
|
|
571
591
|
borderWidth={0}
|
|
572
592
|
backgroundColor="transparent"
|
|
573
593
|
outlineWidth={0}
|
|
574
594
|
focusStyle={{ outlineWidth: 0, borderWidth: 0 }}
|
|
575
595
|
focusVisibleStyle={{ outlineWidth: 0 }}
|
|
576
596
|
{...knobProps.body}
|
|
577
|
-
|
|
578
|
-
// it rides the same recipe font channel their labels do -- with
|
|
579
|
-
// the body size it set the text a step larger and the placeholder
|
|
580
|
-
// sat off the chips' optical line.
|
|
581
|
-
fontSize={chipTextSize(chipSize)}
|
|
597
|
+
fontSize={fieldRecipe.fontSize}
|
|
582
598
|
color={componentColors.text.primary}
|
|
583
|
-
placeholderTextColor={
|
|
599
|
+
placeholderTextColor={"$placeholderColor" as InputProps["placeholderTextColor"]}
|
|
584
600
|
autoComplete="off"
|
|
585
601
|
role="combobox"
|
|
586
602
|
aria-label={addTagLabel}
|
|
@@ -590,7 +606,7 @@ export function Tags({
|
|
|
590
606
|
aria-activedescendant={activeOptionId}
|
|
591
607
|
/>
|
|
592
608
|
)}
|
|
593
|
-
</
|
|
609
|
+
</TagsFieldFrame>
|
|
594
610
|
);
|
|
595
611
|
|
|
596
612
|
return (
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chip/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chip/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAML,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAkB,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKrE,4FAA4F;AAC5F,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3F;;;;GAIG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACpB;AAOD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,WAAW,CAAC;IACvB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAyEF,qGAAqG;AACrG,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAEjE;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,CAWnE;AAkBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM;;;;EAO9C;AAgBD;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;6CAoCpB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;6CAmBnB,CAAC;AASH,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAgExC,wBAAgB,IAAI,CAAC,EACnB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,IAAI,EACJ,OAAiB,EACjB,KAAc,EACd,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,IAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,GAAG,GACJ,EAAE,SAAS,2CAiQX;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../src/layouts/tags.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../src/layouts/tags.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAExF,OAAO,EAWL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAA0D,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAanG;;;GAGG;AACH,MAAM,WAAW,OAAO;IACtB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC;IACxE,sBAAsB;IACtB,IAAI,EAAE,OAAO,EAAE,CAAC;IAEhB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IAExB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAElC,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,CACV,GAAG,EAAE,OAAO,EACZ,cAAc,EAAE,KAAK,CAAC,SAAS,EAC/B,OAAO,EAAE;QAAE,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,KAC9B,KAAK,CAAC,SAAS,CAAC;IAErB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACtC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;KAC9C,CAAC;IACF,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,WAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,OAAW,EACX,UAAU,EACV,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAgB,EAChB,YAAmB,EACnB,OAAkB,EAClB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,MAAW,EACX,WAAW,EAAE,eAAe,EAC5B,GAAG,UAAU,EACd,EAAE,SAAS,2CAyfX"}
|