@tamagui/label 2.7.6 → 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/jsx/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/jsx/Label.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Label.js","names":[],"sources":["jsx/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"}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
24
|
+
};
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
28
|
+
}) : target, mod));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var Label_exports = {};
|
|
31
|
+
__export(Label_exports, {
|
|
32
|
+
Label: () => Label,
|
|
33
|
+
LabelFrame: () => LabelFrame,
|
|
34
|
+
useLabelContext: () => useLabelContext
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(Label_exports);
|
|
37
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
39
|
+
var import_constants = require("@tamagui/constants");
|
|
40
|
+
var import_create_context = require("@tamagui/create-context");
|
|
41
|
+
var import_focusable = require("@tamagui/focusable");
|
|
42
|
+
var import_get_font_sized = require("@tamagui/get-font-sized");
|
|
43
|
+
var import_size = require("@tamagui/size");
|
|
44
|
+
var import_text = require("@tamagui/text");
|
|
45
|
+
var import_web = require("@tamagui/web");
|
|
46
|
+
var React = __toESM(require("react"), 1);
|
|
47
|
+
var NAME = "Label";
|
|
48
|
+
var [LabelProvider, useLabelContextImpl] = (0, import_create_context.createContext)(NAME, {
|
|
49
|
+
id: void 0,
|
|
50
|
+
controlRef: { current: null }
|
|
51
|
+
});
|
|
52
|
+
var labelSizeVariant = function(val, extras) {
|
|
53
|
+
var fontStyle = (0, import_get_font_sized.getFontSized)(val, extras);
|
|
54
|
+
var sizeKey = (0, import_size.resolveSizeToken)(val, "size");
|
|
55
|
+
return {
|
|
56
|
+
...fontStyle,
|
|
57
|
+
lineHeight: typeof sizeKey === "number" ? sizeKey : extras.tokens.size[sizeKey]
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
var LabelFrame = (0, import_web.styled)(import_text.SizableText, {
|
|
61
|
+
displayName: "Label",
|
|
62
|
+
render: "label",
|
|
63
|
+
size: true,
|
|
64
|
+
backgroundColor: "transparent",
|
|
65
|
+
display: "flex",
|
|
66
|
+
alignItems: "center",
|
|
67
|
+
userSelect: "none",
|
|
68
|
+
cursor: "default",
|
|
69
|
+
variants: { size: {
|
|
70
|
+
true: labelSizeVariant,
|
|
71
|
+
Size: labelSizeVariant
|
|
72
|
+
} }
|
|
73
|
+
});
|
|
74
|
+
var Label = (0, import_web.createStyledHOC)(LabelFrame, function Label2(props, forwardedRef) {
|
|
75
|
+
var { htmlFor, id: idProp, ...labelProps } = props;
|
|
76
|
+
var controlRef = React.useRef(null);
|
|
77
|
+
var ref = React.useRef(null);
|
|
78
|
+
var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
79
|
+
var backupId = React.useId();
|
|
80
|
+
var id = idProp !== null && idProp !== void 0 ? idProp : backupId;
|
|
81
|
+
if (import_constants.isWeb) {
|
|
82
|
+
(0, import_constants.useIsomorphicLayoutEffect)(function() {
|
|
83
|
+
if (htmlFor) {
|
|
84
|
+
var element = document.getElementById(htmlFor);
|
|
85
|
+
var label = ref.current;
|
|
86
|
+
if (label && element) {
|
|
87
|
+
var getAriaLabel = function() {
|
|
88
|
+
return element.getAttribute("aria-labelledby");
|
|
89
|
+
};
|
|
90
|
+
var ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
91
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
92
|
+
controlRef.current = element;
|
|
93
|
+
return function() {
|
|
94
|
+
var _getAriaLabel;
|
|
95
|
+
if (!id) return;
|
|
96
|
+
var ariaLabelledBy2 = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, "");
|
|
97
|
+
if (ariaLabelledBy2 === "") {
|
|
98
|
+
element.removeAttribute("aria-labelledby");
|
|
99
|
+
} else if (ariaLabelledBy2) {
|
|
100
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}, [id, htmlFor]);
|
|
106
|
+
}
|
|
107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
|
|
108
|
+
id,
|
|
109
|
+
controlRef,
|
|
110
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
|
|
111
|
+
id,
|
|
112
|
+
htmlFor,
|
|
113
|
+
...labelProps,
|
|
114
|
+
ref: composedRefs,
|
|
115
|
+
onMouseDown: function(event) {
|
|
116
|
+
var _props_onMouseDown;
|
|
117
|
+
(_props_onMouseDown = props.onMouseDown) === null || _props_onMouseDown === void 0 ? void 0 : _props_onMouseDown.call(props, event);
|
|
118
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
onPress: function(event) {
|
|
123
|
+
var _props_onPress;
|
|
124
|
+
(_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, event);
|
|
125
|
+
if (import_constants.isWeb) {
|
|
126
|
+
if (htmlFor || !controlRef.current || event.defaultPrevented) return;
|
|
127
|
+
var isClickingControl = controlRef.current.contains(event.target);
|
|
128
|
+
var isUserClick = event.isTrusted === true;
|
|
129
|
+
if (!isClickingControl && isUserClick) {
|
|
130
|
+
controlRef.current.click();
|
|
131
|
+
controlRef.current.focus();
|
|
132
|
+
}
|
|
133
|
+
} else {
|
|
134
|
+
if (props.htmlFor) {
|
|
135
|
+
(0, import_focusable.focusFocusable)(props.htmlFor);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
})
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
var useLabelContext = function(element) {
|
|
143
|
+
var context = useLabelContextImpl("LabelConsumer");
|
|
144
|
+
var { controlRef } = context;
|
|
145
|
+
React.useEffect(function() {
|
|
146
|
+
if (element) controlRef.current = element;
|
|
147
|
+
}, [element, controlRef]);
|
|
148
|
+
return context.id;
|
|
149
|
+
};
|