@tamagui/label 1.0.1-rc.5 → 1.0.1-rc.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/cjs/Label.js +67 -63
- package/dist/cjs/Label.js.map +2 -2
- package/dist/esm/Label.js +67 -63
- package/dist/esm/Label.js.map +2 -2
- package/dist/jsx/Label.js +54 -50
- package/dist/jsx/Label.js.map +2 -2
- package/package.json +11 -11
- package/src/Label.tsx +76 -72
package/dist/cjs/Label.js
CHANGED
|
@@ -68,74 +68,78 @@ const LabelFrame = (0, import_core.styled)(import_text.SizableText, {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
|
-
const LabelComponent = React.forwardRef(
|
|
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
|
-
|
|
71
|
+
const LabelComponent = React.forwardRef(
|
|
72
|
+
(props, forwardedRef) => {
|
|
73
|
+
const { htmlFor, id: idProp, ...labelProps } = props;
|
|
74
|
+
const controlRef = React.useRef(null);
|
|
75
|
+
const ref = React.useRef(null);
|
|
76
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
77
|
+
const backupId = (0, import_core.useId)();
|
|
78
|
+
const id = idProp ?? backupId;
|
|
79
|
+
if (import_core.isWeb) {
|
|
80
|
+
React.useEffect(() => {
|
|
81
|
+
if (htmlFor) {
|
|
82
|
+
const element = document.getElementById(htmlFor);
|
|
83
|
+
const label = ref.current;
|
|
84
|
+
if (label && element) {
|
|
85
|
+
const getAriaLabel = () => element.getAttribute("aria-labelledby");
|
|
86
|
+
const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
87
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
88
|
+
controlRef.current = element;
|
|
89
|
+
return () => {
|
|
90
|
+
var _a;
|
|
91
|
+
if (!id)
|
|
92
|
+
return;
|
|
93
|
+
const ariaLabelledBy2 = (_a = getAriaLabel()) == null ? void 0 : _a.replace(id, "");
|
|
94
|
+
if (ariaLabelledBy2 === "") {
|
|
95
|
+
element.removeAttribute("aria-labelledby");
|
|
96
|
+
} else if (ariaLabelledBy2) {
|
|
97
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}
|
|
99
101
|
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
|
|
104
|
-
id,
|
|
105
|
-
controlRef,
|
|
106
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
|
|
107
|
-
role: "label",
|
|
102
|
+
}, [id, htmlFor]);
|
|
103
|
+
}
|
|
104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
|
|
108
105
|
id,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
121
|
-
if (import_core.isWeb) {
|
|
122
|
-
if (!controlRef.current || event.defaultPrevented)
|
|
123
|
-
return;
|
|
124
|
-
const isClickingControl = controlRef.current.contains(event.target);
|
|
125
|
-
const isUserClick = event.isTrusted === true;
|
|
126
|
-
if (!isClickingControl && isUserClick) {
|
|
127
|
-
controlRef.current.click();
|
|
128
|
-
controlRef.current.focus();
|
|
106
|
+
controlRef,
|
|
107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
|
|
108
|
+
role: "label",
|
|
109
|
+
id,
|
|
110
|
+
...labelProps,
|
|
111
|
+
ref: composedRefs,
|
|
112
|
+
onMouseDown: (event) => {
|
|
113
|
+
var _a;
|
|
114
|
+
(_a = props.onMouseDown) == null ? void 0 : _a.call(props, event);
|
|
115
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
116
|
+
event.preventDefault();
|
|
129
117
|
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
118
|
+
},
|
|
119
|
+
onPress: (event) => {
|
|
120
|
+
var _a;
|
|
121
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
122
|
+
if (import_core.isWeb) {
|
|
123
|
+
if (!controlRef.current || event.defaultPrevented)
|
|
124
|
+
return;
|
|
125
|
+
const isClickingControl = controlRef.current.contains(
|
|
126
|
+
event.target
|
|
127
|
+
);
|
|
128
|
+
const 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
|
+
}
|
|
133
137
|
}
|
|
134
138
|
}
|
|
135
|
-
}
|
|
136
|
-
})
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
+
})
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
);
|
|
139
143
|
LabelComponent.displayName = NAME;
|
|
140
144
|
const Label = LabelFrame.extractable((0, import_core.themeable)(LabelComponent), {
|
|
141
145
|
neverFlatten: true
|
package/dist/cjs/Label.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n (props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\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 /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs as any}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(\n event.target as any as Node,\n )\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\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 </LabelProvider>\n )\n },\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/dist/esm/Label.js
CHANGED
|
@@ -42,74 +42,78 @@ const LabelFrame = styled(SizableText, {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
const LabelComponent = React.forwardRef(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
45
|
+
const LabelComponent = React.forwardRef(
|
|
46
|
+
(props, forwardedRef) => {
|
|
47
|
+
const { htmlFor, id: idProp, ...labelProps } = props;
|
|
48
|
+
const controlRef = React.useRef(null);
|
|
49
|
+
const ref = React.useRef(null);
|
|
50
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
51
|
+
const backupId = useId();
|
|
52
|
+
const id = idProp ?? backupId;
|
|
53
|
+
if (isWeb) {
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
if (htmlFor) {
|
|
56
|
+
const element = document.getElementById(htmlFor);
|
|
57
|
+
const label = ref.current;
|
|
58
|
+
if (label && element) {
|
|
59
|
+
const getAriaLabel = () => element.getAttribute("aria-labelledby");
|
|
60
|
+
const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
61
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
62
|
+
controlRef.current = element;
|
|
63
|
+
return () => {
|
|
64
|
+
var _a;
|
|
65
|
+
if (!id)
|
|
66
|
+
return;
|
|
67
|
+
const ariaLabelledBy2 = (_a = getAriaLabel()) == null ? void 0 : _a.replace(id, "");
|
|
68
|
+
if (ariaLabelledBy2 === "") {
|
|
69
|
+
element.removeAttribute("aria-labelledby");
|
|
70
|
+
} else if (ariaLabelledBy2) {
|
|
71
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
}
|
|
73
75
|
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
return /* @__PURE__ */ jsx(LabelProvider, {
|
|
78
|
-
id,
|
|
79
|
-
controlRef,
|
|
80
|
-
children: /* @__PURE__ */ jsx(LabelFrame, {
|
|
81
|
-
role: "label",
|
|
76
|
+
}, [id, htmlFor]);
|
|
77
|
+
}
|
|
78
|
+
return /* @__PURE__ */ jsx(LabelProvider, {
|
|
82
79
|
id,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
95
|
-
if (isWeb) {
|
|
96
|
-
if (!controlRef.current || event.defaultPrevented)
|
|
97
|
-
return;
|
|
98
|
-
const isClickingControl = controlRef.current.contains(event.target);
|
|
99
|
-
const isUserClick = event.isTrusted === true;
|
|
100
|
-
if (!isClickingControl && isUserClick) {
|
|
101
|
-
controlRef.current.click();
|
|
102
|
-
controlRef.current.focus();
|
|
80
|
+
controlRef,
|
|
81
|
+
children: /* @__PURE__ */ jsx(LabelFrame, {
|
|
82
|
+
role: "label",
|
|
83
|
+
id,
|
|
84
|
+
...labelProps,
|
|
85
|
+
ref: composedRefs,
|
|
86
|
+
onMouseDown: (event) => {
|
|
87
|
+
var _a;
|
|
88
|
+
(_a = props.onMouseDown) == null ? void 0 : _a.call(props, event);
|
|
89
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
90
|
+
event.preventDefault();
|
|
103
91
|
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
|
|
92
|
+
},
|
|
93
|
+
onPress: (event) => {
|
|
94
|
+
var _a;
|
|
95
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
96
|
+
if (isWeb) {
|
|
97
|
+
if (!controlRef.current || event.defaultPrevented)
|
|
98
|
+
return;
|
|
99
|
+
const isClickingControl = controlRef.current.contains(
|
|
100
|
+
event.target
|
|
101
|
+
);
|
|
102
|
+
const isUserClick = event.isTrusted === true;
|
|
103
|
+
if (!isClickingControl && isUserClick) {
|
|
104
|
+
controlRef.current.click();
|
|
105
|
+
controlRef.current.focus();
|
|
106
|
+
}
|
|
107
|
+
} else {
|
|
108
|
+
if (props.htmlFor) {
|
|
109
|
+
focusFocusable(props.htmlFor);
|
|
110
|
+
}
|
|
107
111
|
}
|
|
108
112
|
}
|
|
109
|
-
}
|
|
110
|
-
})
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
+
})
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
);
|
|
113
117
|
LabelComponent.displayName = NAME;
|
|
114
118
|
const Label = LabelFrame.extractable(themeable(LabelComponent), {
|
|
115
119
|
neverFlatten: true
|
package/dist/esm/Label.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n (props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\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 /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs as any}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(\n event.target as any as Node,\n )\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\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 </LabelProvider>\n )\n },\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/dist/jsx/Label.js
CHANGED
|
@@ -41,60 +41,64 @@ const LabelFrame = styled(SizableText, {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
const LabelComponent = React.forwardRef(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
44
|
+
const LabelComponent = React.forwardRef(
|
|
45
|
+
(props, forwardedRef) => {
|
|
46
|
+
const { htmlFor, id: idProp, ...labelProps } = props;
|
|
47
|
+
const controlRef = React.useRef(null);
|
|
48
|
+
const ref = React.useRef(null);
|
|
49
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
50
|
+
const backupId = useId();
|
|
51
|
+
const id = idProp ?? backupId;
|
|
52
|
+
if (isWeb) {
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
if (htmlFor) {
|
|
55
|
+
const element = document.getElementById(htmlFor);
|
|
56
|
+
const label = ref.current;
|
|
57
|
+
if (label && element) {
|
|
58
|
+
const getAriaLabel = () => element.getAttribute("aria-labelledby");
|
|
59
|
+
const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
|
|
60
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy);
|
|
61
|
+
controlRef.current = element;
|
|
62
|
+
return () => {
|
|
63
|
+
if (!id)
|
|
64
|
+
return;
|
|
65
|
+
const ariaLabelledBy2 = getAriaLabel()?.replace(id, "");
|
|
66
|
+
if (ariaLabelledBy2 === "") {
|
|
67
|
+
element.removeAttribute("aria-labelledby");
|
|
68
|
+
} else if (ariaLabelledBy2) {
|
|
69
|
+
element.setAttribute("aria-labelledby", ariaLabelledBy2);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
}
|
|
71
73
|
}
|
|
72
|
-
}
|
|
73
|
-
}, [id, htmlFor]);
|
|
74
|
-
}
|
|
75
|
-
return <LabelProvider id={id} controlRef={controlRef}><LabelFrame role="label" id={id} {...labelProps} ref={composedRefs} onMouseDown={(event) => {
|
|
76
|
-
props.onMouseDown?.(event);
|
|
77
|
-
if (!event.defaultPrevented && event.detail > 1) {
|
|
78
|
-
event.preventDefault();
|
|
74
|
+
}, [id, htmlFor]);
|
|
79
75
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
return;
|
|
85
|
-
const isClickingControl = controlRef.current.contains(event.target);
|
|
86
|
-
const isUserClick = event.isTrusted === true;
|
|
87
|
-
if (!isClickingControl && isUserClick) {
|
|
88
|
-
controlRef.current.click();
|
|
89
|
-
controlRef.current.focus();
|
|
76
|
+
return <LabelProvider id={id} controlRef={controlRef}><LabelFrame role="label" id={id} {...labelProps} ref={composedRefs} onMouseDown={(event) => {
|
|
77
|
+
props.onMouseDown?.(event);
|
|
78
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
79
|
+
event.preventDefault();
|
|
90
80
|
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
81
|
+
}} onPress={(event) => {
|
|
82
|
+
props.onPress?.(event);
|
|
83
|
+
if (isWeb) {
|
|
84
|
+
if (!controlRef.current || event.defaultPrevented)
|
|
85
|
+
return;
|
|
86
|
+
const isClickingControl = controlRef.current.contains(
|
|
87
|
+
event.target
|
|
88
|
+
);
|
|
89
|
+
const isUserClick = event.isTrusted === true;
|
|
90
|
+
if (!isClickingControl && isUserClick) {
|
|
91
|
+
controlRef.current.click();
|
|
92
|
+
controlRef.current.focus();
|
|
93
|
+
}
|
|
94
|
+
} else {
|
|
95
|
+
if (props.htmlFor) {
|
|
96
|
+
focusFocusable(props.htmlFor);
|
|
97
|
+
}
|
|
94
98
|
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
99
|
+
}} /></LabelProvider>;
|
|
100
|
+
}
|
|
101
|
+
);
|
|
98
102
|
LabelComponent.displayName = NAME;
|
|
99
103
|
const Label = LabelFrame.extractable(themeable(LabelComponent), {
|
|
100
104
|
neverFlatten: true
|
package/dist/jsx/Label.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n
|
|
5
|
-
"mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,YAAY,WAAW;AAGvB,MAAM,OAAO;AAOb,MAAM,CAAC,eAAe,mBAAmB,IAAI,cAAiC,MAAM;AAAA,EAClF,IAAI;AAAA,EACJ,YAAY,EAAE,SAAS,KAAK;AAC9B,CAAC;AAEM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,WAAW;AAC1B,cAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,eAAO;AAAA,UACL,GAAG,aAAa,KAAK,MAAM;AAAA,UAC3B,QAAQ,YAAY;AAAA,UACpB,YAAY,YAAY;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAMD,MAAM,iBAAiB,MAAM,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSized(val, extras)\n return {\n ...getFontSized(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n (props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\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 /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs as any}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(\n event.target as any as Node,\n )\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\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 </LabelProvider>\n )\n },\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/label",
|
|
3
|
-
"version": "1.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.6",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -17,19 +17,19 @@
|
|
|
17
17
|
"scripts": {
|
|
18
18
|
"build": "tamagui-build",
|
|
19
19
|
"watch": "tamagui-build --watch",
|
|
20
|
-
"lint": "
|
|
21
|
-
"lint:fix": "
|
|
20
|
+
"lint": "../../node_modules/.bin/rome check src",
|
|
21
|
+
"lint:fix": "../../node_modules/.bin/rome check --apply-suggested src",
|
|
22
22
|
"clean": "tamagui-build clean",
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-rc.
|
|
27
|
-
"@tamagui/core": "^1.0.1-rc.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-rc.
|
|
29
|
-
"@tamagui/focusable": "^1.0.1-rc.
|
|
30
|
-
"@tamagui/get-button-sized": "^1.0.1-rc.
|
|
31
|
-
"@tamagui/get-font-sized": "^1.0.1-rc.
|
|
32
|
-
"@tamagui/text": "^1.0.1-rc.
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-rc.6",
|
|
27
|
+
"@tamagui/core": "^1.0.1-rc.6",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-rc.6",
|
|
29
|
+
"@tamagui/focusable": "^1.0.1-rc.6",
|
|
30
|
+
"@tamagui/get-button-sized": "^1.0.1-rc.6",
|
|
31
|
+
"@tamagui/get-font-sized": "^1.0.1-rc.6",
|
|
32
|
+
"@tamagui/text": "^1.0.1-rc.6"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "^18.2.0",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"react-native": "*"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@tamagui/build": "^1.0.1-rc.
|
|
40
|
+
"@tamagui/build": "^1.0.1-rc.6",
|
|
41
41
|
"react": "^18.2.0",
|
|
42
42
|
"react-dom": "^18.2.0",
|
|
43
43
|
"react-native": "*"
|
package/src/Label.tsx
CHANGED
|
@@ -58,85 +58,89 @@ export type LabelProps = GetProps<typeof LabelFrame> & {
|
|
|
58
58
|
htmlFor?: string
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
const LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
const LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(
|
|
62
|
+
(props, forwardedRef) => {
|
|
63
|
+
const { htmlFor, id: idProp, ...labelProps } = props
|
|
64
|
+
const controlRef = React.useRef<HTMLElement | null>(null)
|
|
65
|
+
const ref = React.useRef<any>(null)
|
|
66
|
+
const composedRefs = useComposedRefs(forwardedRef, ref)
|
|
67
|
+
const backupId = useId()
|
|
68
|
+
const id = idProp ?? backupId
|
|
68
69
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
70
|
+
if (isWeb) {
|
|
71
|
+
React.useEffect(() => {
|
|
72
|
+
if (htmlFor) {
|
|
73
|
+
const element = document.getElementById(htmlFor)
|
|
74
|
+
const label = ref.current
|
|
75
|
+
if (label && element) {
|
|
76
|
+
const getAriaLabel = () => element.getAttribute('aria-labelledby')
|
|
77
|
+
const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')
|
|
78
|
+
element.setAttribute('aria-labelledby', ariaLabelledBy)
|
|
79
|
+
controlRef.current = element
|
|
80
|
+
return () => {
|
|
81
|
+
/**
|
|
82
|
+
* We get the latest attribute value because at the time that this cleanup fires,
|
|
83
|
+
* the values from the closure may have changed.
|
|
84
|
+
*/
|
|
85
|
+
if (!id) return
|
|
86
|
+
const ariaLabelledBy = getAriaLabel()?.replace(id, '')
|
|
87
|
+
if (ariaLabelledBy === '') {
|
|
88
|
+
element.removeAttribute('aria-labelledby')
|
|
89
|
+
} else if (ariaLabelledBy) {
|
|
90
|
+
element.setAttribute('aria-labelledby', ariaLabelledBy)
|
|
91
|
+
}
|
|
90
92
|
}
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
95
|
+
}, [id, htmlFor])
|
|
96
|
+
}
|
|
96
97
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
}}
|
|
112
|
-
onPress={(event) => {
|
|
113
|
-
props.onPress?.(event)
|
|
114
|
-
|
|
115
|
-
if (isWeb) {
|
|
116
|
-
if (!controlRef.current || event.defaultPrevented) return
|
|
117
|
-
const isClickingControl = controlRef.current.contains(event.target as any as Node)
|
|
118
|
-
// Ensure event was generated by a user action
|
|
119
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
|
|
120
|
-
const isUserClick = event.isTrusted === true
|
|
121
|
-
/**
|
|
122
|
-
* When a label is wrapped around the control it labels, we trigger the appropriate events
|
|
123
|
-
* on the control when the label is clicked. We do nothing if the user is already clicking the
|
|
124
|
-
* control inside the label.
|
|
125
|
-
*/
|
|
126
|
-
if (!isClickingControl && isUserClick) {
|
|
127
|
-
controlRef.current.click()
|
|
128
|
-
controlRef.current.focus()
|
|
98
|
+
return (
|
|
99
|
+
<LabelProvider id={id} controlRef={controlRef}>
|
|
100
|
+
<LabelFrame
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
role="label"
|
|
103
|
+
id={id}
|
|
104
|
+
{...labelProps}
|
|
105
|
+
ref={composedRefs as any}
|
|
106
|
+
onMouseDown={(event) => {
|
|
107
|
+
props.onMouseDown?.(event)
|
|
108
|
+
// prevent text selection when double clicking label
|
|
109
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
110
|
+
event.preventDefault()
|
|
129
111
|
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
112
|
+
}}
|
|
113
|
+
onPress={(event) => {
|
|
114
|
+
props.onPress?.(event)
|
|
115
|
+
|
|
116
|
+
if (isWeb) {
|
|
117
|
+
if (!controlRef.current || event.defaultPrevented) return
|
|
118
|
+
const isClickingControl = controlRef.current.contains(
|
|
119
|
+
event.target as any as Node,
|
|
120
|
+
)
|
|
121
|
+
// Ensure event was generated by a user action
|
|
122
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
|
|
123
|
+
const isUserClick = event.isTrusted === true
|
|
124
|
+
/**
|
|
125
|
+
* When a label is wrapped around the control it labels, we trigger the appropriate events
|
|
126
|
+
* on the control when the label is clicked. We do nothing if the user is already clicking the
|
|
127
|
+
* control inside the label.
|
|
128
|
+
*/
|
|
129
|
+
if (!isClickingControl && isUserClick) {
|
|
130
|
+
controlRef.current.click()
|
|
131
|
+
controlRef.current.focus()
|
|
132
|
+
}
|
|
133
|
+
} else {
|
|
134
|
+
if (props.htmlFor) {
|
|
135
|
+
focusFocusable(props.htmlFor)
|
|
136
|
+
}
|
|
133
137
|
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
}}
|
|
139
|
+
/>
|
|
140
|
+
</LabelProvider>
|
|
141
|
+
)
|
|
142
|
+
},
|
|
143
|
+
)
|
|
140
144
|
|
|
141
145
|
LabelComponent.displayName = NAME
|
|
142
146
|
|