@fluentui-react-native/tester 0.170.12 → 0.170.14

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxV1Test.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/CheckboxV1Test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckboxV1Test.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/CheckboxV1Test.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,6CAAwC;AAExC,yDAAwD;AACxD,gEAA4E;AAE5E,gCAA+B;AAC/B,yDAAoD;AACpD,6EAAwE;AACxE,mEAAyD;AACzD,uDAAkD;AAClD,yDAAoD;AAEpD,IAAM,gBAAgB,GAAkB;IACtC;QACE,IAAI,EAAE,kBAAkB;QACxB,MAAM,EAAE,4BAAmB;QAC3B,SAAS,EAAE,iCAAa;KACzB;IACD,uBAAQ,CAAC,MAAM,CAAC;QACd,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;QACT,OAAO,EAAE;YACP,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,+BAAY;SACxB;KACF,CAAC;IACF,uBAAQ,CAAC,MAAM,CAAC;QACd,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;QACT,OAAO,EAAE;YACP,IAAI,EAAE,6BAA6B;YACnC,SAAS,EAAE,qDAAuB;SACnC;KACF,CAAC;IACF;QACE,IAAI,EAAE,uBAAuB;QAC7B,SAAS,EAAE,sCAAa;KACzB;IACD,uBAAQ,CAAC,MAAM,CAAC;QACd,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;QACT,OAAO,EAAE;YACP,IAAI,EAAE,6BAA6B;YACnC,SAAS,EAAE,iCAAa;SACzB;KACF,CAAC;CACH,CAAC;AAEF,IAAM,WAAW,GAAkB;IACjC;QACE,IAAI,EAAE,4BAA4B;QAClC,SAAS,EAAE,qCAAiB;KAC7B;CACF,CAAC;AAEK,IAAM,cAAc,GAA4B;IACrD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,YAAY;QACzB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,YAAY;KAC5B,CAAC;IAEF,IAAM,WAAW,GACf,0MAA0M,CAAC;IAE7M,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AACzI,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DesktopSpecificCheckbox: React.FunctionComponent;
+//# sourceMappingURL=DesktopSpecificCheckboxTest.d.ts.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopSpecificCheckboxTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAQ3C,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopSpecificCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
+var DesktopSpecificCheckbox = function () {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "Checkbox will display a tooltip", tooltip: "This is a tooltip" }),
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "A circular checkbox", shape: "circular" }),
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "A checkbox with label placed before", labelPosition: "before" })));
+};
+exports.DesktopSpecificCheckbox = DesktopSpecificCheckbox;
+//# sourceMappingURL=DesktopSpecificCheckboxTest.js.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopSpecificCheckboxTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA0B;AAE1B,sFAAwE;AAEjE,IAAM,uBAAuB,GAA4B;IAC9D,OAAO,CACL;QACE,8BAAC,gCAAQ,IAAC,KAAK,EAAC,iCAAiC,EAAC,OAAO,EAAC,mBAAmB,GAAG;QAChF,8BAAC,gCAAQ,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAC,UAAU,GAAG;QACzD,8BAAC,gCAAQ,IAAC,KAAK,EAAC,qCAAqC,EAAC,aAAa,EAAC,QAAQ,GAAG,CAC9E,CACJ,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,uBAAuB,2BAQlC"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const OtherCheckbox: React.FunctionComponent;
+//# sourceMappingURL=OtherCheckboxPropsTest.d.ts.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtherCheckboxPropsTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAmDjC,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OtherCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_native_1 = require("react-native");
+var button_1 = require("@fluentui-react-native/button");
+var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
+var text_1 = require("@fluentui-react-native/text");
+var styles_1 = require("../Common/styles");
+var pressableStyle = { borderWidth: 1, padding: 4, gap: 4, flexDirection: 'row', alignItems: 'center' };
+var OtherCheckbox = function () {
+    var _a = react_1.default.useState(false), isChecked = _a[0], setisChecked = _a[1];
+    var setCheckedTrue = react_1.default.useCallback(function () {
+        setisChecked(true);
+    }, []);
+    var setCheckedFalse = react_1.default.useCallback(function () {
+        setisChecked(false);
+    }, []);
+    var onChange = react_1.default.useCallback(function (_e, checked) {
+        setisChecked(checked);
+    }, []);
+    var onPress = react_1.default.useCallback(function () {
+        setisChecked(!isChecked);
+    }, [isChecked]);
+    var memoizedStyles = react_1.default.useMemo(function () { return (react_native_1.Platform.OS === 'android' ? tslib_1.__assign(tslib_1.__assign({}, styles_1.mobileStyles.containerSpacedEvenly), { height: 150 }) : { gap: 8 }); }, []);
+    return (react_1.default.createElement(react_native_1.View, { style: memoizedStyles },
+        react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(button_1.ButtonV1, { onClick: setCheckedTrue, size: "small" }, "Check controlled checkboxes below"),
+            react_1.default.createElement(button_1.ButtonV1, { onClick: setCheckedFalse, size: "small" }, "Uncheck controlled checkboxes below")),
+        react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "This is a controlled Checkbox", checked: isChecked, onChange: onChange }),
+            react_1.default.createElement(react_native_1.Pressable, { style: pressableStyle, onPress: onPress },
+                react_1.default.createElement(experimental_checkbox_1.Checkbox, { checked: isChecked, onChange: onChange }),
+                react_1.default.createElement(text_1.TextV1, null, "A controlled checkbox in a Pressable. Pressing Pressable also toggles Checkbox")),
+            react_native_1.Platform.OS !== 'android' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "Checkbox rendered with labelPosition 'before' (controlled)", labelPosition: "before", checked: isChecked }),
+                react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "A required checkbox with other required text", required: "**" }))))));
+};
+exports.OtherCheckbox = OtherCheckbox;
+//# sourceMappingURL=OtherCheckboxPropsTest.js.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtherCheckboxPropsTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA0B;AAC1B,6CAAyD;AAGzD,wDAAmE;AACnE,sFAAwE;AACxE,oDAAqD;AAErD,2CAAgD;AAEhD,IAAM,cAAc,GAAc,EAAE,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAE9G,IAAM,aAAa,GAA4B;IAC9C,IAAA,KAA4B,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAhD,SAAS,QAAA,EAAE,YAAY,QAAyB,CAAC;IAExD,IAAM,cAAc,GAAG,eAAK,CAAC,WAAW,CAAC;QACvC,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,eAAe,GAAG,eAAK,CAAC,WAAW,CAAC;QACxC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,QAAQ,GAAG,eAAK,CAAC,WAAW,CAAC,UAAC,EAAE,EAAE,OAAgB;QACtD,YAAY,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,OAAO,GAAG,eAAK,CAAC,WAAW,CAAC;QAChC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,cAAc,GAAG,eAAK,CAAC,OAAO,CAClC,cAAM,OAAA,CAAC,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,uCAAM,qBAAY,CAAC,qBAAqB,KAAE,MAAM,EAAE,GAAG,IAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAjG,CAAiG,EACvG,EAAE,CACH,CAAC;IAEF,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,cAAc;QACzB,8BAAC,mBAAI;YACH,8BAAC,iBAAM,IAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,wCAEpC;YACT,8BAAC,iBAAM,IAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,0CAErC,CACJ;QAEP,8BAAC,mBAAI;YACH,8BAAC,gCAAQ,IAAC,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI;YAC1F,8BAAC,wBAAS,IAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO;gBAChD,8BAAC,gCAAQ,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI;gBACpD,8BAAC,aAAM,yFAAwF,CACrF;YAEX,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAC5B;gBACE,8BAAC,gCAAQ,IAAC,KAAK,EAAC,4DAA4D,EAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,SAAS,GAAI;gBAC1H,8BAAC,gCAAQ,IAAC,KAAK,EAAC,8CAA8C,EAAC,QAAQ,EAAC,IAAI,GAAG,CAC9E,CACJ,CACI,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAnDW,QAAA,aAAa,iBAmDxB"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SizeCheckbox: React.FunctionComponent;
+//# sourceMappingURL=SizeCheckboxTest.d.ts.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeCheckboxTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAShC,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SizeCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
+var SizeCheckbox = function () {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { tooltip: "Medium checkbox", size: "medium" }),
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { tooltip: "Large checkbox", size: "large" }),
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "Medium checkbox", size: "medium" }),
+        react_1.default.createElement(experimental_checkbox_1.Checkbox, { label: "Large checkbox", size: "large" })));
+};
+exports.SizeCheckbox = SizeCheckbox;
+//# sourceMappingURL=SizeCheckboxTest.js.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeCheckboxTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA0B;AAE1B,sFAAwE;AAEjE,IAAM,YAAY,GAA4B;IACnD,OAAO,CACL;QACE,8BAAC,gCAAQ,IAAC,OAAO,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAG;QACpD,8BAAC,gCAAQ,IAAC,OAAO,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG;QAClD,8BAAC,gCAAQ,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAG;QAClD,8BAAC,gCAAQ,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC/C,CACJ,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,YAAY,gBASvB"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TokenCheckbox: React.FunctionComponent;
+//# sourceMappingURL=TokenCheckboxTest.d.ts.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenCheckboxTest.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBA2DjC,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_native_1 = require("react-native");
+var experimental_checkbox_1 = require("@fluentui-react-native/experimental-checkbox");
+var theme_types_1 = require("@fluentui-react-native/theme-types");
+var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
+var styles_1 = require("../Common/styles");
+function onChangeUncontrolled(_e, isChecked) {
+    console.log(isChecked);
+}
+var CircleColorCheckbox = experimental_checkbox_1.Checkbox.customize({
+    checked: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
+    },
+});
+var HoverCheckbox = experimental_checkbox_1.Checkbox.customize({
+    hovered: {
+        checkmarkOpacity: 1,
+    },
+});
+var BigLabelCheckbox = experimental_checkbox_1.Checkbox.customize({
+    label: {
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+});
+var ComposedCheckbox = experimental_checkbox_1.Checkbox.compose({
+    slotProps: {
+        label: { style: { color: 'hotpink' } },
+    },
+});
+var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
+    return { textbox: tslib_1.__assign(tslib_1.__assign({}, styles_1.commonTestStyles.textBox), { borderColor: t.colors.inputBorder }) };
+});
+var TokenCheckbox = function () {
+    var _a = react_1.default.useState('blue'), checkboxColor = _a[0], setCheckboxColor = _a[1];
+    var _b = react_1.default.useState('white'), checkmarkColor = _b[0], setCheckmarkColor = _b[1];
+    var BlueCheckbox = experimental_checkbox_1.Checkbox.customize({
+        checked: {
+            checkboxBackgroundColor: checkboxColor,
+            checkboxBorderColor: checkboxColor,
+            checkmarkColor: checkmarkColor,
+        },
+    });
+    var theme = (0, theme_types_1.useTheme)();
+    var textBoxBorderStyle = getThemedStyles(theme);
+    return (react_1.default.createElement(react_native_1.View, null,
+        react_native_1.Platform.OS !== 'android' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(HoverCheckbox, { label: "A checkbox with checkmark visible on hover", onChange: onChangeUncontrolled }),
+            react_1.default.createElement(CircleColorCheckbox, { label: "A circular token-customized checkbox", shape: "circular", onChange: onChangeUncontrolled, defaultChecked: true }))),
+        react_1.default.createElement(BigLabelCheckbox, { label: "A checkbox with a bold large font label" }),
+        react_1.default.createElement(ComposedCheckbox, { label: "A checkbox with a hot pink label and no padding" }),
+        react_1.default.createElement(BlueCheckbox, { label: "Token-customized checkbox. Customizable below.", onChange: onChangeUncontrolled, labelPosition: "before", defaultChecked: false }),
+        react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                setCheckboxColor(e.nativeEvent.text);
+            } }),
+        react_1.default.createElement(react_native_1.TextInput, { accessibilityLabel: "Checkmark color", style: textBoxBorderStyle.textbox, placeholder: "Checkmark color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                setCheckmarkColor(e.nativeEvent.text);
+            } })));
+};
+exports.TokenCheckbox = TokenCheckbox;
+//# sourceMappingURL=TokenCheckboxTest.js.map

