@fluentui-react-native/tester 0.170.27 → 0.170.28

package/lib-commonjs/TestComponents/ColorTokens/ColorTokenTest.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorTokensTest = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_2 = require("@fluentui/react-native");
+const default_theme_1 = require("@fluentui-react-native/default-theme");
+const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
+const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+const theme_types_1 = require("@fluentui-react-native/theme-types");
+const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
+const theming_utils_1 = require("@fluentui-react-native/theming-utils");
+const win32_theme_1 = require("@fluentui-react-native/win32-theme");
+const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
+const styles_1 = require("../Common/styles");
+const TestProps_1 = require("../Common/TestProps");
+const Test_1 = require("../Test");
+const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((theme) => {
+    return {
+        swatch: {
+            width: 80,
+            height: 20,
+            marginRight: 5,
+            borderWidth: 2,
+            borderColor: theme.colors.bodyText,
+        },
+    };
+});
+const styles = react_native_1.StyleSheet.create({
+    swatchItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 5,
+    },
+    stackStyle: {
+        borderWidth: 2,
+        padding: 12,
+        margin: 8,
+    },
+    statusView: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        margin: 8,
+    },
+    // Needed to ensure that with the button is toggled on, the top of the newly shown
+    // content is visible so the user knows to scroll down
+    toggleButtonAreaPadding: { paddingBottom: 10 },
+    colorDescriptionStyle: { flexDirection: 'row', flexWrap: 'wrap', flex: 1 },
+    colorDescriptionNamePadding: { paddingRight: 5 },
+});
+const getSwatchColorStyle = (colorName, colorValue) => {
+    styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
+    return styles[colorName];
+};
+const ColorToken = (p) => {
+    if (p.colorValue === undefined) {
+        console.warn('Color token ' + p.colorName + ' is undefined');
+    }
+    const themedStyles = getThemedStyles((0, theme_types_1.useTheme)());
+    return (React.createElement(react_native_1.View, { style: styles.swatchItem },
+        React.createElement(react_native_1.View, { style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch], ...(0, TestProps_1.testProps)(e2e_testing_1.COLORTOKENS_TEST_COMPONENT) }),
+        React.createElement(react_native_1.View, { style: styles.colorDescriptionStyle },
+            React.createElement(react_native_2.Text, { style: styles.colorDescriptionNamePadding }, p.colorName),
+            React.createElement(react_native_2.Text, null, '(' + p.colorValue?.toString() + ')'))));
+};
+const getSwatch = (item) => {
+    const { colorValue, colorName } = item;
+    return React.createElement(ColorToken, { key: colorName, colorValue: colorValue, colorName: colorName });
+};
+/// Alias color tokens
+const AliasColorTokensSwatchList = () => {
+    const theme = (0, theme_types_1.useTheme)();
+    const isOfficeTheme = theme.name === 'White' ||
+        theme.name === 'Colorful' ||
+        theme.name === 'DarkGray' ||
+        theme.name === 'Black' ||
+        theme.name === 'HighContrast';
+    const aliasColorTokens = isOfficeTheme
+        ? (0, win32_theme_1.createOfficeAliasTokens)(theme.name)
+        : (0, default_theme_1.createAliasTokens)((0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light'));
+    const aggregator = React.useCallback((colorName) => {
+        return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
+    }, [aliasColorTokens]);
+    const flattenArray = React.useCallback(() => {
+        return Object.keys(aliasColorTokens).map(aggregator);
+    }, [aliasColorTokens, aggregator]);
+    const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
+    const renderSwatch = React.useCallback(getSwatch, []);
+    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
+        React.createElement(react_native_1.View, { style: styles.stackStyle }, aliasColorTokensAsArray.map((item) => renderSwatch(item)))));
+};
+/// Global color tokens - neutral
+const globalNeutralColorNamesSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color)
+    .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
+    .sort((color1, color2) => {
+    const color1hex = theme_tokens_1.globalTokens.color[color1];
+    const color2hex = theme_tokens_1.globalTokens.color[color2];
+    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+    // will order the colors from dark to light
+    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+});
+const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName) => {
+    return {
+        colorName: colorName,
+        colorValue: theme_tokens_1.globalTokens.color[colorName],
+    };
+});
+const GlobalNeutralColorTokensSwatchList = () => {
+    const renderSwatch = React.useCallback(getSwatch, []);
+    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
+        React.createElement(react_native_1.View, { style: styles.stackStyle }, globalNeutralColorTokensAsArray.map((item) => renderSwatch(item)))));
+};
+/// Global color tokens - shared
+const globalSharedColorNames = Object.keys(theme_tokens_1.globalTokens.color).filter((key) => theme_tokens_1.globalTokens.color[key].primary !== undefined);
+const globalSharedColorVariantsSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color.red).sort((color1, color2) => {
+    const color1hex = theme_tokens_1.globalTokens.color.red[color1];
+    const color2hex = theme_tokens_1.globalTokens.color.red[color2];
+    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+    // will order the colors from dark to light
+    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+});
+const globalSharedColorTokensAsArray = globalSharedColorNames
+    .map((sharedColorName) => {
+    return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
+        return {
+            colorName: sharedColorName + '.' + variant,
+            colorValue: theme_tokens_1.globalTokens.color[sharedColorName][variant],
+        };
+    });
+})
+    .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
+const GlobalSharedColorTokensSwatchList = () => {
+    const renderSwatch = React.useCallback(getSwatch, []);
+    const [showGlobalSharedColors, setShowGlobalSharedColors] = React.useState(false);
+    const toggleSvg = () => {
+        const plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+        const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+        const path = showGlobalSharedColors ? minusPath : plusPath;
+        return (React.createElement(react_native_svg_1.default, null,
+            React.createElement(react_native_svg_1.G, null,
+                React.createElement(react_native_svg_1.Path, { d: path, fill: "black" }))));
+    };
+    const svgProps = { src: toggleSvg };
+    const plusCodepoint = 0x2795;
+    const minusCodepoint = 0x2796;
+    const fontIconProps = {
+        codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
+        fontSize: 10,
+    };
+    const toggleIconProps = react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+    return (React.createElement(react_native_1.View, { style: styles.toggleButtonAreaPadding },
+        React.createElement(react_native_1.View, { style: styles.statusView },
+            React.createElement(react_native_2.Text, { variant: "subheaderStandard" }, "Show color tokens"),
+            React.createElement(react_native_2.ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: () => setShowGlobalSharedColors(!showGlobalSharedColors) })),
+        showGlobalSharedColors && (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
+            React.createElement(react_native_1.View, { style: styles.stackStyle }, globalSharedColorTokensAsArray.map((item) => renderSwatch(item)))))));
+};
+const themeSections = [
+    {
+        name: 'Alias Color Tokens',
+        testID: e2e_testing_1.COLORTOKEN_TESTPAGE,
+        component: () => React.createElement(AliasColorTokensSwatchList, null),
+    },
+    {
+        name: 'Global Color Tokens - Neutral Colors',
+        component: () => React.createElement(GlobalNeutralColorTokensSwatchList, null),
+    },
+    {
+        name: 'Global Color Tokens - Shared Colors',
+        component: () => React.createElement(GlobalSharedColorTokensSwatchList, null),
+    },
+];
+const ColorTokensTest = () => {
+    const status = {
+        win32Status: 'Production',
+        uwpStatus: 'Backlog',
+        iosStatus: 'Production',
+        macosStatus: 'Backlog',
+        androidStatus: 'Production',
+    };
+    const description = 'Alias and global tokens given from token pipeline. Used to style components.';
+    return React.createElement(Test_1.Test, { name: "Color Tokens Test", description: description, sections: themeSections, status: status });
+};
+exports.ColorTokensTest = ColorTokensTest;
+//# sourceMappingURL=ColorTokenTest.js.map

