@tamagui/checkbox 1.14.1 → 1.14.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/Checkbox.js +322 -1
- package/dist/cjs/Checkbox.js.map +2 -2
- package/dist/cjs/index.js +18 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Checkbox.js +292 -1
- package/dist/esm/Checkbox.js.map +2 -2
- package/dist/esm/Checkbox.mjs +292 -1
- package/dist/esm/Checkbox.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Checkbox.js +271 -1
- package/dist/jsx/Checkbox.js.map +2 -2
- package/dist/jsx/Checkbox.mjs +271 -1
- package/dist/jsx/Checkbox.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +11 -11
package/dist/cjs/Checkbox.js
CHANGED
|
@@ -1,2 +1,323 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Checkbox_exports = {};
|
|
30
|
+
__export(Checkbox_exports, {
|
|
31
|
+
BubbleInput: () => BubbleInput,
|
|
32
|
+
Checkbox: () => Checkbox,
|
|
33
|
+
CheckboxFrame: () => CheckboxFrame,
|
|
34
|
+
createCheckboxScope: () => createCheckboxScope,
|
|
35
|
+
getState: () => getState,
|
|
36
|
+
isIndeterminate: () => isIndeterminate
|
|
37
|
+
});
|
|
38
|
+
module.exports = __toCommonJS(Checkbox_exports);
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
var import_react_use_previous = require("@radix-ui/react-use-previous");
|
|
41
|
+
var import_core = require("@tamagui/core");
|
|
42
|
+
var import_create_context = require("@tamagui/create-context");
|
|
43
|
+
var import_focusable = require("@tamagui/focusable");
|
|
44
|
+
var import_font_size = require("@tamagui/font-size");
|
|
45
|
+
var import_get_size = require("@tamagui/get-size");
|
|
46
|
+
var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
|
|
47
|
+
var import_label = require("@tamagui/label");
|
|
48
|
+
var import_stacks = require("@tamagui/stacks");
|
|
49
|
+
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
50
|
+
var React = __toESM(require("react"));
|
|
51
|
+
function isIndeterminate(checked) {
|
|
52
|
+
return checked === "indeterminate";
|
|
53
|
+
}
|
|
54
|
+
function getState(checked) {
|
|
55
|
+
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
56
|
+
}
|
|
57
|
+
const BubbleInput = (props) => {
|
|
58
|
+
const { checked, bubbles = true, control, isHidden, ...inputProps } = props;
|
|
59
|
+
const ref = React.useRef(null);
|
|
60
|
+
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
const input = ref.current;
|
|
63
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
64
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
|
65
|
+
inputProto,
|
|
66
|
+
"checked"
|
|
67
|
+
);
|
|
68
|
+
const setChecked = descriptor.set;
|
|
69
|
+
if (prevChecked !== checked && setChecked) {
|
|
70
|
+
const event = new Event("click", { bubbles });
|
|
71
|
+
input.indeterminate = isIndeterminate(checked);
|
|
72
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
73
|
+
input.dispatchEvent(event);
|
|
74
|
+
}
|
|
75
|
+
}, [prevChecked, checked, bubbles]);
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
"input",
|
|
78
|
+
{
|
|
79
|
+
type: "checkbox",
|
|
80
|
+
defaultChecked: isIndeterminate(checked) ? false : checked,
|
|
81
|
+
...inputProps,
|
|
82
|
+
tabIndex: -1,
|
|
83
|
+
ref,
|
|
84
|
+
"aria-hidden": isHidden,
|
|
85
|
+
style: {
|
|
86
|
+
...isHidden ? {
|
|
87
|
+
// ...controlSize,
|
|
88
|
+
position: "absolute",
|
|
89
|
+
pointerEvents: "none",
|
|
90
|
+
opacity: 0,
|
|
91
|
+
margin: 0
|
|
92
|
+
} : {
|
|
93
|
+
appearance: "auto",
|
|
94
|
+
accentColor: "var(--color6)"
|
|
95
|
+
},
|
|
96
|
+
...props.style
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
const INDICATOR_NAME = "CheckboxIndicator";
|
|
102
|
+
const CheckboxIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
103
|
+
// use Checkbox for easier themes
|
|
104
|
+
name: INDICATOR_NAME
|
|
105
|
+
});
|
|
106
|
+
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
107
|
+
React.forwardRef(
|
|
108
|
+
(props, forwardedRef) => {
|
|
109
|
+
const {
|
|
110
|
+
__scopeCheckbox,
|
|
111
|
+
children: childrenProp,
|
|
112
|
+
forceMount,
|
|
113
|
+
disablePassStyles,
|
|
114
|
+
...indicatorProps
|
|
115
|
+
} = props;
|
|
116
|
+
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
117
|
+
const iconSize = (typeof context.size === "number" ? context.size * 0.65 : (0, import_font_size.getFontSize)(context.size)) * context.scaleIcon;
|
|
118
|
+
const theme = (0, import_core.useTheme)();
|
|
119
|
+
const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color });
|
|
120
|
+
const childrens = React.Children.toArray(childrenProp);
|
|
121
|
+
const children = childrens.map((child) => {
|
|
122
|
+
if (disablePassStyles || !React.isValidElement(child)) {
|
|
123
|
+
return child;
|
|
124
|
+
}
|
|
125
|
+
return getThemedIcon(child);
|
|
126
|
+
});
|
|
127
|
+
if (forceMount || isIndeterminate(context.state) || context.state === true)
|
|
128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
CheckboxIndicatorFrame,
|
|
130
|
+
{
|
|
131
|
+
"data-state": getState(context.state),
|
|
132
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
133
|
+
pointerEvents: "none",
|
|
134
|
+
...indicatorProps,
|
|
135
|
+
ref: forwardedRef,
|
|
136
|
+
children
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
return null;
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
);
|
|
143
|
+
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
144
|
+
const CHECKBOX_NAME = "Checkbox";
|
|
145
|
+
const CheckboxFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
146
|
+
name: CHECKBOX_NAME,
|
|
147
|
+
tag: "button",
|
|
148
|
+
variants: {
|
|
149
|
+
unstyled: {
|
|
150
|
+
false: {
|
|
151
|
+
size: "$true",
|
|
152
|
+
backgroundColor: "$background",
|
|
153
|
+
alignItems: "center",
|
|
154
|
+
justifyContent: "center",
|
|
155
|
+
pressTheme: true,
|
|
156
|
+
focusable: true,
|
|
157
|
+
borderWidth: 1,
|
|
158
|
+
borderColor: "$borderColor",
|
|
159
|
+
hoverStyle: {
|
|
160
|
+
borderColor: "$borderColorHover"
|
|
161
|
+
},
|
|
162
|
+
focusStyle: {
|
|
163
|
+
borderColor: "$borderColorFocus"
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
size: {
|
|
168
|
+
"...size": (val, { tokens }) => {
|
|
169
|
+
const radiusToken = (0, import_core.getVariableValue)((0, import_get_size.getSize)(val)) / 8;
|
|
170
|
+
return {
|
|
171
|
+
borderRadius: radiusToken
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
defaultVariants: {
|
|
177
|
+
unstyled: false
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
const [createCheckboxContext, createCheckboxScope] = (0, import_create_context.createContextScope)(CHECKBOX_NAME);
|
|
181
|
+
const [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
|
182
|
+
const Checkbox = (0, import_core.withStaticProperties)(
|
|
183
|
+
CheckboxFrame.extractable(
|
|
184
|
+
React.forwardRef(
|
|
185
|
+
(props, forwardedRef) => {
|
|
186
|
+
const {
|
|
187
|
+
__scopeCheckbox,
|
|
188
|
+
labelledBy: ariaLabelledby,
|
|
189
|
+
name,
|
|
190
|
+
checked: checkedProp,
|
|
191
|
+
defaultChecked,
|
|
192
|
+
required,
|
|
193
|
+
scaleIcon = 1,
|
|
194
|
+
scaleSize = 0.45,
|
|
195
|
+
sizeAdjust = 0,
|
|
196
|
+
disabled,
|
|
197
|
+
value = "on",
|
|
198
|
+
onCheckedChange,
|
|
199
|
+
native,
|
|
200
|
+
...checkboxProps
|
|
201
|
+
} = props;
|
|
202
|
+
const [button, setButton] = React.useState(null);
|
|
203
|
+
const composedRefs = (0, import_core.useComposedRefs)(forwardedRef, (node) => setButton(node));
|
|
204
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
205
|
+
const propsActive = (0, import_core.useMediaPropsActive)(props);
|
|
206
|
+
const isFormControl = import_core.isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
207
|
+
const [checked = false, setChecked] = (0, import_use_controllable_state.useControllableState)({
|
|
208
|
+
prop: checkedProp,
|
|
209
|
+
defaultProp: defaultChecked,
|
|
210
|
+
onChange: onCheckedChange
|
|
211
|
+
});
|
|
212
|
+
const adjustedSize = (0, import_core.getVariableValue)(
|
|
213
|
+
(0, import_get_size.stepTokenUpOrDown)("size", propsActive.size, sizeAdjust)
|
|
214
|
+
);
|
|
215
|
+
const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize;
|
|
216
|
+
const labelId = (0, import_label.useLabelContext)(button);
|
|
217
|
+
const labelledBy = ariaLabelledby || labelId;
|
|
218
|
+
if (process.env.TAMAGUI_TARGET === "native") {
|
|
219
|
+
React.useEffect(() => {
|
|
220
|
+
if (!props.id)
|
|
221
|
+
return;
|
|
222
|
+
return (0, import_focusable.registerFocusable)(props.id, {
|
|
223
|
+
focusAndSelect: () => {
|
|
224
|
+
setChecked((x) => !x);
|
|
225
|
+
},
|
|
226
|
+
focus: () => {
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
}, [props.id, setChecked]);
|
|
230
|
+
}
|
|
231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
232
|
+
CheckboxProvider,
|
|
233
|
+
{
|
|
234
|
+
scope: __scopeCheckbox,
|
|
235
|
+
state: checked,
|
|
236
|
+
disabled,
|
|
237
|
+
size,
|
|
238
|
+
scaleIcon,
|
|
239
|
+
children: import_core.isWeb && native ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
240
|
+
BubbleInput,
|
|
241
|
+
{
|
|
242
|
+
control: button,
|
|
243
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
244
|
+
name,
|
|
245
|
+
value,
|
|
246
|
+
checked,
|
|
247
|
+
required,
|
|
248
|
+
disabled,
|
|
249
|
+
id: props.id
|
|
250
|
+
}
|
|
251
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
252
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
253
|
+
CheckboxFrame,
|
|
254
|
+
{
|
|
255
|
+
width: size,
|
|
256
|
+
height: size,
|
|
257
|
+
tag: "button",
|
|
258
|
+
role: "checkbox",
|
|
259
|
+
"aria-labelledby": labelledBy,
|
|
260
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
261
|
+
"aria-required": required,
|
|
262
|
+
"data-state": getState(checked),
|
|
263
|
+
"data-disabled": disabled ? "" : void 0,
|
|
264
|
+
disabled,
|
|
265
|
+
...checkboxProps,
|
|
266
|
+
ref: composedRefs,
|
|
267
|
+
...import_core.isWeb && {
|
|
268
|
+
type: "button",
|
|
269
|
+
value,
|
|
270
|
+
onKeyDown: (0, import_core.composeEventHandlers)(
|
|
271
|
+
props.onKeyDown,
|
|
272
|
+
(event) => {
|
|
273
|
+
if (event.key === "Enter")
|
|
274
|
+
event.preventDefault();
|
|
275
|
+
}
|
|
276
|
+
)
|
|
277
|
+
},
|
|
278
|
+
onPress: (0, import_core.composeEventHandlers)(props.onPress, (event) => {
|
|
279
|
+
setChecked(
|
|
280
|
+
(prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked
|
|
281
|
+
);
|
|
282
|
+
if (isFormControl) {
|
|
283
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
284
|
+
if (!hasConsumerStoppedPropagationRef.current)
|
|
285
|
+
event.stopPropagation();
|
|
286
|
+
}
|
|
287
|
+
})
|
|
288
|
+
}
|
|
289
|
+
),
|
|
290
|
+
import_core.isWeb && isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
291
|
+
BubbleInput,
|
|
292
|
+
{
|
|
293
|
+
isHidden: true,
|
|
294
|
+
control: button,
|
|
295
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
296
|
+
name,
|
|
297
|
+
value,
|
|
298
|
+
checked,
|
|
299
|
+
required,
|
|
300
|
+
disabled
|
|
301
|
+
}
|
|
302
|
+
) : null
|
|
303
|
+
] })
|
|
304
|
+
}
|
|
305
|
+
);
|
|
306
|
+
}
|
|
307
|
+
)
|
|
308
|
+
),
|
|
309
|
+
{
|
|
310
|
+
Indicator: CheckboxIndicator
|
|
311
|
+
}
|
|
312
|
+
);
|
|
313
|
+
Checkbox.displayName = CHECKBOX_NAME;
|
|
314
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
315
|
+
0 && (module.exports = {
|
|
316
|
+
BubbleInput,
|
|
317
|
+
Checkbox,
|
|
318
|
+
CheckboxFrame,
|
|
319
|
+
createCheckboxScope,
|
|
320
|
+
getState,
|
|
321
|
+
isIndeterminate
|
|
322
|
+
});
|
|
2
323
|
//# sourceMappingURL=Checkbox.js.map
|
package/dist/cjs/Checkbox.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
4
|
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && isFormControl ? (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,19 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var src_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(src_exports);
|
|
18
|
+
__reExport(src_exports, require("./Checkbox"), module.exports);
|
|
2
19
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './Checkbox'\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,uBAAd;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|