package/lib-commonjs/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenCheckboxTest.js","sourceRoot":"","sources":["../../../../../src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.170.12",
+  "version": "0.170.14",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -35,47 +35,47 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": "0.25.0",
     "@fluentui-react-native/apple-theme": "0.28.0",
-    "@fluentui-react-native/avatar": "1.12.4",
-    "@fluentui-react-native/badge": "0.9.4",
-    "@fluentui-react-native/button": "0.39.0",
-    "@fluentui-react-native/chip": "0.4.4",
+    "@fluentui-react-native/avatar": "1.12.5",
+    "@fluentui-react-native/badge": "0.10.0",
+    "@fluentui-react-native/button": "0.39.1",
+    "@fluentui-react-native/chip": "0.4.5",
     "@fluentui-react-native/default-theme": "0.26.0",
-    "@fluentui-react-native/divider": "0.7.4",
-    "@fluentui-react-native/drawer": "0.4.0",
-    "@fluentui-react-native/dropdown": "0.10.9",
+    "@fluentui-react-native/divider": "0.7.5",
+    "@fluentui-react-native/drawer": "0.4.1",
+    "@fluentui-react-native/dropdown": "0.10.10",
     "@fluentui-react-native/experimental-activity-indicator": "0.10.1",
     "@fluentui-react-native/experimental-appearance-additions": "0.7.0",
     "@fluentui-react-native/experimental-avatar": "0.21.2",
