@jobber/components-native 0.104.1 → 0.104.3-rename-sel-d7cc7c5.6

package/dist/docs/Chip/Chip.md

@@ -238,7 +238,7 @@ export function ChipInvalidExample(
   single-select, multi-select, and add/dismiss functionality "out of the box"
 * [Combobox](/components/Combobox) is most commonly triggered by a Chip, but is
   a separate component
-* [Select](../Select/Select.md) is a simpler single-select "dropdown" that
+* [Select](/components/Select) is a simpler single-select "dropdown" that
   presents as a form element and should be preferred in forms
 * [RadioGroup](/components/RadioGroup) should be used to allow the user to
   select "one-of-many" items (single-select) and the labels for the items are

package/dist/docs/Form/Form.md

@@ -18,7 +18,7 @@ have a `value` and `onChange` prop.
 ### Inputs
 
 Form can accept various inputs and selection elements such as (but not limited
-to) [InputText](../InputText/InputText.md), [Select](../Select/Select.md),
+to) [InputText](../InputText/InputText.md), [Select](/components/Select),
 [Switch](../Switch/Switch.md), [Checkbox](../Checkbox/Checkbox.md), and
 [Chips](/components/Chips). They should be placed [Cards](../Card/Card.md) to
 indicate grouping when relevant, and groups of Cards can be spaced appropriately

package/dist/docs/LegacySelect/LegacySelect.md

