@tamagui/label 2.7.7 → 3.0.0-beta.637.1
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/Label.cjs +112 -138
- package/dist/cjs/Label.native.cjs +149 -0
- package/dist/cjs/Label.native.js +117 -143
- package/dist/cjs/Label.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/Label.mjs +95 -113
- package/dist/esm/Label.mjs.map +1 -1
- package/dist/esm/Label.native.js +101 -120
- package/dist/esm/Label.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/jsx/Label.mjs +95 -113
- package/dist/jsx/Label.mjs.map +1 -1
- package/dist/jsx/Label.native.cjs +149 -0
- package/dist/jsx/Label.native.js +117 -143
- package/dist/jsx/Label.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +21 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +11 -11
- package/src/Label.tsx +33 -33
- package/types/Label.d.ts +15 -11
- package/types/Label.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
package/dist/esm/Label.mjs
CHANGED
|
@@ -2,129 +2,111 @@ import { useComposedRefs } from "@tamagui/compose-refs";
|
|
|
2
2
|
import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
3
3
|
import { createContext } from "@tamagui/create-context";
|
|
4
4
|
import { focusFocusable } from "@tamagui/focusable";
|
|
5
|
-
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
6
5
|
import { getFontSized } from "@tamagui/get-font-sized";
|
|
6
|
+
import { resolveSizeToken } from "@tamagui/size";
|
|
7
7
|
import { SizableText } from "@tamagui/text";
|
|
8
|
-
import { styled } from "@tamagui/web";
|
|
8
|
+
import { createStyledHOC, styled } from "@tamagui/web";
|
|
9
9
|
import * as React from "react";
|
|
10
10
|
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
|
|
11
12
|
const NAME = "Label";
|
|
12
13
|
const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
current: null
|
|
16
|
-
}
|
|
14
|
+
id: void 0,
|
|
15
|
+
controlRef: { current: null }
|
|
17
16
|
});
|
|
17
|
+
const labelSizeVariant = (val, extras) => {
|
|
18
|
+
const fontStyle = getFontSized(val, extras);
|
|
19
|
+
const sizeKey = resolveSizeToken(val, "size");
|
|
20
|
+
return {
|
|
21
|
+
...fontStyle,
|
|
22
|
+
lineHeight: typeof sizeKey === "number" ? sizeKey : extras.tokens.size[sizeKey]
|
|
23
|
+
};
|
|
24
|
+
};
|
|
18
25
|
const LabelFrame = styled(SizableText, {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
pressStyle: {
|
|
32
|
-
color: "$colorPress"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
size: {
|
|
37
|
-
"...size": (val, extras) => {
|
|
38
|
-
const buttonStyle = getButtonSized(val, extras);
|
|
39
|
-
const buttonHeight = buttonStyle?.height;
|
|
40
|
-
const fontStyle = getFontSized(val, extras);
|
|
41
|
-
return {
|
|
42
|
-
...fontStyle,
|
|
43
|
-
lineHeight: buttonHeight ? extras.tokens.size[buttonHeight] : void 0
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
defaultVariants: {
|
|
49
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
50
|
-
}
|
|
26
|
+
displayName: "Label",
|
|
27
|
+
render: "label",
|
|
28
|
+
size: true,
|
|
29
|
+
backgroundColor: "transparent",
|
|
30
|
+
display: "flex",
|
|
31
|
+
alignItems: "center",
|
|
32
|
+
userSelect: "none",
|
|
33
|
+
cursor: "default",
|
|
34
|
+
variants: { size: {
|
|
35
|
+
true: labelSizeVariant,
|
|
36
|
+
Size: labelSizeVariant
|
|
37
|
+
} }
|
|
51
38
|
});
|
|
52
|
-
const Label = LabelFrame
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
})
|
|
117
|
-
});
|
|
39
|
+
const Label = createStyledHOC(LabelFrame, function Label2(props, forwardedRef) {
|
|
40
|
+
const { htmlFor, id: idProp, ...labelProps } = props;
|
|
41
|
+
const controlRef = React.useRef(null);
|
|
42
|
+
const ref = React.useRef(null);
|
|
43
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
44
|
+
const backupId = React.useId();
|
|
45
|
+
const id = idProp ?? backupId;
|
|
46
|
+
if (isWeb) {
|
|
47
|
+
useIsomorphicLayoutEffect(() => {
|
|
48
|
+
if (htmlFor) {
|
|
49
|
+
const element = document.getElementById(htmlFor);
|
|
50
|
+
const label = ref.current;
|
|
51
|
+
if (label && element) {
|
|
52
|
+
const getAriaLabel = () => element.getAttribute("aria-labelledby");
|
|
53
|
+
const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
54
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
55
|
+
controlRef.current = element;
|
|
56
|
+
return () => {
|
|
57
|
+
if (!id) return;
|
|
58
|
+
const ariaLabelledBy2 = getAriaLabel()?.replace(id, "");
|
|
59
|
+
if (ariaLabelledBy2 === "") {
|
|
60
|
+
element.removeAttribute("aria-labelledby");
|
|
61
|
+
} else if (ariaLabelledBy2) {
|
|
62
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, [id, htmlFor]);
|
|
68
|
+
}
|
|
69
|
+
return /* @__PURE__ */ jsx(LabelProvider, {
|
|
70
|
+
id,
|
|
71
|
+
controlRef,
|
|
72
|
+
children: /* @__PURE__ */ jsx(LabelFrame, {
|
|
73
|
+
id,
|
|
74
|
+
htmlFor,
|
|
75
|
+
...labelProps,
|
|
76
|
+
ref: composedRefs,
|
|
77
|
+
onMouseDown: (event) => {
|
|
78
|
+
props.onMouseDown?.(event);
|
|
79
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
onPress: (event) => {
|
|
84
|
+
props.onPress?.(event);
|
|
85
|
+
if (isWeb) {
|
|
86
|
+
if (htmlFor || !controlRef.current || event.defaultPrevented) return;
|
|
87
|
+
const isClickingControl = controlRef.current.contains(event.target);
|
|
88
|
+
const isUserClick = event.isTrusted === true;
|
|
89
|
+
if (!isClickingControl && isUserClick) {
|
|
90
|
+
controlRef.current.click();
|
|
91
|
+
controlRef.current.focus();
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
if (props.htmlFor) {
|
|
95
|
+
focusFocusable(props.htmlFor);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
});
|
|
118
101
|
});
|
|
119
|
-
const useLabelContext = element => {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}, [element, controlRef]);
|
|
127
|
-
return context.id;
|
|
102
|
+
const useLabelContext = (element) => {
|
|
103
|
+
const context = useLabelContextImpl("LabelConsumer");
|
|
104
|
+
const { controlRef } = context;
|
|
105
|
+
React.useEffect(() => {
|
|
106
|
+
if (element) controlRef.current = element;
|
|
107
|
+
}, [element, controlRef]);
|
|
108
|
+
return context.id;
|
|
128
109
|
};
|
|
110
|
+
|
|
129
111
|
export { Label, LabelFrame, useLabelContext };
|
|
130
112
|
//# sourceMappingURL=Label.mjs.map
|
package/dist/esm/Label.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Label.js","names":[],"sources":["esm/Label.js"],"sourcesContent":["import { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createContext } from \"@tamagui/create-context\";\nimport { focusFocusable } from \"@tamagui/focusable\";\nimport { getFontSized } from \"@tamagui/get-font-sized\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { SizableText } from \"@tamagui/text\";\nimport { createStyledHOC, styled } from \"@tamagui/web\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst NAME = \"Label\";\nconst [LabelProvider, useLabelContextImpl] = createContext(NAME, {\n id: void 0,\n controlRef: { current: null }\n});\nconst labelSizeVariant = (val, extras) => {\n const fontStyle = getFontSized(val, extras);\n const sizeKey = resolveSizeToken(val, \"size\");\n return {\n ...fontStyle,\n lineHeight: typeof sizeKey === \"number\" ? sizeKey : extras.tokens.size[sizeKey]\n };\n};\nconst LabelFrame = styled(SizableText, {\n displayName: \"Label\",\n render: \"label\",\n size: true,\n backgroundColor: \"transparent\",\n display: \"flex\",\n alignItems: \"center\",\n userSelect: \"none\",\n cursor: \"default\",\n variants: {\n size: {\n true: labelSizeVariant,\n Size: labelSizeVariant\n }\n }\n});\nconst Label = createStyledHOC(LabelFrame, function Label2(props, forwardedRef) {\n const { htmlFor, id: idProp, ...labelProps } = props;\n const controlRef = React.useRef(null);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const backupId = React.useId();\n const id = idProp ?? backupId;\n if (isWeb) {\n useIsomorphicLayoutEffect(() => {\n if (htmlFor) {\n const element = document.getElementById(htmlFor);\n const label = ref.current;\n if (label && element) {\n const getAriaLabel = () => element.getAttribute(\"aria-labelledby\");\n const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(\" \");\n element.setAttribute(\"aria-labelledby\", ariaLabelledBy);\n controlRef.current = element;\n return () => {\n if (!id) return;\n const ariaLabelledBy2 = getAriaLabel()?.replace(id, \"\");\n if (ariaLabelledBy2 === \"\") {\n element.removeAttribute(\"aria-labelledby\");\n } else if (ariaLabelledBy2) {\n element.setAttribute(\"aria-labelledby\", ariaLabelledBy2);\n }\n };\n }\n }\n }, [id, htmlFor]);\n }\n return /* @__PURE__ */ jsx(LabelProvider, { id, controlRef, children: /* @__PURE__ */ jsx(\n LabelFrame,\n {\n id,\n htmlFor,\n ...labelProps,\n ref: composedRefs,\n onMouseDown: (event) => {\n props.onMouseDown?.(event);\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault();\n }\n },\n onPress: (event) => {\n props.onPress?.(event);\n if (isWeb) {\n if (htmlFor || !controlRef.current || event.defaultPrevented) return;\n const isClickingControl = controlRef.current.contains(\n event.target\n );\n const isUserClick = event.isTrusted === true;\n if (!isClickingControl && isUserClick) {\n controlRef.current.click();\n controlRef.current.focus();\n }\n } else {\n if (props.htmlFor) {\n focusFocusable(props.htmlFor);\n }\n }\n }\n }\n ) });\n});\nconst useLabelContext = (element) => {\n const context = useLabelContextImpl(\"LabelConsumer\");\n const { controlRef } = context;\n React.useEffect(() => {\n if (element) controlRef.current = element;\n }, [element, controlRef]);\n return context.id;\n};\nexport {\n Label,\n LabelFrame,\n useLabelContext\n};\n//# sourceMappingURL=Label.js.map\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,OAAO;AACb,MAAM,CAAC,eAAe,uBAAuB,cAAc,MAAM;CAC/D,IAAI,KAAK;CACT,YAAY,EAAE,SAAS,KAAK;AAC9B,CAAC;AACD,MAAM,oBAAoB,KAAK,WAAW;CACxC,MAAM,YAAY,aAAa,KAAK,MAAM;CAC1C,MAAM,UAAU,iBAAiB,KAAK,MAAM;CAC5C,OAAO;EACL,GAAG;EACH,YAAY,OAAO,YAAY,WAAW,UAAU,OAAO,OAAO,KAAK;CACzE;AACF;AACA,MAAM,aAAa,OAAO,aAAa;CACrC,aAAa;CACb,QAAQ;CACR,MAAM;CACN,iBAAiB;CACjB,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AACD,MAAM,QAAQ,gBAAgB,YAAY,SAAS,OAAO,OAAO,cAAc;CAC7E,MAAM,EAAE,SAAS,IAAI,QAAQ,GAAG,eAAe;CAC/C,MAAM,aAAa,MAAM,OAAO,IAAI;CACpC,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,MAAM,eAAe,gBAAgB,cAAc,GAAG;CACtD,MAAM,WAAW,MAAM,MAAM;CAC7B,MAAM,KAAK,UAAU;CACrB,IAAI,OAAO;EACT,gCAAgC;GAC9B,IAAI,SAAS;IACX,MAAM,UAAU,SAAS,eAAe,OAAO;IAC/C,MAAM,QAAQ,IAAI;IAClB,IAAI,SAAS,SAAS;KACpB,MAAM,qBAAqB,QAAQ,aAAa,iBAAiB;KACjE,MAAM,iBAAiB,CAAC,IAAI,aAAa,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;KACpE,QAAQ,aAAa,mBAAmB,cAAc;KACtD,WAAW,UAAU;KACrB,aAAa;MACX,IAAI,CAAC,IAAI;MACT,MAAM,kBAAkB,aAAa,GAAG,QAAQ,IAAI,EAAE;MACtD,IAAI,oBAAoB,IAAI;OAC1B,QAAQ,gBAAgB,iBAAiB;MAC3C,OAAO,IAAI,iBAAiB;OAC1B,QAAQ,aAAa,mBAAmB,eAAe;MACzD;KACF;IACF;GACF;EACF,GAAG,CAAC,IAAI,OAAO,CAAC;CAClB;CACA,OAAuB,oBAAI,eAAe;EAAE;EAAI;EAAY,UAA0B,oBACpF,YACA;GACE;GACA;GACA,GAAG;GACH,KAAK;GACL,cAAc,UAAU;IACtB,MAAM,cAAc,KAAK;IACzB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAAG;KAC/C,MAAM,eAAe;IACvB;GACF;GACA,UAAU,UAAU;IAClB,MAAM,UAAU,KAAK;IACrB,IAAI,OAAO;KACT,IAAI,WAAW,CAAC,WAAW,WAAW,MAAM,kBAAkB;KAC9D,MAAM,oBAAoB,WAAW,QAAQ,SAC3C,MAAM,MACR;KACA,MAAM,cAAc,MAAM,cAAc;KACxC,IAAI,CAAC,qBAAqB,aAAa;MACrC,WAAW,QAAQ,MAAM;MACzB,WAAW,QAAQ,MAAM;KAC3B;IACF,OAAO;KACL,IAAI,MAAM,SAAS;MACjB,eAAe,MAAM,OAAO;KAC9B;IACF;GACF;EACF,CACF;CAAE,CAAC;AACL,CAAC;AACD,MAAM,mBAAmB,YAAY;CACnC,MAAM,UAAU,oBAAoB,eAAe;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,gBAAgB;EACpB,IAAI,SAAS,WAAW,UAAU;CACpC,GAAG,CAAC,SAAS,UAAU,CAAC;CACxB,OAAO,QAAQ;AACjB"}
|
package/dist/esm/Label.native.js
CHANGED
|
@@ -1,136 +1,117 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
3
|
import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
4
4
|
import { createContext } from "@tamagui/create-context";
|
|
5
5
|
import { focusFocusable } from "@tamagui/focusable";
|
|
6
|
-
import { getButtonSized } from "@tamagui/get-button-sized";
|
|
7
6
|
import { getFontSized } from "@tamagui/get-font-sized";
|
|
7
|
+
import { resolveSizeToken } from "@tamagui/size";
|
|
8
8
|
import { SizableText } from "@tamagui/text";
|
|
9
|
-
import { styled } from "@tamagui/web";
|
|
9
|
+
import { createStyledHOC, styled } from "@tamagui/web";
|
|
10
10
|
import * as React from "react";
|
|
11
|
+
|
|
11
12
|
var NAME = "Label";
|
|
12
13
|
var [LabelProvider, useLabelContextImpl] = createContext(NAME, {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
current: null
|
|
16
|
-
}
|
|
14
|
+
id: void 0,
|
|
15
|
+
controlRef: { current: null }
|
|
17
16
|
});
|
|
17
|
+
var labelSizeVariant = function(val, extras) {
|
|
18
|
+
var fontStyle = getFontSized(val, extras);
|
|
19
|
+
var sizeKey = resolveSizeToken(val, "size");
|
|
20
|
+
return {
|
|
21
|
+
...fontStyle,
|
|
22
|
+
lineHeight: typeof sizeKey === "number" ? sizeKey : extras.tokens.size[sizeKey]
|
|
23
|
+
};
|
|
24
|
+
};
|
|
18
25
|
var LabelFrame = styled(SizableText, {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
pressStyle: {
|
|
32
|
-
color: "$colorPress"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
size: {
|
|
37
|
-
"...size": function (val, extras) {
|
|
38
|
-
var buttonStyle = getButtonSized(val, extras);
|
|
39
|
-
var buttonHeight = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.height;
|
|
40
|
-
var fontStyle = getFontSized(val, extras);
|
|
41
|
-
return {
|
|
42
|
-
...fontStyle,
|
|
43
|
-
lineHeight: buttonHeight ? extras.tokens.size[buttonHeight] : void 0
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
defaultVariants: {
|
|
49
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
50
|
-
}
|
|
26
|
+
displayName: "Label",
|
|
27
|
+
render: "label",
|
|
28
|
+
size: true,
|
|
29
|
+
backgroundColor: "transparent",
|
|
30
|
+
display: "flex",
|
|
31
|
+
alignItems: "center",
|
|
32
|
+
userSelect: "none",
|
|
33
|
+
cursor: "default",
|
|
34
|
+
variants: { size: {
|
|
35
|
+
true: labelSizeVariant,
|
|
36
|
+
Size: labelSizeVariant
|
|
37
|
+
} }
|
|
51
38
|
});
|
|
52
|
-
var Label = LabelFrame
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
})
|
|
123
|
-
});
|
|
39
|
+
var Label = createStyledHOC(LabelFrame, function Label2(props, forwardedRef) {
|
|
40
|
+
var { htmlFor, id: idProp, ...labelProps } = props;
|
|
41
|
+
var controlRef = React.useRef(null);
|
|
42
|
+
var ref = React.useRef(null);
|
|
43
|
+
var composedRefs = useComposedRefs(forwardedRef, ref);
|
|
44
|
+
var backupId = React.useId();
|
|
45
|
+
var id = idProp !== null && idProp !== void 0 ? idProp : backupId;
|
|
46
|
+
if (isWeb) {
|
|
47
|
+
useIsomorphicLayoutEffect(function() {
|
|
48
|
+
if (htmlFor) {
|
|
49
|
+
var element = document.getElementById(htmlFor);
|
|
50
|
+
var label = ref.current;
|
|
51
|
+
if (label && element) {
|
|
52
|
+
var getAriaLabel = function() {
|
|
53
|
+
return element.getAttribute("aria-labelledby");
|
|
54
|
+
};
|
|
55
|
+
var ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
56
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
57
|
+
controlRef.current = element;
|
|
58
|
+
return function() {
|
|
59
|
+
var _getAriaLabel;
|
|
60
|
+
if (!id) return;
|
|
61
|
+
var ariaLabelledBy2 = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, "");
|
|
62
|
+
if (ariaLabelledBy2 === "") {
|
|
63
|
+
element.removeAttribute("aria-labelledby");
|
|
64
|
+
} else if (ariaLabelledBy2) {
|
|
65
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}, [id, htmlFor]);
|
|
71
|
+
}
|
|
72
|
+
return /* @__PURE__ */ jsx(LabelProvider, {
|
|
73
|
+
id,
|
|
74
|
+
controlRef,
|
|
75
|
+
children: /* @__PURE__ */ jsx(LabelFrame, {
|
|
76
|
+
id,
|
|
77
|
+
htmlFor,
|
|
78
|
+
...labelProps,
|
|
79
|
+
ref: composedRefs,
|
|
80
|
+
onMouseDown: function(event) {
|
|
81
|
+
var _props_onMouseDown;
|
|
82
|
+
(_props_onMouseDown = props.onMouseDown) === null || _props_onMouseDown === void 0 ? void 0 : _props_onMouseDown.call(props, event);
|
|
83
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
onPress: function(event) {
|
|
88
|
+
var _props_onPress;
|
|
89
|
+
(_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, event);
|
|
90
|
+
if (isWeb) {
|
|
91
|
+
if (htmlFor || !controlRef.current || event.defaultPrevented) return;
|
|
92
|
+
var isClickingControl = controlRef.current.contains(event.target);
|
|
93
|
+
var isUserClick = event.isTrusted === true;
|
|
94
|
+
if (!isClickingControl && isUserClick) {
|
|
95
|
+
controlRef.current.click();
|
|
96
|
+
controlRef.current.focus();
|
|
97
|
+
}
|
|
98
|
+
} else {
|
|
99
|
+
if (props.htmlFor) {
|
|
100
|
+
focusFocusable(props.htmlFor);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
})
|
|
105
|
+
});
|
|
124
106
|
});
|
|
125
|
-
var useLabelContext = function
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}, [element, controlRef]);
|
|
133
|
-
return context.id;
|
|
107
|
+
var useLabelContext = function(element) {
|
|
108
|
+
var context = useLabelContextImpl("LabelConsumer");
|
|
109
|
+
var { controlRef } = context;
|
|
110
|
+
React.useEffect(function() {
|
|
111
|
+
if (element) controlRef.current = element;
|
|
112
|
+
}, [element, controlRef]);
|
|
113
|
+
return context.id;
|
|
134
114
|
};
|
|
115
|
+
|
|
135
116
|
export { Label, LabelFrame, useLabelContext };
|
|
136
117
|
//# sourceMappingURL=Label.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Label.native.js","names":[],"sources":["esm/Label.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createContext } from \"@tamagui/create-context\";\nimport { focusFocusable } from \"@tamagui/focusable\";\nimport { getFontSized } from \"@tamagui/get-font-sized\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { SizableText } from \"@tamagui/text\";\nimport { createStyledHOC, styled } from \"@tamagui/web\";\nimport * as React from \"react\";\nvar NAME = \"Label\";\nvar [LabelProvider, useLabelContextImpl] = createContext(NAME, {\n id: void 0,\n controlRef: {\n current: null\n }\n});\nvar labelSizeVariant = function(val, extras) {\n var fontStyle = getFontSized(val, extras);\n var sizeKey = resolveSizeToken(val, \"size\");\n return {\n ...fontStyle,\n lineHeight: typeof sizeKey === \"number\" ? sizeKey : extras.tokens.size[sizeKey]\n };\n};\nvar LabelFrame = styled(SizableText, {\n displayName: \"Label\",\n render: \"label\",\n size: true,\n backgroundColor: \"transparent\",\n display: \"flex\",\n alignItems: \"center\",\n userSelect: \"none\",\n cursor: \"default\",\n variants: {\n size: {\n true: labelSizeVariant,\n Size: labelSizeVariant\n }\n }\n});\nvar Label = createStyledHOC(LabelFrame, function Label2(props, forwardedRef) {\n var { htmlFor, id: idProp, ...labelProps } = props;\n var controlRef = React.useRef(null);\n var ref = React.useRef(null);\n var composedRefs = useComposedRefs(forwardedRef, ref);\n var backupId = React.useId();\n var id = idProp !== null && idProp !== void 0 ? idProp : backupId;\n if (isWeb) {\n useIsomorphicLayoutEffect(function() {\n if (htmlFor) {\n var element = document.getElementById(htmlFor);\n var label = ref.current;\n if (label && element) {\n var getAriaLabel = function() {\n return element.getAttribute(\"aria-labelledby\");\n };\n var ariaLabelledBy = [\n id,\n getAriaLabel()\n ].filter(Boolean).join(\" \");\n element.setAttribute(\"aria-labelledby\", ariaLabelledBy);\n controlRef.current = element;\n return function() {\n var _getAriaLabel;\n if (!id) return;\n var ariaLabelledBy2 = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, \"\");\n if (ariaLabelledBy2 === \"\") {\n element.removeAttribute(\"aria-labelledby\");\n } else if (ariaLabelledBy2) {\n element.setAttribute(\"aria-labelledby\", ariaLabelledBy2);\n }\n };\n }\n }\n }, [\n id,\n htmlFor\n ]);\n }\n return /* @__PURE__ */ _jsx(LabelProvider, {\n id,\n controlRef,\n children: /* @__PURE__ */ _jsx(LabelFrame, {\n id,\n // @ts-ignore\n htmlFor,\n ...labelProps,\n ref: composedRefs,\n onMouseDown: function(event) {\n var _props_onMouseDown;\n (_props_onMouseDown = props.onMouseDown) === null || _props_onMouseDown === void 0 ? void 0 : _props_onMouseDown.call(props, event);\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault();\n }\n },\n onPress: function(event) {\n var _props_onPress;\n (_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, event);\n if (isWeb) {\n if (htmlFor || !controlRef.current || event.defaultPrevented) return;\n var isClickingControl = controlRef.current.contains(event.target);\n var isUserClick = event.isTrusted === true;\n if (!isClickingControl && isUserClick) {\n controlRef.current.click();\n controlRef.current.focus();\n }\n } else {\n if (props.htmlFor) {\n focusFocusable(props.htmlFor);\n }\n }\n }\n })\n });\n});\nvar useLabelContext = function(element) {\n var context = useLabelContextImpl(\"LabelConsumer\");\n var { controlRef } = context;\n React.useEffect(function() {\n if (element) controlRef.current = element;\n }, [\n element,\n controlRef\n ]);\n return context.id;\n};\nexport {\n Label,\n LabelFrame,\n useLabelContext\n};\n//# sourceMappingURL=Label.js.map\n"],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Label.mjs"
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./Label.mjs"
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Label.mjs"
|
|
2
|
-
//# sourceMappingURL=index.mjs.map
|
|
1
|
+
export * from "./Label.mjs"
|
package/dist/esm/index.native.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Label.native.js"
|
|
2
|
-
//# sourceMappingURL=index.native.js.map
|
|
1
|
+
export * from "./Label.native.js"
|