@jobber/components-native 0.102.2-MIKEadd-l-43a0712.10 → 0.102.2

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -108,7 +108,7 @@ ActivityIndicator uses the core component
 | `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
 | `size` | `"large" | "small" | number` | No | — | Size of the indicator. Small has a height of 20, large has a height of 36.  enum('small', 'large') |
 | `style` | `StyleProp<ViewStyle>` | No | — |  |
-| `tabIndex` | `0 | -1` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
 | `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
 | `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |

package/dist/docs/InputNumber/InputNumber.md

@@ -17,17 +17,6 @@ InputNumber does not show a clear button. The component enforces
 `clearable="never"` to align with numeric, increment/decrement-focused usage.
 
 
-## Configuration
-
-## Using onValidation
-
-If you need to capture the error message and render it outside of the component.
-Read the [InputValidation](/components/InputValidation) documentation.
-
-For more details about `validation` using `Input` components, see the
-[InputText](../InputText/InputText.md) documentation.
-
-
 ## Props
 
 ### Mobile

package/dist/docs/InputText/InputText.md

@@ -10,24 +10,23 @@ Use this to allow users to provide short answers.
 
 ```tsx
 import React, { useState } from "react";
-import type { InputTextRebuiltProps } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
-export const ControlledExample = ({
+export const InputTextBasicExample = ({
   onChange,
   ...props
-}: Partial<InputTextRebuiltProps>) => {
-  const [age, setAge] = useState("Veintisiete");
+}: Partial<InputTextProps>) => {
+  const [value, setValue] = useState(props.value ?? "");
 
   return (
     <InputText
-      version={2}
       name="age"
       placeholder="Age in words"
       {...props}
-      value={age}
+      value={value}
       onChange={newValue => {
-        setAge(newValue);
+        setValue(newValue);
         onChange?.(newValue);
       }}
     />
@@ -46,15 +45,29 @@ For web, you can set a minimum and maximum number of rows. See:
 [Web/rows example](/storybook/web/?path=/story/components-forms-and-inputs-inputtext--multiline).
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextMultilineExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline">>,
+  props: Partial<Omit<InputTextProps, "multiline">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
-    <InputText multiline={true} placeholder="Describe your age" {...props} />
+    <InputText
+      multiline={true}
+      placeholder="Describe your age"
+      {...props}
+      value={value}
+      onChange={(
+        newValue: string,
+        event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => {
+        setValue(newValue);
+        props.onChange?.(newValue, event);
+      }}
+    />
   );
 }
 ```
@@ -74,19 +87,41 @@ With clearer guidance around the purpose of inputs, the user is able to better
 focus on the task at hand.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 import { Content } from "@jobber/components/Content";
 
 export function InputTextPrefixSuffixExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [invoiceTotal, setInvoiceTotal] = useState<string>(
+    props.value ?? "1,000,000",
+  );
+  const [search, setSearch] = useState<string>(props.value ?? "");
+
+  const handleChange = (
+    newValue: string,
+    event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setInvoiceTotal(newValue);
+    props.onChange?.(newValue, event);
+  };
+
+  const handleSearchChange = (
+    newValue: string,
+    event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setSearch(newValue);
+    props.onChange?.(newValue, event);
+  };
+
   return (
     <Content>
       <InputText
-        defaultValue="1,000,000"
         placeholder="Invoice Total"
+        value={invoiceTotal}
+        onChange={handleChange}
         prefix={{ label: "$", icon: "invoice" }}
         suffix={{ label: ".00" }}
         {...props}
@@ -94,6 +129,8 @@ export function InputTextPrefixSuffixExample(
       <InputText
         placeholder="Search"
         prefix={{ icon: "search" }}
+        value={search}
+        onChange={handleSearchChange}
         suffix={{
           icon: "cross",
           ariaLabel: "clear search",
@@ -118,33 +155,37 @@ Follow the
 for guidance on writing helpful error messages.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextValidationExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState<string | undefined>();
+
+  function handleChange(newValue: string) {
+    setValue(newValue);
+
+    if (!newValue) {
+      setError("You have to tell us your age");
+    } else if (!isNaN(Number(newValue))) {
+      setError("Type your age in words please.");
+    } else if (newValue.length >= 10) {
+      setError("That seems too old.");
+    } else {
+      setError(undefined);
+    }
+  }
+
   return (
     <InputText
       placeholder="What's your age"
-      validations={{
-        required: {
-          value: true,
-          message: "You have to tell us your age",
-        },
-        validate: val => {
-          if (val.length > 0 && !isNaN(val)) {
-            return "Type your age in words please.";
-          }
-
-          if (val.length >= 10) {
-            return "That seems too old.";
-          }
-
-          return true;
-        },
-      }}
+      value={value}
+      onChange={handleChange}
+      invalid={!!error}
+      error={error}
       {...props}
     />
   );
@@ -157,11 +198,11 @@ export function InputTextValidationExample(
 
 ```tsx
 import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextDisabledExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
   return (
     <InputText
@@ -182,11 +223,11 @@ See:
 
 ```tsx
 import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
+import type { InputTextProps } from "@jobber/components/InputText";
 
 export function InputTextInvalidExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
   return (
     <InputText placeholder="Email" value="atlantis" invalid={true} {...props} />
@@ -201,14 +242,16 @@ You can use `FormFieldLabel` to provide a label outside of the input. The
 appears when a value is provided.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 import { FormFieldLabel } from "@jobber/components/FormField";
 
 export function InputTextExternalLabelExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
     <div style={{ width: "100%" }}>
       <FormFieldLabel external={true} htmlFor="ext-input">
@@ -220,6 +263,14 @@ export function InputTextExternalLabelExample(
         clearable="always"
         showMiniLabel={false}
         {...props}
+        value={value}
+        onChange={(
+          newValue: string,
+          event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+        ) => {
+          setValue(newValue);
+          props.onChange?.(newValue, event);
+        }}
       />
     </div>
   );
@@ -231,55 +282,34 @@ export function InputTextExternalLabelExample(
 Determine what default keyboard appears on mobile.
 
 ```tsx
-import React from "react";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
+import React, { useState } from "react";
+import type { InputTextProps } from "@jobber/components/InputText";
 import { InputText } from "@jobber/components/InputText";
 
 export function InputTextKeyboardExample(
-  props: Partial<Omit<InputTextLegacyProps, "multiline" | "rows">>,
+  props: Partial<Omit<InputTextProps, "multiline" | "rows">>,
 ) {
+  const [value, setValue] = useState<string>(props.value ?? "");
+
   return (
-    <InputText placeholder="Describe your age" keyboard="numeric" {...props} />
+    <InputText
+      placeholder="Describe your age"
+      inputMode="numeric"
+      {...props}
+      value={value}
+      onChange={(
+        newValue: string,
+        event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => {
+        setValue(newValue);
+        props.onChange?.(newValue, event);
+      }}
+    />
   );
 }
 ```
 
 
-## Configuration
-
-### react-hook-form
-
-Atlantis utilizes [React Hook Form](https://react-hook-form.com/) to handle
-`input` and `form` validation. This means that the
-[React Hook Form validation options](https://react-hook-form.com/api#register)
-are available out of the box.
-
-This includes, but is not limited to:
-
-* `required` - A Boolean which, if true, indicates that the input must have a
-  value.
-* `maxLength` - The maximum length of the value to accept for this input.
-* `minLength` - The minimum length of the value to accept for this input.
-* `pattern` - The regex pattern for the input.
-* `validate` - You can pass a callback function as the argument to validate, or
-  you can pass an object of callback functions to validate all of them.
-
-### Using onValidation (Web)
-
-If you need to capture the error message and render it outside of the component.
-Read the [InputValidation](/components/InputValidation) documentation.
-
-### Version 2 Shim (Experimental)
-
-If you need to use the version 2 shim, you can pass `version={2}` to the
-`InputText` and provide the required props. Due to issues with typescript
-[see](https://github.com/microsoft/TypeScript/issues/32447) the aria attributes
-(and other props separated by `-`) are not typed correctly. This means that the
-shim will not enforce the version to be set to `2` when using these props. As a
-result version 1 usages will have these props appear in the intellisense but
-they will not do anything.
-
-
 ## Props
 
 ### Mobile

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -14,17 +14,14 @@ deprecated.
 | Component    | Import                                                           | v2 prop                                           |
 | ------------ | ---------------------------------------------------------------- | ------------------------------------------------- |
 | Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support   |
-| InputNumber  | `import { InputNumber } from "@jobber/components/InputNumber"`   | `version={2}`                                     |
-| InputText    | `import { InputText } from "@jobber/components/InputText"`       | `version={2}`                                     |
 | Modal        | `import { Modal } from "@jobber/components/Modal"`               | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                           | Notes                                              |
-| --------------------- | ----------------------------------------------------- | -------------------------------------------------- |
-| `MultiSelect`         | `Autocomplete` v2 with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.             |
-| `RecurringSelect`     | None (will be removed)                                | Deprecated, will be removed in next major version. |
-| `Chips` (dismissible) | `Autocomplete` v2 with `multiple` prop                | Dismissible Chips variant is deprecated.           |
+| Deprecated            | Replacement                                           | Notes                                    |
+| --------------------- | ----------------------------------------------------- | ---------------------------------------- |
+| `MultiSelect`         | `Autocomplete` v2 with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
+| `Chips` (dismissible) | `Autocomplete` v2 with `multiple` prop                | Dismissible Chips variant is deprecated. |
 
 ### Deprecated props on still-supported components
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.102.2-MIKEadd-l-43a0712.10+43a07122",
+    "version": "0.102.2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -58,8 +58,8 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.101.1-MIKEadd-l-43a0712.17+43a07122",
-        "@jobber/hooks": "2.20.2-MIKEadd-l-43a0712.19+43a07122",
+        "@jobber/design": "0.101.0",
+        "@jobber/hooks": "2.20.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "10.3.5",
@@ -109,5 +109,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "43a07122f69287145988855f6f33769e8214a8c7"
+    "gitHead": "2829a8684a94528cf087b63fa471c531c95d01c8"
 }

package/dist/src/Banner/Banner.js

@@ -43,9 +43,9 @@ function WrappingElement({ shouldFlow, children, styles, }) {
 function getBannerIcon(type) {
     switch (type) {
         case "notice":
-            return "starburst";
+            return "info";
         case "warning":
-            return "help";
+            return "warning";
         case "error":
             return "alert";
         case "success":

package/dist/src/Banner/Banner.test.js

@@ -15,13 +15,13 @@ describe("Banner", () => {
             const { getByText, getByTestId } = render(React.createElement(Banner, { type: "warning", text: "Here is a warning" }));
             const icon = getByTestId("ATL-Banner-Icon");
             expect(getByText("Here is a warning")).toBeDefined();
-            expect(icon.props.children.props.name).toBe("help");
+            expect(icon.props.children.props.name).toBe("warning");
         });
         it("renders a notice Banner", () => {
             const { getByText, getByTestId } = render(React.createElement(Banner, { type: "notice", text: "Notice me" }));
             const icon = getByTestId("ATL-Banner-Icon");
             expect(getByText("Notice me")).toBeDefined();
-            expect(icon.props.children.props.name).toBe("starburst");
+            expect(icon.props.children.props.name).toBe("info");
         });
         it("renders a success Banner", () => {
             const { getByText, getByTestId } = render(React.createElement(Banner, { type: "success" },