package/lib-commonjs/TestComponents/ColorTokens/ColorTokenTest.js.map

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

package/lib-commonjs/TestComponents/ColorTokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/ColorTokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib-commonjs/TestComponents/ColorTokens/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ColorTokenTest"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/TestComponents/ColorTokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/ColorTokens/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC"}

package/lib-commonjs/TestComponents/Common/AlignmentPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/AlignmentPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAO5D,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAsB1E,CAAC"}

package/lib-commonjs/TestComponents/Common/AlignmentPicker.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignmentPicker = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const MenuPicker_1 = require("./MenuPicker");
+const styles_1 = require("../PersonaCoin/styles");
+const alignmentValues = [styles_1.undefinedText, 'start', 'center', 'end'];
+const AlignmentPicker = (props) => {
+    const { label, onSelectionChange, style } = props;
+    const [selectedValue, setSelectedValue] = React.useState();
+    const alignmentCollection = alignmentValues.map((value) => {
+        return {
+            label: value,
+            value: value,
+        };
+    });
+    return (React.createElement(MenuPicker_1.MenuPicker, { style: style, prompt: label, selected: selectedValue || styles_1.undefinedText, onChange: (value, index) => {
+            const alignmentValue = index == 0 ? undefined : value;
+            onSelectionChange(alignmentValue);
+            setSelectedValue(alignmentValue);
+        }, collection: alignmentCollection }));
+};
+exports.AlignmentPicker = AlignmentPicker;
+//# sourceMappingURL=AlignmentPicker.js.map