-    "@fluentui-react-native/experimental-checkbox": "0.17.5",
+    "@fluentui-react-native/experimental-checkbox": "0.17.6",
     "@fluentui-react-native/experimental-expander": "0.8.1",
-    "@fluentui-react-native/experimental-menu-button": "0.10.13",
+    "@fluentui-react-native/experimental-menu-button": "0.10.14",
     "@fluentui-react-native/experimental-native-date-picker": "0.11.0",
-    "@fluentui-react-native/experimental-shadow": "0.6.0",
+    "@fluentui-react-native/experimental-shadow": "0.6.1",
     "@fluentui-react-native/experimental-shimmer": "0.13.3",
     "@fluentui-react-native/framework": "0.14.0",
-    "@fluentui-react-native/icon": "0.21.4",
-    "@fluentui-react-native/input": "0.7.4",
-    "@fluentui-react-native/interactive-hooks": "0.27.0",
-    "@fluentui-react-native/menu": "1.14.15",
+    "@fluentui-react-native/icon": "0.21.5",
+    "@fluentui-react-native/input": "0.7.5",
+    "@fluentui-react-native/interactive-hooks": "0.27.1",
+    "@fluentui-react-native/menu": "1.14.16",
     "@fluentui-react-native/merge-props": "0.9.0",