@@ -0,0 +1,49 @@
+# LegacySelect
+
+`LegacySelect` is the mobile select control that presents a defined list of
+options in a native picker (iOS and Android). It is the renamed, behavior
+identical continuation of the former mobile `Select` — a new mobile `Select` is
+being introduced separately, after which existing call sites will migrate off
+`LegacySelect`.
+
+## Design & usage guidelines
+
+Nested within `LegacySelect`, `LegacyOption` defines the options that can be
+selected. Each `LegacyOption` takes a `value` and renders its children as the
+label.
+
+* Provide a `label` for the field and an optional `placeholder` to represent an
+  empty selection.
+* Use `validations` for react-hook-form powered validation, and `disabled` to
+  prevent the picker from opening.
+
+
+## Props
+
+### Mobile
+
+#### LegacyOption
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `string` | Yes | — | Text that shows up as the option |
+| `value` | `string` | Yes | — | The value that gets returned when an option is selected |
+
+#### LegacySelect
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactElement<LegacySelectOption, string | JSXElementConstructor<any>>[]` | Yes | — | The options to select from |
+| `accessibilityHint` | `string` | No | — | Helps users understand what will happen when they perform an action |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the element |
+| `assistiveText` | `string` | No | — | Help text shown below the control. |
+| `defaultValue` | `string` | No | — | Default value for when the component is uncontrolled |
+| `disabled` | `boolean` | No | — | Disables input selection |
+| `invalid` | `boolean` | No | — | Indicates the current selection is invalid |
+| `label` | `string` | No | — | Label text shown above the selection. |
+| `name` | `string` | No | — | Name of the input. |
+| `onChange` | `(newValue?: string) => void` | No | — | Callback that provides the new value when the selection changes |
+| `placeholder` | `string` | No | — | Adds a first option to let users select a "no value". Placeholder item selected by default until a selection is made. |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `validations` | `RegisterOptions` | No | — | The validations that will mark this component as invalid |
+| `value` | `string` | No | — | Current value of the component |

package/dist/docs/index.md

@@ -44,13 +44,13 @@
 [InputText](./InputText/InputText.md)
 [InputTime](./InputTime/InputTime.md)
 [interaction](./interaction/interaction.md)
+[LegacySelect](./LegacySelect/LegacySelect.md)
 [Opacity](./Opacity/Opacity.md)
 [page-layouts](./page-layouts/page-layouts.md)
 [ProgressBar](./ProgressBar/ProgressBar.md)
 [Radii](./Radii/Radii.md)
 [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)
 [scaffolding](./scaffolding/scaffolding.md)
-[Select](./Select/Select.md)
 [settings](./settings/settings.md)
 [Spacing](./Spacing/Spacing.md)
 [StatusLabel](./StatusLabel/StatusLabel.md)

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.104.1",
+    "version": "0.104.3-rename-sel-d7cc7c5.6+d7cc7c5c",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -122,5 +122,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "60b75a0d6a64b67dcb6607c474ed7aa469474f98"
+    "gitHead": "d7cc7c5c5e83b282c4d34b9cb721bcb431140881"
 }

package/dist/src/Form/Form.test.js

@@ -18,7 +18,7 @@ import { Text } from "../Text";
 import { Checkbox } from "../Checkbox";
 import { InputNumber } from "../InputNumber";
 import { Switch } from "../Switch";
-import { Option, Select } from "../Select";
+import { LegacyOption, LegacySelect } from "../LegacySelect";
 import { InputText } from "../InputText";
 jest.mock("lodash/debounce", () => {
     return jest.fn(fn => {
@@ -90,9 +90,9 @@ function MockForm({ onSubmit, sendBannerErrors = false, sendNetworkErrors = fals
                 minLength: { value: 3, message: minLengthText },
             } }),
         Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (React.createElement(InputText, { name: testInputTextNameExclude, placeholder: testInputTextPlaceholderExclude })),
-        React.createElement(Select, { onChange: onChangeSelectMock, label: selectLabel, name: testSelectName },
-            React.createElement(Option, { value: "1" }, "1"),
-            React.createElement(Option, { value: "2" }, "2")),
+        React.createElement(LegacySelect, { onChange: onChangeSelectMock, label: selectLabel, name: testSelectName },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")),
         React.createElement(Switch, { name: testSwitchName, label: "Test Switch", accessibilityLabel: switchLabel, onValueChange: onChangeSwitchMock }),
         React.createElement(InputNumber, { name: testInputNumberName, placeholder: "Test Num" }),
         React.createElement(Checkbox, { name: testCheckboxName, accessibilityLabel: checkboxLabel })));

package/dist/src/{Select/Select.js → LegacySelect/LegacySelect.js}

@@ -1,13 +1,13 @@
 import React from "react";
 import { View } from "react-native";
-import { useStyles } from "./Select.style";
-import { SelectInternalPicker } from "./components/SelectInternalPicker";
+import { useStyles } from "./LegacySelect.style";
+import { LegacySelectInternalPicker } from "./components/LegacySelectInternalPicker";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
 import { useFormController } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }) {
+export function LegacySelect({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }) {
     const { field, error } = useFormController({
         name,
         validations,
@@ -26,7 +26,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
             container: { paddingLeft: undefined },
         }, assistiveText: assistiveText },
         React.createElement(View, { testID: getTestID(testID), accessible: true, accessibilityLabel: getA11yLabel(), accessibilityValue: { text: getValue() }, accessibilityHint: t("Select.a11yHint"), accessibilityRole: "button", accessibilityState: { disabled: disabled } },
-            React.createElement(SelectInternalPicker, { disabled: disabled, options: getOptions(), onChange: handleChange },
+            React.createElement(LegacySelectInternalPicker, { disabled: disabled, options: getOptions(), onChange: handleChange },
                 React.createElement(View, { style: [styles.container, (invalid || !!error) && styles.invalid] },
                     label && (React.createElement(Text, { level: "textSupporting", variation: textVariation, hideFromScreenReader: true, selectable: false }, label)),
                     React.createElement(View, { style: styles.input },
@@ -75,10 +75,10 @@ function getTextVariation({ invalid, disabled, }) {
 }
 function getTestID(testID) {
     if (testID) {
-        return `ATL-${testID}-Select`;
+        return `ATL-${testID}-LegacySelect`;
     }
-    return "ATL-Select";
+    return "ATL-LegacySelect";
 }
-export function Option({ children }) {
+export function LegacyOption({ children }) {
     return React.createElement(React.Fragment, null, children);
 }

package/dist/src/LegacySelect/LegacySelect.test.js

@@ -0,0 +1,183 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { tokens } from "@jobber/design";
+import { AccessibilityInfo } from "react-native";
+import { LegacyOption, LegacySelect } from ".";
+import { LegacySelectInternalPicker } from "./components/LegacySelectInternalPicker";
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+const onChange = jest.fn();
+beforeEach(() => {
+    A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+afterEach(() => {
+    jest.resetAllMocks();
+});
+const defaultPlaceholder = "Select an option";
+describe("LegacySelect", () => {
+    it("renders a LegacySelect", () => {
+        const component = render(React.createElement(LegacySelect, { onChange: onChange },
+            React.createElement(LegacyOption, { value: "one" }, "one"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(component.getByTestId("arrowDown")).toBeDefined();
+        expect(component.getByText(defaultPlaceholder, {
+            includeHiddenElements: true,
+        })).toBeDefined();
+    });
+    it("renders a LegacySelect with a label", () => {
+        const label = "Press me";
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, label: label },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(label, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a LegacySelect with a placeholder", () => {
+        const placeholder = "I am a placeholder";
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, placeholder: placeholder },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(placeholder, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a LegacySelect with assistive text", () => {
+        const assistiveText = "You need to pick something";
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, assistiveText: assistiveText },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(assistiveText, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a disabled LegacySelect", () => {
+        const labelText = "labelText";
+        const { getByText } = render(React.createElement(LegacySelect, { label: labelText, onChange: onChange, disabled: true },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-disabled"],
+        });
+    });
+    it("renders a LegacySelect with a value provided", () => {
+        const expectedValue = "That should be me";
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, value: "2" },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, expectedValue)));
+        expect(getByText(expectedValue, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a LegacySelect with a defaultValue provided", () => {
+        const expectedValue = "It's the 3rd value";
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, defaultValue: "3" },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2"),
+            React.createElement(LegacyOption, { value: "3" }, expectedValue)));
+        expect(getByText(expectedValue, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a LegacySelect with custom testID", () => {
+        const testID = "testID";
+        const { getByTestId } = render(React.createElement(LegacySelect, { onChange: onChange, testID: testID },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByTestId(`ATL-${testID}-LegacySelect`)).toBeDefined();
+    });
+    it("renders an accessibilityLabel if provided", () => {
+        const { getByLabelText } = render(React.createElement(LegacySelect, { onChange: onChange, label: "label", accessibilityLabel: "accessibilityLabel" },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+    });
+    it("fires the onChange callback", () => {
+        const { getByTestId } = render(React.createElement(LegacySelect, { onChange: onChange, value: "2" },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        const select = getByTestId("ATL-LegacySelect").findByType(LegacySelectInternalPicker);
+        expect(select).toBeTruthy();
+        fireEvent(select, "onChange", "1");
+        expect(onChange).toHaveBeenCalledWith("1");
+    });
+});
+describe("when LegacySelect is invalid", () => {
+    const labelText = "labelText";
+    it("renders an invalid LegacySelect", () => {
+        const { getByText } = render(React.createElement(LegacySelect, { onChange: onChange, invalid: true, label: labelText },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-critical"],
+        });
+    });
+    it("renders an invalid LegacySelect with placeholder", () => {
+        const placeholder = "Place me in the holder";
+        const { getByText } = render(React.createElement(LegacySelect, { label: labelText, onChange: onChange, invalid: true, placeholder: placeholder },
+            React.createElement(LegacyOption, { value: "1" }, "1"),
+            React.createElement(LegacyOption, { value: "2" }, "2")));
+        expect(getByText(placeholder, { includeHiddenElements: true })).toBeDefined();
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-critical"],
+        });
+    });
+});
+describe("when validations are passed to the component", () => {
+    describe("validations fail", () => {
+        let tree;
+        const labelText = "labelText";
+        const errorMsg = "Too short";
+        beforeEach(() => {
+            tree = render(React.createElement(LegacySelect, { label: labelText, onChange: onChange, value: "Watermelon", validations: {
+                    minLength: { value: 60, message: errorMsg },
+                } },
+                React.createElement(LegacyOption, { value: "Apple" }, "Apple"),
+                React.createElement(LegacyOption, { value: "Watermelon" }, "Watermelon")));
+        });
+        it("renders the error message when there is an error", () => __awaiter(void 0, void 0, void 0, function* () {
+            const select = tree
+                .getByTestId("ATL-LegacySelect")
+                .findByType(LegacySelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect(yield tree.findByText(errorMsg, { includeHiddenElements: true })).toBeTruthy();
+        }));
+        it("shows the invalid colours", () => __awaiter(void 0, void 0, void 0, function* () {
+            const select = tree
+                .getByTestId("ATL-LegacySelect")
+                .findByType(LegacySelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect((yield tree.findByText(labelText, { includeHiddenElements: true }))
+                .props.style).toContainEqual({
+                color: tokens["color-critical"],
+            });
+        }));
+    });
+    describe("validations passes", () => {
+        let tree;
+        const labelText = "labelText";
+        const errorMsg = "Not too short";
+        beforeEach(() => {
+            tree = render(React.createElement(LegacySelect, { label: labelText, onChange: onChange, value: "Watermelon", validations: {
+                    minLength: { value: 4, message: errorMsg },
+                } },
+                React.createElement(LegacyOption, { value: "Apple" }, "Apple"),
+                React.createElement(LegacyOption, { value: "Watermelon" }, "Watermelon")));
+        });
+        it("does not render any error messages", () => {
+            const select = tree
+                .getByTestId("ATL-LegacySelect")
+                .findByType(LegacySelectInternalPicker);
+            expect(select).toBeTruthy();
+            fireEvent(select, "onChange", "Apple");
+            expect(tree.queryByText(errorMsg)).toBeNull();
+        });
+        it("has non-critical colours", () => {
+            const select = tree
+                .getByTestId("ATL-LegacySelect")
+                .findByType(LegacySelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect(tree.getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+                color: tokens["color-text--secondary"],
+            });
+        });
+    });
+});

package/dist/src/{Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.js → LegacySelect/components/LegacySelectDefaultPicker/LegacySelectDefaultPicker.ios.js}

@@ -4,15 +4,15 @@ import {
 Button, Modal, TouchableOpacity, View, } from "react-native";
 import { Picker } from "@react-native-picker/picker";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { styles } from "./SelectDefaultPicker.style";
-import { SelectPressable } from "../SelectPressable/SelectPressable";
+import { styles } from "./LegacySelectDefaultPicker.style";
+import { LegacySelectPressable } from "../LegacySelectPressable/LegacySelectPressable";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
-export function SelectDefaultPicker({ children, options, onChange, }) {
+export function LegacySelectDefaultPicker({ children, options, onChange, }) {
     const [show, setShow] = useState(false);
     const { t } = useAtlantisI18n();
     const selectedLanguage = options.find(option => option.isActive);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectPressable, { onPress: showPicker }, children),
+        React.createElement(LegacySelectPressable, { onPress: showPicker }, children),
         React.createElement(Modal, { visible: show, transparent: true, animationType: "slide", onRequestClose: hidePicker },
             React.createElement(TouchableOpacity, { style: styles.overlay, onPress: hidePicker }),
             React.createElement(View, { style: styles.actionBar },

package/dist/src/{Select/components/SelectDefaultPicker/SelectDefaultPicker.js → LegacySelect/components/LegacySelectDefaultPicker/LegacySelectDefaultPicker.js}

@@ -1,14 +1,14 @@
 import React, { useRef } from "react";
 import { Picker } from "@react-native-picker/picker";
-import { styles } from "./SelectDefaultPicker.style";
-import { SelectPressable } from "../SelectPressable";
+import { styles } from "./LegacySelectDefaultPicker.style";
+import { LegacySelectPressable } from "../LegacySelectPressable";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
-export function SelectDefaultPicker({ children, options, disabled, onChange, }) {
+export function LegacySelectDefaultPicker({ children, options, disabled, onChange, }) {
     var _a;
     const selectedItem = options.find(option => option.isActive);
     const pickerRef = useRef(null);
     const { tokens } = useAtlantisTheme();
-    return (React.createElement(SelectPressable, { onPress: (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus },
+    return (React.createElement(LegacySelectPressable, { onPress: (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus },
         children,
         React.createElement(Picker, { ref: pickerRef, selectedValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, onValueChange: onChange, mode: "dropdown", enabled: !disabled, style: styles.androidPickerContainer }, options.map(({ label, value, isActive }, i) => (React.createElement(Picker.Item, { key: i, label: label, value: value, color: isSelected(isActive) }))))));
     function isSelected(isActive) {

package/dist/src/{Select/components/SelectDefaultPicker/SelectDefaultPicker.test.js → LegacySelect/components/LegacySelectDefaultPicker/LegacySelectDefaultPicker.test.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
-import { SelectDefaultPicker } from "./SelectDefaultPicker";
+import { LegacySelectDefaultPicker } from "./LegacySelectDefaultPicker";
 import { Text } from "../../../Text";
 const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
 const handleChange = jest.fn();
@@ -19,30 +19,30 @@ afterEach(() => {
 });
 const childText = "Click me";
 function setup() {
-    return render(React.createElement(View, { testID: "SelectDefaultPicker" },
-        React.createElement(SelectDefaultPicker, { onChange: handleChange, options: [
+    return render(React.createElement(View, { testID: "LegacySelectDefaultPicker" },
+        React.createElement(LegacySelectDefaultPicker, { onChange: handleChange, options: [
                 { value: "1", label: "First option" },
                 { value: "2", label: "Second option" },
             ] },
             React.createElement(Text, null, childText))));
 }
-describe("SelectDefaultPicker", () => {
+describe("LegacySelectDefaultPicker", () => {
     it("opens the picker", () => {
         const screen = setup();
         fireEvent.press(screen.getByText(childText));
-        expect(screen.getByTestId("SelectDefaultPicker").findByType(MockPicker)).toBeDefined();
+        expect(screen.getByTestId("LegacySelectDefaultPicker").findByType(MockPicker)).toBeDefined();
     });
     it("closes the picker", () => {
         const screen = setup();
         fireEvent.press(screen.getByText(childText));
         fireEvent.press(screen.getByText("Done"));
-        expect(screen.getByTestId("SelectDefaultPicker").findAllByType(MockPicker)).toEqual([]);
+        expect(screen.getByTestId("LegacySelectDefaultPicker").findAllByType(MockPicker)).toEqual([]);
     });
     it("fires the onChange", () => {
         const screen = setup();
         fireEvent.press(screen.getByText(childText));
         const menu = screen
-            .getByTestId("SelectDefaultPicker")
+            .getByTestId("LegacySelectDefaultPicker")
             .findByType(MockPicker);
         expect(menu).toBeDefined();
         fireEvent(menu, "onValueChange", "2");

package/dist/src/LegacySelect/components/LegacySelectDefaultPicker/index.js

@@ -0,0 +1 @@
+export * from "./LegacySelectDefaultPicker";

package/dist/src/LegacySelect/components/LegacySelectIOSPicker/LegacySelectIOSPicker.js

@@ -0,0 +1,2 @@
+import { requireNativeComponent } from "react-native";
+export const LegacySelectIOSPicker = requireNativeComponent === null || requireNativeComponent === void 0 ? void 0 : requireNativeComponent("RCTATLPicker");

package/dist/src/LegacySelect/components/LegacySelectIOSPicker/index.js

@@ -0,0 +1 @@
+export * from "./LegacySelectIOSPicker";

package/dist/src/LegacySelect/components/LegacySelectInternalPicker/LegacySelectInternalPicker.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { handlePress, isIOS14AndUp } from "./utils";
+import { LegacySelectIOSPicker } from "../LegacySelectIOSPicker";
+import { LegacySelectPressable } from "../LegacySelectPressable";
+import { LegacySelectDefaultPicker } from "../LegacySelectDefaultPicker";
+export function LegacySelectInternalPicker({ children, options, disabled, onChange, }) {
+    if (disabled)
+        return React.createElement(React.Fragment, null, children);
+    if (isIOS14AndUp()) {
+        return (React.createElement(LegacySelectPressable, null,
+            React.createElement(LegacySelectIOSPicker, { options: options, onOptionPress: handlePress(onChange) }, children)));
+    }
+    return (React.createElement(LegacySelectDefaultPicker, { options: options, onChange: onChange }, children));
+}

package/dist/src/{Select/components/SelectInternalPicker/SelectInternalPicker.test.js → LegacySelect/components/LegacySelectInternalPicker/LegacySelectInternalPicker.test.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { View } from "react-native";
-import { SelectInternalPicker } from ".";
+import { LegacySelectInternalPicker } from ".";
 import { Text } from "../../../Text";
 let Platform;
 beforeEach(() => {
@@ -21,19 +21,19 @@ const RCTPicker = "RCTATLPicker";
 const childText = "Click me";
 const handleChange = jest.fn();
 function setup(props) {
-    return render(React.createElement(View, { testID: "SelectInternalPicker" },
-        React.createElement(SelectInternalPicker, { onChange: handleChange, disabled: props === null || props === void 0 ? void 0 : props.disabled, options: [
+    return render(React.createElement(View, { testID: "LegacySelectInternalPicker" },
+        React.createElement(LegacySelectInternalPicker, { onChange: handleChange, disabled: props === null || props === void 0 ? void 0 : props.disabled, options: [
                 { value: "1", label: "First option" },
                 { value: "2", label: "Second option" },
             ] },
             React.createElement(Text, null, childText))));
 }
-describe("SelectInternalPicker", () => {
+describe("LegacySelectInternalPicker", () => {
     it("fires the onChange", () => {
         const screen = setup();
         fireEvent.press(screen.getByText(childText));
         const menu = screen
-            .getByTestId("SelectInternalPicker")
+            .getByTestId("LegacySelectInternalPicker")
             .findByType(MockPicker);
         expect(menu).toBeDefined();
         fireEvent(menu, "onChange", "1");
@@ -45,7 +45,7 @@ describe("SelectInternalPicker", () => {
             Object.defineProperty(Platform, "Version", { get: () => "14.1" });
             const screen = setup();
             const menu = screen
-                .getByTestId("SelectInternalPicker")
+                .getByTestId("LegacySelectInternalPicker")
                 .findByType(RCTPicker);
             expect(menu).toBeDefined();
         });
@@ -57,14 +57,14 @@ describe("SelectInternalPicker", () => {
             Object.defineProperty(Platform, "Version", { get: () => version });
             const screen = setup();
             fireEvent.press(screen.getByText(childText));
-            expect(screen.getByTestId("SelectInternalPicker").findByType(MockPicker)).toBeDefined();
+            expect(screen.getByTestId("LegacySelectInternalPicker").findByType(MockPicker)).toBeDefined();
         });
     });
     describe("Disabled", () => {
         it("should not render the picker", () => {
             const screen = setup({ disabled: true });
             const menu = screen
-                .getByTestId("SelectInternalPicker")
+                .getByTestId("LegacySelectInternalPicker")
                 .findAllByType(RCTPicker);
             expect(menu).toEqual([]);
         });

package/dist/src/LegacySelect/components/LegacySelectInternalPicker/index.js

@@ -0,0 +1 @@
+export * from "./LegacySelectInternalPicker";

package/dist/src/{Select/components/SelectPressable/SelectPressable.js → LegacySelect/components/LegacySelectPressable/LegacySelectPressable.js}

@@ -1,13 +1,13 @@
 import React from "react";
 import { Keyboard, Pressable } from "react-native";
-import { useStyles } from "./SelectPressable.style";
+import { useStyles } from "./LegacySelectPressable.style";
 import { useIsScreenReaderEnabled } from "../../../hooks";
 /**
  * Switches between Pressable with pressed styling and a fragment when a
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export function SelectPressable({ children, onPress }) {
+export function LegacySelectPressable({ children, onPress, }) {
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const styles = useStyles();
     if (isScreenReaderEnabled)

package/dist/src/LegacySelect/components/LegacySelectPressable/index.js

@@ -0,0 +1 @@
+export * from "./LegacySelectPressable";

package/dist/src/LegacySelect/index.js

@@ -0,0 +1,2 @@
+export { LegacySelect, LegacyOption } from "./LegacySelect";
+export { LegacySelectPressable } from "./components/LegacySelectPressable";

package/dist/src/index.js

@@ -36,8 +36,8 @@ export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
+export * from "./LegacySelect";
 export * from "./ProgressBar";
-export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";

package/dist/src/utils/meta/meta.json

@@ -57,10 +57,10 @@
         "InputSearch",
         "InputText",
         "InputTime",
-        "Option",
+        "LegacyOption",
+        "LegacySelect",
+        "LegacySelectPressable",
         "ProgressBar",
-        "Select",
-        "SelectPressable",
         "StatusLabel",
         "Switch",
         "Text",

package/dist/tsconfig.build.json

@@ -12,6 +12,7 @@
     "exclude": [
         "*.test.*",
         "**/*.stories.tsx",
-        "src/**/docs"
+        "src/**/docs",
+        "dist/**/*"
     ]
 }