package/lib-commonjs/TestComponents/Common/AlignmentPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentPicker.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/AlignmentPicker.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAK/B,6CAA0C;AAC1C,kDAAsD;AAEtD,MAAM,eAAe,GAAgD,CAAC,sBAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAQxG,MAAM,eAAe,GAAmD,CAAC,KAA4B,EAAE,EAAE;IAC9G,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAiB,CAAC;IAC1E,MAAM,mBAAmB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxD,OAAO;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,KAAK;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,aAAa,IAAI,sBAAa,EACxC,QAAQ,EAAE,CAAC,KAAoB,EAAE,KAAa,EAAE,EAAE;YAChD,MAAM,cAAc,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,iBAAiB,CAAC,cAAc,CAAC,CAAC;YAClC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACnC,CAAC,EACD,UAAU,EAAE,mBAAmB,GAC/B,CACH,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,eAAe,mBAsB1B"}

package/lib-commonjs/TestComponents/Common/MenuPicker.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.android.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAOhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CA6B/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.android.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPicker = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const picker_1 = require("@react-native-picker/picker");
+const TestProps_1 = require("./TestProps");
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community Picker package for Android
+ */
+const MenuPicker = (props) => {
+    const { prompt, selected, onChange, collection, style, testID } = props;
+    let selectedItemKey;
+    collection.forEach((item) => {
+        if (item.value == selected) {
+            selectedItemKey = item.value;
+        }
+    });
+    return (React.createElement(picker_1.Picker, { prompt: prompt, selectedValue: selectedItemKey, onValueChange: (value, index) => onChange(value, index), style: { ...style }, ...(0, TestProps_1.testProps)(testID) }, collection.map((item, index) => (React.createElement(picker_1.Picker.Item, { label: item.label, key: index, value: item.value, ...(0, TestProps_1.testProps)(item.testID) })))));
+};
+exports.MenuPicker = MenuPicker;
+//# sourceMappingURL=MenuPicker.android.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.android.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.android.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,wDAAqD;AAGrD,2CAAwC;AAGxC;;;GAGG;AAEI,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE;IAC7F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxE,IAAI,eAAe,CAAC;IAEpB,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC1B,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAM,IACL,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,EAC9B,aAAa,EAAE,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAEf,IAAA,qBAAS,EAAC,MAAM,CAAC,IAEpB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,eAAM,CAAC,IAAI,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,IAAA,qBAAS,EAAC,IAAI,CAAC,MAAM,CAAC,GAC1B,CACH,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,UAAU,cA6BrB"}

