@jobber/components-native 0.101.5 → 0.101.6

package/dist/docs/InputDate/InputDate.md

@@ -0,0 +1,133 @@
+# Input Date
+
+InputDate provides a multi-modal way for the user to select a date, using
+either:
+
+* Form Field
+* Visual calendar selector and comes complete with the ability to re-format user
+  input into an expected date format.
+
+## Design & usage guidelines
+
+The InputDate should be used in most cases where the user needs to select a
+date.
+
+### States
+
+#### Disabled
+
+```tsx
+import React from "react";
+import { InputDate } from "@jobber/components/InputDate";
+// eslint-disable-next-line import/no-deprecated
+import type { InputDateProps } from "../InputDate.types";
+
+// eslint-disable-next-line import/no-deprecated
+export function InputDateDisabledExample(props: InputDateProps) {
+  return <InputDate placeholder="Start Date" disabled={true} {...props} />;
+}
+```
+
+#### Invalid
+
+```tsx
+import React from "react";
+import type { InputDateProps } from "@jobber/components/InputDate";
+import { InputDate } from "@jobber/components/InputDate";
+
+export function InputDateInvalidExample(props: InputDateProps) {
+  return (
+    <InputDate
+      placeholder="Start date"
+      error="Start Date is required"
+      invalid={true}
+      {...props}
+      version={2}
+    />
+  );
+}
+```
+
+## Content guidelines
+
+The InputDate should only be used to display and submit date values. For other
+input usage, see [Related Components](#component-view-related-components).
+
+## Responsiveness
+
+When the InputDate is near the top or bottom of the viewport, the Datepicker
+will adjust its position to remain in view.
+
+The FormField for InputDate will take up the full available width of its parent.
+If used in an [InputGroup](/components/InputGroup), it will take up the
+available amount of space left by any other inputs in the group.
+
+## Related components
+
+* On web if you do not need an accompanying form field, you can use the
+  [DatePicker](/components/DatePicker) on its own
+* If you need to allow the user to enter time, use
+  [InputTime](../InputTime/InputTime.md)
+* If you just need a text input, use [InputText](../InputText/InputText.md)
+
+## Accessibility
+
+Accessibility concerns for the InputDate are captured by:
+
+### FormField
+
+Provides a label, announces input type, can be focused, and handles error
+validation and messaging.
+
+### Datepicker
+
+[Datepicker](/components/DatePicker) is keyboard-operable and announces the
+currently-focused date available for selection to the user via assistive
+technology.
+
+
+## Developer notes
+
+Some functionality that we have opted not to introduce at this time, but that
+would be relatively feasible to add in the future:
+
+* allow for the concept of a date-range selection
+* allow for certain days or dates to be excluded from selection
+
+### Web
+
+InputDate pairs with the
+
+AtlantisContext
+
+using the provided `firstDayOfWeek` value to determine what day the calendar date
+picking UI will use to start weeks.
+
+To leverage this behavior, implement the
+
+AtlantisContext
+
+at the root of the application, populated with the applicable value.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `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 |
+| `clearable` | `"never" | "always"` | No | — | Defaulted to "always" so user can clear the dates whenever there's a value. |
+| `defaultValue` | `Date` | No | — | The initial value for the input. |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `emptyValueLabel` | `string` | No | — | This label is shown to the user when there's no selected date. |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `maxDate` | `Date` | No | — | Maximum date the user can set. |
+| `minDate` | `Date` | No | — | Minimum date the user can set |
+| `name` | `string` | No | — | Adding a `name` would make this component "Form controlled" and must be nested within a `<Form />` component.  Cannot... |
+| `onChange` | `((value?: Date) => void) | ((value?: Date) => void)` | No | — | The callback that fires whenever a date gets selected. |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `validations` | `Omit<RegisterOptions<FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">` | No | — | Shows an error message below the field and highlights it red when the value is invalid. Only applies when nested with... |
+| `value` | `string | Date` | No | — | The value shown on the field. This gets automatically formatted to the account's date format.  Cannot be declared if ... |

package/dist/docs/InputEmail/InputEmail.md

@@ -0,0 +1,69 @@
+# Input Email
+
+InputEmail is used to display input with built-in email validation.
+
+## Design & usage guidelines
+
+Use the InputEmail component when you expect the user to input an email address.
+By default, the InputEmail component will validate email addresses.
+
+If you want to add additional validation within the Web/JO, you can pass in the
+`validations` prop with your own message. Note: The validations prop is not
+available on mobile.
+
+## Clearable
+
+* **while-editing**: shows the clear button only while focused and when there is
+  a value. When focus leaves the field and its controls, the button is hidden.
+* **always**: shows the clear button whenever there is a value, even when
+  blurred. Never shown when the field is empty.
+* The clear button is not shown when the field is `disabled` or `readonly`, and
+  is not supported for `multiline` inputs.
+
+## Related components
+
+If you are not worried about email address validation, consider using
+[InputText](../InputText/InputText.md).
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
+| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
+| `autoCapitalize` | `"characters" | "words" | "sentences" | "none"` | No | — | Determines where to autocapitalize |
+| `autoComplete` | `"name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
+| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
+| `defaultValue` | `string` | No | — | Default value for when component is uncontrolled |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `loading` | `boolean` | No | — | Show loading indicator. |
+| `loadingType` | `"spinner" | "glimmer"` | No | — | Change the type of loading indicator to spinner or glimmer. |
+| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
+| `name` | `string` | No | — | Name of the input. |
+| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
+| `onChangeText` | `(newValue: string) => void` | No | — | Simplified callback that only provides the new value @param newValue |
+| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
+| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `readonly` | `boolean` | No | — | Makes the input read-only |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `secureTextEntry` | `boolean` | No | — | Use secure text entry |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
+| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
+| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
+| `textContentType` | `"name" | "none" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | ... 33 more ... | "shipmentTrackingNumber"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `none` which disables auto complete ... |
+| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
+| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
+| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
+| `value` | `string` | No | — | Set the component to a given value |

package/dist/docs/InputFieldWrapper/InputFieldWrapper.md

@@ -0,0 +1,70 @@
+# InputFieldWrapper
+
+This component is used to wrap input fields such as
+[InputText](../InputText/InputText.md) and
+[InputPressable](../InputPressable/InputPressable.md) to provide common patterns and
+functionality present in our input designs, such as suffix/prefix icons,
+placeholders, etc.
+
+## Design & usage guidelines
+
+### Prefix/Suffix
+
+Use a prefix or suffix when additional visual cues about an input's function may
+be helpful.
+
+Some fields have common visual patterns such as "search" having a magnifying
+glass icon, "Select" having a downwards arrow, or currency inputs having a
+currency symbol. These signifiers reinforce the purpose of the input to increase
+[Recognition over Recall](https://www.nngroup.com/articles/ten-usability-heuristics/)
+and align the input with
+[Consistency and Standards](https://www.nngroup.com/articles/ten-usability-heuristics/).
+With clearer guidance around the purpose of inputs, the user is able to better
+focus on the task at hand. See
+[InputFieldWrapper/Prefix and Suffix example](/storybook/mobile/?path=/story/components-private-inputfieldwrapper--prefix-and-suffix).
+
+## Related components
+
+Refer to [InputText](../InputText/InputText.md) and
+[InputPressable](../InputPressable/InputPressable.md) to see implementation examples
+using InputFieldWrapper.
+
+
+## Configuration
+
+### Clearable
+
+When setting `showClearAction` to `true` you must also provide an `onClear`
+callback that will clear the input you are wrapping. See
+[InputDate](../InputDate/InputDate.md) and
+[InputPressable](../InputPressable/InputPressable.md) or
+[InputText](../InputText/InputText.md) for examples.
+
+See
+[InputFieldWrapper/Clearable example](/storybook/mobile/?path=/story/components-private-inputfieldwrapper--clearable).
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `assistiveText` | `string` | No | — | Text that goes below the input to help the user understand the input |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `error` | `FieldError` | No | — |  |
+| `focused` | `boolean` | No | `false` |  |
+| `hasValue` | `boolean` | No | `false` |  |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `loading` | `boolean` | No | `false` | Show loading indicator. |
+| `loadingType` | `"spinner" | "glimmer"` | No | `spinner` | Change the type of loading indicator to spinner or glimmer. |
+| `multiline` | `boolean` | No | `false` | Whether the input is a multiline input. |
+| `onClear` | `() => void` | No | — | Callback called when the user clicks the ClearAction button. Should clear the value passed. To disallow clearing set ... |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `placeholderMode` | `"normal" | "mini" | "hidden"` | No | `normal` | Controls how the placeholder text is displayed. - normal: the placeholder text will be displayed in the normal placeh... |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `showClearAction` | `boolean` | No | `false` | Adds the ClearAction that will call the onClear handler when pressed |
+| `styleOverride` | `InputFieldStyleOverride` | No | — | Custom styling to override default style of the input field |
+| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
+| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | `while-editing` | Change the behaviour of when the toolbar becomes visible. |

package/dist/docs/InputNumber/InputNumber.md

@@ -0,0 +1,72 @@
+# InputNumber
+
+InputNumber is used in forms that accept numbers as an answer.
+
+## Design & usage guidelines
+
+This is best suited for input data that benefits from being modified in
+increments, such as quantity, price, or days (ie 2 days -> 3 days).
+
+While some types of data may technically be numbers, they can be ill-suited for
+using a number input. For example, phone numbers and credit card numbers provide
+no value to the user by offering an incrementer.
+
+## Clearable
+
+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
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
+| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
+| `autoCapitalize` | `"characters" | "words" | "sentences" | "none"` | No | — | Determines where to autocapitalize |
+| `autoComplete` | `"name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
+| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
+| `defaultValue` | `number` | No | — |  |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `keyboard` | `NumberKeyboard` | No | — |  |
+| `loading` | `boolean` | No | — | Show loading indicator. |
+| `loadingType` | `"spinner" | "glimmer"` | No | — | Change the type of loading indicator to spinner or glimmer. |
+| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
+| `name` | `string` | No | — | Name of the input. |
+| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
+| `onChange` | `(newValue?: string | number) => void` | No | — |  |
+| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
+| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `readonly` | `boolean` | No | — | Makes the input read-only |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `secureTextEntry` | `boolean` | No | — | Use secure text entry |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
+| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
+| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
+| `textContentType` | `"name" | "none" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | ... 33 more ... | "shipmentTrackingNumber"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `none` which disables auto complete ... |
+| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
+| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
+| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
+| `value` | `number` | No | — |  |

package/dist/docs/InputPassword/InputPassword.md

@@ -0,0 +1,61 @@
+# Input Password
+
+InputPassword is used to display a secure password input field.
+
+## Design & usage guidelines
+
+Use InputPassword for authentication flows where the user is required to enter a
+password.
+
+If you are building an experience for authentication that does not require
+character-masking or are looking for more information regarding `validations`,
+refer to [InputText](../InputText/InputText.md).
+
+## Clearable
+
+* **while-editing**: shows the clear button only while focused and when there is
+  a value. When focus leaves the field and its controls, the button is hidden.
+* **always**: shows the clear button whenever there is a value, even when
+  blurred. Never shown when the field is empty.
+* The clear button is not shown when the field is `disabled` or `readonly`.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
+| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
+| `autoCapitalize` | `"characters" | "words" | "sentences" | "none"` | No | — | Determines where to autocapitalize |
+| `autoComplete` | `"name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
+| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
+| `defaultValue` | `string` | No | — | Default value for when component is uncontrolled |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `loading` | `boolean` | No | — | Show loading indicator. |
+| `loadingType` | `"spinner" | "glimmer"` | No | — | Change the type of loading indicator to spinner or glimmer. |
+| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
+| `name` | `string` | No | — | Name of the input. |
+| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
+| `onChangeText` | `(newValue: string) => void` | No | — | Simplified callback that only provides the new value @param newValue |
+| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
+| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `readonly` | `boolean` | No | — | Makes the input read-only |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
+| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
+| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
+| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
+| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
+| `usePrivacyEye` | `boolean` | No | `true` | Determines if InputPassword uses privacy eye suffix |
+| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
+| `value` | `string` | No | — | Set the component to a given value |

package/dist/docs/InputPressable/InputPressable.md

@@ -0,0 +1,64 @@
+# Input Pressable
+
+InputPressable is a component that is used to trigger an action when pressed.
+
+## Design & usage guidelines
+
+This component matches InputText in terms of visual design, but functionality is
+tied to a press action instead of an input. As a result, this component can
+launch a native modal or external library such as the DateTimePicker, instead of
+acting as an input that triggers a keyboard when tapped.
+
+### States
+
+A
+[disabled](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--disabled)
+InputPressable cannot be pressed and is visually muted to indicate that it is
+disabled.
+
+An
+[invalid](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--invalid)
+state is indicated by a red input line and an error message. The error message
+is displayed below the input.
+
+To make an InputPressable
+[clearable](/storybook/mobile/?path=/story/components-forms-and-inputs-inputpressable--clearable)
+you need to pass the `clearable` prop set as `always`. The reason for this is
+that InputPressable isn't an input that is focused in the same way an InputText
+would be. When you want to have an input be clearable you will also need to
+provide an `onClear` that will clear the input's value.
+
+
+## Controlled & Uncontrolled
+
+InputPressable can only be used as a controlled component. Given the nature of
+this input component which requires a wrapper to set the value, it doesn't make
+sense for this component to be uncontrolled.
+
+## Developer notes
+
+To prevent a previously focused input from being focused again when the
+`InputPressable` is closed you can `Keyboard.dismiss()` in the `onPress`.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `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 |
+| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  Since the input value isn't editable (i.e. `InputDateTime`) y... |
+| `disabled` | `boolean` | No | — | Disables input selection |
+| `error` | `FieldError` | No | — | Indicates if there is an validation error |
+| `focused` | `boolean` | No | — | Indicates if the input is focused |
+| `invalid` | `string | boolean` | No | — | Indicates the current selection is invalid |
+| `onClear` | `() => void` | No | — | Callback called when the user clicks the ClearAction button. Should clear the value passed. To disallow clearing set ... |
+| `onPress` | `() => void` | No | — | Callback that is called when the text input is focused @param event |
+| `placeholder` | `string` | No | — | Placeholder item shown until a selection is made |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `ref` | `Ref<Text>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `suffix` | `XOR<BasicSuffix, InteractiveSuffix>` | No | — | Symbol to display after the text input |
+| `value` | `string` | No | — | Current value of the component |

package/dist/docs/InputSearch/InputSearch.md

@@ -0,0 +1,49 @@
+# InputSearch
+
+The InputSearch component allows the user to input a keyword to search from
+associated data. It handles debouncing for improved performance when making
+queries.
+
+## Design & usage guidelines
+
+InputSearch will provide a consistent experience for users searching for
+content. It uses familiar iconography and interactions to make searching a
+simpler experience.
+
+## Content guidelines
+
+The label for InputSearch should help guide the user to find their results. It
+can be helpful to direct the user to use certain types of queries for a given
+search, such as "Search by clients and properties".
+
+It is recommended to use the `search` icon as a prefix to aid users in
+recognizing the functionality of the input.
+
+InputSearch will take up the full available width of its container.
+
+## Accessibility
+
+Most of the accessibility concerns for InputSearch are handled by `InputText`.
+It is announced as an input and the label and value are read to assistive
+technology. Users can navigate to the clear button to remove the entered value.
+
+## Mockup
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onChange` | `(newValue: string) => void` | Yes | — | A callback function that handles the update of the new value of the property value. |
+| `onDebouncedChange` | `(searchValue: string) => void` | Yes | — | A callback function that handles the API call to search the value. This is where the wait value is applied to the deb... |
+| `value` | `string` | Yes | — | Set the component to a given value |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
+| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
+| `wait` | `number` | No | `300` | A numeric value to represents the milliseconds in delaying the function to populate the data source when the 'value' ... |