-    "@fluentui-react-native/notification": "0.25.7",
-    "@fluentui-react-native/overflow": "0.3.15",
-    "@fluentui-react-native/radio-group": "0.21.10",
+    "@fluentui-react-native/notification": "0.25.8",
+    "@fluentui-react-native/overflow": "0.3.16",
+    "@fluentui-react-native/radio-group": "0.21.11",
     "@fluentui-react-native/separator": "0.18.0",
-    "@fluentui-react-native/spinner": "0.9.5",
-    "@fluentui-react-native/stack": "0.10.3",
-    "@fluentui-react-native/switch": "0.13.3",
-    "@fluentui-react-native/tablist": "0.6.9",
-    "@fluentui-react-native/text": "0.24.2",
+    "@fluentui-react-native/spinner": "0.9.6",
+    "@fluentui-react-native/stack": "0.10.4",
+    "@fluentui-react-native/switch": "0.13.4",
+    "@fluentui-react-native/tablist": "0.6.11",
+    "@fluentui-react-native/text": "0.24.3",
     "@fluentui-react-native/theme": "0.11.0",
     "@fluentui-react-native/theme-tokens": "0.27.0",
     "@fluentui-react-native/theme-types": "0.39.0",
     "@fluentui-react-native/themed-stylesheet": "1.7.0",
     "@fluentui-react-native/theming-utils": "0.26.0",
-    "@fluentui-react-native/tooltip": "0.4.7",
+    "@fluentui-react-native/tooltip": "0.4.8",
     "@fluentui-react-native/vibrancy-view": "0.2.1",
     "@fluentui-react-native/win32-theme": "0.34.3",
-    "@fluentui/react-native": "0.42.3",
+    "@fluentui/react-native": "0.42.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
-    "@fluentui-react-native/focus-zone": "0.19.2",
+    "@fluentui-react-native/focus-zone": "0.19.3",
     "@fluentui-react-native/scripts": "0.1.1",
     "@react-native/babel-preset": "^0.73.0",
     "@react-native/metro-babel-transformer": "^0.73.0",

package/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+export const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+      <Checkbox label="A required checkbox" required />
+    </View>
+  );
+};

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -1,181 +1,15 @@
 import * as React from 'react';
-import { View, TextInput, Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import type { Theme } from '@fluentui-react-native/theme-types';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Platform } from 'react-native';
 
 import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
 import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