package/lib-commonjs/TestComponents/Common/MenuPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAMhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAG/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.desktop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.desktop.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.desktop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAOhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAkC/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.desktop.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPicker = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_2 = require("@fluentui/react-native");
+const menu_1 = require("@fluentui-react-native/menu");
+const react_native_svg_1 = require("react-native-svg");
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+const MenuPicker = (props) => {
+    const { prompt, selected, onChange, collection } = props;
+    let label;
+    collection.forEach((item) => {
+        if (item.value == selected) {
+            label = item.label;
+        }
+    });
+    return (React.createElement(react_native_1.View, { style: menuPickerStyles.container },
+        React.createElement(react_native_2.Text, { style: menuPickerStyles.prompt }, prompt),
+        React.createElement(menu_1.Menu, null,
+            React.createElement(menu_1.MenuTrigger, null,
+                React.createElement(react_native_2.ButtonV1, null,
+                    React.createElement(react_native_2.Text, null, label),
+                    React.createElement(react_native_1.View, { style: menuPickerStyles.chevronContainer },
+                        React.createElement(react_native_svg_1.SvgXml, { xml: chevronXml })))),
+            React.createElement(menu_1.MenuPopover, null,
+                React.createElement(menu_1.MenuList, null, collection.map((collectionItem, index) => (React.createElement(menu_1.MenuItem, { onClick: () => onChange(collectionItem.value, index), key: collectionItem.value ?? index }, collectionItem.label))))))));
+};
+exports.MenuPicker = MenuPicker;
+const menuPickerStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 5,
+    },
+    prompt: {
+        marginRight: 5,
+    },
+    chevronContainer: {
+        padding: 4,
+    },
+});
+//# sourceMappingURL=MenuPicker.desktop.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.desktop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.desktop.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.desktop.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,+CAAgD;AAEhD,yDAAkE;AAClE,sDAAiG;AACjG,uDAA0C;AAM1C,MAAM,UAAU,GAAG;;;OAGZ,CAAC;AAED,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE;IAC7F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAEzD,IAAI,KAAK,CAAC;IACV,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC1B,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACpB;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,SAAS;QACrC,oBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,MAAM,IAAG,MAAM,CAAQ;QACrD,oBAAC,WAAI;YACH,oBAAC,kBAAW;gBACV,oBAAC,uBAAM;oBACL,oBAAC,mBAAI,QAAE,KAAK,CAAQ;oBACpB,oBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,gBAAgB;wBAC5C,oBAAC,yBAAM,IAAC,GAAG,EAAE,UAAU,GAAI,CACtB,CACA,CACG;YACd,oBAAC,kBAAW;gBACV,oBAAC,eAAQ,QACN,UAAU,CAAC,GAAG,CAAC,CAAC,cAA8B,EAAE,KAAa,EAAE,EAAE,CAAC,CACjE,oBAAC,eAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,cAAc,CAAC,KAAK,IAAI,KAAK,IAC/F,cAAc,CAAC,KAAK,CACZ,CACZ,CAAC,CACO,CACC,CACT,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB;AAEF,MAAM,gBAAgB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACzC,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;IACD,MAAM,EAAE;QACN,WAAW,EAAE,CAAC;KACf;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.ios.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1E,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAqBhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAwC/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.ios.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPicker = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const button_1 = require("@fluentui-react-native/button");
+const framework_1 = require("@fluentui-react-native/framework");
+const text_1 = require("@fluentui-react-native/text");
+const menu_1 = require("@react-native-menu/menu");
+const react_native_svg_1 = require("react-native-svg");
+const TestProps_1 = require("./TestProps");
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ * MenuPicker uses the community MenuView package for iOS
+ */
+const chevronXml = `
+<svg width="12" height="16" viewBox="0 0 11 6">
+  <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+</svg>`;
+const styles = react_native_1.StyleSheet.create({
+    menuPickerPromptText: {
+        marginBottom: 4,
+    },
+    menuPickerIconPadding: {
+        paddingLeft: 12,
+    },
+});
+const MenuPicker = (props) => {
+    const { prompt, selected, onChange, collection, style, testID } = props;
+    let selectedItemKey;
+    collection.forEach((item) => {
+        if (item.value == selected) {
+            selectedItemKey = item.value;
+        }
+    });
+    const pickerOptions = collection.map((item) => ({
+        id: item.label,
+        title: item.label,
+        state: item.value === selected ? 'on' : 'off',
+    }));
+    const theme = (0, framework_1.useFluentTheme)();
+    return (React.createElement(menu_1.MenuView, { title: prompt, onPressAction: ({ nativeEvent }) => {
+            onChange(nativeEvent.event);
+        }, actions: pickerOptions, style: style, ...(0, TestProps_1.testProps)(testID) },
+        React.createElement(text_1.Text, { variant: "bodySemibold", style: styles.menuPickerPromptText }, prompt),
+        React.createElement(button_1.ButtonV1, { appearance: "outline" },
+            React.createElement(text_1.Text, { variant: "bodySemibold" }, selectedItemKey),
+            React.createElement(react_native_1.View, { style: styles.menuPickerIconPadding },
+                React.createElement(react_native_svg_1.SvgXml, { xml: chevronXml, color: theme.colors.bodyText })))));
+};
+exports.MenuPicker = MenuPicker;
+//# sourceMappingURL=MenuPicker.ios.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.ios.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.ios.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,+CAAgD;AAEhD,0DAAmE;AACnE,gEAAkE;AAClE,sDAAmD;AACnD,kDAAmD;AAEnD,uDAA0C;AAG1C,2CAAwC;AAIxC;;;GAGG;AAEH,MAAM,UAAU,GAAG;;;OAGZ,CAAC;AAER,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,oBAAoB,EAAE;QACpB,YAAY,EAAE,CAAC;KAChB;IACD,qBAAqB,EAAE;QACrB,WAAW,EAAE,EAAE;KAChB;CACF,CAAC,CAAC;AAEI,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE;IAC7F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxE,IAAI,eAAe,CAAC;IAEpB,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC1B,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAiB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5D,EAAE,EAAE,IAAI,CAAC,KAAK;QACd,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;KAC9C,CAAC,CAAC,CAAC;IAEJ,MAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,CACL,oBAAC,eAAQ,IACP,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;YACjC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,EACD,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,KAAK,KAER,IAAA,qBAAS,EAAC,MAAM,CAAC;QAErB,oBAAC,WAAI,IAAC,OAAO,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,oBAAoB,IAC5D,MAAM,CACF;QACP,oBAAC,iBAAM,IAAC,UAAU,EAAC,SAAS;YAC1B,oBAAC,WAAI,IAAC,OAAO,EAAC,cAAc,IAAE,eAAe,CAAQ;YACrD,oBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,qBAAqB;gBACvC,oBAAC,yBAAM,IAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAI,CACpD,CACA,CACA,CACZ,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,UAAU,cAwCrB"}

package/lib-commonjs/TestComponents/Common/MenuPicker.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPicker = void 0;
+/*
+ * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
+ */
+const MenuPicker = (_props) => {
+    console.warn('Platform not supported');
+    return null;
+};
+exports.MenuPicker = MenuPicker;
+//# sourceMappingURL=MenuPicker.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.tsx"],"names":[],"mappings":";;;AAGA;;GAEG;AAEI,MAAM,UAAU,GAA6C,CAAC,MAAuB,EAAE,EAAE;IAC9F,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACvC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAHW,QAAA,UAAU,cAGrB"}

package/lib-commonjs/TestComponents/Common/MenuPicker.macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.macos.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.macos.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.macos.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuPicker.desktop"), exports);
+//# sourceMappingURL=MenuPicker.macos.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.macos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.macos.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.macos.tsx"],"names":[],"mappings":";;;AAAA,+DAAqC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.types.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.types.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,MAAM;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib-commonjs/TestComponents/Common/MenuPicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.types.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.types.tsx"],"names":[],"mappings":""}

package/lib-commonjs/TestComponents/Common/MenuPicker.win32.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.win32.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.win32.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.win32.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuPicker.desktop"), exports);
+//# sourceMappingURL=MenuPicker.win32.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.win32.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.win32.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.win32.tsx"],"names":[],"mappings":";;;AAAA,+DAAqC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.windows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.windows.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.windows.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAEhD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAU/D,CAAC"}

package/lib-commonjs/TestComponents/Common/MenuPicker.windows.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPicker = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuPicker.desktop"), exports);
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const MenuPicker = (props) => {
+    const { prompt, onChange, collection } = props;
+    return (React.createElement(react_native_1.View, { style: menuPickerStyles.container },
+        React.createElement(react_native_1.Text, { style: menuPickerStyles.prompt }, prompt),
+        collection.map((item, index) => (React.createElement(react_native_1.Button, { onPress: () => onChange(item.value, index), key: index, title: item.label })))));
+};
+exports.MenuPicker = MenuPicker;
+const menuPickerStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        margin: 5,
+    },
+    prompt: {
+        marginRight: 5,
+    },
+    chevronContainer: {
+        padding: 4,
+    },
+});
+//# sourceMappingURL=MenuPicker.windows.js.map

package/lib-commonjs/TestComponents/Common/MenuPicker.windows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPicker.windows.js","sourceRoot":"","sources":["../../../src/TestComponents/Common/MenuPicker.windows.tsx"],"names":[],"mappings":";;;;AAAA,+DAAqC;AACrC,qDAA+B;AAC/B,+CAA8D;AAKvD,MAAM,UAAU,GAA6C,CAAC,KAAsB,EAAE,EAAE;IAC7F,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,SAAS;QACrC,oBAAC,mBAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,MAAM,IAAG,MAAM,CAAQ;QACpD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAoB,EAAE,KAAa,EAAE,EAAE,CAAC,CACvD,oBAAC,qBAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACtF,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB;AAEF,MAAM,gBAAgB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACzC,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;IACD,MAAM,EAAE;QACN,WAAW,EAAE,CAAC;KACf;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC"}

package/lib-commonjs/TestComponents/Common/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Common/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,cAAc,CAAC;AAUpE,UAAU,YAAa,SAAQ,SAAS;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA4ED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CA6ExD,CAAC"}