-import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
-
-function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
-  console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
-      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
-      <Checkbox label="Disabled checkbox" disabled />
-      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
-      <Checkbox label="A required checkbox" required />
-    </View>
-  );
-};
-
-const DesktopSpecificCheckbox: React.FunctionComponent = () => {
-  return (
-    <>
-      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" shape="circular" />
-      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
-    </>
-  );
-};
-
-const SizeCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox tooltip="Medium checkbox" size="medium" />
-      <Checkbox tooltip="Large checkbox" size="large" />
-      <Checkbox label="Medium checkbox" size="medium" />
-      <Checkbox label="Large checkbox" size="large" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isChecked, setisChecked] = React.useState(false);
-
-  const setCheckedTrue = React.useCallback(() => {
-    setisChecked(true);
-  }, []);
-
-  const setCheckedFalse = React.useCallback(() => {
-    setisChecked(false);
-  }, []);
-
-  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
-
-  return (
-    <View style={memoizedStyles}>
-      <Button onClick={setCheckedTrue} size="small">
-        Check controlled checkboxes below
-      </Button>
-      <Button onClick={setCheckedFalse} size="small">
-        Uncheck controlled checkboxes below
-      </Button>
-
-      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
-      {Platform.OS !== 'android' && (
-        <>
-          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
-          <Checkbox label="A required checkbox with other required text" required="**" />
-        </>
-      )}
-    </View>
-  );
-};
-
-const CircleColorCheckbox = Checkbox.customize({
-  checked: {
-    checkboxBackgroundColor: 'green',
-    checkboxBorderColor: 'green',
-    checkmarkColor: 'white',
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  hovered: {
-    checkmarkOpacity: 1,
-  },
-});
-
-const BigLabelCheckbox = Checkbox.customize({
-  label: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-});
-
-const ComposedCheckbox = Checkbox.compose({
-  slotProps: {
-    label: { style: { color: 'hotpink' } },
-  },
-});
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
-  const [checkboxColor, setCheckboxColor] = React.useState('blue');
-  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
-  const BlueCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: checkboxColor,
-      checkboxBorderColor: checkboxColor,
-      checkmarkColor: checkmarkColor,
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle = getThemedStyles(theme);
-
-  return (
-    <View>
-      {Platform.OS !== 'android' && (
-        <>
-          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
-          <CircleColorCheckbox
-            label="A circular token-customized checkbox"
-            shape="circular"
-            onChange={onChangeUncontrolled}
-            defaultChecked
-          />
-        </>
-      )}
-
-      <BigLabelCheckbox label="A checkbox with a bold large font label" />
-      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
-
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        labelPosition="before"
-        defaultChecked={false}
-      />
-      <TextInput
-        accessibilityLabel="Background color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Background color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckboxColor(e.nativeEvent.text);
-        }}
-      />
-
-      <TextInput
-        accessibilityLabel="Checkmark color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Checkmark color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckmarkColor(e.nativeEvent.text);
-        }}
-      />
-    </View>
-  );
-};
+import { BasicCheckbox } from './BasicCheckboxTest';
+import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest';
+import { OtherCheckbox } from './OtherCheckboxPropsTest';
+import { SizeCheckbox } from './SizeCheckboxTest';
+import { TokenCheckbox } from './TokenCheckboxTest';
 
 const checkboxSections: TestSection[] = [
   {

package/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const DesktopSpecificCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+    </>
+  );
+};

package/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import { TextV1 } from '@fluentui-react-native/text';
+
+import { mobileStyles } from '../Common/styles';
+
+const pressableStyle: ViewStyle = { borderWidth: 1, padding: 4, gap: 4, flexDirection: 'row', alignItems: 'center' };
+
+export const OtherCheckbox: React.FunctionComponent = () => {
+  const [isChecked, setisChecked] = React.useState(false);
+
+  const setCheckedTrue = React.useCallback(() => {
+    setisChecked(true);
+  }, []);
+
+  const setCheckedFalse = React.useCallback(() => {
+    setisChecked(false);
+  }, []);
+
+  const onChange = React.useCallback((_e, checked: boolean) => {
+    setisChecked(checked);
+  }, []);
+
+  const onPress = React.useCallback(() => {
+    setisChecked(!isChecked);
+  }, [isChecked]);
+
+  const memoizedStyles = React.useMemo(
+    () => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : { gap: 8 }),
+    [],
+  );
+
+  return (
+    <View style={memoizedStyles}>
+      <View>
+        <Button onClick={setCheckedTrue} size="small">
+          Check controlled checkboxes below
+        </Button>
+        <Button onClick={setCheckedFalse} size="small">
+          Uncheck controlled checkboxes below
+        </Button>
+      </View>
+
+      <View>
+        <Checkbox label="This is a controlled Checkbox" checked={isChecked} onChange={onChange} />
+        <Pressable style={pressableStyle} onPress={onPress}>
+          <Checkbox checked={isChecked} onChange={onChange} />
+          <TextV1>A controlled checkbox in a Pressable. Pressing Pressable also toggles Checkbox</TextV1>
+        </Pressable>
+
+        {Platform.OS !== 'android' && (
+          <>
+            <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
+            <Checkbox label="A required checkbox with other required text" required="**" />
+          </>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const SizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
+    </>
+  );
+};