package/lib-commonjs/TestComponents/Common/Slider.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_2 = require("@fluentui/react-native");
+const thumbSize = 20;
+const defaultMaximumValue = 100;
+const defaultMinimumValue = 1;
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    slider: {
+        minWidth: thumbSize * 2,
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignContent: 'stretch',
+        height: thumbSize,
+        width: 200,
+    },
+    track: {
+        flexGrow: 1,
+    },
+    thumb: {
+        width: thumbSize,
+        height: thumbSize,
+        borderRadius: thumbSize,
+        borderWidth: 2,
+        borderColor: '#7A7574',
+        backgroundColor: '#FFFFFF',
+        position: 'absolute',
+    },
+    label: {
+        margin: 8,
+        fontSize: 12,
+    },
+});
+const Track = react_native_2.Separator.customize({ separatorWidth: 4 });
+function onThumbRenderStyle(state, thumbLocation) {
+    return {
+        ...styles.thumb,
+        borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574',
+        marginLeft: thumbLocation,
+    };
+}
+function calculateThumbLocationAndValue(startTouchThumbLocation, startTouchPosition, currentTouchPosition, trackLength, minimum, maximum) {
+    let newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition;
+    newThumbLocation = Math.max(0, newThumbLocation);
+    newThumbLocation = Math.min(newThumbLocation, trackLength);
+    const newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum);
+    const intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value
+    newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum);
+    return [newThumbLocation, intValue];
+}
+function verifyProps(initialValue, minimum, maximum) {
+    if (minimum >= maximum) {
+        throw new Error(`'minimum' must not be greater than or equal 'maximum'.`);
+    }
+    if (initialValue < minimum) {
+        throw new Error(`'initialValue' must not be less than 'minimum'.`);
+    }
+    if (initialValue > maximum) {
+        throw new Error(`'initialValue' must not be greater than 'maximum'.`);
+    }
+}
+const Slider = (props) => {
+    let { minimum, maximum, initialValue } = props;
+    minimum = minimum || defaultMinimumValue;
+    maximum = maximum || defaultMaximumValue;
+    initialValue = initialValue || minimum;
+    verifyProps(initialValue, minimum, maximum);
+    const { style: userStyle, onChange } = props;
+    const [thumbLocation, setThumbLocation] = React.useState(0);
+    const startTouchPosition = React.useRef(-1);
+    const startTouchThumbLocation = React.useRef(-1);
+    const trackLength = React.useRef(-1);
+    const sliderValue = React.useRef(initialValue);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.measure((_x, _y, width) => {
+                if (width <= 0) {
+                    return;
+                }
+                // track length is the entire view width subtracted by the thumb size.
+                trackLength.current = Math.max(0, width - thumbSize);
+                const initialThumbLocation = (trackLength.current * (initialValue - minimum)) / (maximum - minimum);
+                setThumbLocation(initialThumbLocation);
+            });
+        }
+    }, [ref, initialValue, maximum, minimum]);
+    return (React.createElement(react_native_1.View, { style: [userStyle, styles.root] },
+        React.createElement(react_native_1.View, { ref: ref, ...props, style: styles.slider },
+            React.createElement(Track, { style: styles.track }),
+            trackLength.current > 0 && (React.createElement(react_native_2.Pressable, { renderStyle: (state) => onThumbRenderStyle(state, thumbLocation), onStartShouldSetResponder: () => trackLength.current > 0, onResponderStart: (e) => {
+                    startTouchPosition.current = e.nativeEvent.pageX;
+                    startTouchThumbLocation.current = thumbLocation;
+                }, onResponderMove: (e) => {
+                    if (startTouchPosition.current !== -1 && trackLength.current > 0) {
+                        const [newThumbLocation, newValue] = calculateThumbLocationAndValue(startTouchThumbLocation.current, startTouchPosition.current, e.nativeEvent.pageX, trackLength.current, minimum || defaultMinimumValue, maximum || defaultMaximumValue);
+                        sliderValue.current = newValue;
+                        setThumbLocation(newThumbLocation);
+                    }
+                }, onResponderEnd: () => {
+                    startTouchPosition.current = -1;
+                    startTouchThumbLocation.current = -1;
+                }, onResponderRelease: () => {
+                    if (onChange) {
+                        onChange(sliderValue.current);
+                    }
+                } }))),
+        React.createElement(react_native_1.Text, { style: styles.label }, sliderValue.current)));
+};
+exports.Slider = Slider;
+//# sourceMappingURL=Slider.js.map